アンカーリンク：安定したページ内ナビゲーションルール

アンカーリンクは、読者を現在のドキュメントの名前付きセクションに送るページ内リンクです。長いページを耐久性があり、アドレス指定可能な回答の集合に変えます——ただし、すべての宛先に安定した見出しIDがある場合に限ります。

ジャンプ先： アンカーリンクが重要な理由 · 使用するタイミング · 安定IDの構造 · 実装構文 · QAチェックリスト

上記の行は、コンパクトなインライン形式で表示された要素です。各リンクにはフラグメント識別子（# の後の部分）が含まれており、各フラグメントはこのページの1つの見出しに解決されます。

この要素が重要な理由

長いドキュメントは、読む問題の前に検索の問題を引き起こします。検索、サポートチケット、または同僚のメッセージから訪問する人は、全体の議論ではなく1つの制約を求めていることがよくあります。説明的なジャンプリンクはスクロールを不要にし、回答が存在することを訪問者に安心させます。また、非線形的な読書をサポートします。誰かがパラメータを確認し、構造に戻り、その後QAに進むことができ、すべての有用な訪問がイントロダクションから始まるふりをする必要はありません。

心理的な利点は信頼に依存します。リンクテキストは宛先について約束をし、クリックはそれを即座に果たさなければなりません。「もっと詳しく」のような曖昧なラベルは、読者に周囲のコンテキストを覚えておくよう強要します。スティッキーヘッダーの下に着地するリンクは、ブラウザが技術的に正しい座標に到達していても、壊れているように感じられます。ほぼ同一のエントリが25個あるリストは、スキャン作業を減らすどころか、新たなスキャン作業を生み出します。

アンカーリンクは機械の抽出可能性も向上させます。つまり、ソフトウェアがセクションを分離し、完全なページの外部でもその意味を保持する能力です。/guide/#renewal-terms のようなURLは、/guide/ よりも小さな回答領域を特定します。検索システム、ブラウザ拡張機能、ドキュメンテーションツール、AI検索システムは、その領域を直接引用または共有できます。フラグメントは権威を生み出したり引用を保証したりするわけではありませんが、すでに有用なセクションに正確なパブリックアドレスを与えます。

そのアドレスはインターフェースであり、見出しの付随的な副産物ではありません。多くのパブリッシングシステムは、表示されている見出し「Renewal terms」から renewal-terms を生成します。編集者が後で見出しを「How renewals work」に変更すると、ジェネレーターは how-renewals-work を生成する可能性があります。依然として #renewal-terms で終わるすべてのインバウンドリンクは、もはや存在しないIDを指すことになります。これには、他の記事のリンク、ブラウザのブックマーク、キャンペーンメッセージ、ヘルプセンターの返信、検索結果、引用されたAI回答が含まれます。ページURLは依然として正常に返されるため、回帰が隠れてしまう可能性がありますが、訪問者は約束されたセクションレベルの宛先を失います。

ナビゲーションを追加する前に、要素の執筆ルール に従ってください。優先順位ルールは依然として適用されます。アンカーリンクはコンテンツ要素にナビゲートするものであり、必要な定義、比較、警告、FAQ、またはその他の型付きブロックを置き換えるものではありません。見出しシステム がドキュメント階層と見出しに付随する安定したIDを管理します。アンカーリンクはそれらのIDを消費します。

使用するタイミング

読者が独立して必要とする可能性のある複数の宛先がページに含まれている場合にアンカーリンクを使用します。適したケースとしては、個別のパラメータを持つ長いリファレンス、セットアップとトラブルシューティングのセクションがあるドキュメント、別々の方法論と調査結果があるレポート、名前付きの義務があるポリシー、質問グループがあるFAQハブなどがあります。

以下の条件の少なくとも1つが当てはまる場合に、表示可能なジャンプリンクセットを使用します。

