【視線誘導とは？】バナーやLP、資料に活かせる！目線の動きを意識したレイアウトパターン

バナーやLP、プレゼン資料など誰かに見せるものを作る時、目線の動きを意識してデザインしていますか？

人には何かを見る時、無意識に「この順序で見る」という視線のパターンがいくつか存在します。たとえば飲食店のメニュー表も、最初に大きく配置されているメニューは「これがオススメなんだな」と認識したり、メインメニュー→サイドメニュー→ドリンク……とカテゴリごとに配置されていると、流れがあって見やすいですよね。

伝えたい情報を意図した順序でユーザーに見てもらうには、目線の動きを意識してデザインする必要があります。そのための手法が「視線誘導」です。

今回は、さまざまなクリエイティブに活かせる視線誘導の基本と、目線の動きを意識したレイアウトパターンを実例とともにご紹介します。

視線誘導とは？

視線誘導とは、ユーザーの視線の流れを意図的にコントロールする手法です。

コントロールというと良くないイメージがありますが、優先順位に応じて情報を配置することで、ユーザーがストレスなく瞬時に情報を理解する手助けになります。重要な事柄を見逃したり間違えた順序で読み進めることは、ユーザーにとってデメリットが大きいですよね。

視線誘導はWebデザインだけでなく、絵画、漫画、写真、印刷物などあらゆるクリエイティブで取り入れられています。

視線誘導の基本「グーテンベルク・ダイアグラム」

人の視線は基本的に「上から下」へ移動し、同じ種類の情報が均等に配置されている場合は、「左上から斜め下方向」に向かって移動する傾向があります。

これを「グーテンベルク・ダイアグラム」と言います。活版印刷技術の発明者である、ドイツのヨハネス・グーテンベルク氏の名前からつけられた考え方です。

基本的に重要な情報は左上→中央→右下の順で配置するのが効果的です。流し読みでも伝わるように、①の始点と②の終点のエリアは特に伝えたい情報を、③・④の休閑領域には関連情報を配置すると良いでしょう。

このあと紹介する視線誘導のパターンも、このグーテンベルク・ダイアグラムが基本になるので押さえておきましょう。

視線誘導のパターンとレイアウト例

バナーやLP、プレゼン資料、印刷物などあらゆるクリエイティブで使える視線誘導の3つのパターン、「Z型」「F型」「N型」を紹介します。

情報量や目立たせたい要素に合わせて選べるように、使い方と実際のレイアウト例も見ていきましょう。

Z型

Z型は、ユーザーの視線が左上→右上→左下→右下の順に動くパターンです。

どんなときに向いているか

Z型は文字が横組みで、初見で全体を把握させたい時に効果的です。

バナー広告やWebサイトのトップページ、チラシなどでよく用いられます。

制作するときのポイント

このパターンで最も見られるのは左上の視点、次に右下の終点です。

最も目立たせたい情報を左上に配置し、終点である右下にユーザーへの行動を喚起する情報を配置するのが効果的でしょう。

レイアウト例

F型

F型は、左から右への視線移動を下に向かって順に繰り返すパターンです。

どんなときに向いているか

F型は、テキスト量が多い場合に適しています。この記事を読んでいるみなさんの視線の動きは、まさにF型ですね。

ブログやECサイト、SNS、横書きの書籍などで多く使用されています。

制作するときのポイント

F型は、下へ移動するほど読み飛ばされる傾向にあります。

最も重要な情報は一番目に留まりやすい一番上に、次に「右側よりも左側」に配置することを意識しましょう。記事コンテンツでも、大事な情報は改行したり見出しをつけることで、目に留めてもらいやすくなります。

レイアウト例

N型

N型は、縦書きレイアウトで採用されることの多いパターンです。右上→右下→左上→左下の順に視線が流れます。

どんなときに向いているか

N型は日本語の縦書きレイアウトに適しています。「和」を強調したデザインや、ビジュアルメインで情報量が少ない場合に効果的です。

雑誌や新聞など右開きの紙媒体によく見られます。特にユーザーの年齢層が高い場合は縦書きの方が馴染みがあるので、N型を検討するのも良いでしょう。

制作するときのポイント

Z型やF型でもわかるように、人は自然と左上エリアを見る習性があります。最初の視線が左上に逸れてしまわないように、起点である右上の要素を強調するのがポイントです。

最も目立たせたい情報を右上に配置し、終点である左下にユーザーへの行動を喚起する情報を配置すると効果的です。

レイアウト例

要素に規則性を持たせる

レイアウトが決まったら、配置する要素に強弱をつけたり規則性を持たせ、視線の流れをさらにサポートします。

人は多くの情報を処理する際、視線の引っかかりがなければ読み飛ばしてしまいがちです。目立たせたい部分にはメリハリをつけて、情報の優先順位がひと目で分かるようにしましょう。

大きさ・太さ

視線を集めるために最もよく使われるメジャーな方法です。人の視線は、大きいものから小さいもの、太いものから細いものへと視線が移動していきます。

重要な情報はユーザーに読み飛ばされないように、他の要素よりも大きく配置しましょう。

同形・同色

均一に情報が配置されている場合、同じ形や同じ色は一つのグループとして捉えられます。そのため、ユーザーの視線は必然的に同形・同色の要素を追っていきます。

デザインの中で同形・同色を繰り返し使うことで、全体に統一感や一貫性をもたせましょう。

色が複数ある場合は、色相環の反対にある補色を利用すると色が目立って見えるため、視線の流れを変えるのに効果的です。

また、複数の色を使わずに色数を2～3色に限定することで、効果的に視線を集中させることができます。

数字

数字を順に追うことも、人が無意識に行う行為です。

通常の視線の流れとは異なるレイアウトだったとしても、ナンバリングする事によって視線を誘導することができます。

デザイン性を重視し不規則的な配置をする場合は、要素に数字をふることで順序を明確に示しましょう。ただし、数字をふっていたとしても、ユーザーが予測した先に予測した数字が無いと、混乱を招きストレスを与えてしまうので注意が必要です。

余白・近接

余白の調整によっても視線誘導が可能です。

余白はデザイン性を高める効果がありますが、情報を伝えやすくする役割も持っています。余白を適切に用いて情報をグルーピングすることで、可読性を高めることが可能です。

また、人の視線は無意識に近くにある要素同士を見てしまう習性があります。関連する要素はなるべく隣接させ、グループ化することで情報の関連性を強めましょう。

人物の目線

人には無意識に、第三者の目線の方向を向いてしまう習性があります。これは実写の人物だけでなく、イラストや動物の目線にも効果があります。

人物やイラストの素材を使用する際は、その先に伝えたい情報がくるようテキストを配置しましょう。

まとめ

デザインする上で「伝えたい情報を、伝えたい順序で、ユーザーにわかりやすく伝えられるか」はとても重要です。

特に広告クリエイティブはユーザーが閲覧する時間が短いので、重要度の高い情報が読み飛ばされてしまうと目的達成が難しくなります。レイアウトを組む際は、ぜひ視線誘導を意識して取り入れてみてください。

デザインの基本原則とバナー広告作りのコツは、こちらの記事で詳しく解説しています。

【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本

目立たせたい文字を強調する方法は、こちらもご参照ください。

伝わるデザインにするために「文字」を強調する6つの方法