目次
広告制作やWebサイト設計において、「伝えたい情報がきちんと見られているか」は成果を左右する重要な要素です。 効果的に情報を伝えるためには「視線誘導」を活用することが重要だとされています。
視線誘導とは、レイアウトやデザインを工夫することで意図的に視線の流れを誘導し、的確に伝えたい情報へと自然と導く手法を指します。ヒトの視線の動きには共通した傾向がみられることから、左上から右下にかけて読むというグーテンベルクダイアグラムや、Z型・F型・N型の視線遷移などが一般的に知られており、マーケティングやデザインに関わる方であれば一度は耳にしたことがある方も多いかもしれません。
一方で、「理論としては知っているが、本当に狙い通りに視線は動くのか？」「どの法則とどの要素と掛け合わせるべきなのか？」といった疑問を感じたことがある方もいらっしゃるのではないでしょうか。
この記事では、一般的な視線誘導の法則に加えて、アイトラッキング調査から得られた効果的な視線誘導方法をもとに、マーケターが実務で活用できる視線誘導設計のポイントをあわせてご紹介します。
1. マーケティングで押さえるべき「視線誘導の基本法則」
ヒトは広告やWebサイトを閲覧する際に、瞬時に視線を動かして認知し、情報を取捨選択しています。短い時間でヒトの目に留まり、クリックやコンバージョンなどの行動に繋げられるようにするためには、視線遷移の傾向を押さえることが重要です。まずは基本の視線誘導について見ていきましょう。
1-1. 視線誘導の法則
■Z型の視線誘導
左上→右上→左下→右下の順でZ型に視線が動くことを指します。
情報量があまり多くなく、複数の画像やオブジェクトがある場合に多く用いられます。
■N型の視線誘導
右上→右下→左上→左下の順でN型に視線が動くことを指します。
雑誌や漫画などの文字量が多い紙媒体や、縦書き文字を活かしたデザインの広告などで見られる視線の動きです。
■F型の視線誘導
左→右に読みながら、下に視線が動いていくことを指します。
情報量が多く、文中にサブタイトルが含まれるようなWebコンテンツなどで見られる形です。
いずれの型も視線が右に動いた後、一度左に戻って下へ移動するため、左側・上側ほどよく見られるのが特徴です。したがって、特に見てほしい情報は左側・上側に配置するとよいとされています。また、離脱を防ぐためには各アルファベットの終点に次の行動を促すCTAボタンを設置することも効果的です。
1-2. 視線遷移の傾向
他にも上記の視線誘導の法則に加えて、以下のような視線遷移の傾向も活用されています。
■顔の要素
ヒトは乳児の頃から、顔の違いを判別することや表情の違いを認識することに長けています。そのため、ヒト・動物・キャラクターに限らず、顔に対して視線が集中しやすいという特徴があります。
■文字の大きさ
大きい文字から小さい文字を順に目で追うという傾向があり、配置よりも優先される場合があります。
■規則性
規則性がある中で逸脱したものに対して注目が集まります。そのため、他と比較して形状や色が異なるもの、コントラストが大きいものなどに注目が向きやすいとされています。
■動き
動いているものに対して注意を向けてしまうのはもちろんのこと、例え静止画であっても動きが感じられるものに視線が集中しやすい傾向があります。広告クリエイティブ制作において「シズル感」という五感を刺激するような臨場感を求めることが多いのもこの特徴を活用しているためです。
これらを組み合わせることで視線誘導が可能だと言われていますが、本当に意図した通りに視線は動くのでしょうか。そこで弊社ではアイトラッキング調査を実施し、実視線データを計測しました。検証結果を次章でご紹介いたします。
2. 視線誘導は本当に意図通りに動くのか？アイトラッキングによる検証
実際に狙い通りの視線誘導を行うことができるかを検証するため、アイトラッキング調査を行った結果をご紹介します。
調査概要
参加者
21～65歳の男女10名
方法
モニター画面にて静止画広告を順に呈示し、20秒間見ていただきました。その際の視線の動きを計測し、結果は視線ヒートマップの時系列で示します（呈示時間の経過に伴い、左から右に順に掲載。2段の場合は上段左→右、下段左→右の順。）。
結果1 Z型の視線遷移
【ブルーベリー狩り広告】
以下のA広告（左側）とB広告（右側）を比較しました。
A：Z型に吹き出しを配置＋吹き出しデザイン2種
左上の濃い色の吹き出しに視線が集まっていないものの、おおむねZ型の視線配置。
B：Z型に吹き出しを配置＋吹き出しデザイン統一
全ての吹き出しに視線が行き、Z型の視線配置。
【採用広告】
以下のA広告（左側）とB広告（右側）を比較しました。
A：横書き文字＋人の顔が内側を向いている
文字部分はZ型で遷移するが、文字を読んでいる途中で顔に視線が逸れる。
B：横書き文字＋人の顔が外側を向いている
文字部分はZ型で遷移し、文字を読んでいる途中で顔に遷移する割合は、Aよりも下がる。
結果2 N型の視線遷移
【カレー広告】
以下のA広告（左側）とB広告（右側）を比較しました。
A：縦書きで右側に大きい文字＋左側に小さい文字
大きい文字→小さい文字を順に見る効果も相まって、縦書き文字部分においてN型の視線配置。
B：縦書きで右側に小さい文字＋左側に大きい文字
最初の注視点はAよりも分散が見られ、その後は右側の文字→下の文字→左側の文字となり、N型の視線遷移は見られない。
【和食広告】
以下のA広告（左側）・B広告（中央）・C広告（右側）を比較しました。
A：縦書き文字のデザイン
文字部分をN型の順で見ていく傾向あり。
B：Aの左下画像を人の顔を含む画像に変更
開始2秒という早い段階で、文字から人の顔に視線が逸れる。
主観アンケートにおいても、10人中4名が「印象に残った」または「気になった」箇所として顔を挙げている。
C：Aの左上に横書き文字を追記
右上縦書きタイトル→左上横書き文字→左下の画像→右下の文章を右上から読むという順で遷移し、N型の視線遷移ではなく、広く視線が回遊する。
結果3 文字の大きさ
【セミナー広告】
想定通り文字の大きさ順で視線が遷移しており、左下の小さい文字はほとんど読まれない。
結果4 動きのある写真
【ラーメン広告】
以下のA広告（左側）とB広告（右側）を比較しました。
A：動きのない写真
左上にタイトル、左下に詳細が書かれているため、視線が左側に寄っている。
B：動きのある写真
箸上げしている部分にも視線が行くため、右側も含め広く視線が回遊している。
主観アンケートにおいても、10人中6名が「印象に残った」または「気になった」箇所として、箸上げ部分を選択している。
結果5 配色のコントラスト
【そば広告】
以下のA広告（左側）とB広告（右側）を比較しました。
A：上部に薄い背景＋下部に濃い背景
右上→左下の順に視線が遷移し、上部の方が視線集中。
B：上部に濃い背景＋下部に薄い背景
右上→左下の順に視線が遷移し、配色の上下を変更しても上部の方が視線集中。
3. マーケターが使える「視線誘導設計の実践ポイント」
アイトラッキング調査の結果から、視線誘導のためには複数の要素をかけ合わせることが重要であり、少しのデザイン変更でも視線が変化してしまうことが分かりました。実践する際には、意図や狙いに応じて、以下を参考にしてみてはいかがでしょうか。
■Z型・N型など基本法則で視線誘導したい場合
大きい文字→小さい文字の順で見られる効果を活用し、配置に加えて文字の大きさも掛け合わせることで、より的確に視線誘導が可能になります。（参照：カレー広告、セミナー広告）
■あえて基本の法則を避け、広く視線を誘導したい場合
顔のデザインや画像を入れたり、縦書きデザインの中に横書きを加えたり、動きのある画像を用いることで視線を広く誘導することが可能です。（参照：和食広告、ラーメン広告）
■タイトルやテキスト内容を強調したい場合
顔のデザインや画像は避けたほうが視線の分散を防ぐことができます。（参照：採用広告）
■注目させたい箇所がある場合
視線誘導の順番は、配色よりも配置が優先される傾向があります。注目させたいものを視線誘導の起点に配置することで際立てることをおすすめします。（参照：そば広告）
■注目させたい箇所が複数ある場合
注目させたい箇所のデザインや色を統一することで見落としを防げる可能性が高まります。（参照：ブルーベリー狩り広告）
4. まとめ
視線誘導の法則は、Z型・N型・F型が一般的に知られていますが、他にもヒトの視線には共通した傾向があり、広告制作やWebサイト設計で生かされています。効果的に視線を誘導するためには、まず伝えたい情報を洗い出し、優先順位を明確にすることが最も重要です。そのうえで、媒体に適した視線の基本パターンを想定し、ユーザーがどの順序で情報を取得するのかを設計していく必要があるでしょう。
実際に弊社が行ったアイトラッキング調査では、一般的に知られている視線誘導の法則はおおむね見られており、複数の要素を組みわせることで、狙いに沿った的確な視線誘導を行うことができる可能性が示されました。
また同時に、似たデザインであっても、一部の配色やデザインを変更するだけで視線遷移が変わってしまうということも本調査の結果から見受けられました。視線誘導をより精度高く行うためには、仮説に基づいたデザイン設計に加え、実際に視線計測を行い、ユーザーの反応を定量的に確認することも視野に入れてみてはいかがでしょうか。
株式会社NeUではアイトラッキング調査をはじめ、脳や心拍などの生体計測をもとに広告評価や感性評価などを行っています。実験計画の立案から解析まで一気通貫してご支援しておりますので、ご興味のある方はお気軽にお問い合わせください。
■本件に関するお問い合わせ
株式会社NeUニューロマーケティングチーム
E-mail info@neu-brains.com
記事の引用について
本記事を引用される際には、必ず出典として当サイト名および該当ページへのリンクを明記してください。無断転載や内容の改変、出典の記載がない使用は固くお断りいたします。
