タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
Inter／JetBrains Mono。emilkowalski/skillsのコンポーネント集を渡し、「トークンは--ink/--bg/--muted/--lineの4色だけ」「イージングはease-out/ease-in-outの2種に統一する」という制約を先に固定してから、機能・料金・CTAを流し込んだ。順番を変えると、カードごとに違う影や角丸が紛れ込む。
border-radius: 20px + box-shadow: 0 20px 60px rgba(0,0,0,.15) → --radius: 8px + border 1px solid
丸みを8pxまで締め、影は近距離用(0 1px 2px)と遠距離用(0 8px 24px)の2層に分けた。輪郭は締まったまま、影だけがふわっと広がる状態を避けている。
transition: all 300ms ease → transform/opacity個別 + cubic-bezier(0.23,1,0.32,1)
一括指定をやめ、動くプロパティだけを名指しした。イージングも既製のeaseではなく、数値で書いたカーブに統一している。
hover: scale(1.05) → :active { transform: scale(0.97) }
ホバーで膨らませる代わりに、クリックした瞬間だけボタンを沈める。ホバー自体はopacity:0.88のみで、拡大の演出は持たせていない。
見出し+絵文字/グラデーションラベル → 01/02/03の数字インデックス + 1px罫線
装飾を足さず、番号と罫線だけで機能を並べた(feature-row)。読む順番は番号が示し、色や記号には頼らない。
通知がバウンドして跳ねる演出 → opacity 0→1 + scale(0.97→1)、180ms
「デモを見る」のトーストも跳ねさせず、沈めるだけにした。sonner系ライブラリの実物の挙動に寄せている。
Design Engineerが実装まで一人で見るプロダクトのトップページ、あるいは開発者向けSaaSのように、機能の説明より操作した瞬間の手触りで差をつけたい場面に向く。季節感やビジュアルで魅せたいブランドページには、この構成では要素が足りない。