今回は視線の法則のお話。
チラシやwebなどを見る際の「視線の動き」を意識してレイアウトを組む事で、訴求力やクリック率、滞在時間などの改善に繋がりますよ、というお話です。
チラシやwebで視線を意識することが必要な理由
理由として、チラシやwebなどは基本的に「目で情報を読み取る」媒体だから、という事が挙げられます。
そのため、読み手や見る人の視線の動きを意識する事で、一番読んで欲しい内容や伝えたい事などを効果的に見せる事が出来ます。
また、レイアウトを整える事で見やすくなったり、直感的に内容を把握しやすくなります。
今回ご紹介するのは
- Zの法則
- Fの法則
の2つの法則です。
Zの法則の概要
Zの法則とは、文字通り視線が「Z」のように動く、という法則です。
チラシなどの紙の媒体などでこの法則を意識したレイアウトが見られます。
なお、コンビニなどの陳列棚でも同様の法則が使えますので、デザインに携わる職業の人のみならず、店舗の管理者の方(あるいは商品の陳列担当の方)もご存知かと思います。
陳列マニュアルが用意されている場合は、法則についても言及してあるかも知れません。
この法則は、視線が「左上から右へ、そして左下に動き、右へ動く」という特徴を利用したもので、効果的に活用するために下記のような配置をとります。
- 一番重要な内容や、訴求したいものは左上に
- その他の訴求したい内容は右上や左下、右下に
このように、中央ではなく四方に重要な内容、訴求したい内容を配置するといったイメージです。
Fの法則の概要
Fの法則の「F」も視線の動きを形容したものです。
こちらはホームページなど、web上の媒体でよく使われている法則です。
ホームページが日常的に閲覧されるようになったのは、チラシが普及するよりもかなり後の事ですから、比較的新しい法則であると言えます。
そのため、昔からある「Z」の法則にのっとって作られたホームページは沢山あります。
しかしながら、「web」というものにはチラシなどの「紙」とは違った性質があります。
それは、「目が疲れやすい」という事。
ブルーライトカットのメガネが売れている理由の１つもそうでしょう。
そして「似た内容や同じようなコンテンツ」が、他のページやサイトで「簡単に見つけられる」という事です。
このような性質は意識的に、あるいは無意識に、下記のような反応になって表れ、さらに視線の動きにも影響します。
- 沢山の(全ての)文字を読まない。
- 大きな見出しや目立つ文字のみを読み、内容を把握しようとする。
基本的には「Zの法則」と同じように「左上から右へ」視線は移動しますが、そこに「webの性質」が加わり、視線は開始地点から下に向かいます。
そして下に向かう途中で見つけた大きな見出しや目立つ文字、画像などの気になるポイントで右に向かいます。
視線が左上から右に移動した後は、ページをスクロールして、気になった部分でスクロールを止めて内容を読む、という動きです。
この動きを線でなぞると「F」という文字のように見えませんか？
実際には気になったポイントで視線が左から右に移動するたび「F」の「横棒」が増えていきますので、読み手の気になる内容が多いほど「F」という文字ではなくなっていきますが…。
もちろん、「F」の「横棒」が増えることで滞在時間は増えていきます。
レイアウトを組む際や記事などのコンテンツを作成する際には「見出し」や「画像などのアイキャッチ」を視線が動く箇所（縦棒）に配置し、横棒を増やしていきましょう。
終わりに
いかがでしょうか。
普段何気なく見ているチラシやwebサイトにも、このような手法が取り入れられています。
今回は「Zの法則」そして「Fの法則」を別個にご紹介いたしましたが、それぞれを組み合わせて使う事が効果的な場合もあります。
「見やすいなぁ」と感じるチラシや、よく見るwebサイトなどがあれば、一度視線の動きを意識して見てみてください。
何気なく見ているデザインにも、レイアウトを組み立てる際の参考になる発見があるかもしれません。