ホームページ制作会社との打ち合わせで、アンカーリンクという言葉が出てくることがあります。これは、同じページの中だけでなく、別ページの特定の場所へも訪問者を直接誘導できる便利な仕組みです。特に情報量が多いホームページや、スマートフォンで閲覧されている場合には、目的の情報へ最短距離で案内するために欠かせない要素となります。
本用語集では、アンカーリンクの意味や設定方法、アンカーリンク先が固定ヘッダーに隠れる時の対処法、注意点までを紹介します。
アンカーリンクの意味
アンカーリンクとは、ページ内の指定した場所へ直接移動できるリンクのことです。クリックする対象はテキストでも画像でも構わず、どちらもアンカーリンクとして機能します。
例えば、縦に長いページの冒頭に目次を設置し、読みたい項目をクリックすると該当箇所まで一気にスクロールする、といった使い方が代表的です。同じページ内だけでなく、自社サイトの別ページや他社のホームページであっても、リンク先に目印が設定されていれば特定の箇所へ直接飛ばすことができます。
コラムやFAQのように情報量が多くなりがちなページでは、アンカーリンクがあるだけで訪問者が必要な情報にたどり着くまでの手間が大幅に減ります。スマートフォンでの閲覧が多い今、スクロールの負担を軽くする手段としても欠かせない機能です。
アンカーリンクとその他の用語の違い
ホームページ制作の打ち合わせでリンクに関わる言葉がいくつか出てくると、どれが何を指しているのか混乱しがちです。アンカーリンクとそれぞれの用語の違いを整理しておくことで、制作会社とのやり取りが円滑になります。
リンクとの違い
リンクは、クリックすると別のページへ移動できる仕組みの総称です。ホームページのメニューやボタンに設定されているものは、ほとんどがページの先頭へ移動するリンクになります。
一方、アンカーリンクはページの先頭ではなく、特定の場所を指定して飛ばせるのが特徴です。同じページ内の見出しへジャンプさせたり、別ページの途中にある項目へ直接誘導したりと、到着地点を細かく指定できる点が通常のリンクとは異なります。
制作会社との打ち合わせでは、単にリンクと言うとページ同士をつなぐ設定を指す場合が多いため、ページの途中へ飛ばしたい時はアンカーリンクと伝えると意図が正確に伝わります。
ページ内リンクとの違い
アンカーリンクとページ内リンクはほぼ同じ意味で使われることが多いですが、厳密には範囲に差があります。
ページ内リンクは同じページの中での移動に限定されますが、アンカーリンクは自社サイトの別ページや他社のホームページであっても、特定の場所へ直接飛ばす設定が含まれます。例えば、他社サイトの特定の項目へジャンプさせるのは、アンカーリンクが得意とする役割です。
特定の地点へ導くという目的は共通しているため、ページ内リンクとアンカーリンクの違いは移動先の範囲と知っておくと、制作会社への指示がより正確になります。
アンカーリンクのメリット
アンカーリンクを導入することは、単に情報を見やすくするだけでなく、成果を高めるための大きなメリットをもたらします。訪問者のストレスを減らし、信頼されるホームページにするための大切な要素です。
ユーザーが知りたい情報にすぐたどり着ける
アンカーリンクを設置することで、訪問者がページ内の特定の情報に素早くアクセスできるようになります。特にスマートフォンでの閲覧時は、何度も指で操作する手間を省けるため、ユーザーが知りたい情報をすぐ見つけられる快適な閲覧体験を提供できるのがアンカーリンクのメリットです。
こうした配慮は、情報の見落としを防ぐだけでなく、サイト全体の使い勝手を高め、訪問者が途中で離脱してしまうのを防ぐための有効な手段となります。訪問者がどの情報を求めているかを想定し、適切な位置へ誘導する設計を意識しましょう。
SEO評価の向上が期待できる
アンカーリンクを適切に設置すると、ページの情報が整理され、訪問者が必要な情報に素早くたどり着けるようになります。こうしたユーザー体験の改善は、滞在時間の増加や離脱率の低下につながり、SEO評価にも良い影響を与えると考えられています。
また、目次などのアンカーリンクが設置されていると、検索結果に特定の見出しへのリンクが表示されることがあります。通常よりも表示面積が広がるためクリック率が高まり、SEO評価の向上につながる可能性があります。
コンバージョン率の改善につながる
ページ内をスムーズに移動できるアンカーリンクは、お問い合わせや注文といった具体的な行動を後押しする効果があります。例えば、縦に長いランディングページに申し込みフォームへ直接ジャンプするアンカーリンクを配置すれば、訪問者の熱量が高まった瞬間に目的の場所へ誘導できます。
訪問者が行動を起こしたいと思ったタイミングで迷わせない導線を用意しておくことが、コンバージョン率の改善につながります。自社サイトで離脱が多いページがあれば、アンカーリンクによる導線の見直しを検討してみましょう。
アンカーリンクの設定方法
アンカーリンクは、到着地点に目印を付けて、リンク側からその目印を指定するという2つの手順で成り立っています。まずは目印の仕組みを理解したうえで、自社の環境に合った設定方法を選びましょう。
リンク先のid属性を確認する
アンカーリンクを機能させるには、ジャンプ先となる要素にid属性が付いていることが前提になります。id属性とは、ページ内の特定の場所に付ける名前のようなもので、この名前を指定することでリンクの到着地点が決まる仕組みです。
確認するには、ブラウザでページを開き右クリックから「ページのソースを表示」を選択します。表示されたHTMLの中で、飛ばしたい箇所の見出しやセクションに以下のような記述があれば、アンカーリンクの設定が可能です。
<h2 id="price">料金プラン</h2>この「price」の部分がid名にあたります。id属性が見当たらない場合は、他社サイトならアンカーリンクの設置は難しいですが、自社サイトであれば制作会社にid属性の追加を依頼しましょう。
リンクの設定方法
HTMLでアンカーリンクを設定する場合、ジャンプ先の要素にid属性を記述し、リンク側のhref属性で#とid名を指定します。
<a href="#price">料金プランを見る</a>別ページの特定箇所へ飛ばしたい場合は、URLの後ろに#とid名を続けます。
<a href="https://example.com/service/#price">料金プランを見る</a>WordPressの場合も同様で、リンクを挿入する際のURL欄に「#price」と入力すれば設定できます。
記述自体はシンプルですが、id名のスペルミスや#の付け忘れがあるとリンクが動作しないため、設定後は必ずクリックして意図した位置へ移動するか確認しましょう。
アンカーリンク先が固定ヘッダーに隠れる時の対処法
自社サイトで固定ヘッダーを採用している場合、アンカーリンクで飛んだ先がヘッダーの下に潜り込んでしまうことがあります。これを防ぐには、ヘッダーの高さ分だけ止まる位置を少し手前に調整する設定が必要です。
なお、外部サイトへのアンカーリンクで同様の現象が起きても、相手側のホームページを修正することはできないため、対処できるのは自社サイト内に限られます。
CSSを使って表示位置を調整する
CSSを使って表示位置を調整する方法は、現在のホームページ制作において最も手軽で推奨される解決策です。
具体的にはスクロールマージン（scroll-margin-top）というタグを使い、ジャンプ先の文章に対してメニューの高さ分の余白を持たせます。これにより、移動した瞬間にメニューのすぐ下で文章がぴたりと止まるようになります。
制作会社へ依頼する際も、「CSSのスクロールマージンで調整してください」と伝えるだけで意図が正確に伝わります。
特別なプログラムを組む必要がなく動作も軽快なため、まずはこの手法でアンカーリンクの改善が可能か確認するのが得策です。
JavaScriptを使ってジャンプする位置を制御する
JavaScriptを使ってジャンプする位置を制御する手法は、画面サイズによってメニューの高さが変わるホームページで有効です。プログラムがその時々のメニューの高さを瞬時に計算し、最適な停止位置を割り出してから画面を動かします。
CSSだけでは対応しきれない複雑なデザインや、ページ内を滑らかに移動させる演出にこだわりたい場合に選ばれる解決策です。
制作会社には、「メニューの高さを計算して、ジャンプ位置を制御してほしい」と相談しましょう。導入には専門知識が必要ですが、ヘッダーの高さが途中で変わるような特殊な構成でも確実なアンカーリンクの動作を保証できるのが強みです。
アンカーリンクを設置する時の注意点
アンカーリンクは便利な機能ですが、設置した後の管理を怠ると訪問者の混乱を招く原因になります。長く安定した運用を続けるために、設置時の注意点を押さえておきましょう。
外部サイトへのアンカーリンクはリンク切れに注意する
自社サイト内のアンカーリンクであれば、id属性を自分たちで管理できるため問題は起きにくいですが、外部サイトへのアンカーリンクには注意が必要です。相手側がリニューアルやページ修正を行った際にid属性が変更・削除されると、アンカーリンクが正しく機能しなくなります。
厄介なのは、ページ自体は存在しているためリンク切れチェックツールでは検知できず、クリックするとページの先頭に飛ばされるという分かりにくい不具合になる点です。外部サイトへのアンカーリンクを設置した場合は、定期的に手動で動作を確認する運用を心がけましょう。
設置後はパソコンとスマホの両方で確認する
アンカーリンクは、パソコンでは正常に動作していても、スマートフォンでは表示がずれてしまうことがあります。特に固定ヘッダーの高さがパソコンとスマートフォンで異なるホームページでは、ジャンプ先の見出しが隠れてしまうケースも少なくありません。
設置後は必ず実機を使い、パソコンとスマートフォンの両方で意図した場所に正しく移動するかを確認しましょう。画面サイズによって挙動が変わることがあるため、どちらか一方だけの確認では見落としが生まれます。
まとめ
アンカーリンクは、ページ内の特定の場所へ訪問者を直接案内できる便利なリンクです。
通常のリンクやページ内リンクとの違いを理解し、id属性の確認やリンクの設定方法を押さえておくことで、制作会社とのやり取りもスムーズになります。固定ヘッダーによる表示のズレや、外部サイトへのアンカーリンクのリンク切れなど、設置後の注意点も忘れずに確認しましょう。
自社のページで情報が多く読みづらいと感じる箇所があれば、アンカーリンクの導入を検討してみてください。
