目次（ToC）システム

目次（ToC）システム は何をしますか？

目的

目次（ToC）システムは、単一ページまたはドキュメントの構造を反映したページ内ナビゲーションメニューを設計するための方法論を提供します。長文コンテンツにおける「スクロール疲れ」の問題を解決し、ページの階層構造を常に視覚的にマッピングすることで、ユーザーが現在のコンテキストを理解し、位置を見失うことなく特定のセクションに瞬時にジャンプできるようにします。

使用例

• ドキュメント＆テクニカルガイド： 見出しやサブ見出しの深い階層をナビゲートする場合。
• 長文記事＆ブログ投稿： 2,000語以上の編集コンテンツにロードマップを提供する場合。
• 複雑なランディングページ： ユーザーが機能、価格、FAQセクション間をジャンプできるようにする場合。
• 法的＆ポリシーページ： 密度の高い条項や番号付きセクションをナビゲートする場合。
• リソースハブ： 単一ページ上の長いリンクリストやツールを整理する場合。

使用すべきでない場合

• 短いコンテンツ（3セクション未満）： ページ全体が2回のスクロールでスキャンできる場合、ToCは不要な視覚的ノイズを追加します。
• プライマリサイトナビゲーション： 異なるページ間の移動にはToCを使用しないでください。代わりに site-navigation-system を使用してください。
• リニアウィザード： ユーザーが固定された順序に従う必要があるステップバイステップのプロセスには、step-progress-system を使用してください。
• ミニマリストマーケティング： 目標が単一の中断のないナラティブフローであり、寄り道を避ける場合。

入力

1. 見出し階層： ページ上の <h2> から <h4> タグのマップ。
2. レイアウトコンテキスト： 利用可能な水平スペース（サイドバー vs インライン）。
3. スクロールコンテナ： スクロールが body で発生しているか、特定のオーバーフローコンテナで発生しているか。
4. ブランドトークン： デザインシステムからのスペーシング、タイポグラフィ、および「アクティブ」状態の色。

出力

1. ToCアナトミー仕様： リストアイテム、インデントレベル、および「アクティブ」インジケーターの視覚的定義。
2. スクロールスパイ設計書： ユーザーがスクロールする際に「アクティブ」状態がどのように更新されるかのロジック。
3. レスポンシブ適応マップ： ToCがデスクトップのサイドバーからモバイルのユーティリティ（例：スティッキーヘッダーまたはボトムドロワー）にどのように変換されるか。
4. ウェイファインディング仕様： スムーズスクロール動作とフォーカス管理の定義。

ワークフロー

1. ドキュメントアウトラインの監査

見出し構造を抽出します。クリーンなToCは、論理的な h1 -> h2 -> h3 の進行に依存します。

• プライマリレベル： 通常は <h2> タグから派生。
• セカンダリレベル： <h3> タグから派生（インデント）。
• ターシャリレベル： ドキュメントが非常に密度が高い場合を除き、ToCにはほとんど表示されません。デフォルトで折りたたむことを検討してください。

2. レイアウトパターンの選択

ページレイアウトに基づいて空間配置を選択します：

• 永続サイドバー（右/左）： ワイド画面（デスクトップ）に最適。マップを常に表示したままにします。
• インラインサマリー： 記事の上部に配置。モバイルまたは中程度の長さのコンテンツで「スティッキネス」が不要な場合に最適です。
• スティッキーヘッダー/フローティングバー： ヒーローセクションをスクロールした後にのみ表示される最小化バージョン。

3. 視覚的階層（レベル）の確立

visual-hierarchy-system を適用して深さを示します：

• インデント： 一貫した水平パディング（例：レベルごとに --space-s）を使用して、親子関係を示します。
• タイポグラフィ： プライマリレベル（h2）と比較して、サブレベル（h3）には小さなフォントサイズまたはミュートされた色を使用します。
• インジケーター： リストの左側/右側に垂直な「進行線」を使用して、アイテムを視覚的に接続します。

