Step「V」 〜ナビゲーション〜

※ サイトをわかりやすく

初めての訪問者にもわかりやすく
迷子にならずにクリック率やクリックスピードを考慮する

⇒サイト構成

サイトの構成ってなに? ってことなんだけど、これは、サイト内の各ページがどんな風にリンクで繋がっているかってこと。

コンテンツページというのは、BBSや日記やイラストや小説など、実際のコンテンツがあるページの事。


トップページ
  ┣トピックメニュー1(イラスト)
  ┃  ┣イラスト1
  ┃  ┣イラスト2
  ┃  ┣イラスト3
  ┃  ┗イラスト4
  ┣トピックメニュー2(小説)
  ┃  ┣小説1
  ┃  ┣小説2
  ┃  ┣小説3
  ┃  ┗小説4
  ┣トピックメニュー3(趣味)
  ┃  ┣映画1
  ┃  ┣映画2
  ┃  ┣音楽1
  ┃  ┗音楽2
  ┣コンテンツページ4
  ┗コンテンツページ5

で、コンテンツページの量が増えてくると、トップページから全部のページにリンクを張るなんてムリになる。実際には可能なんだけど、リンクは「1ページ内にあるリンクの数が多すぎると、逆に不親切」だから、似たコンテンツごとにまとめて、上の図みたいにしてしまうといい。

上の図みたいに、テーマが同じコンテンツはそれぞれのトピックメニューページからリンクするようにして、トップページからはそのトピックメニューページへリンクを張るようにすると、リンクがすっきりまとまって見やすくなるぞ。これが、「サイトの階層化」って呼ばれてる方法で、ある程度コンテンツが多くなったサイトでは一般的に使われてる。



⇒ナビゲーションとは?

「ナビゲーションって、そもそもなに?」と思ってる?
ナビゲーションというのは、お客がキミのホームページに来たときに迷子にならないようにするためのツールのこと。

例えば、 『戻る』や『HOME』。それをクリックすると、前のページに戻れる。これがナビゲーション。ようするに、お客がページを移動しやすくするためのリンクの事を全てまとめてナビゲーションって呼ぶんだ。

「自分のサイトはまだ作ったばっかりでページ数も少ないから、ナビゲーションなんていらないや」とか「ブラウザの『戻る』機能を使えば別に必要無いよ」って思ってる? そんなんじゃダメだよ│・m・) プププ
ページの最後や最初に <A HREF="トップページのアドレス">トップページへ戻る</A> とリンクを張るだけで、ずっと親切になる。

ページを作る時は、「戻る」リンクを忘れないようにするんだゾ。



⇒少ないクリックで目的のページに

サイトがどんどん成長していくと、いろんなコンテンツが出来てくる。例えば日記とかリンク集とか。
で、こういう複数のコンテンツがあるサイトだと、ただ単に「戻る」リンクじゃ間に合わなくなってくる事があるんだ。とくに、コンテンツの中にさらに複数のコンテンツを持ってるようなサイトの場合とかね。

トピックメニューがあるようなけっこう大きめのサイトでは、サイト内の全てのトピックメニューには1クリックか2クリックで行けるようにしないと、お客がうんざりして帰ってしまうよ!

「じゃあ、どうすればイイんだろう?」

一番簡単なのは、それぞれのトピックメニューへのリンクをナビゲーションに組み込むこと。そういったナビゲーションツールの作り方はいろいろあって、あとで取り上げるからここでは作り方までは書かないけど、その内の一つのフレームを利用したナビゲーションツールを組みこんで見よう。



⇒ナビゲーションはコンパクトに

トップページやトピックメニューページは、コンテンツページや、他のトピックメニューページなどへのリンクをするページ。つまり、ナビゲーションがページの中心なんだ。でも、コンテンツがあるコンテンツページは、実際にお客が見る「内容」を載せたページだから、ナビゲーションがページの中心になってはダメ。ようするに、ナビゲーションが大きくてはダメだって事

幅を取りすぎるナビゲーションは、高解像度のモニターでHPを作ってる人がしがちなミスだから注意!
コンテンツページのナビゲーション部分は、ページの横に置くなら横幅が 200 ピクセル、上に置くなら高さが 150 ピクセル以内にしよう。

⇒インターフェイスの統一

一つのトピックメニューページから、他のページへ移ると、ナビゲーションツールのデザインがまったく違っていた。 なんて経験はある?

ナビゲーションツールは、サイトのどのページでも共通したデザインを使わなきゃ。それぞれのトピックメニューページでナビゲーションのデザインが違っていたり、それぞれのコンテンツページでデザインが違っているサイトは、ナビゲーションとしては失敗作ってコト。

サイト内に統一性を出すためにも、ナビゲーションのデザインは共通させなくちゃダメってこと。サイト内に共通性が無いと、ゲストは、他のサイトに移動してしまったかと思って迷ってしまうかもしれないからね。


あと、ナビゲーションの共有にはもう一つ重要な理由があるんだ。それは、ロード時間の短縮ってヤツ。

このサイトでは、どのページでもナビゲーションアイコンに全く同じ画像をつかってる。ただ同じデザインの画像というわけではなくて、どこにページがあっても、画像を使いまわすように設定されている。

こうすることで、一度表示されたナビゲーション画像は、見た人のPCのキャッシュに保存されるから、他のページを見てもサーバーからその画像をダウンロードする必要がなくなってロード時間が短縮されるぞ



ナビゲーションはHPのコンテンツを訪問者に
快適に見てもらう為に重要なんだ。
初めての訪問者にもわかりやすい様にね。
これがシッカリしてないホームページは
どんな内容が良くても、デザインが良くても
見ても貰えないサイトになってしまうよ。