パンくずと経路案内システム は何をしますか？
目的
パンくずと経路案内システムは、メインコンテンツの上に配置される二次ナビゲーショントレイルを設計するための方法論を提供します。これにより、ユーザーは深い情報アーキテクチャ（IA）の中で「迷子」になることがなくなり、現在の位置をホームページまたはルートディレクトリから見た明確な線形マップとして把握できます。このシステムは、ナビゲーションの正確さと視覚的な軽さのバランスを取り、ユーザーがコンテキストを理解し、ワンクリックで親階層に戻れることを保証します。
使用例
- Eコマース: カテゴリ > サブカテゴリ > 商品 のナビゲーション
- ドキュメント・Wiki: ボリューム > 章 > 節 > ページ の移動
- SaaSダッシュボード: アカウント > プロジェクト > アセット のようなネストされたエンティティ管理
- ディレクトリサイト: 地域 > カテゴリ > リスティング のブラウジング
- 検索結果: 検索で見つかった特定のアイテムへのパスを表示
使用すべきでない場合
- フラットなアーキテクチャ: サイトが1〜2階層（ホーム > ページ）しかない場合、パンくずは不要なノイズになります。
- 直線的な進行: ステップ形式のウィザードやチェックアウトフローでは、代わりに
step-progress-systemを使用します。 - 動的/非階層的なパス: ユーザーのパスが固定構造ではなくセッション履歴に基づく場合（例：「検索結果に戻る」）、代わりに「戻る」ボタンを使用します。
- ランディングページ: 目標が単一のコンバージョンであり、ナビゲーションが主要なCTAから注意をそらす場合。
入力
- 情報アーキテクチャ (IA): サイトの階層構造マップ
- 現在のノード: ユーザーが現在表示している特定のページ
- 親階層: 現在のページからルートまでの祖先の連鎖
- 表示制約: 利用可能な水平幅（
responsive-grid-systemから）
出力
- 経路案内図: ラベル、区切り文字、リンクの定義された構造
- トランケーション戦略: 小さな画面やオーバーフローシナリオでの長いパスを処理するルール
- レスポンシブマッピング: トレイルがモバイルビューポートで折りたたまれる、または変換される方法
- セマンティックアクセシビリティレイヤー: スクリーンリーダー向けの定義されたARIAロールとラベル
ワークフロー
1. 階層パスのマッピング
ホーム/ルートから現在のページまでの絶対パスを特定します。
例: ホーム > リソース > ホワイトペーパー > [現在のページタイトル]
2. ビジュアルアナトミーの定義
各コンポーネントのスタイルを確立します。
- リンク: 標準リンクスタイル（
interactive-state-systemから） - 区切り文字: 非インタラクティブな記号（例：
/、>、→）で、階層を視覚的に区別します。 - 現在のページ: クリック不可のプレーンテキストラベルで、ユーザーの現在地を確認します。
3. 空間リズムの確立
fluid-spacing-system を適用します。
- ギャップ: リンクと区切り文字の間には、一貫性のある小さなスペース（例：
--space-xs）を使用します。 - 垂直配置: トレイルはメインの
<h1>の上、かつグローバルサイトヘッダーの下に一貫して配置します。
4. トランケーションとオーバーフローの実装
深いパス（4階層以上）や長いタイトルの場合:
- 中央トランケーション: 合計幅がコンテナを超える場合、中間階層を省略記号（
...）に折りたたみます（例：ホーム > ... > セクション > ページ）。 - ラベルトランケーション: 個々の長いラベルには
max-widthとtext-overflow: ellipsisを使用し、折り返しを防ぎます。
5. レスポンシブ適応の計画
モバイル体験をマッピングします。
- 「親に戻る」パターン: 非常に小さな画面では、フルトレイルを単一の「<- [親]に戻る」リンクに置き換えてスペースを節約します。
- 水平スクロール: フルトレイルを保持する必要がある場合、パンくずリストを水平スクロール可能にします。
決定ルール
- 「常にルート」ルール: トレイルの最初の項目は常に機能的なルート（通常は「ホーム」）でなければなりません。
- 現在のページ状態: パンくずの最後の項目（現在のページ）はリンクにしてはいけません。これにより、ユーザーが既にいるページへのリンクをクリックすることを防ぎます。
- 論理 vs 履歴: パンくずはサイト構造を反映しなければならず、ユーザーのブラウザ履歴を反映してはいけません。
- 区切り文字の視覚的優先度: 区切り文字はリンクよりも視覚的な重みを低く（例：薄い色）して、注意を競わないようにします。
制約
- アクセシビリティ:
<nav>要素でaria-label="Breadcrumb"と共にラップし、順序付きリスト（<ol>）アイテムを含める必要があります。これによりスクリーンリーダーが位置と総数を通知します。 - コントラスト: リンクと区切り文字はWCAG AA (4.5:1) の要件を満たす必要があります。
- タッチターゲット: パンくずリンクは、表示テキストが小さくても、WCAG 2.2 SC 2.5.8 の最低24x24pxの要件を満たす必要があります。
- 長さ: パンくずラベルはページタイトルと完全に一致させるか（タイトルが極端に長い場合は短縮バージョンを使用）、一致させる必要があります。
よくある失敗パターン
- 「ホーム喪失」: ホーム/ルートへのリンクを含めないため、ユーザーはメインメニューからやり直さざるを得なくなる。
- リンク過剰: 現在のページをクリック可能なリンクにしてしまい、同じページを再読み込みしてユーザーを混乱させる。
- 視覚的競合: 区切り文字が大きすぎたりコントラストが高すぎたりして、トレイルが読みにくくなる。
- 折り返しの破綻: モバイルでパンくずが3行以上に折り返され、メインコンテンツがページの下に押しやられる。
- IAの不整合: ユーザーの到達方法によって同じページに異なるパスが表示される。
検証基準
- トレイルはホーム/ルートノードから始まっている。
- 現在のページは最後の項目であり、クリック不可である。
- パンくずは
<nav aria-label="Breadcrumb">ランドマークでラップされ、<ol>リストを含んでいる。 - 視覚的な区切り文字が使用され、リンクよりもコントラストが低い。
- トレイルはモバイルビューポートに適切に適応する（トランケーションまたは「戻る」リンク）。
- アイテム間のスペーシングは一貫しており、流体スペーシングシステムに従っている。
- キーボードユーザーは
Tabキーで中間リンク間を移動できる。