長いサービス紹介ページの目次は、読者が探す情報へ直接進めるときに役立ちます。見出しをすべて並べる前に、よく探す項目と移動先を決めます。実装を依頼するときは、リンク名・移動先の見出し・固定ヘッダーとの重なり・スマートフォンでの並べ方を一組にします。
顧客の営業支援やサービス紹介を担う制作会社・広告会社では、特徴、導入の流れ、料金、よくある質問を一つのページにまとめることがあります。初めて全体を読む人と、商談後に条件だけを確かめたい人では、必要な入口が異なります。ページ内リンクは、同じページの途中へ移動するためのリンクです。
目次は、読者が探す項目を選んで置く
短いページなら、見出しを追うだけで目的の情報へ着けることもあります。長さだけで目次を必須にせず、営業担当へ届く質問や原稿の構成を基に判断します。項目が増えすぎる場合は、似た内容をまとめたり、詳しい説明を別ページへ分けたりする案も比べます。
リンク名は「詳細はこちら」よりも、「導入までの流れ」「料金に含む内容」のように移動先が分かる表現にします。目次の言葉と移動先の見出しが大きく違うと、着いた場所が正しいか迷いやすくなります。デザイン上の短さだけでなく、読者が探す言葉を残します。
架空例：設備点検サービスの紹介ページ
以下は、架空の設備点検サービスを紹介するページの依頼例です。実在する顧客やGreenCodingの実績ではありません。営業後に「どこまで対応するか」「依頼後にどう進むか」を読み返す場面を想定しています。
| 目次のリンク名 | 移動先で示す内容 |
|---|---|
| 点検の対応範囲 | 対象設備、対応できる作業、別途相談になる条件。 |
| 依頼から報告まで | 事前資料、日程調整、当日の作業、報告の流れ。 |
| 料金に含む内容 | 費用の適用範囲と、追加見積になる条件。 |
依頼メモ：導入文の下に上の三項目を置く。PCでは横並び、スマートフォンでは読みやすい縦並びを基本とする。押すと同じページ内の該当見出しへ移動し、新しいタブは開かない。固定ヘッダーの下に見出し全体が見える位置へ止める。目次を画面に常時固定するかどうかは、本文を読む面積と比べて決める。
この例では、ページ内リンクと申し込みボタンを区別します。料金を読むためのリンクを押しただけで、フォームへ移動する仕様にはしません。「料金の説明を読む」と「見積を相談する」を別の行動として設計すれば、リンク先の取り違えを検収しやすくなります。
リンク先の目印は、見出しが変わっても管理する
MDNのリンク要素の解説では、ページ内の要素に付けたidという識別名へ移動する例を示しています。たとえば見出しに「service-scope」という目印を付け、リンク先を「#service-scope」にすると、その見出しを参照できます。同じページ内で目印が重複しないようにします。
原稿の見出しを変えるたびに目印まで変わる方式では、以前共有したリンクが目的の位置を指さなくなる可能性があります。見出しの文言と目印をどう管理するかを実装担当と決め、項目の削除時には目次も直します。別ページから途中の項目へ案内する場合は、ページURLに目印を付けた状態で直接開けるかも確認します。
スクロール位置とキーボード操作を別々に確かめる
画面の上に固定したヘッダーがあると、移動先の見出しがその裏に隠れることがあります。PCだけでなく、ヘッダーの高さや行数が変わるスマートフォンでも、見出しと最初の説明が読める位置を確認します。動きを付ける演出は必須にせず、閲覧を妨げない方法を選びます。
WCAG 2.2のフォーカスを隠さないための解説は、キーボード操作の対象がページ側の表示で完全に隠れないことを説明しています。これはすべての見出しを対象とする規則ではありません。本稿では、見出しの見え方に加え、Tabキーで選んだリンクやボタンの位置も別に確認する実務上の提案として扱います。
- 押して移動：各リンクが対応する見出しへ進み、文字が固定部分に隠れないかをPCとスマートフォンで確かめます。
- キーボードで移動：Tabキーでリンクを選びEnterキーで開きます。選択位置が見え、移動後の操作先を追えるか確認します。
- URLから直接開く：目印付きURLを開き、目的の情報へ着くか確認します。原稿更新後も目次と移動先を照合します。
GreenCodingへは、目次と移動先の対応表を渡せる
GreenCodingには、支給デザインへのページ内リンクの実装、スマートフォン表示の調整、固定ヘッダーとの重なりの修正、WordPressで見出しを更新するときの扱い、公開前後の動作確認を相談できます。ページ原稿、選びたい目次、固定する要素、更新担当を共有してください。リンクの見た目と移動後の状態まで含めて、任せる工程を具体化できます。