アンカーリンク(aタグ)とは？種類や使い方のポイントを解説
更新日 2024年1月7日（公開日 2017年2月15日）
アンカーリンク（aタグ）は、ウェブページ内または異なるウェブページへのリンクを作成するために使われる HTML要素です。これにより、特定のページセクションや外部リソースに直接リンクすることが可能になります。
訪問者が見つけたい情報をすぐ見つけられるようにするためにアンカーリンクを正しく使いましょう。この記事では、このアンカーリンクについて使い方と設定方法を解説します。クリックひとつで読者を目的の場所へと誘導する、便利なアンカーリンクについて、使い方をしっかり押さえましょう。
目次
アンカーリンクとは？
アンカーリンク（Anchor link）とは、クリックすることでホームページ内の指定の場所に移動することができるボタンやテキスト、画像などのことです。コンテンツにリンクを設定することで、同ページの項目や別のページに移動できるようにするリンクのことです。アンカー(Anchor)には、英語で「錨（いかり）」または「固定する」という意味があります。
アンカーリンクの例としては、「トップへ戻る」ボタンや、「目次」のリンクなどがあります。他にも、Wikipedia では文字にリンクを追加し、目的の項目に誘導する「テキストアンカー」など、さまざまなアンカーリンクの種類があります。
特に、スマホ表示用の縦に長い Web デザインを採用するホームページでは、読者が長いページの一番下までたくさんスクロールする必要があるかもしれませんが、そんな面倒を避けることができます。
HTMLを直接編集してアンカーリンクを作成するためには、大きく二つの方法があります。
・a href 属性
特定のテキストにリンクを追加することができます。
HTMLコード例：
<a href="https://ja.wix.com">テキスト</a>
・a id 属性 特定のページ内の位置にリンクを作成する際に使用されます。目次から、本文にジャンプするリンクや、ページのトップにジャンプするメニューボタンなどに利用します。
HTMLコード例：
<a id="section1"></a> というIDを、ページの特定のセクションに追加します。
その後、通常の a href 属性と同様に、先ほど設定したセクションIDと、リンクしたいテキストを以下のように追加します。
<a href="#section1">テキスト</a>
アンカーリンクの種類とは？
1．パーツや文字をリンクする
指定したアンカーへ、テキストやボタンをリンクすることができます。パーツをアンカーにリンクすることによって、サイト訪問者がそのパーツをクリックすると、指定したアンカー位置へジャンプします。
例えば、サービス紹介のページで特定のサービスについて詳しく説明したい時や、よくある質問の回答を記載する際など、情報を１カ所にまとめて記載したくない時に使用頂けます。
2．アンカーメニューを利用する
下記のようなアンカーメニューを使うことで、サイト上の異なるセクションをクリック1つでアクセスできるようになります。アンカーメニューはサイト訪問者がページを閲覧する際、常に表示されます。
アンカーリンクが役立つ理由
ホームページのヘッダーからフッターに至るまで、アンカーリンクはどこに設置してもOKです。
アンカーリンクはホームページの UX (ユーザー・エクスペリエンス)を向上させるのに効果的です。アンカーリンクがあることで、訪問者は自分に不必要な情報をスキップし、必要な情報のみを閲覧することができるからです。
アンカーリンクを使用する3つのポイント
アンカーリンクを効果的にかつ、便利に設定するためには、以下の3つのポイント必ず実行しましょう。
リンクの色は青色にする
アンカーに使うテキストは具体的にする
過剰なリンクの詰め込みに注意
リンクの色は青色にする
伝統的にウェブページ上でリンクが挿入されている文字は青色で表示されることが多いため、直感的にユーザーにリンクが挿入されていることを示すことができます。したがって、アンカーリンクの色を青色にすることは、ユーザー体験を改善する上で効果的です。明るめの青色に設定することで、他の文字と区別し目立つようにしましょう。また、アンカーリンクに下線を追加することもおすすめです。
アンカーに使うテキストは具体的にする
アンカーリンクを追加した文字のことを、「アンカーテキスト」呼びます。アンカーテキストは、ユーザーにこのリンクをクリックすることで何が起こるのか、具体的に説明する文字である必要があります。
ユーザーだけでなく、サイトをクロールする Google もアンカーテキストを利用してページの内容を把握します。そのため、アンカーテキストには、SEO キーワードを含めることで、Google にページの内容を理解してもらいやすくなります。
過剰なリンクの詰め込みに注意
アンカーリンクの設置は、簡単にできる上に多くのメリットがあります。ただし、過剰なアンカーリンクの使用や不自然なキーワードの詰め込みは避けるべきです。それは逆効果になる可能性があり、検索エンジンによるペナルティの対象になることもあります。常にユーザーのニーズを最優先に考え、自然な形でアンカーリンクを組み込むことが大切です。
Wixでアンカーリンクを設定する方法
最後に、Wix エディタでアンカーリンクを設定方法をご紹介します。
エディタ左側で「追加」(+型アイコン) をクリックします。
「メニュー・アンカー」をクリックします。
「アンカー」下の「アンカー」をクリックするか、ページ上の希望の位置にドラッグします。
アンカーリンクを設定したら、あとはリンク先の URL や見出しを追加すれば完了です。
リンク先を追加するには以下の方法をお試しください。
「アンカー」をクリックし、「ページを選択」下のドロップダウンメニューよりページを選択
ページの位置（アンカー ）：下のドロップダウンメニューより、「アンカーリンク」を選択し、終了後「完了」をクリック
これで、アンカーリンクの設定が完了です。
まとめ
この記事では、アンカーリンクとはについて詳しく解説しました。アンカーリンクは、単なるリンク以上の機能があります。正しく設定されたアンカーリンクは、ユーザーが求める情報に素早くアクセスできるようにし、ウェブサイトの全体的なユーザーエクスペリエンスを大幅に向上させます。また、SEO の観点から見ても、非常に重要な内部 SEO 施策の一つです。
これらのアンカーリンクのポイントを活用して、より効果的な Web サイトを構築する準備はできましたか？今こそ、Wix で自分だけのホームページを作成し、これらのアンカーリンクのテクニックを実践してみましょう。Wix ならアンカーリンクの設定もシンプル。SEO を強化するためのさまざまなツールも用意されています。
編集者：Miyuki Shimose
SEO＆ブログコンテンツマーケター
