モバイルアプリのナビゲーションパターン：タブ、ドロワー、階層型フロー
タスクの頻度、情報の構造、アクセシビリティ要件、元の場所への戻りやすさを基準に、モバイルアプリのナビゲーションパターンを選びましょう。
ナビゲーションは、アプリの全体像を理解できるようにすべきです。利用者は、どんな領域があり、今どこにいて、作業を失わずにどう移動できるかを知る必要があります。タブバー、ドロワー、階層型フローは見た目の好みではなく、それぞれ行き先同士の異なる関係を示します。
利用者が繰り返し行うタスクから始め、次にコンテンツの階層を描きます。同じ階層の行き先には直接移動できるナビゲーション、親から詳細への関係には階層型ナビゲーションを使いましょう。小さな画面に収まりきらないほど行き先が多い場合は、ドロワーや大きな画面に適応するナビゲーションを検討します。
主なポイント
- 頻繁に再訪する少数の独立した最上位領域には、タブまたはナビゲーションバーを使いましょう。
- ある行き先が別の行き先の内側に意味のある形で属する場合は階層型ナビゲーションを使い、明確な戻る経路を維持しましょう。
- ドロワーは幅広い行き先の一覧を示すために使い、重要なタスクを隠す場所にしないでください。
- ラベル、選択状態、フォーカスの動き、状態の復元を明確にし、利用者が現在地を把握して戻れるようにしましょう。
コンポーネントではなく構造から始める
アプリの行き先を列挙し、利用者の頭の中の分類に合わせてまとめます。たとえば「検索」は「ホーム」と同じ階層かもしれませんが、保存した項目の詳細は「保存済み」の下に属します。利用者が同じ階層の領域を頻繁に行き来するなら、選択肢を見えるようにします。通常、一覧から項目を開いて戻るなら、スタックや階層型フローがその関係を自然に伝えます。
行き先と操作は分けましょう。作成、共有、絞り込み、並べ替えは現在の文脈を変更したり、その文脈に対して実行したりする操作であり、通常はアプリ内の場所ではありません。すべての操作を主要ナビゲーション項目にするのではなく、ツールバー、メニュー、状況に応じたコントロールに配置します。
- 利用者が繰り返し行うタスクを挙げ、どこからでも到達できるべき領域を特定する。
- ナビゲーションのコントロールを選ぶ前に、親子関係を図にする。
- 同じ階層の行き先は、見た目と動作を一貫させる。
三つのパターンを比較する
タブバーやナビゲーションバーは、少数の最上位の行き先を見えるようにし、素早く切り替えられます。行き先が同じ階層にあり、各ラベルが説明なしで理解できる場合に適しています。現在の領域を選択状態に保ちましょう。無関係な操作をバーに詰め込んだり、重要な行き先をあふれたメニューの中に隠したりしないでください。
ナビゲーションドロワーには、より多くの行き先をグループ化して収められ、ときにはアカウントやワークスペースの切り替えも入ります。モーダルなドロワーは画面を節約できますが、開いて選ぶ一手間が増え、一時的にコンテンツを覆います。小さなスマートフォンでは、頻繁に使う行き先が埋もれて感じられることがあります。Material 3の現行Androidガイドは、コンパクトな画面で3～5個の行き先にはナビゲーションバーを勧め、画面が大きくなるとナビゲーションを適応させます。5個以上ならドロワーとする古いMaterialの指針を、現在も普遍的に通用する境界値と取り違えないでください。
階層型ナビゲーションは、一覧、カード、リンクから子画面を開き、タイトルと戻るコントロールで経路を保ちます。カテゴリ、設定、商品の詳細、段階的なタスクに適しています。階層が見えず、戻る動作が一貫しない、または兄弟の項目に行くために何度も戻らなければならない場合、深い階層は煩わしくなります。利用者が分岐を頻繁にまたぐなら、検索、ショートカット、より明確な最上位構造を加えましょう。
| パターン | 適する状況 | 注意点 |
|---|---|---|
| タブ／ナビゲーションバー | 同じ階層の少数の領域へ頻繁かつ直接アクセスする必要がある | 行き先の多さ、曖昧なアイコン、隠れた項目、タブごとの状態の喪失 |
| ナビゲーションドロワー | 多数またはグループ化された行き先の整理された一覧が必要 | 重要な領域がメニューに隠れる、長いスクロール一覧、フォーカスや閉じる操作の問題 |
| 階層型ナビゲーション | 親の一覧から関連する詳細やタスクへ移動する | 現在地の不明確さ、一貫しない戻る動作、深すぎる階層、入力データの喪失 |
タスクの頻度と画面サイズで選ぶ
通常の利用中に、領域をどのくらい頻繁に切り替えるかを確認します。頻繁に使う行き先が少数で安定しているなら、見えるバーが適しています。主な利用が一つのタスクや詳細の閲覧に集中するなら、ナビゲーションを控えめにしてコンテンツの場所を確保しましょう。頻度の低い領域にはドロワーが使えますが、見つけやすく、迷わず戻れることを確かめてください。
ウィンドウのサイズ、向き、プラットフォームの慣習を考慮しましょう。Appleの現行Human Interface Guidelinesは、iPhoneのタブバーを最上位ナビゲーションとして説明し、iPadではタブバーとサイドバーを適応的に表示できるとしています。Material 3はコンパクトな画面向けをナビゲーションバーと呼び、利用可能な幅が広がると異なる形式を用意します。目的は共通していますが、同一のコンポーネントではありません。一方のプラットフォームの外観を他方に写すのではなく、ネイティブの配置、動作、適応方法に従いましょう。
現在地の把握と復帰を確実にする
アイコンだけではナビゲーションを学びにくく、スクリーンリーダーの利用者には分かりづらい場合があります。行き先に短く見えるラベルを付け、選択状態を意味的にも伝え、操作にアクセシブルな名前と十分なタップ領域を用意します。選択・非選択状態のコントラスト、文字の拡大、翻訳、右から左へ読むレイアウトを確認します。対応している場合はVoiceOverやTalkBack、キーボードやスイッチ操作でもテストし、ドロワーを開く、行き先を選ぶ、画面を閉じる際にフォーカスが予測どおり動くようにします。
復帰もナビゲーションの一部です。「戻る」と「閉じる」の動作は区別します。「戻る」は階層をたどり直し、「閉じる」は一時的またはモーダルな表示から抜けます。最上位領域を切り替えたり詳細から戻ったりするときに、有用な位置と入力データを保ちましょう。行き先が空または一時的に利用できない場合は、黙ってナビゲーションを削除・無効化せず、位置を安定させて状態を説明します。破壊的または費用のかかるタスクでは、確定前に戻る経路を明確にします。
実践的なナビゲーション監査
実際のタスクを使ってアプリを進み、次にアクセシビリティ機能を有効にして繰り返します。現在の領域を特定できるか、頻繁に使う行き先に到達できるか、間違った経路から戻れるかを記録します。同じ行程を小さなスマートフォンと大きなウィンドウで比較しましょう。適応的なレイアウトでは、コントロールの形が変わっても情報アーキテクチャを保つ必要があります。
画面ライブラリで実際のアプリの領域やフローの事例を比較し、自分たちのプロダクトのタスクに照らして評価しましょう。優れたパターンは、アプリが成長しても構造を読み取りやすく保ち、中断後の戻る経路を明確にします。
- 初めて使う人は、ラベルだけから最上位の領域を説明できるか。
- 同じ階層の行き先を簡単に切り替えられ、選択状態が明確に示されるか。
- 詳細画面には意味のあるタイトルと予測可能な「戻る」経路があるか。
- ドロワーを開閉しても文脈が保たれ、アクセシビリティのフォーカスが適切に動くか。
- 文字を大きくし、支援技術を使っても、ラベル、操作領域、コントラスト、選択状態は利用できるか。
- 下書きの入力、スクロール位置、階層内の有用な場所を失わずに戻れるか。
- 主要ナビゲーションが競合して重複することなく、大きな画面に構造が適応するか。
