Tab Bar — その概要、モバイルアプリのタブパネル

Tab Barとは？

Tab Bar（タブバー）は、モバイルアプリケーションの画面下部に配置されたグラフィカルインターフェース要素です。アプリの3〜5の主要セクションへのクイックアクセスを提供します。各セクションはアイコンとテキストラベルで表現されます。ユーザーはタブをタップして対応するセクションに切り替えます。Tab Barは各セクション内のすべての画面で表示されたままになり、一定のエントリポイントを提供します。

Appleは同等の重要性を持つセクションにTab Barの使用を推奨しています。Human Interface Guidelines（2026）は次のように述べています：「Tab Barは3〜5のタブを表示します。さらに必要な場合、最後のタブは残りを含む「その他」項目になります。」GoogleのMaterial Design（2026）も同じ目的でBottom Navigationを推奨しています — 3〜5項目、アクティブなタブは色とアニメーションで強調表示されます。

上部タブバーとは異なり、下部パネルは片手操作により便利です — 親指が自然に画面下部に届きます。Nielsen Norman Group（2025）の調査によると、6インチ以上の画面を搭載したスマートフォンでは、ボトムナビゲーションが上部ナビゲーションと比較してタスク完了時間を22%短縮することが示されました。

iOSのUITabBarController

UITabBarController は、タブを介してナビゲーションを整理するためのiOS組み込みコントローラーです。各タブは独自の画面セットを管理し、通常はUINavigationControllerで構成されます。UITabBarControllerは、システムの半透明の背景と切り替えアニメーションを備えたTab Barを画面下部に自動的に作成します。

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "ホーム",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "検索",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "プロフィール",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

この例の各タブにはUINavigationControllerが含まれており、セクション内でのスタックナビゲーションが可能です。tabBarItemはアイコン、タイトル、バッジを設定します。システムはアイコンにSF Symbolsスタイルを自動的に適用します — ダイナミックタイプとマルチカラーをサポートするApple標準のシンボルです。

AndroidのBottomNavigationView

BottomNavigationView は、ボトムナビゲーションパネルを実装するMaterial Design LibraryのAndroidコンポーネントです。Android 13+では、アニメーションとアダプティブ動作が改善された後継であるNavigationBarViewが使用されます。BottomNavigationViewはMaterial Design 3（Material You）仕様に従い、アプリのテーマ設定、ダイナミックカラー、切り替えアニメーションをサポートします。

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // BottomNavigationをNavControllerにバインド
        navView.setupWithNavController(navController)

        // 通知タブにバッジを設定
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView コンポーネントは3つのスタイルを持つMaterial Design 3をサポートします：default（ラベル+アイコン）、labeled（大きいラベル）、unlabeled（アイコンのみ）。setupWithNavControllerメソッドはパネルをNavigation Componentにバインドし、画面変更時にアクティブなタブを自動的に更新します。バッジはgetOrCreateBadgeを介して作成され、数値およびドットインジケーターをサポートします。

Tab Barのバッジとインジケーター

バッジ はタブアイコン上の数値またはドットインジケーターで、通知、新規メッセージ、タスクの数を表示します。iOSでは、バッジはUITabBarItemのbadgeValueプロパティで設定します。Androidでは、バッジはBadgeDrawable（Material 3）またはNavigationBarViewのgetOrCreateBadgeを介して管理されます。

バッジは強力なエンゲージメントツールです：Localytics（2025）の調査によると、バッジのあるアプリは7日目のリテンションが18%高いことが示されました。ただし、バッジの過剰使用（同時に3つ以上）はCTRを12%低下させます。AppleとGoogleは、関連する通知に対してのみバッジを表示し、セクションを開いたときにリセットすることを推奨しています。

Tab Barのカスタマイズ：アイコン、色、アニメーション

両方のプラットフォームはTab Barの広範なカスタマイズオプションを提供しています。iOSでは、背景色、アクティブタブのティントカラー、ラベルフォントを変更し、SF Symbolsまたはカスタムアセットを介してカスタムアイコンを追加できます。Androidでは、カスタマイズにMaterial 3スタイル、切り替えアニメーション、リップル効果、壁紙に基づいたダイナミックカラーが含まれます。

// iOSでのTab Barのカスタマイズ
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Androidでは、BottomNavigationViewのカスタマイズはXML属性またはプログラムで行われます。Material 3はダイナミックカラーの概念を導入しています：カラーパレットはユーザーの壁紙から生成され、コンポーネントに自動的に適用されます。開発者はテーマを通じて色を上書きし、カスタムインジケーターアニメーションを設定し、リップル効果を構成できます。

// AndroidでのBottomNavigationViewのカスタマイズ
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// XMLの場合: app:menu="@menu/bottom_nav_menu"
// XMLの場合: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

ボトムナビゲーションのベストプラクティス

Tab Barを設計する際は、プラットフォームの推奨事項とユーザビリティ研究に従うことが重要です。Apple HIG：5つまでのタブ、簡潔なテキスト、意味的なアイコン。Material Design：3〜5項目、アクティブ項目の強調表示、バッジカウンターは99以下。NN Group（2025）：ボトムナビゲーションはセクションのすべての画面で表示されたままにする必要があります。そうしないとユーザーがコンテキストを失います。

よくある間違い：6つ以上のタブ（「その他」の使用を強制 — 発見可能性が低下）、ナビゲーション中のタブの順序変更（ユーザーを混乱させる）、ネストされた画面でのTab Barの非表示（ナビゲーションアンカーの喪失）。ベストプラクティスには、固定された順序、一貫したアイコンとテキストラベル、ユーザーアクション専用のバッジ（マーケティング目的ではない）が含まれます。

• 3〜5タブ — 過負荷なく素早く選択するための最適な数
• 固定順序 — タブは動的な並べ替えなしで安定している必要があります
• アイコン+ラベル — セクションを理解するには両方の要素が必要です
• アクティブタブ — 色、アイコン、またはアニメーションで視覚的に異なる必要があります
• バッジ — 通知に使用し、セクションを開いたときにリセットします