1. ナビゲーション（Navigation）
■ グローバルナビ（Top Navigation）
サイト全体のメインメニュー。
企業サイト・SaaS プロダクトで一般的。
■ サイドバー（Left Navigation）
情報量の多いサービス（管理画面、ダッシュボード）。
アイコン＋ラベルが定番。
■ ハンバーガーメニュー（Hamburger Menu）
モバイルでメニューを隠すときの定番。
デスクトップでは避ける傾向が強い。
■ タブ（Tabs）
ページ切り替えやカテゴリ分けに利用。
水平タブ・垂直タブがある。
■ パンくずリスト（Breadcrumb）
ユーザーの現在地を示すために使う。
🔍 2. 検索・フィルタリング（Search & Filtering）
■ 検索バー（Search Bar）
オートコンプリート、検索候補などと組み合わせて UI が強化される。
■ 高度なフィルター（Advanced Filters）
EC、求人、管理画面で多用。
項目をアコーディオンで折りたたむのが一般的。
■ ソート（Sort）
並び替え：価格順、更新順など。
■ ファセットナビゲーション（Faceted Navigation）
ECサイトの定番。
複数の属性で絞り込む（価格・ブランド・サイズなど）。
📄 3. コンテンツ表示（Content Display）
■ カード（Card）
画像＋タイトル＋説明＋ボタンの構成が一般的。
SNS・EC・ギャラリーで多用。
■ リスト（List）
テーブルより軽く、モバイルで定番。
■ テーブル（Data Table）
管理画面で最重要のUI。
ソート・フィルタ・ページネーションと組み合わせる。
■ グリッド（Grid）
写真、商品一覧、カテゴリ一覧など。
📝 4. 入力フォーム（Form Patterns）
■ ラベル＋入力欄（Form Row）
横並び・縦並びの2パターン。
■ プレースホルダー入力（Floating Label / Placeholder）
マテリアルデザインに多い（入力時にラベルが浮き上がる）。
■ ステップフォーム（Step Form / Wizard）
入力内容が多いときにステップで分割。
■ バリデーション（Inline Validation）
入力中にリアルタイムでエラー表示。
⚠ 5. アラート・通知（Feedback）
■ トースト（Toast）
右上に一時表示される通知。
成功・エラー・警告など。
■ スナックバー（Snackbar）
画面下部に表示される短めの通知（モバイルによくある）。
■ モーダル（Modal）
重要な操作の確認などに使う。
頻用しすぎると UX が悪化。
■ バナー（Banner / Alert Bar）
ページ全体に関わるお知らせに使用。
💬 6. コミュニケーション（Messaging）
■ チャットUI（Chat Bubbles）
LINE・Messenger のような会話形式。
■ コメント欄（Comments）
SNS・ブログ・ナレッジツールなど。
🗃 7. データ可視化（Analytics / Dashboard）
■ カード型 KPI（Metric Cards）
数字＋アイコン＋前日比など。
■ チャート（Charts）
棒グラフ、折れ線、ドーナツ、ヒートマップなど。
■ テーブル＋アクション（Data Table + Actions）
編集・削除・詳細などの操作がつく。
🎛 8. アクション（Actions）
■ プライマリーボタン（Primary Button）
最も重要なアクション。色で差別化。
■ セカンダリーボタン（Secondary）
補助的なアクション。
■ スピードダイヤル（Speed Dial / Floating Action Button）
モバイルで追加ボタンなどを浮かせて表示。
■ コンテキストメニュー（Context Menu）
右クリックや「…」メニュー。
🎚 9. 状態管理（States）
■ ローディング（Loading / Skeleton）
スケルトンやスピナーで読み込みを見せる。
■ エンプティステート（Empty State）
データがないときの説明＋行動ボタン。
■ エラーステート（Error State）
404、500、フォームエラーなど。
🎨 10. ヒーローセクション（Hero Section）
LPやトップページの第一印象を作る。
タイトル・説明・CTA・ビジュアルの組み合わせ。
