初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 



 

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

 

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

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

 

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

 サイト内のリンクは、原則横につなげていくのが良いでしょう(下の図でいう黒い横線)。そして、同じコンテンツ内に複数のページがある場合は縦につなげてもかまいません(図で言うデジカメ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>

 

例:

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.