ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

視線の移動の法則について Fの法則、Zの法則とは?

ウェブサイトや紙媒体の広告をデザインをする際に必要になるのは、人間の視線の動きですね。

実際に、人間がどの様にウェブサイトや広告の画面を見ているのか、については、色々な方が研究されています。

これを書いている筆者の個人的な経験からいくと、どの様に人がサイトや広告を見ているかについては、

そのサイトや広告に
-------------------------
・どのような写真が配置されているか
・どのような色味なのか
・どこにナビゲーションを配置したか
-------------------------
等など、様々な要素によって都度変わってしまうので、視線の動きに関して、どんなデザインにも当てはまる、一般的な法則はあまり存在しないと思います。

その為、そのサイトごとに、サイトを見ている人間がどの様に視線を動かしているのかを知りたい場合は、アイトラッキングなど、専門の視線を追う機械を使ってを調べる必要があります。

ただし、実際にサイトを制作する際は、細々調べて制作する事ができる事はあまりないですよね。

予算的にも時間的にも、アイトラッキングなどを制作段階で行う事は、なかなか難しいのではないでしょうか。

そこで今回は、多くの紙面やサイトを研究された方が、提唱している、一般的な視線移動の法則についてご紹介します。(あくまで一般論的な話ですので、全てのデザインに綺麗に当てはまったりするものではありません)

zの法則


まずはZの法則です
Zの法則は画面を「Z」字に見ていくという法則です。

zの法則

こちらは紙媒体の広告紙面の研究から提唱された法則だったと思います。
下記の図のように「左上、右上、左下、右下」という順番でユーザーの視線が動くためこの「左上、右上、左下、右下」の視線上に重要なコンテンツを配置すると良い、という様な説です。

自販機やスーパーなどの商品の陳列などに、この法則をとりいれている所もあるはず。

Fの法則



もう一つはFの法則です。

こちらはウェブサイトを閲覧している人は「F」の字の形で、視線が移動するという法則です。
*視線の動きは下の画像を参照。

ウェブサイトの視線移動などを研究して出てきた比較的最近提唱された理論で、紙媒体などには当てはまらないようですので気を付けてください。(あくまでも対象はウェブサイトのデザインです)

Fの法則

最初にページの一番上のコンテンツエリアを左から右へむかって水平に視線移動させます。
その次に、ページを少し下に向かって視線移動させ、再びそのラインで第2の水平移動をします。
その後、左サイドから垂直下方向に向かってページをスキャンするようにみていくのだそうです。

こちらはZの法則よりは新しい法則ですので、検索でしらべるとより詳しいサーモグラフィみたいな図入りの説明記事などがでてくると思います


以上が、一般的な視線移動の法則です。
これらを参考にレイアウトをしていくと、ある程度はユーザーの視線を意識したデザインができるかもしれません。

*ちなみに、Zの法則は基本的には紙媒体の広告などで唱えられていた説ですので、紙媒体のをデザインする場合はZの法則、
Fの法則はウェブサイトの視線調査から出てきた説ですのでウェブサイトをデザインする場合はFの法則だと思ってください。


あくまでも実際の視線の動きはページや広告のデザインにより変化しますので、この法則があてはまらないことは非常にあるとおもいます。
(何もかもこの法則に従ってデザインしてもあまり効果はないと思いますので、その点も気を付けてね)




Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集