UIデザインパターンとベストプラクティス

UIデザインパターン——17パターンを使いこなす実践ガイド

UIデザインパターンとは、頻繁に発生するデザイン上の課題に対する、実証済みの解決策の集積です。車輪を毎回発明する必要はありません。先人が試行錯誤して洗練させてきたパターンを理解し、適切な場面で適用することがプロのUIデザイナーの仕事です。このレッスンでは、ナビゲーション・フォーム・カード・モーダル・トーストほか、実際のプロダクト開発で頻出する17のUIパターンを解説します。

---

UIデザインパターン全体マップ

UIデザインパターン全体マップ — 20パターン分類

全体マップでは、UIパターンを「ナビゲーション系・フォーム入力系・フィードバック系・コンテンツ表示系・CTA誘導系」の5カテゴリに分類しています。このレッスンではそのうち、ナビゲーション系（7）・フォーム入力系（3）・フィードバック系（4）・コンテンツ表示系（3）の17パターンを解説します。

---

ナビゲーション系パターン

1. グローバルナビゲーション

グローバルナビゲーションはサイト全体の主要セクションへのリンクを常に表示するナビゲーションです。通常ヘッダーに配置し、どのページからでもアクセスできます。

設計の原則

• ◆項目数は5〜7個に絞る（ヒックの法則：選択肢が多いほど選択に時間がかかる）
• ◆現在地をアクティブ状態（色・下線・ボールド）で示す
• ◆モバイルではハンバーガーメニューに切り替えるが、最重要CTAは露出したままにする

2. パンくずリスト

パンくずリストは現在のページが階層構造のどこに位置するかを示すナビゲーション補助要素です（例：ホーム > カテゴリ > 商品名）。

適用場面: 階層が3層以上あるサイト、ECサイトの商品詳細ページ、記事サイトのカテゴリ配下

SEO効果: パンくずのリストマークアップをJSONLDで実装するとGoogle検索結果にパンくずが表示されクリック率が向上します。

3. タブナビゲーション

タブは同じコンテキスト内でコンテンツを切り替えるためのパターンです。ページ遷移を発生させずに複数のビューを提供します。

4. ハンバーガーメニュー

3本の水平線のアイコンをタップするとナビゲーションが出現するパターンです。モバイルで画面スペースを節約するために広く使われますが、発見性が低いという課題があります。

⚠️ ハンバーガーメニューの代替案: 重要なナビゲーション項目はBottomNavigationやタブで露出し、補助的な項目のみハンバーガーに格納する設計が推奨されます。Nielsen Norman Groupの調査では、BottomNavigationはハンバーガーメニューより最大22%エンゲージメントが高いとされています。

5. スティッキーヘッダー

スクロールしてもヘッダーが画面上部に固定されたままのパターンです。いつでもナビゲーションにアクセスできるため、長いページの回遊性が向上します。

注意点: モバイルではヘッダーの高さがコンテンツ表示領域を圧迫します。スクロールダウン時に隠れ、スクロールアップ時に再表示する「Hidey Header」パターンとの使い分けを検討してください。

6. ページネーションと無限スクロール

7. ステッパー（ウィザード）

多ステップのタスク（会員登録・購入フロー）を段階的に進めるパターンです。現在のステップ番号と全体の進捗を示すことで、ユーザーの脱落を防ぎます。

---

フォーム・入力系パターン

8. インラインバリデーション

入力中または入力直後にリアルタイムでエラーや確認メッセージを表示するパターンです。フォーム送信後にまとめてエラーを表示する従来方式より、修正が容易で離脱率が下がります。

実装のポイント

• ◆エラーはフィールドを離れた（onBlur）タイミングで表示する（入力中のリアルタイム表示は煩わしい）
• ◆成功状態も緑色チェックマークで示すとユーザーの安心感が高まる
• ◆エラーメッセージは「何が間違っているか」だけでなく「どう修正するか」を明示する

9. フローティングラベル

入力フィールドのプレースホルダーが入力開始時に上部に移動してラベルになるパターンです。入力後もラベルが消えないため、ユーザーが入力内容を確認しやすくなります。

10. オートコンプリート

入力の途中で候補を提示して選択を補助するパターンです。検索フォーム・住所入力・タグ入力などで広く活用されます。