4. スクロールスパイ（アクティブ）状態の設計

ToCはユーザーのビューポートと同期を保つ必要があります：

• アクティブリンク： 現在ビューポートの上部にあるセクションに対応するリンクをハイライトします。
• 「アクティブ線」効果： 垂直線を使用している場合、アクティブなアイテムの位置にマーカーをスライドさせるアニメーションを設定します。
• フィードバック遅延： アクティブ状態が迅速に（<100ms）更新されることを確認しますが、ヘッダー間をスクロールする際のちらつきを防ぐために小さなバッファを含めます。

5. レスポンシブウェイファインディングの計画

サイドバーは通常モバイルで消えるため、代替手段を提供します：

• モバイルToCトリガー： 画面の上部または下部にあるスティッキーボタン（例：「このセクション内」）で、ドロワーを開きます。
• プログレッシブリビール： スティッキーバーに現在の <h2> のみを表示し、矢印アイコンで完全なリストを展開できるようにします。

決定ルール

• 「3レベル」制限： ToCに3レベルの深さを超えて表示しないでください。コンテンツがより深い場合は、h2 と h3 のみに焦点を当ててToCを簡略化します。
• アイコンよりインデント： 箇条書きやアイコンではなくインデントを使用して階層を示します。アイコンは密度の高いテキストリストを乱雑にする可能性があります。
• アクティブ状態の一意性： ToC内のアイテムは、常に1つだけが「アクティブ」である必要があります。
• スティッキー閾値： ToCは、ビューポートの上部に達した場合にのみスティッキー（固定）になるようにし、ページ読み込み時にすぐに固定しないでください。
• クリックでジャンプ： ToCリンクをクリックする際は、見当識障害を防ぐために「スムーズスクロール」を使用し、URLハッシュ（#section-id）を更新して共有可能にする必要があります。

制約

• アクセシビリティ： ToCは <nav aria-label="Table of contents"> でラップする必要があります。アクティブリンクは aria-current="true"（または aria-current="location"）を使用する必要があります。リンクをタブ移動する際にフォーカスリングが表示されることを確認してください。
• コントラスト： アクティブ状態と非アクティブ状態はWCAG AA（4.5:1）要件を満たしている必要があります。
• レスポンシブ： モバイルでは、ToCがメインテキストコンテンツと重なってはなりません。ドロワーまたはトグル可能なセクションを使用してください。
• コンテンツ同期： ToC内のリンクテキストは、見出しテキストと完全に一致するか（または明確に認識可能な短縮バージョンであること）、正確に一致する必要があります。

よくある障害パターン

• 「古い」状態： スクロールスパイのトリガーポイントが高すぎるか低すぎるために、ToCが間違ったセクションをハイライトする。
• コンテンツ隠蔽： スティッキーToCが、ユーザーが読むのを助けるはずのテキストと重なる。
• 深さの過負荷： すべての h4 と h5 を表示し、ToCがビューポートよりも長くなり、独自のスクロールバーが必要になる（ネストされたスクロールバーは避ける）。
• IDの欠落： 見出しに一致する id 属性がないため、リンクが機能しない。
• 戻るボタンの破損： URLハッシュを更新せずにセクションにジャンプするため、ユーザーがブラウザの「戻る」ボタンを使用してToCに戻ることができない。

検証基準

• h2 と h3 レベルの間に明確な視覚的階層（インデント）がある。
• スクロールスパイが、ユーザーのスクロールに応じてアクティブセクションを正しくハイライトする。
• リンクをクリックすると、正しいセクションへのスムーズスクロールがトリガーされる。
• ToCリンクをクリックすると、URLハッシュが更新される。
• ToCが <nav aria-label="Table of contents"> ランドマークでラップされている。
• アクティブ状態が aria-current を介してアクセス可能である。
• モバイル固有のウェイファインディングパターン（例：ドロワーまたはスティッキーバー）が定義されている。
• 表示される階層は3レベル以下である。