スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeウェブデザイン基礎講座 > 効果的なWebサイトナビゲーション

効果的なWebサイトナビゲーション

投稿日:2006年6月20日   レベル:−    ソフトウェア:−


効果的なサイトナビゲーションは目立ちます。明確でいて、デザインも良い、ということになります。

サイトのセクションを明確に示す必要がありますし、誰かがサイトを訪れたときには、今、どこにいるのかがすぐにわからなければなりません。ナビゲーションは必ず最初に目に付くほどのデザイン性は必要ありませんが、高いデザイン性があるにこしたことはありません。

多くのサイトで、ナビゲーションの存在が薄いような気がします。ページの中に潜んでしまっているのです。しかし、常に人の意識を捉えるようなものであってもいけません。ページのほかの部分に多くの色や強いデザインが施されているために、存在が薄くなってしまうのです。

時として、それもいいかもしれません。ナビゲーションの内容に、プライバシーポリシーなどというのは、構いませんが、強調する必要もありません。

しかし、これらの例外を除いて、ナビゲーションは使われるためのものですし、サイトの他の部分に比べて大きく見劣りするようでは困ります。

ここにサイトナビゲーションを目立たせる4つのコツを紹介します。

100_101_023_1.jpg


1.最初に目に留まる場所に配置する

これは位置取りの問題です。ナビゲーションはサイトの一番上の左に設置しましょう。

ユーザーがサイトを訪れたとき、左から右へその視線を動かすので、最初の場所は左の上ということになりますよね。よって、ナビゲーションは左上に設置してください。場所がわからなくて探すときも、その位置にあることを、多くの人が予測するはずです。

2.色を使う

大きくする、ということを除けば、色を付けるということがページの中で目立たせる最適な方法でしょう。目立つような配色を考えてみてください。

一般的なテクニックとしては、色をつけた部分に配置する、強調するために線で囲んだりすることなどがあります。これらの方法は、ページのほかの部分と強いコントラストを生み出すために有効です。

覚えておいて欲しいのは、最も目立つ、明るい色を使えば、そのページ中で一番目立つことになるでしょう。しかし、そうすることが正しいとは言えず、ページのほかの部分と比べて、目立たせれば良いのです。そうすることで、全体のデザインにもまとまりが生まれるでしょう。

もし、サイト全体が明るいのであれば、白っぽい色を使っては、全く目立ちません。しかし、サイトが暗めの色調ならば、とても強いコントラストが期待できるでしょう。

3.空間を与える

もし、サイト自体がとても細かく、複雑なデザインになっていればチャンスです。このようなデザインの中では、ゆとりをもった部分が非常に目立ちます。
訪問者にとっても、そのような場所は目に付くことでしょう。ナビゲーションの周りが込み入っているときはそれを最大限に利用してください。

4.広告から切り離す

ナビゲーションを目立たせるためには、広告から離すことをしてください。

ウェブを見ている多くの人にいえることは、その内容よりも先に広告に目が行ってしまうということです。そして、バナーなどは多くの人が好いていないため、次の瞬間には広告を無視しようとします。ですから、ナビゲーションは広告と物理的に切り離して配置することが重要です。

さらに、2つのポイントを言うと、ロゴより上にナビゲーションを配置しないようにしましょう。中央上部はバナーの定位置であるため、多くの人に無視されてしまいます。

また、ロゴの右側などの空白にナビゲーションを配置するのも、バナーのように見えてしまいます。バナーと混同されるような配置は避けてください。

さらに、広告と配置を切り離しても、ナビゲーションが広告のようなデザインでは同じことになってしまいます。四角いボタンや、イメージを上方に配置すれば、それだけで広告のように見えてしまいます。

例えば、http://www.sendfree.comを見てください。メンバーログインボタンがナビかどうか非常に不明確です。これは、一見広告のように見えてしまいます。

ボタンやイメージに関しては、広告と混同されないように心がけてください。ユーザーに対して混乱を招くような要素は排除していきましょう。
位置、色、空白、広告との離別。これがナビゲーションを目立たせる4つのコツです!

引用:Web Design Library著者:Jamie Kiley翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング