今日やることが、開いた瞬間にわかる。
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
今日やることが、開いた瞬間にわかる。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
Noto Sans JP。MUJI・SmartHR・Stripeという毛色の異なる3サイトを実際に並べて開き、余白・ボタン・配色の実測値だけを拾って移植した。コピーは一字も変えていない。動かしたのは数値と骨格だけだ。
どのサイトから何を借り、生成AIのどんなデフォルトを上書きしたかを、対応表にした。
| 出典 | 要素 | 移植した実測値 | 上書きしたAIのデフォルト |
|---|---|---|---|
| MUJI | 余白のリズム | 外周48px・カード間24px・罫線1px(#E5E5E3) | 16px刻みで詰まりがちな余白を、24〜48pxの帯に広げた |
| SmartHR | ボタン形状 | border-radius:9999pxの完全なピル、hoverで背景反転 | 20px前後の中途半端な角丸と、ふわっと拡大するhoverをやめた |
| Stripe | アクセント運用 | #533AFDを1色だけ、CTAとリンクに絞って使用 | 紫・青・緑を並べる多色グラデーションを、1色運用に変えた |
| 3サイト共通 | セクション構成 | グレイジュの帯(--band)で区切り、料金表は罫線グリッド | カードを浮かせるだけの構成を、罫線で区切る構成に変えた |
既存の有名企業サイトが持つ「見慣れた信頼感」を、そのまま新しいプロダクトへ輸入したい場面に向く。ただし借り物の寄せ集めになりやすいので、どの実測値を採るかを絞り込む判断力が要る。