Webサイトなどの視線誘導で活用される「Zの法則」「Fの法則」とは？

チラシや広告、Webサイトといったデザインには、ユーザーの視線を誘導させるテクニックが使われています。視線誘導は、魅力的なWebサイト制作において欠かせないものです。そこでこの記事では、視線誘導のメカニズムを解説しつつ、Webサイトでよく活用されているZの法則・Fの法則についてご紹介します。

 

視線誘導のメカニズム

Zの法則とFの法則について解説する前に、まず視線誘導がどういったメカニズムであるかを理解する必要があります。ここでは、視線誘導の概要となぜ必要なのか、ドイツ人の名前を冠した法則についてご紹介します。

視線誘導の概要

ユーザーの視線をコントロールし、載せる情報を正しい順序で導くための手法です。さまざまな分野で使われる技術で、瞬時に情報を把握できるデザインであれば、視線誘導の技術が活用されていると見ていいでしょう。

視線誘導をうまく活用できると、Webサイトなどでの離脱率を低下させてサイト滞在時間をのばす効果や、情報量がおおくても正しく伝達できるなどのメリットがあります。うまく活用できていないとユーザーに知ってもらいたい情報を見逃されてしまうケースが増えてしまうので注意しましょう。

視線誘導はなぜ必要なのか

視線誘導の技術がデザインに取りいれられているのには、2つの目的があります。
ひとつ目は、ユーザーに情報をスムーズに伝達することです。視線誘導にはユーザーが伝えたい情報とは別の情報に注目してしまいそうな場合、注意を逸らして目的の情報へと視線を誘導する効果があります。強調する部分を意図的に配置すれば、もっともアピールしたい情報に導くことができます。

ふたつ目は、ユーザーの視線の動きをサポートすることです。ユーザーにどのような流れで読んでもらいたいかを知らせて、スムーズな視線の移動を促します。とくに情報の変化が激しいゲームのUIデザインにおおく活用されています。

ドイツの活版印刷の発明者の名前を冠した視線誘導の法則

均等に配置された情報を見る際に左上から右下に視線が移動することを「グーテンベルク・ダイヤグラム」と呼び、ドイツ人の活版印刷技術の発明者ヨハネス・グーテンベルク氏の名前からとられた視線誘導の法則のひとつです。

おもに横書きが主流の欧米文書で活用されており、紙面を4つに分けてそれぞれに適した情報を掲載してメリハリをつけていきます。横書きの文書は、左上から右下へ揺れながら視線が移動すると考えられており、繰り返しおこなう読書の習慣から生まれた動きを「読書重力」と呼びます。
左上は最初の視覚領域、右下は終着視覚領域、右上と左下は休閑領域と呼ばれ、重要な情報は左上と右下に、補足情報に関しては右上と左下に記載するのがグーテンベルク・ダイヤグラムの鉄則です。
読書文化の違いで右側から読む場合は、左右反対にして法則を活用しましょう。

 

Webサイトを閲覧するユーザーの視線誘導にはZとFを意識しよう！

人の視線は、媒体や書式形式に限らず、上から下へと降りていくのがもっとも自然な動きといわれています。そして、Web媒体では先ほどご紹介した法則とは別の法則が活用されているのをご存じでしょうか。ここでは、Web媒体でよく用いられるZの法則とFの法則、そして主に縦書きで活用するNの法則についてご紹介します。

Zの法則とは

視線がZのように移動することから名付けられた法則で、印刷物よりも画像が多用されるものやWebサイトでよく活用される手法です。
実際にWebサイトの多くはZの法則を用いたデザインになっています。はじめて訪れたユーザーがトップページを見て全体を見渡す際に、何がどこに配置されているか瞬時に把握できるのが特徴です。

ただし、Zの法則は四方の角に視線が集まりやすいため、真ん中の部分は見落とされやすい傾向があります。Zの法則を活用するのであれば、重要な情報は左上に配置して、画像などの目立たせたい情報は四方に配置するとよいでしょう。

Fの法則とは

アメリカの工学博士であるヤコブ・ニールセン氏が発表したWebに特化した法則で、視線がFのように移動することから名付けられました。主に、ニュースアプリやSNS、ショッピングサイトなどで活用されている比較的新しいパターンの法則で、ユーザーが具体的な情報を得てから、内容をさらに詳細に把握してもらうのに役立ちます。

