Bottom Navigation: 基礎、BottomNavigationViewとTabView

Bottom Navigationとは？

Bottom Navigationは、アプリの主要セクションに画面下部のパネルからアクセスできるナビゲーションパターンです。このパターンは片手での使いやすさから、モバイルデザインの標準となっています。サイドメニュー（Drawer）とは異なり、Bottom Navigationは常に表示されており、開くための追加のジェスチャーは必要ありません。

Material Design 3（2026）は、Navigation Barを3つの状態を持つコンポーネントとして定義しています：default（アイコン＋ラベル）、labeled（拡大ラベル、1つのアクティブタブ）、unlabeled（アイコンのみ）。Googleは3～5の同等セクションを持つアプリにNavigation Barを推奨しています。6+セクションの場合はNavigation Drawerです。iOS SwiftUIでは、TabViewは自動的にシステムスタイルの下部パネルを使用します。

UX Movement（2025）の調査によると、Bottom Navigationはスライド式メニューと比較してタスク完了時間が27%改善され、ユーザーは追加の操作なしですべての利用可能なセクションを確認できます。大きなタッチターゲット（Androidでは最低48x48 dp、iOSでは44x44 pt）により、誤タップ数が34%減少します。

AndroidのBottomNavigationView（Material 3）

AndroidのBottomNavigationViewは、Material 3ライブラリ（com.google.android.material.navigation.NavigationBarView）のコンポーネントです。これはMaterial 2の旧来のBottomNavigationViewを置き換え、Material Youのダイナミックカラー、アニメーション化されたアクティブタブインジケーター、組み込みバッジのサポートを追加しました。コンポーネントはXMLメニューを介して設定され、Navigation Componentと完全に互換性があります。

// BottomNavigationViewとNavHostFragmentを使用したアクティビティ
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // 自動ナビゲーション同期
        navView.setupWithNavController(navController)

        // バッジ設定
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation用XMLメニュー（res/menu/bottom_nav_menu.xml）
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="ホーム" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="チャット" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="プロフィール" />
// </menu>

Material 3のNavigationBarViewは3つのlabelVisibilityModeモードをサポートしています：LABEL_VISIBILITY_AUTO（デフォルト — アクティブタブにラベルを表示）、LABEL_VISIBILITY_LABELED（すべてにラベル）、LABEL_VISIBILITY_UNLABELED（アイコンのみ）。アニメーション化されたアクティブタブインジケーターは、カスタムリップル効果付きのitemActiveIndicatorStyleを介して設定されます。

iOS向けSwiftUIのTabView

TabViewは、ボトムナビゲーションを作成するためのSwiftUIの組み込みコンテナです。各タブは、アイコンとテキストを使用した.tabItem修飾子で定義されます。TabViewは内部的に自動的にUITabBarControllerを作成し、バッジ、バッジの色、切り替えアニメーション、Dynamic Typeへの適応など、すべてのネイティブパネル機能をサポートしています。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("ホーム", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("検索", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("通知", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("プロフィール", systemImage: "person.circle.fill")
                }
        }
    }
}

TabViewは.badge修飾子（iOS 15+）をサポートしており、Int（数字バッジ）またはString（テキストバッジ）を受け入れます。バッジの色は.badgeProminence(.increased)を介して変更でき、バッジが明るくなります。タブ切り替えアニメーションは.tabViewStyle(.automatic)またはカスタムスタイルを介して設定されます。プログラムによる切り替え制御には、selectionを指定した@Stateが使用されます。

ボトムナビゲーションとスタックナビゲーションの組み合わせ

Bottom Navigationが単独で使用されることはめったにありません。各タブには通常、スタックナビゲーター（SwiftUIのNavigationView/NavigationStack、AndroidのNavHostFragment）が含まれています。この組み合わせにより、ユーザーはセクションへのクイックアクセス（Tab）と各セクション内の詳細ナビゲーション（Stack）の両方を利用できます。これはプロダクションアプリの標準的なアーキテクチャです。

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("ホーム", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("検索", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView内 — スタックナビゲーション
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Androidでは、同じ組み合わせが各タブのNavHostFragmentを介して実装されます。Navigation Componentは各タブのバックスタック作成を自動化します：タブを切り替えるとスタックの状態が保持され、戻ると復元されます。これにより、Googleのシステムアプリ（Play Market、YouTube）のようなシームレスなUXが実現します。

Material 3：ダイナミックカラーとアニメーション

Material 3（Material You）は、Bottom Navigationに重要な変更をもたらします — ユーザーの壁紙から生成されるダイナミックカラーです。システムは壁紙から支配的な色を抽出し、5つのキートーンのパレットを作成します。NavigationBarViewは自動的にこれらの色を適用します：アクティブタブはプライマリ色、非アクティブタブはonSurfaceバリアント色になります。

アクティブタブインジケーターのアニメーションはスムーズになりました：切り替え時に、インジケーターは補間を伴って新しいタブに向かってアニメーションします。タッチ時のリップル効果はセカンダリ色を使用します。Material 3のBottom Navigationは、itemActiveIndicatorStyleを介したカスタムアニメーションもサポートしています — 開発者は形状（楕円、長方形）、マージン、インジケーターの色を設定できます。

<!-- NavigationBarViewのアクティブインジケータースタイル -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Bottom NavigationのUX推奨事項

Bottom Navigationを設計する際は、ユーザビリティ調査を考慮する必要があります。NN Group（2026）：下部パネルの高さは最低56 dp、タッチターゲットは最低48 dpにします。ラベルテキストは最大12文字（ラテン文字）または8文字（キリル文字）にします。アクティブタブは色だけでなく、アイコンの状態（塗りつぶしとアウトライン）でも区別できるようにする必要があります。

Material Design 3は以下のパターンを推奨しています：4タブ — 簡単なスキャンに最適；中央の「+」アイコン（FloatingActionButton） — 主要なアクション用；バッジ — ユーザーアクションカウンターのみ。避けるべきこと：2タブでのBottom Navigationの使用（代わりにTab Layoutを使用）、タブの順序の動的変更、ネストされた画面でのパネルの非表示。

• 高さ — 親指で快適に届くように最低56 dp
• コントラスト — アクティブタブは識別可能である必要があります（色＋アイコンの塗りつぶし）
• ラベル — 短く、1～2単語、切り捨てなし（12文字以内）
• 順序 — 固定、最も重要なものから最も重要でないものへ
• カウンター — ユーザー通知のみ、マーケティング用ではありません