ナビゲーションはUIの中で最も地味な存在だ。コンテンツではなく、コンテンツへの「道」だから、ユーザーに意識させないのが理想とされる。しかしその地味な存在の設計が甘いと、ユーザーは「どこに行けばいいかわからない」という体験をすることになる。
Google Stitch を使ってUIを設計するとき、ナビゲーションは意外と時間がかかる部分だ。プロンプト1つで「それらしいナビ」は生成できる。しかし「このサービスのユーザーが本当に必要としているナビ」を作るには、生成した後の判断が重要になる。
この記事では、Stitch でナビゲーションを設計するときに私がこだわっている3つのことを中心に、実践的な手順を書く。
結論から言うと
一言で言えば、Google Stitch はナビゲーションのパターン探索（複数の選択肢を素早く視覚化する）に向いており、「どのパターンを選ぶか」の判断はユーザーの行動パターンと情報アーキテクチャの理解が必要だ。Stitch が出してくれるナビは「見た目のデザイン」として機能するが、「なぜこの項目をここに置くか」という論理は設計者が与えなければならない。
ナビゲーションの種類とStitchでの生成
ナビゲーションとは、ユーザーがサービス内を移動するための UI のことだ。どのコンテンツへのアクセスが多いか・サービスの情報構造はどうなっているか・デバイスはどれかによって、適切なナビゲーションのパターンが変わる。
主なナビゲーションパターン
代表的なナビゲーションパターンとStitchでの生成例を整理する。
トップナビゲーションバー（横型ヘッダー）：Webサイト・Webアプリに多い。水平方向に項目を並べる。Stitch でのプロンプト例：「固定ヘッダー、左にロゴ、中央に水平ナビゲーション（ホーム・機能・料金・会社概要・ログイン）、右にCTAボタン。」
サイドナビゲーション（縦型サイドバー）：管理画面・ダッシュボードに多い。縦方向に項目を並べ、アイコン+テキストで構成。Stitch でのプロンプト例：「左側に固定サイドバー（幅240px）、アイコン付きメニュー項目を縦並びに。ダッシュボード・注文管理・ユーザー管理・設定・ヘルプの5項目。」
ボトムナビゲーション（スマホ向け）：モバイルアプリに多い。画面下部に4〜5項目。Stitch でのプロンプト例：「スマートフォン用（375px）、画面下部に固定のボトムナビゲーション。ホーム・検索・お気に入り・カート・マイページの5アイコン。選択中はアクセントカラー、非選択はグレー。」
ハンバーガーメニュー（折りたたみ型）：モバイルで多くの項目を隠す場合に使う。Stitch でのプロンプト例：「モバイル用ヘッダー、右上にハンバーガーアイコン。タップするとフルスクリーンのメニューが展開。」
こだわりその1：項目名を「動詞」か「名詞」か意識して決める
ナビゲーション項目の名前付けは、ユーザーの理解のしやすさに直結する。「管理」「設定」「ツール」という名詞型と、「作成する」「確認する」「編集する」という動詞型では、ユーザーが「ここをクリックしたら何が起きるか」のイメージが変わる。
Stitch にナビゲーションを生成させるとき、私は項目名をプロンプトに明示的に含めるようにしている。「ダッシュボード・注文管理・商品登録・レポート・設定」という名詞型のリストと、「商品を見る・注文を確認する・レポートをダウンロードする」という動詞型のリストを別々のプロンプトで生成し、どちらがそのサービスに合うかを比較する。
実際に使ってみて分かったのは、Stitch はプロンプトに書かれた項目名をそのまま使ってナビゲーションを生成するため、「どんな言葉を使うか」の検討を設計の前段階でやっておく必要があるということだ。AIが勝手に良い項目名を考えてくれるわけではない。
ラベル比較をStitchで高速化する
Stitch 2.0のマルチスクリーンキャンバスを使えば、「名詞型ラベルのナビゲーション」と「動詞型ラベルのナビゲーション」を同一セッションで生成して並べられる。視覚的に比較することで、どちらの言葉がデザインの雰囲気に合うかの判断が早まる。
こだわりその2：「今どこにいるか」をデザインに組み込む
ナビゲーション設計で最もよく忘れられるのが「現在地の表示」だ。ユーザーが今どのページにいるかを視覚的に示すことは、ナビゲーションの基本機能のひとつだが、Stitch にプロンプトで明示しないと含まれないことが多い。
私がナビゲーションをStitchで生成するとき、必ず含めるプロンプト要素がある。「現在選択中の項目はアクティブ状態（アクセントカラー・太字・左のハイライトバー等）で強調する」という一文だ。これを入れると、Stitch はアクティブ状態を視覚的に区別したナビゲーションを生成する。
パンくずリストとの使い分け
深い階層構造を持つサービス（ECサイト・ドキュメントサイト等）では、パンくずリスト（ホーム > カテゴリ > 商品名）が「現在地」を示す有効な手段になる。Stitch でパンくずリストを生成するには、「上部に小さなパンくずナビゲーション（ホーム > [カテゴリ名] > [ページ名]）を追加」と指定する。ナビゲーションバーとパンくずリストを組み合わせることで、ユーザーの現在地がより明確になる。
こだわりその3：モバイルとデスクトップで別々に設計する
ナビゲーションはデバイスによって最適なパターンが変わる。デスクトップで機能するトップナビゲーションバーは、スマートフォンでは表示できる項目が限られる。この「デバイスごとのナビゲーション最適化」を、Stitch を使って明示的に設計する習慣を持つことが重要だ。
デバイスごとのナビゲーション戦略
デスクトップ（1440px幅）：トップナビゲーションバーに5〜8項目。ドロップダウンメニューによるサブナビゲーション。
タブレット（768px幅）：トップナビゲーションに3〜5項目 + ハンバーガーメニューに残りの項目を格納。
スマートフォン（375px幅）：ボトムナビゲーションに4〜5つの主要項目のみ。残りはハンバーガーまたはドロワーメニュー。
Stitch でこれら3デバイス版を同一セッション内でそれぞれ生成し、「このナビゲーション構造は3デバイスで成立するか」を確認することが、私のナビゲーション設計の基本フローになっている。
「隠れたナビゲーション」に注意する
ハンバーガーメニューは多くの項目を隠せる反面、ユーザーがその中に何があるかを知らない限り、使われないという問題がある。特にモバイルでの重要な機能をハンバーガーの中に入れてしまうと、ユーザーがその機能の存在を知らないまま使い続ける。
Stitch でハンバーガーメニューを含む画面を設計するとき、「ハンバーガーメニューを開いた状態」の画面も合わせて生成することを習慣にしている。開いた状態を可視化しておくことで、「本当に重要な機能がここにあっていいか」という判断がしやすくなる。
DESIGN.md でナビゲーションのルールを定義する
プロジェクトのナビゲーションスタイルが決まったら、DESIGN.mdに定義することで以降の生成に一貫して適用できる。ナビゲーション関連の定義例を示す。
ナビゲーション定義例：「トップナビゲーション：高さ64px・背景白・下線ボーダー1px薄グレー。項目テキスト：フォントサイズ14px・通常状態はグレー・ホバー時はプライマリカラー・アクティブ時はプライマリカラー太字。ボトムナビゲーション（モバイル）：高さ56px・背景白・上線ボーダー1px薄グレー・アイコン24px・テキスト10px・アクティブ時はプライマリカラー。」
よくある質問（FAQ）
Q1. ナビゲーション項目は何項目が最適ですか？
一般的にはトップナビゲーションで5〜7項目、ボトムナビゲーションで4〜5項目が目安です。人間が短期記憶で一度に保持できる情報は7±2項目（ミラーの法則）と言われており、それを超えると認知負荷が増えます。項目が多い場合はカテゴリ化・グルーピングを行い、ドロップダウンやサブナビゲーションで整理することを検討してください。
Q2. Stitch でドロップダウンメニューのデザインは生成できますか？
生成できます。「ナビゲーション「製品」の項目にマウスオーバーしたときに表示されるドロップダウン：3カラムのメガメニュー形式、各カラムにカテゴリ名と4〜5のサブリンク、最下部にすべて見るリンク」というプロンプトで、ドロップダウンが展開した状態の画面が生成できます。展開状態と収納状態を別々のプロンプトで生成して並べることをおすすめします。
Q3. ナビゲーションアイコンはStitchで自動生成されますか？
Stitch はプロンプトの内容に合わせてアイコンを配置します。「ホームアイコン・検索アイコン・カートアイコン」のように項目名を指定すると、対応する汎用的なアイコンが生成されます。ただし独自デザインのカスタムアイコンは生成できないため、実装時には公式のアイコンセット（Material Iconsなど）または自社のアイコンに差し替える前提で設計してください。
Q4. アクセシビリティ（キーボード操作・スクリーンリーダー）を考慮したナビゲーション設計はStitchで確認できますか？
Stitch はビジュアルデザインのたたき台を生成するツールであり、キーボードフォーカス順序やARIAラベルなどのアクセシビリティ実装の確認はできません。アクセシビリティへの対応は実装フェーズでエンジニアと協力して行う必要があります。ビジュアル面では「フォーカス状態のスタイル（点線枠など）を視覚的に表示したナビゲーション」をStitchで生成しておくことで、実装者がフォーカスデザインを考慮しやすくなります。
Q5. ナビゲーションのA/Bテスト用バリアントをStitchで作る方法は？
Stitch 2.0のマルチスクリーンキャンバスで、同じページの「ナビゲーションA（トップ型）」「ナビゲーションB（サイド型）」を並べて生成できます。A/Bテストの仮説（例：「トップ型よりサイド型の方が管理画面での回遊率が上がる」）を明確にしてから、それぞれのパターンをStitchで素早く視覚化し、チームで事前評価してからテストに入ることで、テストの精度が上がります。
注意点・失敗しやすいポイント
1. ナビゲーション項目を「機能の名前」にしない
「ユーザーマスタ管理」「システム設定一覧」のような開発者視点の名前は、エンドユーザーには意味が伝わらない。ナビゲーション項目は「ユーザーが何をしたいか」を起点に命名すること。Stitch でデザインを生成する前に、項目名の妥当性をユーザー視点で確認することが重要だ。
2. ナビゲーションを増やしすぎない
機能が増えるにつれてナビゲーション項目も増えがちだ。ナビゲーションは「最もよく使う機能へのショートカット」であり、すべての機能へのリンクを入れる場所ではない。優先度の低い機能は設定画面やサブナビゲーションに移動させることを検討すること。
3. モバイルのナビゲーションを後から追加しない
デスクトップのナビゲーションを設計した後でモバイル版を考えると、項目が多すぎてボトムナビゲーションに収まらないという問題が起きやすい。モバイルファーストで「スマホで5項目に絞るなら何を選ぶか」を最初に決め、その5項目を基準にデスクトップ版のナビゲーションも設計する方が整合性が取りやすい。
まとめ：ナビゲーションはユーザーの「迷い」を減らす設計
Google Stitch でナビゲーションを設計するとき、私がこだわっている3つのこと——「項目名の言語」「現在地の可視化」「デバイスごとの最適化」——は、どれもユーザーの「迷い」を減らすための設計だ。
Stitch はナビゲーションのビジュアルを素早く出してくれる。しかしそのビジュアルが「ユーザーを迷わせないか」を判断するのは、設計者の役割だ。AIが生成したナビゲーションをそのまま使うのではなく、「なぜこの順序か」「なぜこの項目名か」「なぜこの場所か」という問いを持ちながら使うことで、Stitch はナビゲーション設計の強力なパートナーになる。
次に何かのUIを設計するとき、ナビゲーションを後回しにせず最初から考える習慣を持ってほしい。そのとき、Stitch を使って複数のパターンを素早く視覚化してみると、「何をナビゲーションに入れるべきか」が具体的に見えてくる。
