デザイナーが知っておくべきUIパターン集：24の定番パターンと使い方

UIデザインには「定番の解決策」となる「UIパターン」が数多く存在します。これらのパターンを名前と使い方で知っておくことで、デザインの議論・検索・学習が効率的になります。本記事では、モバイルアプリデザイナーが必ず知っておくべき24の定番UIパターンを解説します。

ナビゲーションパターン（6個）

1. Bottom Navigation（ボトムナビゲーション）

タブバー形式の画面下部ナビゲーション。3〜5つのメイン機能へのアクセスに最適。

2. Hamburger Menu（ハンバーガーメニュー）

三本線アイコンをタップして展開するサイドナビゲーション。多数の機能を持つアプリに向くが、発見性が低い欠点がある。

3. Breadcrumb（パンくずリスト）

現在位置を「ホーム > カテゴリ > 商品」のように表示するナビゲーション支援パターン。

4. Wizard（ウィザード）

複数ステップのフォームや設定を段階的に案内するパターン。プログレスバーと組み合わせて使う。

5. Deep Linking（ディープリンク）

通知やURLからアプリの特定画面に直接遷移できる機能パターン。

6. Floating Action Button（FAB）

画面右下に浮かぶ丸いボタン。最も重要なプライマリアクション（投稿・追加など）に使用。

インプットパターン（5個）

7. Typeahead（タイプアヘッド）

入力中にリアルタイムでサジェストを表示するパターン（オートコンプリート）。

8. Calendar Picker（カレンダーピッカー）

日付・期間選択に使うカレンダーUI。1ヶ月表示・2ヶ月表示などのバリエーションがある。

9. Slider（スライダー）

連続した値の範囲を指でスライドして選択するUI。音量・価格レンジ・明るさの調整に使用。

10. Toggle Switch（トグルスイッチ）

オン/オフ状態を切り替えるUI。設定画面での使用が最も一般的。

11. Chips（チップ）

小さな角丸の選択タグ。フィルター・タグ選択・アクション提案に使用される。

コンテンツ表示パターン（6個）

12. Infinite Scroll（無限スクロール）

スクロールに合わせてコンテンツを追加読み込みするパターン。SNSフィード・ECリストで一般的。

13. Pagination（ページネーション）

コンテンツをページ単位で分割して表示するパターン。検索結果・レポートに向いている。

14. Pull to Refresh（プルダウンリフレッシュ）

リストを引き下げてコンテンツを更新するジェスチャーパターン。

15. Card（カード）

関連情報をまとめた長方形のコンテナ。リスト・グリッドでの情報整理に最適。

16. Accordion（アコーディオン）

タイトルをタップすることで詳細内容を展開/折りたたみできるパターン。FAQや長い説明文の表示に使用。

17. Carousel（カルーセル）

横スクロールで複数のコンテンツを切り替えるスライダー。バナー・おすすめコンテンツの表示に使用。

フィードバックパターン（5個）

18. Toast（トースト）

画面下部に一時的に表示される軽量の通知。成功・エラー・情報の短い通知に使用。

19. Skeleton Screen（スケルトンスクリーン）

コンテンツロード中にコンテンツの形状のグレーのプレースホルダーを表示するパターン。

20. Progress Bar（プログレスバー）

処理の進捗率を視覚化するUI。アップロード・長い処理の待ち時間に使用。

21. Snackbar（スナックバー）

Toast（トースト）の拡張版。「元に戻す」などのアクションボタンを含めることができる。

22. Tooltip（ツールチップ）

要素をホバー/長押しした際に表示される補足説明。アイコンの意味を説明する場面に使用。

モーダルパターン（2個）

23. Bottom Sheet（ボトムシート）

画面下部からスライドアップするモーダルコンテナ。フィルター・アクション・詳細表示に使用。

24. Dialog（ダイアログ）

画面中央にオーバーレイで表示されるモーダル。確認・入力・警告に使用。

UIパターンを学ぶメリット

UIパターンを知ることで：

• 「このUIを何と呼ぶか」がわかる → 検索・学習が効率化
• 「どの場面でどのパターンを使うか」の判断基準が持てる
• デザイナー同士・エンジニアとの共通言語になる
• 既存のパターンを組み合わせて新しいUIを設計できる

まとめ

UIパターンは「先人が解決した問題の定番解答」です。車輪の再発明をせず、これらのパターンを活用することで、ユーザーが「見覚えのある」使いやすいUIを効率よく設計できます。UI ZUKANのギャラリーで各パターンの実装事例を参考にしてください。