東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2016.09.20

chie

基礎知識!ZとFの法則

こんにちは!Maromaroのchieです。

少しづつ暑さも和らいで、秋っぽくなってきましたね。
秋と言えば昔は、「東京ゲームショーの季節だ!」と毎年楽しみにしてましたのを思い出します。
東京ゲームショーは今年も大変の賑わいを見せ、なかでも注目なのはVR系のゲーム!
VRがもっと復旧すると、もしかしたらWEBサイトも実際お店に行ってるような感覚で見れるようになるかもですね。

さて今回は、初心者WEBデザイナーさんに是非とも覚えておいて欲しい基礎知識『Z』と『F』について。

ZとFって?

結論から言うと、『Z』と『F』は広告やWEBにおける人の目線のことです。
人の目線には決まった動きがあると言われており、それが『Zの法則』と『Fの法則』。

普段何気なく見ているチラシやWEBサイト。
チラシを見た瞬間、ページに入った瞬間、自然と左上に視線がいっていませんか?

広告業界、WEB業界では当たり前の法則ではありますが、割と知らなかったりする法則だったりもします。

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

『Zの法則』と『Fの法則』の前にプチ知識として、『グーテンベルク・ダイヤグラム』について。

グーテンベルク・ダイヤグラムとは「均等に配置された情報を見る時、視線は左上から右下に流れていく」というパターンのことで、活版印刷技術の発明者として活躍したヨハネス・グーテンベルグの名をもった視覚誘導です。
横書きが主流である欧米文書で主に使われています。

G

グーテンベルク・ダイヤグラムはWEBよりも印刷物に当てはまるパターンのため、WEBには主に『Zの法則』と『Fの法則』を用いることが多いのです。

Zの法則

Zの法則とはユーザーの視線が、左上→右上→左下、右下 とアルファベットの『Z』のように動くことから『Zの法則』と呼ばれています。

Zの法則

チラシなどにこの手法は多く使用されています。

Fの法則

Fの法則とはユーザーの視線が、左上→右上→少し下に下がって左→右→下 とアルファベットの『F』のように動くことから『Fの法則』と呼ばれています。

Fの法則

『Fの法則』については、ユーザビリティ研究の第一人者ヤコブ・ニールセン博士の調査で明らかになっています。

f_reading_pattern_eyetracking
参照:ヤコブ・ニールセン博士の論文の原文より

ZとFの違いって?

一見、あまり変わりの無い法則に見えますが、ちょっとした行動の違いがあります。

Zの法則

初見ユーザーに見られる行動。
まずはざっとページの全体を見るため、このような目線になること多い。

トップページなどはこの『Zの法則』を用いたレイアウトが多い。

Fの法則

リピーターに多く見られる行動。
上から順にじっくりと上部を閲覧してから、下部に移動することが多い。
WEBの調査によって明らかになったパターンのため、WEBサイトの取り込みへの信頼が高い。

商品ページや記事ページに『Fの法則』を用いたレイアウトが多い。

まとめ

WEBデザインは、時代や目的などにもより視線誘導は変わってくるかもしれませんが、基礎知識として『Zの法則』と『Fの法則』は覚えておいて損はありません!

一番見せたいことは上部に配置する!これ重要です。

視線誘導の法則を意識することで、レイアウトのヒントに繋がるといいですね!

定番レイアウトについてはこちらの記事がおすすめ!