こんにちは！クリエイターのMです。
デザインのレイアウトってどうしたらいいか迷うこと、ありませんか？
アートのような自己表現のデザインとは違って、
私たちがつくるのは「集客したい」「ものを売りたい」というように、
何かしらの目的があり、それを実現させるためのデザインです。
限られたスペースの中でレイアウトを考えて、伝えたい情報に優先順位をつけ、要素を配置する。
どんな印象を与えたいかを考えたり、ターゲットの人を想像しながら、
見やすく、正確に情報が伝わるようにデザインしていくことが、私たちの仕事です。
この時に、今回お伝えする「視線誘導」の考え方を知っていると、
どこに何の情報をおけばいいか、納得しながら決めることができます。
目次
視線誘導とは？
ユーザーの視線の流れを意図的にコントロールするために用いられる方法の１つです。
視線誘導には大きく２つの目的があります。
・ユーザーに情報を認知させる
ユーザーが注目している場所から注意を逸らし、より注目してほしい場所に視線を移動させることで、
情報を分かりやすく届けることができたり、狙った効果を得ることができます。
・ユーザーの視線移動をサポートする
ユーザーに対して次にどのようなアクションを行えば良いかを伝え、スムーズに進むように誘導していきます。
視線誘導の種類
人の視線の動きで最も自然なのが、上から下への動きです。
縦書きでも横書きでも、印刷物でもWebサイトでも、すべて上から下へと読み進めます。
その視線の動き方にも様々なパターンがあるのでご紹介します。
・グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラムとは
「均等に配置された情報を見るとき、視線は左上から右下に流れていくように習慣づけられている」
とするパターンです。
重要な要素はこのライン上に沿って配置するとユーザーの目に入りやすいと言われています。
また、ユーザーは一番最後に見たものを最も鮮明に覚えているという特徴があります。
そのため、一番最後に視線が来る右下の部分には最もアピールしたいことを記載するのがオススメ。
興味を持ったユーザーが迷わないよう、次に行うべき行動をしっかりと指示してあげることが大切です。
・Z型
ユーザーの視線が左上→右上→左下→右下の順番に、アルファベットの「Z」のように動くパターンのことです。
グーテンベルグ・ダイアグラムと同様のパターンで、横組みの文章を読むときによく使われており、
情報の強度が均一であるときに有効なパターンです。
特に重要な要素は、最初に視線がいく左上に配置すると良いでしょう。
チラシやパンフレットなどの印刷物だけでなく、
WebサイトでもこのZ型のレイアウトで構成されることが多くあります。
・F型
ユーザーの視線が左上→右上→左下→右下とアルファベットの「F」のように視線が動くパターンのことです。
Webサイトを見るときの多くがこのF型になっています。
ユーザーはまず見出しに視線を向け、そのあと下におりていくという仕組みです。
右下や最後まではユーザーが読まなかったり、流し読みしてしまうことがあるため、
重要な情報は左上から右上の見出し部分に配置すると良いですね。
・N型
ユーザーの視線が右上→右下→左上→左下と、アルファベットの「N」のように移動します。
他の法則と違い、横書きではなく縦書きで書かれた文章を読む際に多い動きです。
私たちが小さい頃から目にしてきた絵本や教科書等が同じようなレイアウトになっているので、この視線の動きが習慣として身についています。
無意識のうちについている習慣を利用してレイアウトを行い、視線を誘導していくことで、正確に情報を伝えていくことができます。
そのほかの視線誘導パターン
・大きいものから小さいものへの視線の動き
人はまず大きいものに視線がいき、その後小さいものへと視線が移動していきます。
すべての画像や文字が同じ大きさになっていると、全体がフラットに見え、読み飛ばしてしまいがちになります。
そのため、ユーザーに伝えたいことを明確にし、大きさを変更してメリハリをつける必要があります。
そうすることで、読みやすい、伝わりやすいレイアウトになります。
・近くにあるものへの視線の動き
人の視線には、近くにあるものに視線が移動していくという性質があります。
要素を見る際、近くにある要素がすでに視界に入っており、少し視線を移動させただけで見ることができるので、
近くにあるものへ視線が移動しやすいといわれています。
関連する情報や要素は近くに配置してグループ化してあげることで、情報が見やすくなるのと同時に、
見てもらいたい情報へと視線を誘導することができます。
・同形·同色への視線の動き
人の視線は、情報が均一に配置されている場合、無意識に同形・同色を追って視線が移動する性質があります。
同じような情報が並ぶときに同形・同色でレイアウトすることで見てほしい内容・情報へ視線を誘導することができます。
また、デザインの中で同形・同色を繰り返し使うことで、全体に「統一感」や「一貫性」をもたせることができ、
デザインの美しさを演出することもできます。
まとめ
いかがでしたでしょうか？
レイアウトを考えるときに、この「視線誘導」の考え方を知っておけば、
「このデザインはグーテンベルク・ダイヤグラムの視線の動きになるから、
右下に重要なもの（コンバージョンにつながるお問い合わせボタン等）をおけばいいな！」
などと考えてデザインをすることができるようになります。
ぜひ「視線誘導」の考え方を取り入れてみてくださいね！
