ページ内リンクを有効活用。デザイン・活用方法を事例で紹介。


ページ内リンクの使い方

今回は、ページ内リンクの活用例を紹介します。
通常、ホームページ上のリンクは別のURLへジャンプするために使われるのが普通ですが、同じページ内で別の場所へ移動することもできます

具体的な書き方としては、
移動先の要素にIDを設定しておいて、リンクでは#の後にIDを書くことで、移動先へジャンプします。

<a href="#anchor">このリンクから</a>

<section id="anchor">
    ここへジャンプする
</section>

ページが長くなってくると、自分の知りたい情報がどこにあるかが分かりにくくなっていることがあります。
そこで、ページ内リンクで該当箇所へジャンプさせることで、読みたいコンテンツにすぐにたどり着くようにしています。

ページ内リンクの活用例

ページ内リンクの活用方法にはいくつかありがありますので紹介します。

メニュー・目次

ページ内を移動するメニューは、例えばこのような感じです。
どうしても縦に並んでしまうコンテンツでは、一目で全体がわかるメニューを用意して、
メニューをクリックすると、該当箇所へ移動できるようにしています。
preview
https://nin-bai.jp/case/

また、ページ内をさらに細分化してメニューとしているサイトもあります。
こちらのサイトでは、左側にメニューを設けています。
preview
https://ohiraladys.com/sanka_annai/

よくあるのが、ブログのメニューですね。
ブログは、どうしても内容のボリュームが大きくなりがちで、また読み物として書くことが多いのでテキストが多くなりがちです。
トピックスを整理して並べることで、自分の読みたいものへ簡単にジャンプができるようにしています。
preview2
http://pppurple.hatenablog.com/entry/2016/06/27/022310

ページトップへ戻る

他によく使われているのが、ページトップ戻るのボタンです。
sample
https://www.jz-tamago.co.jp/
多くのサイトは、グローバルメニューがページの1番上についていることも多く、またページを読み終わった後に1番上に戻るのを手軽にするために、簡単にページのトップに戻ることができるこういったボタンが設置されていることが多いです。
これも、ページの1番上にジャンプ先のIDを設定しておいて、このボタンをクリックすることでそのトップにあるIDの要素にジャンプしています。

スクリプトと併せて活用される

特殊な事例として、スクリプトと併用して新たなページの表現をすることもできます。
こちらのサイトでは、紙芝居のようにスクロールしてページを見ることができます。
preview
https://chiyoda-international.jp/

preview
https://www.grandginza.com/

これらはページ内リンクの機能を利用して作られています。
ちなみに、
fullPage.js
というスクリプトを使えば、こういったサイトの表現が可能です。

ページ内リンクの必要性について

ページ内リンク自体は、うまく活用すればとても使いやすいページにすることができる有効な手段です。
ただ、ページ内リンクは必要最低限で、本来はページ内リンクを必要としない構成が読みやすいページだと思います。
ページ内リンクを使わないといけない状況は、多くはコンテンツが1ページの中で複雑になりすぎている場合です。
ページ内リンクを多用しているページも見かけますが、ページの中であっち行ったりこっち行ったり、自分がどこを読んでどこを読んでいないかが分からなくなってしまうページも存在します。
※クライアント案件でも相談されますが、ページ数を増やしてコストを上げたくないといった事情がページ内リンクの多用につながっているということも多いです
ページ内リンクは、ジャンプした先に元の位置に戻るような手段がないことが多いので、多くは一方通行のリンクになりがちです。
それが、コンテンツを読みにくくしている原因の一つでもあります。
本来なら、ユーザが読みたいであろうコンテンツの並べ方で適切に並べる、ページの内容をテーマごとに分けておくことが理想です。

ページ内リンクを使わないといけない場面も多いですが、多用すると読みにくいページとなってしまうので気をつけましょう。
こういったデメリットも考えた上で、しかし、ページ内リンク自体は有効だと思うので、適切なタイミングで使うようにしましょう。