エントリー記事
訪問者を迷子にさせないために
インターネットが広く家庭にも普及し、何かわからないことを調べるのに検索サイトを活用することは珍しくなくなりました。ところが、たどり着いたサイトで迷子になってしまうことがあります。ここでは、訪問者を目的地までスムーズに誘導するための要点を解説します。
- サイト名を記述
訪問者がどこのサイトに居るのか把握できるように、全てのページにサイト名を記述しておくことを推奨します。一番目につきやすい位置に配置して、トップページへのリンクを指定しておくと親切です。title要素に記述するのも良いでしょう。
<h1><a href="./">サイト名</a></h1>
<title>ページのタイトル - サイト名</title>- コンテンツを明確に
初めての訪問者には、どのリンクをクリックすれば目的のページにたどり着けるのかわかりづらいものです。主なコンテンツへのリンクはわかりやすい位置に指定しましょう。検索サイトからの訪問者にも伝わるように、主なコンテンツへのリンクは全てのページに用意しておくと良いでしょう。
- リンクの法則
一般的な視覚系ブラウザでは未訪問リンクは青色、訪問済みリンクは紫色に指定されており、これらはむやみに変更しない方が無難です(*1)。
未訪問リンクと訪問済みリンクの色を同じ色に指定すると、初めての訪問者にはリンク先が未訪問なのか訪問済みなのか区別することができなくなってしまいます。また、リンクの下線を消してしまうとリンクを視認することが困難になってしまいます。このような指定をすると迷子になりやすくなるのでオススメしません。- リンクの方法
リンクにはテキスト以外にも様々な種類がありますが、これらは多くの問題点を抱えています。
画像によるリンクは見た目華やかですが、枠線があると見た目が損なわれ、枠線を消すと未訪問と訪問済みの区別がつかなくなります。また、画像を表示できない環境への配慮としてalt属性による代替テキストを指定する必要があります。
リンクにプルダウンを用いると数多くのリンクをコンパクトにまとめることができますが、訪問者がJavaScriptを許可していない場合や非対応のブラウザではリンク先に移動することができません。
Flashによるリンクは見た目華やかですが、非対応のブラウザではリンク先に移動することができません。
あらゆる環境下において問題なく機能するのはテキストリンクだけです(*2)。プルダウンやFlashを用いる場合には、同時にテキストリンクを用意しておきましょう。
- リンク文字を適切に
「戻る」というリンクを時々見かけますが、このリンクはオススメできません。どのページに戻るのか正確に伝わらない恐れがあるからです。特に、検索サイトからの訪問者には全く意味が伝わりません。
同様に「こちら」というリンクも好ましくありません。例えば、音声ブラウザの利用者は他のページに移動する際リンクを順に読み上げる機能を利用します。前後のテキストがなくてもリンク先の内容がわかるように記述しましょう。
しかし、リンク集のように他サイトへのリンクを指定する場合には、通常リンク先のサイト名のみにリンクを指定します。このような場合、前後のテキストを読まなくてもリンク先の内容が伝わるようtitle属性を指定すると良いでしょう。
<a href="http://www.yahoo.co.jp/" title="大手検索サイト">Yahoo! JAPAN</a>これは音声ブラウザに限らず、一般的な視覚系ブラウザにおいてもサポートされます。多くの場合、リンクにカーソルを合わせるとtitle属性の内容をツールチップで表示します。
- ナビゲーションの設置
ナビゲーションを設置することで、訪問者が迷子になりにくくなるでしょう。階層構造をわかりやすく伝えることが必要となります。現在地を明確にするため、現在地を示すテキストには通常リンクを指定しません。
リストを用いたナビゲーションの一例を示します。現在地を「項目2-2」(content2/chapter2.html)としております。
<ul>
<li><a href="../">ホーム</a></li>
<li>項目1 <ul>
<li><a href="../content1/">目次1</a></li>
<li><a href="../content1/chapter1.html">項目1-1</a></li>
<li><a href="../content1/chapter2.html">項目1-2</a></li>
<li><a href="../content1/chapter3.html">項目1-3</a></li>
</ul> </li>
<li>項目2 <ul>
<li><a href="../content2/">目次2</a></li>
<li><a href="../content2/chapter1.html">項目2-1</a></li>
<li>項目2-2</li>
<li><a href="../content2/chapter3.html">項目2-3</a></li>
</ul> </li>
</ul>リストを用いると階層構造をわかりやすく示すことができますが、ナビゲーションを配置する領域の確保が難しく、代わりにコンパクトなナビゲーションとしてパンくずリスト(*3)がよく使われています。区切り記号としては「>」(*4)が一般的のようです。
<p>
<a href="../">ホーム</a> > <a href="./">項目2</a> > 項目2-2
</p>- link要素の導入
広く普及しているInternet Explorerではサポートされていないのですが、link要素(*5)を用いたナビゲーションは効果的です。利用環境に依存しているため、サイト毎のバラツキがないので訪問者を迷わせません。
リンク形式には多くの種類がありますが、ここでは一部を抜粋して解説します。
- トップページへのリンク
<link rel="start" href="トップページのURL" />- 目次ページへのリンク
<link rel="contents" href="目次ページのURL" />- 前のページへのリンク
<link rel="prev" href="前のページのURL" />- 次のページへのリンク
<link rel="next" href="次のページのURL" />
Webサイト最大の利点は、リンクひとつであらゆる情報にアクセス可能なことにあります。リンクを適切に指定することで、訪問者が迷うことなく欲しい情報にアクセスできるようになります。
- (*1)
- サイトのデザインによってはデフォルトの色が合わないことがあります。当ブログはテーマカラーが緑色で、紫色との相性が良くないことから訪問済みリンクの色を緑色に変更しております。その代わり未訪問リンクの色にあまり手を加えないことで、訪問者が迷わないよう配慮しております。
- (*2)
- 余談ですが、画像やFlashによるリンクは検索エンジンの検索対象となりません。一方、テキストによるリンク文字が検索キーワードに一致すると、上位にランクされる可能性が高まります。
- (*3)
- 童話「ヘンゼルとグレーテル」で、2人が道に迷わないようパンくずを置きながら道を進んだことになぞらえています。
- (*4)
- 「>」はタグの終了を意味する記号であり、そのまま記述するとエラーを引き起こす恐れがあります。文字実体参照を用いて「>」と記述することにより、ブラウザ側では「>」と表示されます。
- (*5)
- link要素はhead要素の子要素となります。body要素の子要素とはならないのでご注意ください。