Navigation UI
ナビゲーションUIまとめ
ナビゲーションUIは、ユーザーが現在位置を理解し、目的の画面へ迷わず移動するための導線設計です。
最終更新日: 2026-07-16 / レビュー状態: 未レビュー
30秒でわかる要点
ナビゲーションUIは、ユーザーが現在位置を理解し、目的の画面へ迷わず移動するための導線設計です。
拾いたい検索意図
- ・ナビゲーション UI の種類を比較したい
- ・タブバーとサイドバーを使い分けたい
- ・パンくずやドロワーを設計したい
設計ポイント
- ・主要導線と補助導線を分ける
- ・現在位置を必ず示す
- ・モバイルとデスクトップで表示常態を変える
関連コンポーネント
ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。パンくずリスト（Breadcrumb）パンくずリスト（Breadcrumb）は、ユーザーの現在位置をページ階層で示すナビゲーション補助コンポーネント。サイトの深い階層を分かりやすく示す。タブ（Tab）タブ（Tab）は、複数のコンテンツパネルをタブで切り替えて表示するコンポーネント。同一画面内で関連するコンテンツを整理する。タブナビゲーション（Tab Navigation）タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。サイドバー（Sidebar）サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。ドロワー（Drawer）ドロワー（Drawer）は、画面端からスライドインするパネル型コンポーネント。モバイルメニュー・フィルターパネル・詳細ビューに使用される。コンテキストメニュー（Context Menu）コンテキストメニュー（Context Menu）は、右クリックや長押し操作で表示されるショートカットメニューコンポーネント。選択中の要素に対する操作一覧を提供する。
関連画面パターン
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16
FAQ
ナビゲーションUIでは何から設計しますか？
まず検索意図や利用シーンを決め、navigation、breadcrumb、tabなどの主要コンポーネントを画面目的に合わせて選びます。
ナビゲーションUIで避けるべきことは何ですか？
見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。
ナビゲーションUIの関連ページはどう辿るべきですか？
まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。