WEBサイトを見た”瞬間”
パソコンでインターネットをされている方なら、毎日多くのWEBサイトをご覧になっていると思います。
今まで見たことのないサイトにたどり着くには、
1.Yahoo!やGoogleで興味のあるキーワードを入力して検索する。
2.一覧表示された検索結果の中から、グッとくるサイトをクリックする。
3.サイトを開いて、内容を見てみる。
というのが最も多いパターンではないでしょうか。
では、今まで見たことのないWEBサイトを見た”その瞬間”、皆さんはそのサイトのどこを見ていますか?
WEBサイトでの視線の動き
実は、初めて訪れたサイトを見るとき、人の視線は無意識にとても面白い動きをしています。
下の図はWEBサイトを閲覧している時、その視線はどこ用に動くのかを実験して得られた結果です。
WEBサイト閲覧時の視線の動き(F-Shaped Pattern For Reading Web Contentより)
赤い部分が視線の動きですが、アルファベットの「F」を描くように赤くなっていることが分かります。
見ず知らずのサイトを見るとき、多くの方は
「このサイトは自分がじっくりみるべきサイトか?」
「このサイトには自分の探していた情報があるか?」
という意識を持っています。
そのサイトを見ても欲しい情報が得られない、自分の役に立たない、とわかればすぐに検索サイトに戻って、他のサイトを探したいですからね。
およそ2秒の判断
一般的にサイトの閲覧者は、「サイトをじっくり見るべきか」という判断を、サイトを開いた一瞬(おそらく2秒以内)で下しており、そのための視線の動きが、上の実験結果にあらわれています。
アルファベットの”F”を描くようにサイトを見ることで、
1.サイトの名前
2.サイトのメニュー(コンテンツ)
3.ページのタイトル(ページコンテンツ)
をザックリと目で追って、内容をじっくり見るのはそのあとです。
ということは、制作者サイドから見ると、この”F”のライン上に、見ている方が「じっくり見なきゃ!」と思うような仕かけを配置しておく必要があります。
では、どんな内容を配置していけばいのでしょうか?
1画目:サイトタイトル+キャッチ
”F”の一画目(最初の横線)には、サイトのタイトルを配置するのがベストです。初めて訪れる方でも、サイトのタイトルからおおよその内容を判断していただけます。
また、タイトルを補助するためにキャッチコピーをタイトルの近くに配置するのも効果的です。
例えば会社(店舗)名=サイトタイトルという場合も多いですが、それだけだと何のサイトか一瞬で判断できない場合が少なくありません。
そこで会社やお店のサービスが一瞬でわかるよう(なおかつ魅力的)なキャッチコピーでこれを補完します。
2画目:サイトメニュー
2画目(縦線)には、サイトのメニューを配置します。
最近、メニューリストが右側に配置されているサイトを見かけますが、”F”の視線動向からいくと左側の方が好ましいでしょう。
(メニューリストを右側に置いたデザインでの”仕かけ”もありますので、「メニューは右側がいい!」という方にはご提案しています)
メニュー名には専門的な言葉はなるべく避け、一瞬で理解できるようなわかりやすい名前にしておくのがポイントです。
3画目:サイトメニュー
3画目(2本目の横線)にはそのページで何が書かれているのか、のタイトルを配置すると効果的です。
お店や会社の営業時間が書かれているなら、
『営業時間のご案内』
おいしいコーヒーの淹れ方について書いているなら、
『家庭で手軽に!香り高く美味しいコーヒーの淹れ方』
とわかりやすく(魅力的に)書いておきます。
その下に書かれている内容と区別がつくように、大きめに目立たせておくのがポイントです。
じっくり見てもらうための言葉を散りばめる
このように”F”の3本のラインに適切な内容を配置しておくことで、サイトを訪れた方は、
1.サイト名とキャッチでサイトのおおまかな内容を判断
2.メニューを見てサイトに含まれる内容を判断
3.ページタイトルで、今見ているページの内容を判断
という3つの判断を瞬時に下すことができます。
そして、ここに見ている方の心をひきつける内容(言葉・キーワード)を散りばめておくと、多くの方がサイトをじっくり見てくれることになります。
動向を意識したサイト作り
実はこの”F”の法則をさらに活かすために、非常に重要で効果的な仕かけがもう1つあります。GBにホームページの制作をご依頼いただいた場合は、上でご説明した”F”の法則はもちろん、もう1つの仕かけまで含めたデザインをご提案しています。
このように、訪問者(閲覧者)の動向もよく意識しながらページを作り込んでいくことが、WEBサイトの制作では非常に重要なメソッドとなっています。
見た目の美しさ(ビジュアル)と、閲覧者の動線を意識したサイト設計の組み合わせが、効果を出すホームページ制作の最大のポイントですね。




Yahoo!ブックマーク
Google Bookmarks
niftyクリップ
はてなブックマーク
livedoorクリップ
del.icio.us