Webデザイン基礎知識・Web製作支援サイト|小道具屋|

ウェブデザインサイト・小道具屋
文字サイズ変更  文字サイズ拡大 文字サイズ縮小 元に戻す
Webサイトを構築する全ての人のために。
小道具屋サイト開催1999/09/06 HOMEに戻る Webサイトの顔であるindexを考えてみましょう。 デザインにはコツがあります。コツさせ掴めば結構簡単かも? ユーザーをコンテンツに導くナビゲーションはしくじると使いにくいサイトになります。 デザインとは直接関係ないですが小技を紹介。 ブログ ご連絡・お問い合わせはコチラまで。

キッチリ分けて・分類 悩ませないナビ・統一感 サイトを作るたびに悩む・ナビ下ション リンクだってしっかりナビ・リンク

ナビゲートの方法を間違えると、ものすごく使いにくいサイトが出来上がります。制作するサイトにあわせて適切なナビゲートで閲覧者を戸惑わせることなく、全てのページを見てもらいましょう。


ヘッダ型ナビゲーション
JavaScriptによるリンク先です:画像拡大拡大[13KB]

ヘッダ型ナビゲーション
シンプルながら扱いやすいヘッダ型は、表示領域を広く使えるので万能選手です。コンテンツ量が少ない時などもデザインしやすいです。しかしスクロールをしてしまうと、上部リンクが隠れてしまうので、最下段にもテキストリンクを設けるか、アンカーで『トップに戻る』を付けるのが親切な作りでしょう。デメリットはコンテンツが増えていき、メニューボタンを増やすスペースが無くなることです。無理して2段にするのは、見栄え、使い勝手の点からしてやめましょう。


インデックス型ナビゲーション
JavaScriptによるリンク先です:画像拡大拡大[13KB]

インデックス型ナビゲーション
インデックス型はコンテンツが増え、メニューが増えても対処できるところが魅力です。殆どの閲覧者は縦スクロールは苦にならないので、下方向にページが伸びても対処出来るので、表示領域の狭さは十分カバー出来ると思います。


フッタ型ナビゲーション
JavaScriptによるリンク先です:画像拡大拡大[12KB]

フッタ型ナビゲーション
私自身はフッタ型はデメリットばかり目立ってしまって、あまりおすすめしません。心理学的にはナビゲーションが下部にあった方が使いやすいと言われていますが本当にそうでしょうか?日本人は縦書き社会です、上から下へと視線を動かすクセが子供の頃から身に付いています。下部にあると言うことは目立たない=気が付かないって言うことになる可能性があります。そしてフッタ型はその性質上フレーム構造にしなければなりません。フレームが悪いとは言いません、事実前々回まで小道具屋はフレームにしていました、しかしフレームにしたことで、検索エンジンのGoogleから外れてしまいました。どうもGoogleはフレーム構造のWebサイトは引っかかりにくいみたいです。


逆L字型ナビゲーション
JavaScriptによるリンク先です:画像拡大拡大[14.6KB]

逆L字型ナビゲーション
最近はやりの逆L字型ナビゲーションは大量なコンテンツがあるサイトに適したタイプです。上部のメインコンテンツのリンク、左サイドにサブメニューリンクを持ってくるのでリンク階層をしっかり設計しないと閲覧者が迷子になる可能性をもっています。後述するパンくずリストなどは必要になるでしょう。尚、中身のあまりないサイトをこの形にしてしまうと、かなり悲惨なデザインになるので、サイトのコンテンツ量と相談してから構築して下さい。



目次ナビゲーション

目次ナビゲーション
目次型はもっとも基本となるナビゲーションです。普通にリンクを張ったとき次ページに行くときのリンクだと思って下さい。


グローバルナビゲーション

グローバルナビゲーション
左サイドや上部にリンクを置き、どのページからでも素早く好きなページに行けるとても便利なナビゲーションです。特に大規模サイトなどはナビゲーションが複雑になりやすいので必須になります。ただしグローバル型を採用した際には、全てのページにリンクを記述するので、リンク切れには特に気を付けて下さい。それと、コンテンツが増えたり減ったりする動的サイトには不向きです。(リンクを書いてアップロードするのが面倒だから)


ローカルナビゲーション

ローカルナビゲーション
グローバルナビゲーションが、各階層から移動できるのに対して、ローカルナビゲーションは同じコンテンツ内の移動を容易に行うものです。グローバルナビゲーションのサブ的に使用することで、そこ効果が発揮されます。特に必要と言うことは無いですが、あれば便利です。


トップページへの直接リンク

トップページへの直接リンク
サイト内で迷子になったり、一からサイトを見直す時など、トップページに戻りたくなります。そのために直接トップページに戻れるリンクを各ページに配置するのは必須です。検索エンジンなどでトップページ以外に直接来た場合などは、直接リンクがあるか、無いかでそのサイトのアクセス数が変わって行きます。
主に直接リンクは、サイトロゴや下部に設置していくのが良いでしょう。


パンくずリスト

パンくずリスト
通って来た道順を示す事で現在位置を表示する。後戻りも出来るので非常に便利です。手軽でスペースも取らないので小さなサイトでも効果的です、ただしナビゲーションバーの書く場所には注意が必要です。ページ内に埋もれて目立たなくしても意味が無いですし、そうかと言って目一杯目立たさせるのもどうかと思います、バランスを考えて記述して下さい。尚、パンくずリストはグローバルナビゲーションを補足するものと考えれば良いでしょう。

例:HOME >> Navigation >> ナビゲート


直線型ナビゲーション

直線型ナビゲーション
直線型は、連続したコンテンツなどや、長文コンテンツを数ページに分けたときなどに使用します。「次へ」、「戻る」などの表記で行うのが一般的で、変則的にページ数を列記しておき直接飛べるようにしておく方法もあります。