• ページに5つ以上の意味のあるH2セクションがあり、読者が異なる目的でページにアクセスする可能性が高い。
• ページが1,800語以上で、セクションを非線形的に理解できる。
• サポート、営業、法務、または編集チームが定期的に個別のセクションへのリンクを共有している。
• セクションが独立して引用、ブックマーク、再訪問、または更新される可能性が高い。
• モバイル読者が予測可能な回答に到達するためにかなりのスクロールを必要とする場合。

表示可能なジャンプリンクリストがなくても、実質的な見出しにはそれぞれIDを付与しても構いません。安定した宛先は維持するのは安価で、リンクが流通した後に再構築するのは高価です。

惜しいケースでは自制が求められます。3ステップの線形手順は通常、読者を順序通りに進めるべきであり、ジャンプリストがあると前提条件を飛ばす誘因になりかねません。見出しがすでにファーストビューに表示されている短いページには、有用なナビゲーションは追加されません。タブやアコーディオンコントロールは、ドキュメントの場所にナビゲートするのではなく、インターフェースの状態を切り替えるものであるため、アンカーリンクの代わりにはなりません。ページネーションリンクはドキュメント間を移動します。別のページへのリンクは、その宛先にたまたまフラグメントが含まれていても、内部リンクです。

キーワード戦術としてアンカーを追加したり、より多くのフラグメントURLを得るために余分な見出しを製造したりしないでください。ナビゲーションの単位は、明確な目的とリンクラベルを満たすのに十分なコンテンツを持つ実際のセクションでなければなりません。

配置する場所

ページレベルのジャンプリンクグループは、ヒーロー、ダイレクトアンサー、または簡潔なスコープ記述の後に、最初の主要な本文セクションの前に配置します。読者は、ページを通るルートを選択する前にページを理解する必要があります。ページがクイック概要と目次 も使用している場合は、同じ宛先のリストを2つ追加しないでください。目次はアンカーリンクの1つの表現です。ナビゲーションを複製する代わりに、その要素を設定または簡略化してください。

ローカルのジャンプリンクグループは、アルファベット順のディレクトリやマルチパートのAPIリファレンスなど、それが制御する範囲の直前に配置します。範囲を指定するラベルを付けます。「このページの製品ファミリーにジャンプ」は、別の汎用的な「このページ内」よりも明確です。インラインの相互参照は、宛先が有用になる文の中に配置し、ターゲットを名前で示す言葉を使用します。

アンカーナビゲーションを配置してはいけない場所：

• 見出しとそれに回答する段落の間。
• 主張とそのエビデンス、限定、または出典の間。
• 同じクリックを競合する無関係なCTA、広告、ニュースレターフォーム、またはプロモーションカードの隣。
• 別のリンク、ボタン、見出し、またはインタラクティブコントロールの内部。
• ナビゲーション後にターゲット見出しを覆うスティッキー領域内。
• 読者が発見するのを助けるためのコンテンツの後。

スティッキーサイトヘッダーが72ピクセルの場合、ターゲットにはその分のスクロールオフセットと快適な余白が必要です。空のスペーサー要素を挿入したり、JavaScriptでフラグメントを変更したりするのではなく、一貫した scroll-margin-top で宛先側で解決してください。

構造

アンカーリンクシステムには7つの部分があります：

1. ナビゲーションラベル： セットに名前を付けます。通常は「このページ内」またはスコープ固有の代替表現です。
2. リンクテキスト： 周囲の文なしで読んだときに宛先を説明します。
3. フラグメントhref： 現在のページの場合は # で始まります（例：#renewal-terms）。
4. ターゲットID： 宛先の一意の値で、# なしのhrefと完全に一致します。
5. 宛先見出し： 到着した読者にどこに着地したか、その後に何が続くかを伝えます。
6. 到着オフセット： スティッキーインターフェースクロームの下に見出しを表示したままにします。
7. インタラクション状態： ホバー、キーボードフォーカス、適切な場合の訪問済み状態、および現在位置を知覚可能にします。

表示される見出しとIDは関連していますが同一ではありません。見出しは明確化のために変更されることがあります。一度公開されると、セクションが同じ目的を保持している限りIDは固定されます。IDは小文字のASCII文字、意味のある場合は数字、およびハイフンを使用します。#cancel-subscription は移植性がありますが、#Section 4! は移植性がありません。

