ボトムナビゲーション設計パターン：iOS・Androidアプリの下部タブバー完全ガイド

ボトムナビゲーション（下部タブバー）はモバイルアプリの最もよく使われるナビゲーションパターンの一つです。アプリのメインセクションを素早く切り替えられるアクセシビリティの高い設計ですが、細部の設計が使いやすさを大きく左右します。本記事では、ボトムナビゲーションの設計ベストプラクティスを解説します。

ボトムナビゲーションの基本設計

適用すべきケース：

• 3〜5つの最上位のナビゲーションセクションがある
• セクション間のスイッチが頻繁に行われる
• タブが常に見えている必要がある

適用すべきでないケース：

• セクションが2つ以下（タブでなくトグルボタンを使う）
• セクションが6つ以上（サイドドロワーを検討）
• 単一タスクのフロー（チェックアウト・オンボーディングなど）

タブ数の最適化

推奨タブ数：3〜5

• 3タブ：シンプルで明確。選択肢が少ない分、各タブの意味が重要
• 4タブ：最もバランスが良い。多くの主要アプリが採用
• 5タブ：最大数。それ以上は過密になり使いにくい

タブが多くなる場合は「その他」タブを設け、追加のセクションはそこに収容します（Instagramの「＋」タブ・Twitterの「もっと」など）。

アイコンとラベルのデザイン

アイコンとラベルを常に両方表示する（推奨）：

アイコンのみだと意味が伝わりにくいことがあります。ラベル（テキスト）を常に表示することで認識しやすくなります。

アイコンのデザイン：

• サイズ：24×24px（標準）
• 非アクティブ：Outlineスタイル
• アクティブ：Filledスタイル（または塗りつぶしたアイコン＋色変化）

ラベルのデザイン：

• 短いテキスト（10文字以下）
• フォントサイズ：10〜12px
• 長い場合は省略表示

アクティブ状態のデザイン

アクティブなタブを視覚的に明示することが重要です。

アクティブ状態の表現方法：

1. カラー変化：非アクティブはグレー、アクティブはブランドカラー（最も一般的）
2. アイコン変化：Outline→Filledに変わる（iOS標準スタイル）
3. 背景ハイライト：アクティブタブの背景に薄いカラーブロックを追加（Material Design）
4. インジケーター：タブの上部にラインを追加（一部アプリ）

バッジ（通知インジケーター）

バッジのデザイン：

未読通知数をアイコン右上の赤い丸（バッジ）で表示します。

バッジのパターン：

• 数字なし（赤い点のみ）：通知があることを示す
• 数字付き（最大99+）：具体的な件数を表示

バッジのUX設計：

• 緊急でない通知に過度にバッジを使わない（バッジ疲れを引き起こす）
• 既読/対応後はバッジが消える
• 複数セクションのバッジを合算表示しない（各タブに対応するバッジを表示）

iOSとAndroidの違い

iOS（UITabBar）：

• 画面下部に固定表示（Safe Areaを考慮）
• アクティブタブのアイコンはFilled、非アクティブはOutline
• タブラベルは常に表示

Android（Material Navigation Bar）：

• 画面下部（Navigation Barの上）に固定表示
• アクティブタブの背景に「Active Indicator」と呼ばれるピル形のハイライト
• 5タブ以上はラベルなしアイコンのみ表示も可

まとめ

ボトムナビゲーションは「アプリの最重要セクションに素早くアクセスできる」UXの基盤です。3〜5タブの適切な数・明確なアクティブ状態・わかりやすいアイコン＋ラベルの組み合わせで、使いやすいナビゲーションを設計できます。