Fの法則は、ユーザーがまず見出しに視線がいき、そのあと下部に降りて読み進めていく仕組みです。内容によっては最後まで読み進めてもらえないケースもあり、情報が読み飛ばされてしまうことも少なくありません。そのため、ただ情報を流すのではなく導線上に画像や見出しなどのアイキャッチ要素を盛り込み、重要な情報は下部に配置しないようにしましょう。

縦書きの場合はNの法則が適用される

人の視線がNのように移動することから名づけられた法則です。視線が右上から右下、左上から左下へと移動するパターンで、雑誌や新聞などによく用いられています。とくに、漫画はNの法則が活用されている代表例で、ページをめくる左側の下部は「引き」と呼ばれ、ユーザーにもっとも興味をもたせる仕組みになっています。

 

Zの法則・Fの法則以外にも視線誘導のコツはある

効果的な視線誘導には、まずユーザーの目に最初に入る情報を理解することが大切です。ZやF、Nの法則以外にもさまざまなことを意識すれば、よりユーザーに効果的に情報を届けることができます。
ここでは、3つのコツをご紹介します。

大きいものから小さいものへの意識づけ

人の視線は、画像や文字を問わず大きなものから小さなものへと移動していきます。そのため、すべての画像・文字のサイズが均等だとうまく視線を誘導できなくなってしまいます。
デザインを考えるうえでは、ユーザーに対して何を伝えたいのかを明確にし、画像・文字の大きさをかえてメリハリをつけて視線をコントロールすることを意識しましょう。

近くのものへの意識づけ

人の視線は、目に留まった近くのものに視線が移動していく特性があります。なぜかというと、ひとつのものを見ているときに、等間隔で羅列されているものよりも近くにある情報の方が視野に入りやすく、わずかな目の移動で見ることができるためです。

ユーザーに読んでほしい情報や関連する事柄は、なるべく近くに配置するようにしましょう。

同系色・形状の同じものへの意識づけ

人の視線は、同形状・同系色を追いやすい傾向があります。Webサイトなどで流れを作りたい場合は、特徴的な形を活用すると、形に視線が誘導されそのまま読み進めてもらえます。情報が均一に配置されている場合は、無意識的に同じ画像や同系色で書かれている文字に視線を誘導できます。

とくにWebサイトのなかで、同形状・同系色を繰り返し活用するとスムーズに閲覧できるようになるほか、統一感やデザインの美しさも演出できるでしょう。

 

視線誘導のコツを効果的に活用するポイント

視線誘導をうまくデザインに組みこむためには、いくつかのポイントをおさえる必要があります。ここでは、効果的な視線誘導をおこなうためのポイントをご紹介します。

興味の引く見出し作りを心がける

広告や記事などを閲覧してもらうには、まず興味・関心の引くタイトルや見出しが必要です。いくら書かれている文章の内容が素晴らしいものでも、要点をおさえたタイトルで分かりやすく伝えられなければ、読んでもらえる機会をみすみす逃してしまいます。
タイトルや見出しはターゲットとするユーザーに響くようなものにしましょう。

改行はまとまりを意識する

教科書などに見られる文章は、段落のはじめをひとマス空けて書かれています。しかし、ブログなどにそのルールを使ってしまうと、見栄えが悪くまとまりのない文章になってしまうため注意が必要です。

ブログなどでは、段落との間に空白行を設けることでまとまり感を演出できます。とくに近年は、スマホからWebサイトを閲覧する機会が多いため、一行20文字以内におさめてあると全体が読みやすくなります。

使用する色にもこだわる

重要な部分を全て太字にしたり色をかえたりするのは、おすすめできません。たしかに文字を強調させてユーザーに重要な情報であることを認知させられる効果はありますが、多用すると逆に読みにくくなり可読性が低下してしまいます。

可読性を維持して重要なポイントを目立たせるのであれば、イメージカラーに合った強調色を活用したり、見出しや商品・サービス名などだけ文字を太字にしたりするなどの工夫をするとよいでしょう。

 

*

 

まとめ

今回は、Zの法則・Fの法則を中心にご紹介しました。視線誘導は、ユーザーが求める情報や企業がアピールしたいコンテンツへスムーズに導くために今後も重要視されるテクニックです。
とくに、横読み形式の多いWebサイトなどへの視線誘導は、Zの法則とFの法則を活用すると効果が期待できるでしょう。また、同形状・同系色の活用や近くのものへの意識づけもユーザーの視線誘導に効果的です。

弊社では、視線誘導を取りいれたデザイン制作だけではなく、競合他社との差別化を図る「ブランディング」や制作物をユーザーに届けるための「PRプランニング」もおこなっています。Webサイト制作やUIデザインをご検討中の方はお気軽にご相談ください。