2011年2月21日月曜日

ナビゲーションの基本レイアウト

スポンサーリンク

ユーザビリティの観点から考えると、他のサイトと類似性の高い方が利便性がよいといえます。
簡単にいえば、慣れが重要だということですね。

では、多くのユーザーが慣れているレイアウトとはどんなものでしょうか?



ナビゲーションの種類


レイアウトするにはどのようなナビゲーションがあるかを予め決めておかねばなりません。
サイトによっていろいろと変化はあるでしょうが、基本は以下のように分かれます。

  • グローバルナビゲーション
  • ローカルナビゲーション
  • 機能ナビゲーション
  • 関連ナビゲーション

以下、簡単な説明です。

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

名前の通り、全体に関わるナビゲーションです。

ラベルにはサイトの中心となる内容を記載し、サイトのどのページでも常に表示することが基本。
分類としては大分類でありサイトの中でも大きな概念を表現しています。

極論すれば、グローバルナビゲーションを見ることによりこのサイトがどういうサイトなのかが分かります。

ローカルナビゲーション

グローバルナビゲーションで移動した先で、更に詳細に分けられたラベルによって構成されるナビゲーションです。

中分類にあたり、グローバルナビゲーションよりも詳細なラベルを用います。
基本的にはグローバルナビゲーションで移動した先のローカルナビゲーションには、他のグローバルナビゲーションのローカルナビゲーションを表示することはありません。

あるローカルナビゲーションが他の大分類のためのローカルラベルまでも表示してしまうと、ユーザーが混乱してしまうからです。

機能ナビゲーション

サイトの内容とは独立したページへのナビゲーションが機能ナビゲーションです。

抽象的な言葉では分かりにくいので、具体例を。
例えば、『問い合わせ』『アクセス方法』『サイトマップ』『会社概要』などなど。
サイトにとって必要ではあるけれど、メインコンテンツの文脈には入れるべき内容ではないページです。

グローバルナビゲーションと同様にどのページにも表示されることが一般的です。

関連ナビゲーション

関連するページや特定の箇所へのナビゲーションです。

メインコンテンツの本文内のある語句をアンカーテキストとし、リンクを張ることが基本です。
それ以外では、ブログでは馴染みの記事の最後に付与される関連記事へのリンクもあります。

SEOで一番発リンクの価値が高いと言われているのが、本文内の関連ナビゲーションです。
理由は簡単で、グローバルやローカルナビゲーションのようにサイト全体や複数のページに同じように設置されたリンクではないからです。

ナビゲーションの基本レイアウト


WEBサイトでよく使われるナビゲーションの基本レイアウトは以下のとおり。



面白味もなにもありませんが、基本はこんなものです。
実際、いろいろなサイトを見ていただければ分かりますが、上図の形式にあてはまるものがほとんど。

形式を崩すとどうなるか

上図の形式を崩したナビゲーションにするとどうなるのか?

例えばグローバルとローカルナビゲーションを入れ替えた場合、高確率でユーザーは混乱することでしょう。
ローカルナビゲーションは内容がどのページでも常に同じでは無いという特徴があるため、グローバルの位置にあるラベルが変わることになります。
動かないと思っていた部分が動くと、それだけで混乱を引き起こします。

また、制作上でも大きな問題があります。
横並びのナビゲーションはラベルの長さと個数に影響を受けるため、文字数の変動には非常に弱い構造です。
そのため横並びのナビゲーションは常に同じラベルであることがのぞまれます。

結び


今回は基本的なナビゲーションの位置についてまとめてみました。

基本的な場所はほとんど変わらないので、一見簡単にレイアウトが出来そうに見えます。
簡単に出来るレイアウトは魅力が弱く、それだけではオリジナリティもだせません。

実際には細かい微調整をしたり、パーツの装飾を工夫したり、モーションを付けたりします。
結果としてそれぞれのサイトにふさわしいナビゲーションが完成します。

スポンサーリンク

0 件のコメント :

コメントを投稿