Explore navigation design for iOS

ハイライト

優れたナビゲーション設計では、ユーザーはナビゲーションの存在を意識しません。Sarah McClanahan は Tab Bar、階層ナビゲーション、モーダル表示の3つの観点から、サイクリング App の事例で機能の詰め込みから明確な情報アーキテクチャへ進む過程を示し、よくあるアンチパターンも指摘します。「Home」を万能入口にすること、複数の Tab で同じ機能を重複させること、モーダルの乱用でユーザーのフローを遮断すること、などです。

主要内容

ナビゲーションの問題はしばしば「どのコントロールを選ぶか」として語られます。Tab Bar かサイドバーか？push か modal か？しかしこの Session はもっと手前から始めます。まず情報の構造を把握し、それに合ったナビゲーションパターンを選ぶことです。（00:30）

Sarah はサイクリングルート App を通して説明します。初期版では、すべての機能が最初の Tab に詰め込まれていました。ルート一覧、ルート詳細、プロフィール、設定、お気に入りが1画面に並び、ユーザーは当てずっぽうで探すしかありません。チームの最初の考えは単純でした。「最初の Tab に置けばユーザーは必ず見る」。結果は正反対で、情報に階層がなくすべて同じくらい重要に見えたため、ユーザーは何も見つけられませんでした。（02:15）

再設計ではコントロールの差し替えではなく、情報構造の見直しが中心でした。どれが同列関係か？親子関係か？一時的なタスクか？この3つに答えると、Tab 構造は自然に浮かび上がります。ルート閲覧、お気に入り、プロフィールの3 Tab。各 Tab 内は階層ナビゲーションで深掘りし、ルート作成はモーダル表示。この選択は情報構造から導かれたもので、感覚的な決定ではありません。（04:40）

階層ナビゲーションは「自分がどこにいるか」をユーザーに伝えることです。Sarah は、戻るボタンのラベルは「Back」ではなく前の画面のタイトルを表示すべきだと強調します。現在の画面タイトルは常に見えること。ナビゲーションの深さは3層以内に——それ以上はモーダルか独立した Tab で分担します。（08:10）

モーダル表示は最も乱用されやすいパターンです。Sarah の判断基準は明確です。モーダルは「ユーザーが1つのことに集中して完了してから、メインフローに戻る必要があるとき」に使います。コンテンツ作成、フォーム入力、写真選択は適切な場面です。広告のポップアップ、強制評価、不要な通知には使うべきではありません。モーダルの中にさらにモーダルを重ねると、ユーザーは階層を見失い、dismiss の挙動が予測不能になります、というよくある誤りも指摘しています。（12:30）

詳細

機能の詰め込みから明確な情報アーキテクチャへ

（01:50）サイクリング App の初期設計は典型的な「ホーム万能」アンチパターンです。すべての機能が最初の画面に、グループ分けも優先度もありません。Sarah の診断手順は次のとおりです。

すべての機能を列挙する
ユーザーのメンタルモデルでグループ化する（開発者のコード構造ではない）
同列関係（Tab）と親子関係（階層ナビゲーション）を区別する
一時的なタスク（モーダル）を特定する

グループ化の結果：ルート関連（閲覧、検索、詳細）、個人関連（お気に入り、履歴、プロフィール）、設定関連（環境設定、通知、プライバシー）。3つの Tab が3つのユーザー意図に対応し、各 Tab のアイコンとタイトルが単独で意味を伝えます。

キーポイント:

機能のグループ化はユーザーの目標に基づく。コードモジュールではない
各 Tab は独立して成立する——どの Tab から入っても自分がどこにいるか分かること
「Home」Tab は多くの問題の根源。何も伝えず、すべてを積み上げるだけ

Tab Bar のよくある落とし穴

（05:20）Sarah が挙げる3つの典型的な誤り：

複数の Tab で同じ機能を重複させる。 露出を増やしているように見えて、情報アーキテクチャのメンタルモデルを壊します。ユーザーは混乱します。この機能はどの Tab に属するのか？異なる Tab から同じページに入るなら、Tab の意味は失われます。

Tab が5つを超える。 5つを超えると「その他」入口が現れ、追加機能が隠れます。Sarah の助言：6つ必要だと思ったら、同列関係と親子関係を混同していないか自問してください。5つを超える場合は階層ナビゲーションで分担を検討します。

アイコンだけで文字ラベルを省略する。 アイコンは識別を助けますが、文字ラベルの代わりにはなりません。文字のないアイコンはユーザーに推測を強い、認知負荷が増えます。システムアイコンでも文字ラベルを付けてください。

階層ナビゲーションの空間認識

（07:30）階層ナビゲーションの核心は「自分がどこにいるか」の空間感です。push と pop は手段にすぎません。Sarah の3原則：

戻るボタンのラベルは「Back」ではなく前の画面のタイトル
現在の画面タイトルは常に表示。スクロールで隠さない
深さは3層以内。それ以上は新しい Tab に分割するかモーダルで表示

細部として、リスト行の disclosure indicator（右向きの小さな矢印）も重要な視覚的手がかりです。「ここをタップすると深く入れる」と伝えます。次の階層がなければ矢印を付けない——付けているとユーザーがタップして反応がなく、App が壊れたと感じます。

モーダルの正しい使い方

（11:00）モーダルの本質は「現在のフローを遮断し、独立したタスクを完了させること」です。Sarah の判断フレームワーク：

モーダルに適した場面：

新しいコンテンツの作成（投稿、ルート、連絡先）
続行のために明確な選択が必要（写真、日付）
集中が必要なタスク（フォーム入力、詳細編集）

モーダルに不適な場面：

情報の表示（push ナビゲーションを使う）
重要でない通知（banner や toast）
非同期で完了できるタスク（バックグラウンド処理）
モーダルの重ね掛け（階層を見失い、dismiss 先が分からなくなる）

閉じ方も重要です。Sarah は、明確な閉じるボタンかスワイプで閉じられること、モーダル内で変更した場合は閉じる前に確認——「変更を破棄しますか？」——を強調します。これはユーザーのデータを守るもので、不要な煩わしさではありません。

重要ポイント

やること：App の情報アーキテクチャ監査を行う。
価値：Sarah の診断法はそのまま使えます。すべての機能を列挙し、ユーザーの目標でグループ化し、同列・階層・一時的な関係を区別する。ナビゲーションの混乱の多くはコントロール選びではなく、情報構造の問題です。
始め方：紙にすべての画面を書き出し、「ユーザーがここで何を達成したいか」で再グループ化し、現在の Tab 構造と比較する。
やること：すべてのモーダル使用を見直し、不要なものを削除する。
価値：モーダルは最も乱用されやすいパターンです。Sarah の基準は実用的——このタスクを完了しないとメインフローに戻れないならモーダル。それ以外は push など非ブロッキングな方法を検討。
始め方：コードで present と sheet を検索し、各場面で本当に現在のフローを遮断する必要があるか自問する。
やること：戻るボタンのラベルを前の画面のタイトルに変更する。
価値：Sarah は空間認識を繰り返し強調します。ユーザーは「戻るとどこへ行くか」を知る必要があります。汎用的な「Back」より具体的な「ルート一覧」の方が有用です。コストの低い改善です。
始め方：UIKit は前の ViewController の title を戻るボタンラベルに自動で使います。各画面の title が内容を正確に表しているか確認する。