設計時の注意点: 候補は最大7〜8件程度に絞り、キーボードでの選択（↑↓キーでフォーカス移動・Enterで決定）に対応することがアクセシビリティ上の必須要件です。

---

フィードバック系パターン

11. モーダルダイアログ

現在のページの上に重なって表示されるダイアログです。ユーザーに重要な情報の確認や決定を求める場面で使います。

使うべき場面

• ◆不可逆な操作（削除・キャンセル）の確認
• ◆ログインが必要な機能へのアクセス
• ◆重要なアラートや通知

使わないほうがよい場面

• ◆単純な情報提供（ツールチップやインラインメッセージで対応可能）
• ◆モバイルでの複雑なフォーム（全画面のボトムシートやページ遷移が適切）

⚠️ モーダルの乱用はUXを破壊する: ページ表示直後にモーダルを出す、モーダルの中でモーダルを開く、閉じ方が不明瞭なモーダルはいずれもユーザーの離脱を招きます。「ユーザーが自分でトリガーしていないモーダル」は原則として廃止してください。

12. トースト通知

画面の端に一時的に表示される小さな通知メッセージです。「保存しました」「コピーしました」など、操作の結果を非侵襲的に伝えるために使います。

表示時間は3〜5秒を目安とし、ユーザーが手動で閉じられるX（閉じる）ボタンを必ず設けてください。アクセシビリティ対応としてaria-live属性が必要です。

13. スケルトンスクリーン

コンテンツ読み込み中にコンテンツの形状をグレーのプレースホルダーで表示するパターンです。スピナーより体感速度が速く感じられる効果があります。

14. プログレスバー

処理の進捗を視覚的に示すパターンです。「何%完了したか」が分かるとユーザーは待機中に離脱しにくくなります。処理時間が2秒以上かかる場合は必ず進捗表示を実装してください。

---

コンテンツ表示系パターン

15. カードUI

矩形のコンテナに情報をまとめて表示するパターンです。画像・タイトル・説明・CTAを一単位として複数グリッドに並べることで、スキャン（ざっと見渡す）と比較が容易になります。

カードの設計チェックリスト

• ◆最小タップターゲット44×44px以上（カード全体をタップ可能にする）
• ◆影（box-shadow）やボーダーでコンテナを明確に示す
• ◆一つのカードに主要アクション（CTAボタン）は1つだけ
• ◆画像のアスペクト比を統一して整然としたグリッドを保つ

16. アコーディオン

見出しをクリック・タップすると詳細コンテンツが展開・折りたたみできるパターンです。FAQページや設定画面で頻繁に使われます。

17. カルーセル（スライダー）

複数のコンテンツを同じ領域でスライド表示するパターンです。バナー画像・商品一覧・ユーザーレビューなどによく使われますが、発見率が低いという根本的な課題があります。

💡 カルーセルは使用を最小限に: Nielsen Norman Groupの研究では、カルーセルの2枚目以降のコンテンツのクリック率は1%未満とされています。カルーセルで隠れるコンテンツは「存在しない」と見なして設計し、重要な情報は1枚目か別の形式で常時表示することを推奨します。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆パターン観察: 普段使っているアプリを5分間操作し、このレッスンで学んだパターンを何種類発見できるかカウントして記録する
2. ◆モーダル設計: 「本当に削除しますか？」という削除確認モーダルをFigmaで設計する。タイトル・本文・キャンセルボタン・削除ボタン・ESCで閉じる動作を含めること
3. ◆フォーム改善: 既存のログインフォームを見直し、インラインバリデーション・フローティングラベル・エラーメッセージの3点を改善したバージョンをFigmaで作成する
4. ◆パターン選定レポート: 担当しているか興味があるサービスのUIを1つ選び、「このパターンを採用した理由」と「このパターンの弱点とその対処法」を各パターンについて2〜3文で説明するレポートを書く

📝まとめ

UIデザインパターンは「使える引き出し」です。しかし、パターンをそのまま適用するだけでは不十分で、「なぜそのパターンが選ばれているのか」「このコンテキストでは何が最適か」を考え続けることが重要です。17のパターンの特性・適用場面・落とし穴を理解したうえで、ユーザーの行動データとフィードバックをもとに継続的に改善する姿勢こそが、優れたUIデザイナーの本質です。