モバイルナビゲーションのパターン｜タブ・ドロワー・ボトムナビの選び方

モバイルナビゲーションは、目的地の場所を予測でき、片手で操作でき、画面を切り替えても文脈を失わないときに機能します。トップレベルの目的地の数、切り替え頻度、現在の作業に下位セクションがあるかを確認してパターンを選びましょう。

PixsoのUIデザイン共同作業で情報構造を整理し、候補ごとのプロトタイプ、タッチ領域、例外状態をチームで確認できます。

1. 目的地と切り替え頻度を整理する

トップレベルの目的地を列挙し、頻度、緊急度、現在の作業との関係で分類します。頻繁に切り替える目的地を、画面がすっきりするからという理由だけでメニューに隠さないことが大切です。

2. 安定したトップレベルにはボトムナビ

ボトムナビは、少数の目的地を頻繁に行き来する場合に向いています。各項目に明確なラベルか、意味が伝わるアイコンとラベルの組み合わせを使い、選択中の状態を見失わせないようにします。

• ホーム、プロジェクト、受信トレイ、プロフィールなど役割が明確な領域に使う。
• すべての機能を詰め込まず、補助操作は各画面やオーバーフローへ移す。
• 長い翻訳、セーフエリア、再タップ時の挙動を確認する。

3. 同じ目的地の兄弟ビューにはタブ

タブは同じ対象や作業の並列ビューに適しています。「概要」「アクティビティ」「設定」のように、プロジェクト内の兄弟セクションを切り替える用途です。異なる製品領域を混ぜたり、説明文が必要なラベルを並べたりしないでください。

選択中のタブを常に示し、横スクロールが必要なら分かる手がかりを置きます。タブが増えたときは文字を小さくするのではなく、情報構造を見直しましょう。

4. 二次的な目的地にはドロワーやメニュー

ドロワーはワークスペース切り替え、ヘルプ、アカウント操作、設定など、毎回は使わない目的地を収めるのに適しています。主要タスクや頻繁に確認する項目を隠す場所には向きません。

開いたときに現在の画面との関係を保ち、閉じる方法を明示します。対応するキーボード、スクリーンリーダー、フォーカスの挙動も、開閉と中断の状態を含めてプロトタイプで確認します。

5. グローバル・ローカル・コンテキストを分ける

グローバルは「製品のどこにいるか」、ローカルは「目的地のどのセクションか」、コンテキスト操作は「この項目で何をするか」に答えます。各レベルに異なる視覚と操作の扱いを与えましょう。

6. 迷いやすい状態をプロトタイプする

長いラベル、深いリンク、結果なし、オフライン、権限不足、別アプリからの復帰を確認します。選択中の目的地を復元するか、保留中の入力を残すか、戻るジェスチャーがどの階層へ移動するかを決めます。

Pixsoでは画面の横に小さなインタラクション表を置き、各コントロールを目的地へ接続して残す状態を注記できます。

7. アクセシビリティと到達性を確認する

ラベル、フォーカス順、コントラスト、タッチ領域、モーションはナビゲーションの一部です。色だけに依存せず、最大文字サイズと長い翻訳でも成立するかを確認します。

FAQ

ボトムナビは何項目が適切ですか？

頻繁に切り替える安定したトップレベルだけを置きます。普遍的な数はなく、ラベルが詰まるなら階層を見直してください。

ハンバーガーメニューは悪いのでしょうか？

二次的・限定的な目的地には有効です。主要タスクを隠したり、中身が分からなかったりすると問題になります。

ボトムナビとタブを併用できますか？

レベルが明確なら併用できます。ボトムナビで領域、タブで領域内の兄弟ビューを切り替えます。

まとめ

目的地、切り替え行動、タスク階層からナビゲーションを選びます。頻繁に使う領域は見つけやすくし、タブは本当の兄弟ビューに限定し、ドロワーには二次的な目的地を置きましょう。