デザイン例

すべてのバリアントは同じリンク対IDの契約を使用します。バリアントは新しい宛先動作を発明するのではなく、コンテキストと密度によって異なります。

コンパクトインライン： 冒頭付近に3〜6つの同等の宛先を使用します。折り返しを許可し、区切り文字をアクセシブルなリンク名の外に保ちます。

スタックリスト： ラベルに余裕が必要な場合や、スキャン性が縦方向のスペースよりも重要な場合に、5〜12の宛先を使用します。これは長いガイドやポリシーのデフォルトです。

ネストリスト： H2の宛先を主要ルートとして使用し、実質的なH3の子のみを含めます。深さは2レベルのナビゲーションに制限します。より深いツリーはドキュメンテーションナビゲーションに属します。

ローカルインデックス： 文字、カテゴリ、または参照グループを使用して1つの範囲内をナビゲートします。存在しない宛先は、空や偽のターゲットを持つリンクではなく、無効に見えるプレーンテキストとして表示します。

見出しパーマリンク： 読者が個別のセクションを頻繁に引用する場合、見出しの横に小さなリンクコピーコントロールを提供します。そのアクセシブル名には「Renewal termsへのリンクをコピー」のように見出しを含める必要があります。見出し自体はテキストのままであり、1つの大きな自己リンクにはなりません。

インライン相互参照： ある箇所が別のセクションに依存する場合、通常の文のリンクを使用します。「ここにジャンプ」よりも「更新条項を確認する」を推奨します。

パラメータ

コレクションと各宛先には個別のフィールドがあります。ポータブルディレクティブ本体の最初の見出しは、デフォルトの本文ルールに基づきナビゲーションラベルにマッピングされ、後続のリストアイテムがリンクを提供します。

編集上のアイテムターゲットは、技術的最大値よりも意図的に小さく設定されています。ページに18の宛先が必要な場合は、まず関連セクションをグループ化し、生成された目次を使用するか、ドキュメントを分割します。A-Zインデックスは、その順序とラベルがすでに予測可能であるため、唯一の例外です。

構文とコード例

ポータブルソースはリンクテキストとフラグメントを明示的に保存するため、公開されたIDを失うことなくレンダラー間で移動できます。

ポータブルMarkdownディレクティブ

:::anchor-links{variant=stacked depth=1}
### このページ内

