分かりやすいナビゲーションを！

　ホームページを作れば作るほどページは増える一方で、気づけばリンクもかなり複雑に。ここで気をつけたいのが、迷子になるサイトを作っていないかどうかです。どんなに内容が良くてもナビゲーションしにくいサイトは、まさに、フェラーリで浅草の下町を走り回るがごとし。

　ナビゲーションしにくいサイトは、見たいページになかなかたどり着けなくなるので、訪問者をイラつかせてしまいます。できるだけわかりやすいナビゲーションを提供し、サクサク進めるサイトを作りましょう！

　迷子になりにくいサイトを作るには、製作段階からサイト構成をしっかり考えることです。あとからページを付け足していく場合にも、最初に作ったサイト構成を見ながら付け加えていくことで、わかりやすいナビゲーションの基礎を崩さず済むでしょう。

　サイト内のリンクは、原則横につなげていくのが良いでしょう（下の図でいう黒い横線）。そして、同じコンテンツ内に複数のページがある場合は縦につなげてもかまいません（図で言うデジカメ1〜3や、車1〜2の縦の黒線）。

リンクの見本。黒が普通のリンク。 　赤は避けた方がいいリンク。

　迷子になり易いサイトの失敗の原因は、各コンテンツ間に不用意にリンクを貼っていることです（上図で言う赤のライン）。各コンテンツ間のリンクは、ショートカット的に使えるので一見便利そうに見えますが、サイトの構成を把握していない人（新しくサイトに訪問してくる人は構成を把握していません）には分かりにくく、それだけで迷子の原因になり得ます。

　さらに、各コンテンツ間のリンクは、クリックした先のページの予想がつきにくく、先が見えないナビゲーションを提供してしまう恐れがあるため、「クリックしたらさっき見たページだった」となることもあり得ます。基本的には、下手に「近道」を多くするよりも、基本的な道筋だけを用意し、近道は少なくした方が、訪問者にとって分かりやすいナビゲーションを提供できるのです。

　サイトの構成を把握している人たちに便利なように、「常連さん専用ショートカットメニュー」といった、別メニューで便利なナビゲーションを提供するのもいいかもしれません。

　 よりわかりやすいナビゲーションを提供するには

　全ページの上下など、分かりやすい場所に、トップページやサブメニューへのリンクを入れておきましょう。迷子を救い出す基本は、スタート地点に戻してあげること。万が一、貴方のホームページで迷子になった人がいても、そのリンクさえあれば、とりあえずスタート地点に戻れるわけです。

　たまにフレームを利用しているサイトで、トップページやサブメニューへ戻るリンクを、フレームのメニューにだけつけていて、ページにはつけていないサイトがありますが、フレームはトップページから入ってきた場合のみ表示されるので、各ページにもきちんとリンクをつけておいた方が無難です。特に検索エンジンから飛んでくる人は、フレームメニューが表示されないことが多く、せっかく訪問してきてくれた人に、ホームページの全体を見てもらうことができなくなってしまいます。

　 見ていた一つ前のページに戻すリンク

　複数のページからリンクされているページで、訪問者が見た一つ前のページに戻すには、

<form>
<input type="button" value="戻る" onClick="history.back()">
</form>

　 この既述を使います。ブラウザの「戻る」ボタンを押したのと同じことになります。なお、IE3、NN3以上で有効です。

各ページにワンクリックメニュー

　各ページに簡易メニューを用意するのも、わかりやすいナビゲーションを提供する一つの手です。予めタグを用意しておき、そのタグをコピー＆ペーストで全てのページに貼り付けていくのが手っ取り早いでしょう。

　欠点は、コンテンツを増やすと全てのページのタグを書き換えないといけなくなる点です。市販のホームページエディタの中には、予め製作したタグを挿入・自動更新する機能があるので、それを使ったり、フリーツールの置き換え機能を使ったりすれば作業も楽になるでしょう。

　以下に、タグの例を書いておきます。

<form>
<select onChange="location=this.options[this.selectedIndex].value">
<option selected>ワンクリックメニュー</option>
<option value="****.htm">自己紹介</option>
<option value="****.htm">車</option>
　　　　・
　　　　・
　　　　・
</select>
</form>

[ 戻る ]