---
title: "コンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準"
url: "https://www.issoh.co.jp/column/details/7708/"
published: 2025-07-15
updated: 2026-10-04
categories: ["Webサイト"]
publisher: "株式会社一創"
---

# コンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準

コンテキストナビゲーションは、サイトの階層ではなく、いま読んでいる内容との関係でリンク先を決める導線です。本文中のリンク、記事末の関連記事、商品ページの「この商品を見た人は」がこれにあたります。全ページ共通のメニューと違い、置く場所もリンク先もページの中身で決まるため、選び方を誤ると読者を脱線させるだけの寄り道になります。この記事では、他のナビゲーションとの境界、4つの形の使い分け、HTMLとWCAGの要件、関連記事を自動で選ぶ実装例、そして置かない方がよい場面までを判断基準つきで整理します。

## まとめ：コンテキストナビゲーション設計の要点

- 見分け方は「何に沿ってリンクを並べているか」です。サイトの階層に沿うならグローバル・ローカル・パンくず、表示中のページの内容との関係に沿うならコンテキストナビゲーションです。
- 形は4つあります。本文内リンク、関連リンク一覧、次の行動へのリンク、閲覧・購入データによるレコメンドです。読者が本文を読み終える前に必要な情報は本文内リンク、読み終えた後に必要な情報は関連リンク一覧へ回します。
- リンク先は「前提知識」「詳細」「比較対象」「次の手順」のどれにあたるかで選びます。タグが同じというだけの記事は候補に留めます。
- リンクテキストは、WCAG 2.2の達成基準2.4.4（レベルA）が求めるとおり、同じ段落・リスト項目の文脈と合わせて行き先が分かる文言にします。「こちら」「詳しくはこちら」は使いません。
- 関連リンク一覧は、本文と関係はあるが本筋から外れた内容として`aside`要素で囲めます。JavaScriptで差し込む場合も、Googleが確実にリンクを抽出できる`href`属性付きの`a`要素で出力します。
- 申込フォームや決済の途中、関連度の低い記事しか出せないページでは置きません。

以下、定義と境界から順に根拠を示します。

## コンテキストナビゲーションの定義と他のナビゲーションとの境界

### 情報アーキテクチャの3分類での位置づけ

