フロントエンド開発 / 約20分
一貫性のあるUIコンポーネント設計
なぜこれを学ぶか
同じ「削除」でも画面ごとに見た目が違うアプリは、ユーザーを混乱させます。一貫性のあるコンポーネント設計は、使いやすさと開発効率の両方を支えます。
デザインシステム とは、色・フォント・コンポーネントのルールを一箇所にまとめる考え方です。このコードベースのcolorMap（トラックごとの色を静的に列挙する仕組み）も、小さなデザインシステムの一例です。
コンポーネントの再利用性 を意識すると、同じボタンやカードを何度も作り直さずに済み、見た目の一貫性も自然に保たれます。
ボタンには 状態（通常/ホバー/押下/無効化） があります。これらの見た目の違いをきちんと設計すると、ユーザーは「今何ができるか」を直感的に理解できます。
コンポーネント設計は見た目の話だけではありません。「どんなpropsを受け取るか」というAPI設計の側面 も持ちます。UIとAPI設計、両方の視点が必要です。
重要ポイント
- デザインシステムは色・フォント・コンポーネントのルールをまとめる
- ボタンの状態（通常/ホバー/押下/無効化）を視覚化する
- コンポーネント設計はUIとAPI設計の両面を持つ
コードレビュー演習
あるアプリの3つの画面で、それぞれ別々に実装された「削除」ボタンです。
// 画面A
<button style="background:red;color:white;padding:8px">削除</button>
// 画面B
<button class="btn-danger" style="border-radius:20px">削除する</button>
// 画面C
<a href="#" onClick={handleDelete}>削除</a>これら3つの実装に共通する最も重大な問題は？
ヒントを見る
同じ「削除」という操作なのに、色・形・タグ（button vs a）がバラバラです。ユーザーがアプリのどの画面を見ても同じように振る舞ってほしい操作について、これは何を引き起こすでしょうか。
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか？