navigation-design

ナビゲーション設計

ナビゲーションはウェブサイトの目次です。ユーザーが今どこにいるのか、どこへ行けるのか、どうすれば戻れるのかを常に示します。

対象範囲

以下の場合にこのスキルを使用します。

• ナビゲーション構造を設計またはレビューする
• 特定の種類のウェブサイトに適したメニューパターンを選ぶ
• パンくずリスト、メタナビゲーション、フッターナビゲーションを設計する
• 検索機能を組み込む
• 情報アーキテクチャをナビゲーションに反映する
• アクセシブルなナビゲーションを確保する必要がある

原則

1. ナビゲーションは現在地を示すものです

ナビゲーションは、ユーザーが今どこにいるのか、どこへ行けるのか、どうすれば戻れるのかを常に示します。ウェブサイトの目次です。

2. ナビゲーションより先に情報アーキテクチャを整える

まずコンテンツを構造化し、その構造を基にナビゲーションを作成します。逆の順序で進めてはいけません。

3. 独創性より明確さを重視する

ナビゲーション項目に名前を付ける際は、独創性より明確さを優先します。ユーザーがリンク先を予測できるようにする必要があります。

4. 大画面では常に表示する

デスクトップではナビゲーションを隠してはいけません。ハンバーガーメニューはモバイル向けのパターンであり、あらゆる環境に適したものではありません。

5. 「3クリックルール」は指針として活用する

ユーザーが重要な情報に最大3クリックでたどり着けるようにします。絶対的なルールではなく、設計の目安として活用してください。

ルール

実施：メインナビゲーションを明確に構成する

• メインナビゲーションは5～7項目に抑えます。
• 最も重要なリンクを先頭と末尾に配置します（系列位置効果）。
• 中核となる提供内容から始め、主要なCTA（「お問い合わせ」、「デモを予約」）で締めくくります。
• ヘッダーには、デフォルトで横方向のメインナビゲーションを使用します。

実施：説明的なメニュー項目を使う

• メニュー項目には具体的な名前を付けます（例：「チュートリアル」ではなく「WordPress チュートリアル」）。
• 内部用語ではなく、対象ユーザーが使う言葉を使用します。
• SEOに関連するキーワードを組み込みます。

実施：複数のナビゲーション経路を用意する

• メインナビゲーション、メタナビゲーション、フッターナビゲーション、パンくずリストを組み合わせます。
• サブページが約100ページに達したら、検索機能を用意します。
• コンテンツ領域にページ内リンクを使用します。
• 長いページには「トップへ戻る」ボタンを追加します。

実施：メタナビゲーションを使用する

• メタナビゲーションはヘッダーの右上に配置します。
• 検索機能、言語セレクター、ログイン、お問い合わせ、法的通知を含めます。
• メタナビゲーションはすべてのページで統一します。

実施：補助的なナビゲーションとしてフッターを活用する

• 最も重要なリンクをフッターにも配置します。
• 利用規約、プライバシーポリシー、サイトマップ、ソーシャルメディアなどの二次リンクを追加します。
• 明確な見出しを付け、フッターのリンクをテーマ別にグループ化します。

実施：パンくずリストを正しく使う

• 階層が2段を超える場合は、パンくずリストを使用します。
• ホームページへのリンクから始めます。
• 現在のページは最後の要素とし、リンクにはしません。
• パンくずリストはグローバルナビゲーションのすぐ下に配置します。

実施：アクセシブルなナビゲーションを実装する

• キーボードだけですべて操作できるようにします。
• フォーカスインジケーターを視認できるようにします。
• 論理的なタブ順序とスキップリンクを使用します。
• タッチターゲットのサイズは最低44x44pxにします。
• テキストのコントラスト比は最低4.5:1、アイコンは3:1を維持します。

禁止：デスクトップでハンバーガーメニューを使う

• 大画面では常にメインナビゲーション全体を表示します。
• 十分なスペースがある場合、アイコンの背後にナビゲーションを隠してはいけません。

禁止：階層を深くしすぎる

• ナビゲーション階層は3段を超えないようにします。
• ドロップダウンメニューは2～3段に抑えます。

禁止：独創的な方法でナビゲーションを隠す

• 慣例にない位置へのナビゲーション配置は避けます。
• 主要なナビゲーション項目に、テキストラベルのないアイコンを使用してはいけません。

パターン

ウェブサイトの種類別ナビゲーションの考え方

ウェブサイトの種類	推奨されるナビゲーション
企業サイト	横方向のメインナビゲーション＋フッター＋パンくずリスト
Eコマース	メガメニュー＋フィルター付き検索＋パンくずリスト
ブログ	メインナビゲーション＋カテゴリー／タグナビゲーション＋ページネーション
ポートフォリオ	ミニマルなナビゲーション、カテゴリー別フィルター、控えめなデザイン
コンテンツポータル	多階層ナビゲーション＋タグ＋充実した検索機能＋パンくずリスト
1ページ構成のサイト	スクロールナビゲーション＋トップへ戻るボタン

メガメニュー

ECサイトや大規模なコンテンツポータル向けです。全幅のドロップダウンに複数列のレイアウトを採用し、階層は最大2〜3レベルにします。カテゴリーのビジュアルプレビューを表示し、最も重要なカテゴリーは左側に配置します（視線追跡の結果を参考にします）。詳細は references/navigation-patterns.md をご覧ください。

サイドバーナビゲーション

Webアプリケーション、ダッシュボード、ドキュメントサイト向けです。左側に縦型のナビゲーションを配置し、折りたたむとアイコンのみが表示され、ホバーまたはクリックでラベル全体が表示されます。

スクロールナビゲーション（ワンページ）

ポートフォリオサイトやイベントのランディングページ向けです。ナビゲーション項目をクリックすると該当セクションまでスクロールし、スクロール位置に応じてアクティブな項目がハイライトされます。所定のスクロール量に達した後、「トップに戻る」ボタンを表示します。

サイト内検索

サブページが約100ページ以上ある場合に導入します。ヘッダーに検索フィールドを設置し、目立つようにします。大規模なWebサイトではオートコンプリートを追加します。検索結果がない場合は、代替の候補を表示するページを用意します。

アンチパターン

汎用的なメニュー項目のラベル

「サービス」「製品」「その他」のように、内容が具体的でないラベルを使います。ユーザーは何が表示されるのか予測できません。解決策：「Webデザインパッケージ」「WordPressテーマ」のように、具体的なラベルを使用します。

メニュー項目が多すぎる

メインナビゲーションの項目が10個以上あると、ユーザーを圧倒し、意思決定を遅らせます。**解決策：**項目は最大7個にします。二次的なリンクはメタナビゲーションまたはフッターに移動します。

ラベルなしのアイコンのみのナビゲーション

アイコンは意味が曖昧です。アイコンの慣習をすべてのユーザーが知っているとは限りません。**解決策：**アイコンには必ずテキストラベルを組み合わせ、少なくともツールチップでラベルを表示します。

タッチデバイスでホバー時に開くドロップダウン

ドロップダウンメニューはタッチデバイスでは機能しません。**解決策：**切り替えオプション付きのホバーメニューを使用します。1回目のタップでメニューを開き、2回目のタップで移動します。

戻るボタンが正しく機能しない

ブラウザーの戻るボタンが正しく機能しません（SPAのルーティングエラー）。**解決策：**History APIを正しく実装します。

チェックリスト

構造

• ナビゲーションを作成する前に情報アーキテクチャを策定する
• メインナビゲーションの項目は最大5〜7個にする
• 階層は最大3レベルにする
• 最も重要なリンクを先頭と末尾に配置する

命名

• メニュー項目は説明的で、ターゲットユーザーの言葉遣いにする
• メニュー項目とURLにキーワードを組み込む
• すべてのページで一貫した命名を使用する

要素

• ロゴからホームページに移動できるようにする（左上）
• デスクトップではメインナビゲーションを常時表示する
• ハンバーガーアイコンはモバイルでのみ表示する
• メタナビゲーションを設置する
• 二次リンクをグループ化したフッターナビゲーションを設置する
• 階層が2レベルを超える場合はパンくずリストを表示する
• サブページが100ページを超える場合は検索機能を設置する

視覚的なフィードバック

• アクティブなメニュー項目を視覚的にハイライトする
• リンクがリンクとして認識できるようにする
• キーボード操作時にフォーカスインジケーターを表示する

アクセシビリティ

• キーボードだけで完全に操作できる
• スキップリンクを設置する
• ナビゲーション領域にARIAラベルを設定する
• 最小コントラスト比4.5:1を維持する
• タッチターゲットを少なくとも44x44pxにする

関連項目

• usability -- 使いやすさの中核となる要素としてのナビゲーション
• responsive-design -- レスポンシブナビゲーション（ハンバーガーメニュー、ブレークポイント）
• accessibility -- アクセシブルなナビゲーション（WCAG、キーボード、ARIA）
• ui-design -- ナビゲーション要素のビジュアルデザイン
• branding-identity -- ブランドとの接点としてのナビゲーション