- [資格](#eligibility)
- [必要書類](#required-documents)
- [更新条項](#renewal-terms)
:::

## 資格 {#eligibility}

最初の本文見出しが label になり、リストが content となり items を提供します。ページが初めて公開されたときに宛先IDを固定します。

Hugoショートコード

{{< anchor-links variant="stacked" label="On this page" >}}
- [資格](#eligibility)
- [必要書類](#required-documents)
- [更新条項](#renewal-terms)
{{< /anchor-links >}}

## 資格 {#eligibility}

これはHugoアダプターの契約であり、このリポジトリがすでに anchor-links ショートコードを登録しているという主張ではありません。Hugoの実装は、.TableOfContents からリストを生成したり、通常のMarkdownリンクをレンダリングしたりできます。ただし、同じID、セマンティクス、制限、アクセシビリティ動作を維持することが条件です。

WordPress

<!-- wp:group {"tagName":"nav","ariaLabel":"On this page"} -->
<nav aria-label="On this page">
  <ul>
    <li><a href="#eligibility">資格</a></li>
    <li><a href="#required-documents">必要書類</a></li>
    <li><a href="#renewal-terms">更新条項</a></li>
  </ul>
</nav>
<!-- /wp:group -->

<!-- wp:heading {"level":2,"anchor":"eligibility"} -->
<h2 id="eligibility">資格</h2>
<!-- /wp:heading -->

公開された宛先については、WordPressの「高度」→「HTMLアンカー」フィールドを明示的に設定してください。変更された表示テキストからIDをテーマやプラグインが再生成することに依存しないでください。

例

良い例：ラベルとIDが編集上の改善後も存続する

**このページ内**

- [総費用を計算する](#calculate-total-cost)
- [契約条件を比較する](#compare-contract-terms)
- [プランを選ぶ](#choose-plan)

## 年間契約と月間契約の条件を比較する {#compare-contract-terms}

これが機能する理由は、ナビゲーションラベルが明確な回答を予測し、IDが読みやすく一意であり、見出しが公開された #compare-contract-terms アドレスを変更せずに具体性を増すことができるためです。表現の改善前に作成された引用も、正しいセクションに到達します。

悪い例：生成されたIDが使い捨てとして扱われる

- [詳細情報](#more-information)
- [ここをクリック](#section-4)
- [料金](#pricing-2026)

## 新料金の詳細

これが失敗する理由は、2つのラベルが周囲のコンテキストを必要とすること、section-4 が意味ではなく位置をエンコードしていること、pricing-2026 が年が変わると誤解を招くものになることです。見出しも古い id="pricing-2026" を保持せずに変更されているため、既存のインバウンドフラグメントは解決できなくなっています。リストエントリの名前を変更しても、すでに他の場所で公開されているリンクを修復することはできません。

スキーママークアップとアクセシビリティ

アンカーリンクは専用のSchema.orgタイプにフィードしません。<ul> を使用しているという理由だけでジャンプリンクリストを ItemList としてマークしないでください。その目的はナビゲーションであり、ランク付けされたまたはキュレーションされたエンティティのコレクションではありません。宛先セクションは Article、FAQPage、HowTo、またはその他の適切なページレベルのスキーマタイプに表示コンテンツを提供する場合がありますが、フラグメント自体は別個の構造化データではありません。

ネイティブの <a href="#target-id"> リンクを使用します。ページレベルまたはローカルのグループが個別のナビゲーション領域である場合は、<nav aria-label="On this page"> でラップします。ネイティブアンカーに role="link" を追加しないでください。各ターゲットIDは一意でなければならず、hrefは大文字小文字も含めて正確に一致する必要があります。

キーボードユーザーには表示可能なフォーカスインジケーターが必要です。タッチターゲットには誤操作を避けるための十分な間隔が必要です。リンクテキストは、色、近くの散文、またはタイトル属性に依存せずに宛先を特定できなければなりません。コピーパーマリンクコントロールがボタンを使用する場合、フォーカスを予期せず移動させずに成功を通知します。

フラグメントナビゲーションは、ターゲット見出しをスティッキーヘッダーの下に表示したままにしなければなりません。ターゲットにはCSSの scroll-margin-top を推奨します。スムーススクロールはオプションであり、動きの軽減設定を尊重しなければなりません。ネイティブのリンク動作をキャンセルしたり、ブラウザ履歴からフラグメントを削除したり、URLを更新せずにスクロール位置を変更したりするJavaScriptは避けてください。

通常のフラグメントクリックごとに自動的にフォーカスを移動しないでください。ネイティブのブラウザ動作は予測可能なままにしておく必要があります。カスタムメニューや開示ウィジェットがアクティブ化後に閉じ、フォーカスが失われる可能性がある場合は、tabindex="-1" を付けた見出しなど、フォーカスを受け取れるターゲットに意図的にフォーカスを移動し、キーボードとスクリーンリーダーナビゲーションでテストします。永続的なナビゲーションコントロールは、状態が正確に更新されている場合に限り、aria-current="location" で現在の宛先を示しても構いません。

執筆ルール

宛先は、ページのアウトラインが安定してから、リンクが流通する前に記述します。文の先頭を大文字にする文ケースと、具体的な名詞または動詞を使用します。コピーされたリンク、スクリーンリーダーのリンクリスト、機械による引用は元の視覚的コンテキストから切り離される可能性があるため、ラベルは単独でも意味をなすようにします。

• 表示グループには3〜12のリンクを使用し、コンパクトな冒頭セットでは5〜8を推奨します。
• ラベルは2〜10語、70文字以内に抑えます。
• デフォルトでH2の宛先を含めます。H3は独立したニーズに回答する場合のみ含めます。
• グループ内では1つの文法パターンを維持します：すべて質問形、すべて名詞句、またはすべて命令形動詞。
• IDは小文字、ハイフン区切りで1〜8トークンを使用します。文字で始め、句読点、絵文字、発音記号、期限切れになる日付、位置番号は省略します。
• すべての公開IDを固定します。セクションの目的が同じである場合、表示見出しはIDを変更せずに変更できます。
• 廃止されたIDを無関係なコンテンツに再利用しないでください。古いリンクが異なる主張に着地しながら機能しているように見えてはなりません。
• 引用、脚注マーカー、価格、プロモーションバッジ、緊急性を主張する表現をナビゲーションラベルに入れないでください。
• ボタン、フォームコントロール、画像、または別のリンクをアンカーリンク内に配置しないでください。
• 「ここをクリック」「もっと読む」「詳細」「セクション」を完全なラベルとして使用しないでください。

セクションが削除された場合は、古いフラグメントが約束していたものを判断します。そのコンテンツが同じページの同等のセクションに移動した場合は、プラットフォームが複数のアンカーをサポートしている場合に限り、新しい宛先に隣接して古いIDをエイリアスとして保持します。同等のものが存在しない場合は、古いIDを別のセクションに静かに付与しないでください。削除を記録し、既知のすべての内部参照を更新します。

使用する投稿タイプ

postTypes フロントマター配列がこの関係を駆動します。含まれているということは、そのフォーマットが安定したセクション宛先から一般的に恩恵を受けることを意味します。短いインスタンスすべてに表示可能なジャンプリストが必要であることを意味するわけではありません。

QAチェックリスト

• ページに実際の非線形ナビゲーションのニーズがあり、リストが装飾ではない。
• すべての表示リンクラベルが、単独で読んだときにその宛先を説明している。
• すべてのhrefが同一ページリンクでは # で始まり、既存のターゲットIDと正確に一致している。
• すべてのターゲットIDが一意で、小文字で、読みやすく、一時的な日付や位置番号が含まれていない。
• 公開されたIDが以前のリリースと比較され、移行が文書化されている場合を除き変更されていない。
• 表示見出しの名称変更において、セクションの目的が変わらない場合は古いIDが保持されている。
• 削除または統合された宛先が、異なるコンテンツのために古いIDを再利用していない。
• グループには3〜12の有用なアイテムが含まれている（正当なA-Zローカルインデックスを除く）。
• H3の宛先は、実質的でH2の下に正しくネストされている場合のみ表示されている。
• グループが目次や隣接するナビゲーションコンポーネントによって重複されていない。
• ナビゲーションが見出しとその回答、主張とそのエビデンス、または必要な順序を妨害していない。
• グループがネイティブリンクを使用し、明確な場合は名前付きナビゲーションランドマークを使用している。
• キーボードフォーカスが表示可能で、論理的な順序に従っている。
• ターゲット見出しがデスクトップおよびモバイル幅でスティッキーヘッダーの下に表示されたままになる。
• スムーススクロールが存在する場合、動きの軽減設定が尊重されている。
• リンクコピーコントロールが宛先を名指しし、フォーカスを失うことなく成功を通知する。
• 各完全なURLとフラグメントを直接読み込んだ際、新しいページ読み込み後に意図したセクションに着地する。
• 既知のインバウンド内部リンク、サポート資料で使用されているブックマーク、引用されたフラグメントURLが編集後にリグレッションテストされている。

ページ自体は読み込まれるが、既知のフラグメントが解決できなくなった場合は公開を拒否します。壊れたアンカーは、ページレベルの監視が成功レスポンスを報告している場合でも、セクションレベルでの壊れたインバウンドリンクです。

FAQ

上記の質問は、公開後にアンカーナビゲーションを最も頻繁に壊すメンテナンス上の決定をカバーしています。それらの信頼できる回答は構造化された [[faq]] フロントマターに格納されているため、表示可能なFAQ出力と該当するスキーマ出力の両方が同じソースを使用できます。