ボトムナビゲーション（タブバー）
Bottom navigationモバイル画面の下部に主要な行き先を常時固定表示するナビゲーションUI。
○ 使う場面
- モバイルアプリ/PWAで主要な行き先が3〜5個程度に絞れるとき
- 親指の可動域を考え、画面下部に主要動線を置きたいとき
× 避ける場面
- PC幅の画面（→サイドバーやヘッダーナビゲーション）
- 行き先が5個を超えるとき（→ハンバーガーメニュー等に集約）
別名
タブバー、ボトムタブバー、ボトムタブ
近縁種との比較
別名「タブバー」の通り、2007年発売の初代iPhoneの標準アプリ群からすでに使われていた、iOSのごく初期からの定番パターンである。親指が届きやすい画面下部に主要な行き先をまとめて置くという発想は、のちにAndroidのMaterial Designにも取り入れられ、モバイルの定番ナビゲーションとして定着した。
| 近縁種 | 違い・使い分け |
|---|---|
| 固定ヘッダー | 固定ヘッダーが画面上部に固定されるのに対し、ボトムナビゲーションは画面下部に固定される点が対照的で、モバイルでは親指の可動域を考慮してこちらが好まれる。上部は検索やブランドなどの補助要素、下部は主要な行き先の切り替えという役割分担で併用されることが多い。 |
| タブ | タブがページ内のコンテンツパネルを切り替えるナビゲーションであるのに対し、ボトムナビゲーションは別々の画面（ルート）そのものを切り替える、より上位のナビゲーション単位である。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション