coastdigitalgroup/coastai-skills - サイトナビゲーションシステム

サイトナビゲーションシステム

目的

Site Navigation System スキルは、ウェブサイトの構造経路を整理し設計するための方法論を提供します。これにより、ユーザーが自身の位置を把握し、情報を素早く見つけ、あらゆるデバイスにおいてセクション間をシームレスに移動できるようになります。堅牢なナビゲーションシステムは、情報の密度と明確さのバランスを取り、アクセシビリティと視覚的階層を維持します。

ユースケース

• 新規ウェブサイトのグローバルヘッダーとフッターの設計。
• 複雑なサイトの情報アーキテクチャ（IA）の再構築。
• レスポンシブナビゲーションパターン（モバイルドロワー、メガメニューなど）の実装。
• コンテンツの多いサイトでの「道案内」の改善（パンくず、サブナビゲーション）。
• 既存のナビゲーションのアクセシビリティとユーザビリティのギャップに関する監査。

使用すべきでない場合

• ルーティングが最小限のシングルページアプリケーション（SPA）: 単一のビュー内で純粋に機能的なナビゲーションの場合（例: シンプルなダッシュボードツール）。
• 没入型/実験的サイト: ナラティブや芸術的な目的で標準的なナビゲーションの慣例を意図的に避ける場合。
• スタンドアロンのランディングページ: 目的が単一のコンバージョンパスであり、グローバルナビゲーションがユーザーの注意をそらす可能性がある場合（ただし、「トップに戻る」リンクや最小限のアンカーナビゲーションは依然として使用される場合があります）。

入力

1. 情報アーキテクチャ（IA）: 階層ごとに分類されたサイトマップまたはページのリスト。
2. ユーザーペルソナと目標: ユーザーが最も頻繁に実行する必要があるタスクは何ですか？
3. コンテンツの優先順位: どのリンクが「プライマリ」（グローバル）、「セカンダリ」（コンテキスト）、または「ユーティリティ」（ツール/アカウント）ですか？
4. デバイスの制約: ターゲットブレイクポイント、タッチ操作とマウス操作の要件。

出力

1. ナビゲーションマップ: ヘッダー、フッター、サブナビゲーション要素の構造ガイド。
2. レスポンシブ戦略: ナビゲーションがデスクトップからモバイルにどのように適応するかの定義。
3. インタラクション仕様: ドロップダウン、アクティブ状態、フォーカス管理の動作。
4. アクセシビリティランドマーク: スクリーンリーダーナビゲーションのための定義されたロールとラベル。

ワークフロー

1. ナビゲーションレベルの分類

サイトマップを機能的な階層に分割します:

• プライマリ: コアサイトセクション（例: 製品、サービス、会社概要）。
• セカンダリ/コンテキスト: 特定のセクションに固有のリンク（例: 特定の製品カテゴリ）。
• ユーティリティ: コアではないが必要なツール（例: 検索、ログイン、言語選択）。
• ターシャリ（フッター）: SEOリンク、法務、ソーシャル、冗長なグローバルリンク。

2. ナビゲーションパターンの選択

コンテンツの密度に基づいてパターンを選択します:

• シンプルバー: 3～7リンク。小～中規模サイトに最適。
• ドロップダウン: 2階層のサイトに最適。
• メガメニュー: 多くのカテゴリを持つ大規模なEコマースやエンタープライズサイトに最適。
• モバイルドロワー: モバイルの標準。すべてのナビゲーションレベルを縦積みに含みます。

3. 道案内のためのデザイン

ユーザーが常に自分がどこにいるかを把握できるようにします:

• アクティブ状態: 現在のページのリンクを視覚的に区別し、支援技術のために aria-current="page" をマークします。
• パンくず: 3階層より深いサイトで使用します。
• 一貫した配置: グローバルナビゲーションはすべてのページで同じ場所に配置します。

4. レスポンシブ動作の定義

ナビゲーションがどのように折りたたまれるかを決定します:

• ブレイクポイントシフト: デスクトップメニューがいつ「ハンバーガー」メニューになるかを正確に決定します。
• プライオリティペアリング: モバイルでは、優先度が高い場合はユーティリティリンク（「検索」など）をドロワーからヘッダーに移動します。
• タッチターゲット: WCAG 2.2 SC 2.5.8（ターゲットサイズの最小値）を24x24px、適切な間隔で満たし、主要な親指操作ターゲットには44x44pxを推奨します。

5. アクセシビリティの確立

• ランドマーク: 一意の aria-label（例: 「メイン」、「フッター」）を付けた <nav> タグを使用します。
• キーボードパス: 論理的なTab順序と、スティッキーヘッダーやオーバーレイによって隠されることのない可視の :focus-visible 状態を確保します（WCAG 2.2 SC 2.4.11 フォーカスが隠されない）。
• スキップリンク: キーボードユーザー向けに「スキップしてコンテンツへ」リンクを提供します。
• ARIA 状態: トグル可能なメニューには aria-expanded と aria-controls を使用します。

決定ルール

• 7リンクルール: 認知負荷を軽減するために、プライマリナビゲーションは7項目以内に制限するようにします（ミラーの法則）。
• 革新性より予測可能性: 標準アイコン（メニューはハンバーガー、検索は虫眼鏡）を使用して、即座に認識できるようにします。
• 視覚的階層: 最も重要なアクション（例: 「はじめる」）はテキストリンクではなく、スタイル付きボタンにします。
• スティッキー vs スタティック: スティッキーヘッダーは、ユーザーがスクロール中に頻繁にナビゲーションにアクセスする必要がある場合にのみ使用します（例: 長文コンテンツやダッシュボード）。

制約

• アクセシビリティ: キーボードのみで完全にナビゲート可能である必要があります。ナビリンクのコントラストはWCAG AA（4.5:1）を満たす必要があります。タッチターゲットはWCAG 2.2 SC 2.5.8を満たします。
• レスポンシブ性: ナビゲーションはビューポートを水平方向にオーバーフローしてはなりません。
• 階層: ナビゲーションはページのH1やプライマリCTAと競合してはなりません。

一般的な障害パターン

• 「ミステリーミート」ナビゲーション: 普遍的に理解されていないラベルのないアイコンを使用する。
• 過剰なヘッダー: 多数のユーティリティリンクを詰め込みすぎて、乱雑さと誤クリックを招く。
• アクセスできないドロワー: キーボードで閉じることができない、または開いているときにフォーカスをトラップしないモバイルメニューを作成する。
• フィードバック不足: ユーザーが現在のページにいる場合やリンクにホバーしている場合の視覚的な変化がない。

検証基準

• ナビゲーションが明確な階層（プライマリ、ユーティリティ、フッター）に構造化されている。
• アクティブ状態が視覚的に区別可能でアクセシブルである。
• モバイルナビゲーションが機能し、すべてのプライマリリンクを含んでいる。
• キーボードユーザーがすべてのリンクにアクセスし、キーボードのみでメニューを閉じることができる。
• ランドマーク（<nav>）が正しく使用され、ラベル付けされている。
• モバイルのタッチターゲットが少なくともWCAG 2.2の24x24pxの最小サイズを満たしている（主要アクションでは44x44pxを推奨）。
• 「スキップしてコンテンツへ」リンクが存在し、機能している。