スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

  1. お客様に流し読みされないホームページにする視線移動のパターン
 

お客様に流し読みされないホームページにする視線移動のパターン

2015/06/01

こんにちは!じゃすみんです。

 

皆さんいつもホームページを見るときって、どこから見ていますか?

大体の方は一番左上から右上、そして下へと繰り返して見ていくのではないのでしょうか。

(わざわざ一番下までスクロールしてから、下から徐々に見ていく・・・って方ははいませんよね・・・?)

 

意識しているわけではないけれど、無意識に「一番左上」から見ていくのは、ホームページに限らず、パンフレットや雑誌などを読んでいて知らず知らずのうちに身に染みているからです。

逆に言えば、視線誘導のパターンが固定化されているのです。


グーテンベルク・ダイヤグラムとは

グーテンベルク・ダイヤグラムさて、一番左上から右下へと見ていく、もっとも一般的な視線誘導のパターンの名前を知っていますか?

このパターンの名前は「グーテンベルク・ダイヤグラム」と言うそうです。

(パターンの名前に使われているグーテンベルクとは、ルネサンス時代を生きた活版印刷の発明者の名前だそうですよ!)

 

詳しくご説明すると、「均等に配置された同質の情報を見る際の、一般的な視線の動きのパターン」というものです。

特に文章量が多いコンテンツには当てはまりやすいパターンです。

 

ただ、これは一般的な視線誘導パターンの基本の一つで、媒体によって効果的な導線は異なります。




Z型のパターンとは

Z型のパターン次に多いのが「Z型のパターン」。

Z型のパターンとは、左上→右上→左下→右下という風にZの形に視線が誘導するパターンです。

横書きの雑誌やパンフレットなどでよく見ることが多いですね。




F型のパターンとは

F型のパターン3つ目にご紹介するのは「F型のパターン」。

F型のパターンとは、上から左→右へ、一段下げて左→右へと繰り返し視線が移動するパターンです。

これはWEBにおける視線移動の研究から提唱された比較的新しいもので、リウムスマイル!で提供している業種別のお手本もこのパターンに沿ったレイアウトとなっております。

 

左の図からわかるようにできるだけ重要なコンテンツは、左上の一番目に入りやすい配置することをおすすめいたします。

また、右サイドの上部〜中盤のところに「メルマガ登録」のバナーを設置すると、目に入りやすくなり、登録率も高まるそうです。




パターンに沿ってメリハリを!

パターンに沿ってメリハリを!どのパターンでも言えることですが、だらだらとした文章だけを載せるのは読み飛ばされる可能性が非常に高いので注意してください。

 

お客様の目線に留まるよう、導線上に提供しているサービスの写真を差し込んだり、見出しを使ったりポイントになるところは色を変えたりと、メリハリをつけることが大事です。

(ただし、何でもかんでも色を付けたり、太字にしたりとやりすぎは禁物ですよ!)


商用サイトでも使える写真・イラスト素材サイトさんを下記ページでご紹介しています。

>> 2015年版!商用利用可の無料イラスト・アイコン素材サイトまとめ

>> 2015年版!商用利用可の無料イラスト・アイコン素材サイトまとめ



目標をしっかり設定しましょう

リウムスマイル!では、ご自身で好きなようにレイアウトを変えることができ、また好きな場所に好きなパーツを表示することができます。

ホームページの目標をしっかりと設定して、ホームページを見てくれたお客様がどう行動するのか、導線を考えてレイアウトすることが大切です。

 

せっかく作ったホームページなのに、視線誘導がきちんとできていないせいで、バーッと流し読みされてそのまま閉じてしまう・・・なんてもったいないですからね!

今一度、お客様目線でご自身のホームページの導線をチェックしてみてください。



【リウムスマイル!ユーザー限定】
パーソナルサポートでホームページをチェックしませんか?

  • 自分でホームページ作ったからイマイチ見やすいかどうかが分からない・・
  • 今のホームページを総チェックして、改善点を教えてほしい・・・
  • 自分で何とか作ったけどカッコ良くしてほしい・・・

という方は、一度リウムスマイル!のスタッフと一緒にホームページをチェックしてみませんか?

ちょっとした改善ならアドバイス時間中にご一緒に行います。

>> 詳しくはこちら!