ホームページで使うページ内リンクの基本と活用ポイント

第1章: はじめに

本記事の目的

この章では、ページ内リンク（アンカーリンク）について学ぶ前に、記事全体の目的と構成をわかりやすく説明します。本記事は、ホームページ内の特定の場所へスムーズに移動させる方法を、初心者にも理解できるように丁寧に解説します。

対象読者

・Web制作を始めたばかりの方
・ブログやサイトの目次を作りたい方
・WordPressやサイトビルダーでより使いやすいページを作りたい方
専門的な前提知識は不要です。実例を交えて進めます。

本記事で学べること

・ページ内リンクの基本概念
・HTMLでの書き方（わかりやすい2ステップ）
・HTML5と従来HTMLの違い（idとnameの扱い）
・目次から見出しへ飛ぶリンクの具体的な作り方
・WordPressやサイトビルダーでの設定方法と注意点
・リンクが正しく動かないときのチェック方法
・UXやSEOの観点でのメリット

読み方の案内

第2章以降で順を追って説明します。まずは概念をつかみ、次に実際のコード例や設定方法、最後にトラブル対処と応用例をご覧ください。章ごとに短い例を示すため、実際のページ作成にすぐ役立ちます。

ページ内リンク（アンカーリンク）とは？基本概念を理解しよう

定義

ページ内リンク（アンカーリンク）とは、同じWebページ内の特定の場所へワンクリックで移動できるリンクです。長い記事やマニュアルで、目次から見出しへジャンプするときに使います。ユーザーの操作を減らし、読みやすさを上げます。

簡単なイメージと例

実際にはリンクの先がページ内のIDを示します。たとえば「#section1」へ飛ぶリンクは href=”#section1″ のように指定し、移動先の見出しに id=”section1″ を付けます。クリックするとブラウザがその位置までスクロールします。

「ページ内リンク」と「内部リンク」の違い

ページ内リンクは同一ページ内の移動に限ります。一方、内部リンクは同じサイト内の別ページを指します。内部リンクはサイト構成やSEOに関わるため役割が異なります。

実用的な使い方

・記事の目次から各見出しへジャンプさせる
・長いフォームの特定項目へ直接移動させる
・ページ内の戻るリンク（トップへ戻る）を置く

注意点

・同じIDを複数使うと意図した場所に飛ばないことがあります。IDはページ内で一意にしてください。　
・自動で速いスクロールになる場合があり、意図通りの見え方に調整することがあります。　
・キーボード操作やスクリーンリーダーでも利用できるように配慮すると親切です。

次章では、ページ内リンクを使うべき具体的なシーンとメリットを見ていきます。

ページ内リンクを使うべきシーンと導入メリット

よくある利用シーン

• 記事冒頭に目次を置き、各見出しへ飛ばす
• 長い記事で読者が興味ある項目へすぐ移動できます。見出しごとにアンカーを付けるだけで使えます。
• ページ下部の重要セクションへのショートカット
• 資料ダウンロードや問い合わせフォームへ直接誘導できます。
• FAQページでカテゴリリストから回答へジャンプ
• 質問一覧から該当回答へ一発で届き、探す手間を省けます。
• ランディングページでボタンから該当箇所へ移動
• 「料金を見る」「機能を確認する」などの導線を短く保てます。

導入メリット

• ユーザーが求める情報に素早く到達でき、離脱を減らしやすいです。
• スマホ閲覧時のスクロール負担を軽くできます。画面が小さくても目的地へ短時間で行けます。
• コンバージョン率向上に寄与します。購入や申込みに近い箇所へ誘導することで動線が短くなります。
• 長文コンテンツの構造理解を助け、読みやすさが向上します。

導入時のポイント

• リンク文は具体的に（例：「料金プランへ」ではなく「月額プラン詳細へ」）書くと期待と実際が一致します。
• スマホでの動作確認を必ず行ってください。スクロール位置が見切れることがあります。
• アクセシビリティも意識し、リンク名は明確にしましょう。

HTMLでのページ内リンクの基本構文：2ステップで理解

概要

ページ内リンクは「リンク先にIDを付ける」→「リンク元でそのIDを参照する」の2ステップで作ります。簡単で実用的な仕組みです。

ステップ1：リンク先にidを付ける

ジャンプさせたい場所のタグにid属性を付けます。idはページ内で一意（ひとつだけ）の名前です。例：

<h2 id="section1">セクション1</h2>

pやdiv、見出しタグなど、どの要素にも付けられます。

ステップ2：リンク元で#aを指定する

リンク元のテキストやボタンをaタグで囲み、hrefに#とid名を指定します。例：

<a href="#section1">セクション1へ移動</a>

これでクリックするとブラウザが該当箇所までスクロールします。ボタン風に見せたい場合は、aタグにクラスを付けてCSSで装飾すると良いです。

実用上の注意点

• idは同じページで重複させないでください。重複すると意図した場所へ飛ばないことがあります。
• 固定ヘッダーがある場合、スクロール位置が隠れることがあります。その場合はCSSのscroll-margin-topやスムーズスクロールを利用してください。

この2ステップを覚えれば、目次やページ内ナビを簡単に作れます。

HTML5と従来HTMLの違い：id属性とname属性

概要

従来のHTMLでは、アンカーの遷移先にname属性を使する方法が一般的でした。HTML5以降はid属性を使うことが主流で、name属性はほとんど使われません。新規実装ではidで統一することをおすすめします。

name属性（従来の使い方）

• 役割: アンカー（<a name="top">）に名前を付けて遷移先にする。
• 注意点: 一部の要素でしか使えない場合や、仕様で非推奨になっていることがあります。

id属性（HTML5の使い方）

• 役割: 任意の要素に一意の識別子を付ける。<h2 id="section1">見出し</h2>のように使います。
• メリット: セマンティックに優れ、CSSやJavaScriptとも自然に連携できます。

実務上のポイント

1. 新規ページはidで統一してください。ページ内リンクは<a href="#section1">の形式で十分です。
2. 既存でnameを使っている場合は、互換性を考えてidも併記すると安全です（例: <a name="top" id="top"></a>）。
3. 同一ページ内で同じidを重複させないでください。重複は動作不良の原因になります。

移行手順（簡単）

1. サイト全体を検索してname="..."を洗い出す。2. 対応箇所にidを追加または置換。3. リンク先のhrefが#...形式で正しく動作するか確認する。

例（短いコード）

<!-- 推奨 -->
<h2 id="about">概要</h2>
<a href="#about">目次から概要へ</a>

<!-- 互換性例 -->
<a name="top" id="top"></a>
<a href="#top">ページトップへ</a>

具体例：記事の目次から見出しへ飛ぶページ内リンク

概要

記事冒頭に目次を置き、各見出し（h2・h3など）へジャンプさせるのが代表的な使い方です。目次ではのhrefに#ID名を指定し、見出し側に対応するid属性を付けます。これにより読者は必要な箇所へ直接移動できます。

<!-- 目次 -->
<ul>
  <li><a href="#introduction">導入</a></li>
  <li><a href="#usage">使い方</a></li>
  <li><a href="#tips">ポイント</a></li>
</ul>

<!-- 記事本文 -->
<h2 id="introduction">導入</h2>
<p>ここが導入です。</p>

<h2 id="usage">使い方</h2>
<h3 id="usage-step1">ステップ1</h3>
<p>手順の説明。</p>

<h2 id="tips">ポイント</h2>
<p>補足情報。</p>