タブナビゲーションのUIデザインガイド：タブバー・上部タブ・コンテンツタブの設計

タブナビゲーションはUIにおける最も広く使われるナビゲーションパターンの1つです。ボトムタブバー（iOS・Android）・上部タブ（Material Design）・コンテンツタブ（フィルタ兼タブ）など、様々な種類のタブUIがあります。本記事では、タブナビゲーションの設計パターンと実装のポイントを解説します。

タブナビゲーションの種類

ボトムタブバー（Bottom Tab Bar）：

iOSのHuman Interface Guidelinesで定義されたモバイルアプリの主要ナビゲーション。画面下部に固定され、アプリのトップレベルのセクションへのアクセスを提供します。

トップタブバー（Top Tab Bar）：

Android・Material Designで多く使われる上部タブ。主にコンテンツのフィルタリング（「人気」「新着」「フォロー中」等）や、同一機能の異なるビュー切り替えに使います。

コンテンツタブ：

ページ内のコンテンツセクションを切り替えるタブ。プロフィールページの「投稿」「いいね」「フォロワー」タブや、商品詳細の「説明」「レビュー」「関連商品」タブなどが典型例です。

ボトムタブバーの設計

項目数：

ボトムタブバーは3〜5項目が最適です。2項目以下はタブバーの存在意義が薄く、6項目以上はタブのサイズが小さくなりすぎてタップしにくくなります。

アイコンとラベル：

各タブにアイコン + テキストラベルの組み合わせを使います。アイコンのみのタブは意味が分かりにくく、ラベルのみのタブはスペース効率が悪いです。標準的な高さは49〜56pxです。

アクティブ・非アクティブの状態：

アクティブ（選択中）タブ: プライマリカラーのアイコン + ラベル

非アクティブタブ: グレーのアイコン + グレーのラベル（Opacity 0.5〜0.6程度）

バッジ（通知数）：

メッセージ・通知セクションに未読数バッジを表示します。3桁以上は「99+」と表示します。バッジはアイコン右上に小さな円として配置します。

安全エリアへの対応：

iOS SafeArea（Home Indicator）にかぶらないようCSSのenv(safe-area-inset-bottom)でパディングを追加します。

トップタブバーの設計

固定タブ vs スクロールタブ：

3〜4項目ならすべてを均等幅で配置する固定タブ、5項目以上なら横スクロール可能なスクロールタブを採用します。スクロールタブは、右端に続きがあることをグラデーションで示します。

アクティブインジケーター：

タブの下部に細い線（インジケーター）でアクティブタブを示すデザインが Material Design の標準です。タブラベルのフォントウェイトも非アクティブはRegular、アクティブはMedium〜Semiboldで差をつけます。

タブの切り替えアニメーション：

タブ切り替え時のインジケーターのスライドアニメーション（200〜300ms ease）が、「移動した」という感覚を与えます。コンテンツエリアも左右スワイプで切り替えられるとさらに直感的です。

コンテンツタブの設計

チップ型タブ：

検索結果・カテゴリ切り替えでは、丸みのあるチップ型タブが視覚的にわかりやすく、選択状態（塗りつぶし）と非選択状態（枠線のみ）の差が明確です。

アンダーラインタブ：

プロフィールページ・詳細ページの内容切り替えでは、テキスト + 下線のシンプルなアンダーラインタブスタイルが多く使われます。

アクセシビリティ

ARIAロール：

<nav>
  <ul role="tablist">
    <li>
      <button
        role="tab"
        aria-selected="true"
        aria-controls="home-panel"
        id="home-tab"
      >ホーム</button>
    </li>
    <!-- 他のタブ -->
  </ul>
  <div role="tabpanel" id="home-panel" aria-labelledby="home-tab">
    <!-- コンテンツ -->
  </div>
</nav>

キーボードナビゲーション：

tablistコンテナ内では矢印キーでタブを切り替えるのがARIAパターンの標準です。

まとめ

タブナビゲーションはアプリの情報構造を直感的に表現する重要なUIです。用途に応じてボトムタブバー・トップタブ・コンテンツタブを選択し、適切なアイコン+ラベル・アクティブ状態・バッジ・アクセシビリティを設計することで、ユーザーが迷わずナビゲートできるUIが完成します。UI ZUKANではタブナビゲーションの実装例を多数掲載しています。