コンテキストナビゲーションという語は、情報アーキテクチャ（IA）の定番書『Information Architecture』（Louis Rosenfeld、Peter Morville、Jorge Arango著）の分類で使われています。日本語版[『情報アーキテクチャ 第4版』](https://www.oreilly.co.jp/books/9784873117720/)（オライリー・ジャパン、2016年11月18日発行）の目次では、8章「ナビゲーションシステム」の8.6「埋め込み型ナビゲーションシステム」がグローバル、ローカル、コンテキストの3つを扱います。続く8.7「補足型ナビゲーションシステム」はサイトマップ、サイトインデックス、ガイド、コンフィギュレータ、検索で、ページの外側から全体を見渡す仕組みとして別に分けられています。

グローバルとローカルが「サイトの階層構造」をなぞるのに対し、コンテキストナビゲーションは階層に収まらない関係、つまり「この内容と関係が深い別のページ」を結びます。O’Reillyが2016年7月27日に公開した[同書第4版の抜粋](https://www.oreilly.com/content/the-anatomy-of-an-information-architecture/)は、コンテキストナビゲーションを「関連コンテンツへのリンク」とし、本文中に埋め込まれることが多く、情報環境の中の専門性の高いコンテンツ同士を結ぶものと説明しています。

サイト全体の構造設計は[インフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順](/column/details/7612/)で、IAの4要素の1つとしてナビゲーションを扱っています。

### 階層に沿う導線と内容に沿う導線の判定基準

ナビゲーションの種類は、置き場所ではなく「何に沿ってリンクを並べているか」で見分けると迷いません。パンくずのようにページごとに中身が変わる導線でも、階層をなぞっているならコンテキストナビゲーションではありません。

| 種別     | リンクを並べる根拠     | 主な置き場所         |
| ------ | ------------- | -------------- |
| グローバル  | サイト全体の主要カテゴリ  | ヘッダー           |
| ローカル   | 現在のセクション内の階層  | サイドバー・見出し直下    |
| パンくず   | ルートから現在地までの階層 | 本文の上           |
| コンテキスト | 表示中の内容との関係    | 本文中・記事末・商品詳細の下 |

全ページに同じ「人気記事ランキング」を出している枠は、内容との関係ではなく閲覧数で並んでいるので、コンテキストナビゲーションには含めません。

なお、[WCAG 2.2](https://www.w3.org/TR/WCAG22/#consistent-navigation)の達成基準3.2.3（Consistent Navigation、レベルAA）は「複数のWebページで繰り返されるナビゲーションの仕組み」を、繰り返されるたびに同じ相対順序で出すよう求めています。リンク先が記事ごとに変わっても、「関連記事」の枠そのものが全記事の同じ位置に繰り返し出るなら、その枠は繰り返される仕組みとして扱い、ヘッダーやパンくずなど他の導線との順序を記事間で揃えます。

サイト全体の入口は[SEOに効くグローバルナビゲーションの設計と実装ポイント](/column/details/7706/)、セクション内の移動は[ローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準](/column/details/7707/)、現在地の階層表示は[パンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】](/column/details/16573/)で扱っています。

## コンテキストナビゲーション4つの形と置き場所の使い分け

### 本文内リンクの対象語と隣接リンクの回避

本文中の語にリンクを張る形です。読者が次の文を理解するために前提知識を確認したくなる語、たとえば初出の専門用語や手順の前提となる設定に限って付けます。

Googleのリンクに関するガイド（Search Central[「Link best practices for Google」](https://developers.google.com/search/docs/crawling-indexing/links-crawlable)、2025年12月10日更新）は、リンクを隣り合わせに連ねないよう求めています。理由は2つで、読者がリンクを区別しにくくなることと、各リンクの前後の文脈が失われることです。リンク同士が隣り合い、その間に説明の語が挟まらないなら、片方を関連リンク一覧へ移します。

### 関連リンク一覧による読了後の行き先の提示

記事末やサイドバーに「関連記事」「あわせて読みたい」として並べる形です。本文の途中で読者を外へ出さずに済むので、本筋から少し外れた補足や、同じテーマの別の切り口はこちらに回します。

Nielsen Norman Groupは[2014年の記事](https://www.nngroup.com/articles/related-content-pageviews/)で、記事の終わりには関連コンテンツか明確な行動喚起を必ず置くよう勧めています（「Always offer related content and or strong calls to action at the end of articles」）。最初の疑問に答え終えた読者を行き止まりにしない、という理由です。

本数に公式の基準はありません。Googleのガイドも「1ページに含めるべきリンクの理想的な数はない」とし、そのうえで「多すぎると思うなら、おそらく多すぎる」と書いています。運用上は、各リンクの選定理由を1つずつ説明できる本数を上限にすると、関連の薄い記事が混ざりません。

### 次の行動へのリンクを置く場面と本数の絞り方

手順書の最後に置く「次のステップ」、資料請求ページの「導入事例を見る」、購入完了画面の「使い方ガイド」などです。前出のNielsen Norman Groupの記事も、記事の終わりに置く選択肢として関連コンテンツと並べて「明確な行動喚起」を挙げています。読者が次にとる行動が1つに絞れる場面では、推奨する1本を目立たせます。行き先が複数ありうる場合は、主となる1本を先頭に置き、残りは関連リンク一覧に回して役割を分けます。

### 閲覧・購入データによるレコメンドの2つの選定方式

閲覧や購入のデータから候補を計算して出す形です。方式は大きく2つに分かれます。1つは表示中の商品や記事を起点に、よく一緒に買われた商品や、他の利用者が併せて見た記事を出す方式です。Amazon Personalizeでは`RELATED_ITEMS`レシピがこれにあたり、推薦の取得にはアイテムIDが必須で、ユーザーIDはフィルターを使う場合だけ必要です。もう1つは読者個人の履歴から候補を出す`USER_PERSONALIZATION`型で、同じページでも読者ごとに中身が変わります。

前者は表示中のページを起点にリンク先を決めるので、コンテキストナビゲーションの一種として設計できます。後者は前出の『情報アーキテクチャ 第4版』でも、パーソナリゼーションとして8.6の埋め込み型ではなく8.8「高度なナビゲーションアプローチ」で別に扱われています。レシピの選び方は[Amazon Personalizeとは？レシピ選定とデータ要件・料金の見積もり【2026年版】](/tech/details/15915/)、ECでの導入判断は[ECのレコメンドエンジン導入｜商材別の選び方と実装・CVR改善の設計](/column/details/16125/)で整理しています。

読者ごとに出し分ける枠しかないページは、どの読者に何が表示されるかが一定しません。検索エンジンにも辿ってほしいページへの導線は、個人別の枠だけに頼らず、内容に基づいて固定的に出す関連リンクや本文内リンクにも置きます。

## 前提・詳細・比較・次の手順の4関係によるリンク先の選定基準

コンテキストナビゲーションの質は、何をリンク先に選ぶかでほぼ決まります。同じタグが付いている、同じカテゴリにある、という理由だけで並べると、読者にとって次に読む理由のないリンクが混ざります。リンク先が現在のページに対して次のどの関係にあるかを言えるものだけを選びます。

| 関係   | 読者の状態        | 向く形         | 例           |
| ---- | ------------ | ----------- | ----------- |
| 前提知識 | 用語や前提が分からない  | 本文内リンク      | 初出の専門用語     |
| 詳細   | 一部をもっと深く知りたい | 本文内リンク・関連一覧 | 概要記事から実装記事へ |
| 比較対象 | 他の選択肢と比べたい   | 関連一覧        | 同じ用途の別製品    |
| 次の手順 | 読み終えて行動したい   | 次の行動へのリンク   | 設定手順の次の工程   |

この4つのどれにも当てはまらないリンクは外します。特に「新着記事」「人気記事」は、内容との関係ではなく時期や閲覧数で決まるので、コンテキストナビゲーションの枠に混ぜずに別の枠として扱います。

## コンテキストナビゲーションのHTMLとアクセシビリティの要件

### 関連リンク一覧と本文内リンクのHTML要素の選択

WHATWGの[HTML Living Standard](https://html.spec.whatwg.org/multipage/sections.html#the-aside-element)は、`aside`要素を「周囲の内容と間接的に関係し、本文とは切り離して考えられる内容」を表す要素と定義しています。記事末やサイドバーの関連リンク一覧はこれに当たります。同じ仕様は、本文の流れに含まれる括弧書きのような補足には`aside`を使うべきでないとも書いているため、本文内リンクは段落（`p`）の中に置いたままにします。

`nav`要素について仕様は「ページ内のリンクの集まりがすべて`nav`要素に入る必要はない」とし、主に主要なナビゲーションのまとまりに使う要素としています。記事ごとに変わる数本の関連リンクは主要なナビゲーションではなく本文に付随する内容なので、`aside`の方が意味に合います。

`aside`もランドマークになり得ます。W3Cの[HTML-AAM](https://www.w3.org/TR/html-aam-1.0/)は、`article`や`section`の中ではなく`body`・`main`の範囲に置いた`aside`を`complementary`ロールに対応付けます。`article`などの中に置いた場合も、見出しを`aria-labelledby`で結ぶなどしてアクセシブルな名前を付ければ`complementary`になります。ランドマークは増やしすぎると一覧から目的の領域を探しにくくなるため、関連リンク一覧は1ページに1つの`aside`にまとめ、見出しで名前を付けます。

### WCAG 2.4.4と2.4.9が求めるリンクテキストの要件

WCAG 2.2の達成基準2.4.4（Link Purpose (In Context)、レベルA）は、各リンクの目的がリンクテキスト単体か、プログラムで判別できるリンクの文脈と合わせて判断できることを求めています。HTMLでの「文脈」は、同じ段落、同じリスト項目、同じ表のセル、そのセルに関連付けられた見出しセルに含まれるテキストです。

つまり、本文内リンクは段落の中で行き先が分かれば2.4.4を満たします。一方、スクリーンリーダーにはリンクだけを一覧表示する機能があり、そこでは文脈が見えません。レベルAAAの2.4.9（Link Purpose (Link Only)）はリンクテキスト単体で目的が分かることを求めており、関連リンク一覧では、記事タイトル単体で内容が分かる場合に限り、タイトルをそのままリンクテキストにすれば2.4.9の要件にも沿います。「お知らせ」「第2回」のようにタイトルだけでは行き先が分からないものは、内容を補った文言にします。Googleのガイドも「Click here」のような汎用的なアンカーを悪い例に挙げています。

ARIA属性とネイティブHTMLの使い分けは[WAI-ARIAとは？role・aria属性の使い方とネイティブHTMLを優先すべき理由](/tech/details/6970/)、読み上げ順序の実機確認は[Webアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計](/tech/details/16505/)で解説しています。

### JavaScriptで生成するリンクのa要素とhref属性

Googleのガイドは、Googleがクロールできるのは原則として`href`属性を持つ`a`要素のリンクだとしています。JavaScriptでページに差し込んだリンクも、この形のマークアップであれば辿れます。一方、`<span href="...">`や`<a onclick="goto(...)">`のように`href`属性を持つ`a`要素になっていない形は、Googleが解析を試みる場合はあるものの推奨されない例に挙がっています。

関連記事やレコメンドをクライアント側で描画している場合は、Search ConsoleのURL検査ツールでレンダリング後のHTMLを開き、`a`要素と`href`が出ているかを確かめます。ガイドも、JavaScriptでアンカーテキストを差し込むならURL検査ツールでレンダリング後のHTMLに含まれているか確認するよう書いています。

## タグの重なりで関連記事を選ぶJavaScriptの実装例

CMSに関連記事の機能がない場合や、静的サイトでビルド時に関連記事を決めたい場合の最小構成です。記事ごとのタグの重なりをJaccard係数（共通タグ数÷両記事のタグの和集合の数）で数値にし、しきい値未満の記事は出さないようにしています。出てくるのはあくまで候補で、前章の4関係のどれに当たるかは人が確かめます。

```
// 記事データ（実際はCMSのAPIやビルド時のJSONから読む）
const articles = [
  { url: "/guide/nav-global/",  title: "グローバルナビの設計", tags: ["ナビゲーション", "IA", "ヘッダー"] },
  { url: "/guide/nav-local/",   title: "ローカルナビの設計",   tags: ["ナビゲーション", "IA", "サイドバー"] },
  { url: "/guide/breadcrumb/",  title: "パンくずリストの実装", tags: ["ナビゲーション", "構造化データ"] },
  { url: "/guide/aria/",        title: "WAI-ARIAの基本",       tags: ["アクセシビリティ", "HTML"] },
  { url: "/guide/link-text/",   title: "リンクテキストの書き方", tags: ["アクセシビリティ", "ナビゲーション", "HTML"] },
];

// 共通タグ数 ÷ 両者のタグの和集合（Jaccard係数）で関連度を出す
function score(a, b) {
  const sa = new Set(a.tags), sb = new Set(b.tags);
  const union = new Set([...sa, ...sb]).size;
  if (union === 0) return 0;                             // どちらもタグなしなら関連の根拠なし
  const common = [...sa].filter((t) => sb.has(t)).length;
  return common / union;
}

function relatedLinks(current, all, { limit = 3, minScore = 0.2 } = {}) {
  return all
    .filter((a) => a.url !== current.url)                // 自分自身を除く
    .map((a) => ({ ...a, s: score(current, a) }))
    .filter((a) => a.s >= minScore)                      // 関連の薄いものは出さない
    .sort((x, y) => y.s - x.s)
    .slice(0, limit);
}

// タイトルやURLにHTMLの特殊文字が入っても壊れないようにする
const esc = (v) => String(v).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);

// a要素＋href で出力する（クローラーが辿れる形）
function render(items) {
  if (items.length === 0) return "";                     // 該当なしなら枠ごと出さない
  const li = items.map((a) => `  <li><a href="${esc(a.url)}">${esc(a.title)}</a></li>`).join("\n");
  return `<aside aria-labelledby="related-h">\n<h2 id="related-h">次に読む記事</h2>\n<ul>\n${li}\n</ul>\n</aside>`;
}

const current = articles[1]; // ローカルナビの記事を表示中
const picked = relatedLinks(current, articles);
console.log(picked.map((a) => `${a.s.toFixed(2)} ${a.title}`).join("\n"));
console.log(render(picked));
```

Node.js v26.5.0で`node related.mjs`として実行した出力です。

```
0.50 グローバルナビの設計
0.25 パンくずリストの実装
0.20 リンクテキストの書き方
<aside aria-labelledby="related-h">
<h2 id="related-h">次に読む記事</h2>
<ul>
  <li><a href="/guide/nav-global/">グローバルナビの設計</a></li>
  <li><a href="/guide/breadcrumb/">パンくずリストの実装</a></li>
  <li><a href="/guide/link-text/">リンクテキストの書き方</a></li>
</ul>
</aside>
```

ローカルナビの記事に対し、タグを2つ共有するグローバルナビの記事が0.50で先頭に来ています。「WAI-ARIAの基本」は共通タグが0個で関連度0のため、枠が空いていても出ません。この計算が測るのはタグ集合の重なりだけで、リンク先が前提知識なのか比較対象なのかは区別できません。候補の絞り込みに使い、関係の判定は人が行います。特に「次の手順」は順序の情報なのでタグからは出ません。記事データに`next`のような項目を持たせ、自動計算とは別に人が指定します。

## 内部リンクとしてのSEO上の役割と過剰リンクの線引き

前出のGoogleのガイドは「重要なページには、サイト内の少なくとも1つの他のページからリンクがあるべき」とし、あるページの理解を助ける自サイトの資料を探して文脈の中でリンクするよう勧めています。階層の深い記事や、カテゴリをまたぐ記事は、グローバルやローカルのナビゲーションからは届きにくいため、コンテキストナビゲーションが実質的な唯一の入口になることがあります。

アンカーテキストについて、同じガイドは「説明的で、適度に簡潔で、リンク元とリンク先の両方のページに関連している」ことを良いアンカーの条件に挙げています。キーワードを詰め込んだアンカーはスパムポリシー違反になるとも明記しており、確認方法として「読者が次のページを理解するのにそのキーワードが必要か」を自問するよう書いています。

線引きは、リンク先を1本も開かずにその記事の目的を果たせるかで判断します。リンク先を読まないと結論までたどり着けないなら、本文の説明を他記事に任せすぎています。説明を本文に戻し、リンクは補足として残す方に寄せます。

## コンテキストナビゲーションを置かない方がよい場面

コンテキストナビゲーションは読者を別のページへ送り出す仕組みなので、今のページで完了してほしい作業がある場面では逆効果になります。

- **申込フォームや決済の途中**：入力中の読者を関連ページへ誘導すると、作業が中断されます。完了画面に「次の行動へのリンク」を1本置く形に限ります。
- **関連度の低い記事しか出せないページ**：記事数が少ないサイトや、タグの付け方がばらばらなサイトでは、枠を埋めるために関係の薄い記事が並びます。前章の実装例のようにしきい値を設け、該当がなければ枠ごと消します。
- **全ページで同じ記事が並ぶ枠**：「人気記事」「新着記事」は内容に応じて変わらないので、コンテキストナビゲーションとして期待される効果、つまり今読んでいる内容の理解を深める働きを持ちません。置くならサイト共通の導線として、位置と順序を全ページで揃えます。

どれにも当たらない記事ページでも、両方の形を必ず置く必要はありません。前提知識の補足が要らない短い記事なら関連リンク一覧だけ、関連記事の候補が無い記事なら本文内リンクだけ、というように読者が次に必要とする情報に合わせて選びます。

## よくある質問

### コンテキストナビゲーションとは何ですか？

サイトの階層ではなく、表示中のページの内容との関係でリンク先を決めるナビゲーションです。本文中のリンク、記事末の関連記事、商品詳細ページの関連商品が代表例です。サイト全体の主要カテゴリを並べるグローバルナビゲーションや、セクション内の階層を並べるローカルナビゲーションとは、並べる根拠が階層か内容かで区別します。情報アーキテクチャの定番書『情報アーキテクチャ 第4版』（オライリー・ジャパン）が、埋め込み型ナビゲーションの3分類の1つとして挙げています。

### ナビゲーションにはどんな種類がありますか？

ページに埋め込むものは、サイト全体の主要カテゴリを示すグローバルナビゲーション、セクション内の階層を示すローカルナビゲーション、内容に関係するページへ送るコンテキストナビゲーションの3つです。これにパンくずリストを加えることもあります。サイトマップ、サイトインデックス、ガイド、サイト内検索は、ページの外側から全体を見渡す補足型のナビゲーションとして別に扱います。種類は、階層に沿って並べているか、内容との関係で並べているかで見分けます。

### コンテキストナビゲーションとローカルナビゲーションの違いは何ですか？

ローカルナビゲーションは、同じセクションに属するページで同じリンク群を出し、階層の兄弟ページや子ページへの移動を担います。コンテキストナビゲーションは、階層とは関係なく、そのページの内容と関係が深いページへ送ります。同じセクションの別ページでもリンク先は変わります。ただし、どちらも枠として複数ページに繰り返し出るなら、WCAG 2.2の達成基準3.2.3に沿って他の導線との相対順序をページ間で揃えます。

### 関連記事は何本表示すればよいですか？

公式の推奨本数はありません。Googleのリンクに関するガイドも、1ページに含めるべきリンクの理想的な数はないとしています。本数より、並べる記事すべてに選んだ理由を説明できるかを基準にします。理由を説明できる記事だけを並べ、自動で選ぶ場合はしきい値を設けて、該当がなければ枠ごと消します。

### レコメンドとコンテキストナビゲーションは同じものですか？

重なる部分はありますが、同じものではありません。表示中の商品や記事を起点に「一緒に買われた商品」「併せて読まれた記事」を出すレコメンドは、ページに応じてリンク先が決まるので、コンテキストナビゲーションの一種として扱えます。読者個人の閲覧・購入履歴から候補を出すパーソナライズ型は、同じページでも読者ごとに中身が変わります。『情報アーキテクチャ 第4版』もパーソナリゼーションを埋め込み型ナビゲーションとは別の節で扱っています。検索エンジンにも辿ってほしい導線は、個人別の枠だけに頼らず固定的な関連リンクにも置きます。

## 関連記事

- [ローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準](/column/details/7707/)
- [SEOに効くグローバルナビゲーションの設計と実装ポイント](/column/details/7706/)
- [インフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順](/column/details/7612/)
- [パンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】](/column/details/16573/)
- [WAI-ARIAとは？role・aria属性の使い方とネイティブHTMLを優先すべき理由](/tech/details/6970/)

---

出典: [コンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準](<https://www.issoh.co.jp/column/details/7708/>)（株式会社一創）