UIコンポーネントの探し方

進め方

1. まず作りたい画面を決め、ログイン、設定、検索結果、ダッシュボードなどの画面パターンから構成要素を確認する。
2. 次に、Button、Search Bar、Modal、Toastなどのコンポーネント詳細で、使う場面と使わない場面を比較する。
3. Apple HIG、Material Design、Fluent UI、shadcn/uiの比較表を見て、プロダクトの利用環境に近い基準を選ぶ。
4. 最後にReactやHTML/CSSのレシピ、AIプロンプトを使い、実装時の状態・アクセシビリティ・検証条件を具体化する。

よくある失敗

• ・見た目が近いという理由だけでコンポーネントを選び、ユーザーの目的や状態遷移を確認しない。
• ・Modal、Dialog、Bottom Sheetなど似たUIを、画面サイズや操作の重さを考えずに混同する。
• ・実装コードだけを先にコピーし、フォーカス移動、ラベル、エラー表示、キーボード操作を後回しにする。