視線誘導のデザイン｜見せたい順に読ませる階層の作り方

「全部大事なのに、どれも目立たない」。バナーを作っていて、そう感じたことはありませんか？

原因は、見る人の目がどこから動くかを作り手が決めていないことです。
デザインには、どこを1番目に見せて、次に何を読ませるかを決める考え方があります。ハイアラーキー（視覚的階層）と視線誘導です。
このレッスンでは、階層を3つに分ける手順と、視線を動かす4つの手がかりを説明します。最後に、好きなLP（商品やサービスの紹介ページ）へ番号を書き込む観察の課題を用意しました。手を動かすと一気に見えてきますよ。

視線誘導は「読む順番」を作り手が決めること

視線誘導は、見る人の目を1番目から順に運ぶ工夫のことです。矢印を描くことだけを指すのではありません。大きさ・色・余白・向き、どれも視線誘導の手段です。

バナーもLPも、見る人は1秒で「読むか、閉じるか」を決めます。その1秒で何が目に入るかを決められている状態が、視線誘導ができている状態です。

視線誘導の設計は、要素を置いたあとの飾りつけではありません。置く前に「1番目はこれ」と決めるところから始まります。

順番を決めずに配置すると、あとから「やっぱり価格を目立たせたい」となって全体をやり直します。先に順番、あとで配置です。

ハイアラーキー（階層）は3層に分ける

ハイアラーキーは、情報に順位をつけて見た目の差で表すことです。日本語では視覚的階層と言います。
階層は細かく分けるほど難しくなります。まずは3層で足ります。

Beforeは5つの情報が全部同じ大きさです。作り手は「全部伝えたい」と思っていますが、見る人には何も伝わりません。
Afterは主役を1つ決めて大きくし、補足を小さく、ボタンだけ色を変えました。要素は1つも減っていません。差をつけただけです。

3層に分けるときのコツは、1層目を必ず1つに絞ることです。2つあると、見る人の目が左右に往復します。迷ったら「これを見せなかったら、この広告は失敗か？」と自分に聞いてください。答えがイエスのものが1層目です。

視線を動かす4つの手がかり

階層を決めたら、それを見た目で表します。使える手がかりは4つです。全部を同時に使う必要はありません。1つか2つで足ります。

1. 大きさの差

いちばん強い手がかりです。大きいものへ最初に目が行きます。
差は1.5倍以上つけてください。1.2倍だと、差をつけたのか揃え損ねたのか分かりません。この大小の比率の話はジャンプ率で数字ごと扱っています。

2. 色とコントラストの差

まわりが落ち着いた色でそろっていれば、1つだけ違う色にした場所へ目が行きます。ボタンに使うのがこの手です。
ただし差をつける色は1つまで。赤も黄色も緑も使うと、どれも目立たなくなります。

YouTubeのアプリを思い出してください。画面の大半を白と黒でそろえて、赤は登録ボタンだけに使っています。強い色が1か所だから、そこへ目が行きます。

3. 余白

大きくしなくても、まわりを空ければそこに目が止まります。高級ブランドの広告が文字を小さいままで印象に残るのは、この使い方です。
詰まった画面では効きません。全体が空いているからこそ、空けた場所が目立ちます。使い方は余白の使い方で詳しく扱っています。

Appleの製品ページも同じ作り方です。写真のまわりを大きく空けて、文字は小さいまま置いています。それでも製品名がいちばんに目へ入ります。

4. 向きのあるもの

矢印・斜めの線・人物の顔の向き。向きを持つものは、その先へ目を運びます。
写真の人物が右を向いているなら、右側にキャッチコピーやボタンを置きます。逆に左端を向いていると、画面の外へ目が抜けます。イラストや写真を使うときは、被写体がどこを向いているか先に確認してください。

4つを全部盛りにしないでください。大きさ＋もう1つで十分に伝わります。手がかりを増やすほど、どれが主役か分からなくなります。

視線の流れの型を選ぶ

人の目には動きのクセがあります。横書きを読んで育った人は、左上から右下へ動きます。このクセに沿って要素を置くと、それだけで読みやすくなります。

型	目の動き	向いている題材
Z型	左上→右上→左下→右下	要素が5〜6個までのバナー・チラシ
F型	左端を下へ、見出しで右へ伸びる	文章が続くWebページ・ブログ
N型	右上→右下→左上→左下	縦書きの和風広告・書籍の帯

型は最初に1つ選んで、最後まで変えません。上半分がZ型で下半分がF型だと、目のスタート位置が途中で変わって読みにくくなります。
型ごとの使い分けはレイアウトの基本で配置の手順とあわせて説明しています。

型はあくまで初期位置です。型に沿わせたうえで、上の4つの手がかりで順位をつけます。型だけでは「どれが1番目か」までは決まりません。

ミニ実践：好きなLPに視線の番号を書き込む

視線誘導は、作るより先に「読む」ほうが早く身につきます。所要時間は10分、道具はスマホのスクリーンショットと無料のCanvaか、印刷した紙とペンで大丈夫です。

3秒で閉じるのがポイントです。じっくり読むと全部覚えてしまって、視線の順番が分からなくなります。
3枚もやると、自分の作品でも「これ、2番目が強すぎるな」と気づけるようになりますよ◎

自分の作品を見直すときは、次のチェックリストを使ってください。

やってしまいがちな失敗

主役を2つ作ってしまう

「商品名も価格も目立たせたい」と両方を大きくすると、目が左右に往復して、どちらも印象に残りません。
直し方は、片方を一段小さくします。2番目に落とすほうが、結果として両方読まれます。

矢印を足して解決しようとする

順番が伝わらないときに矢印や飾り線を足すと、要素が増えてさらに散らかります。
直し方は、先に大きさと余白で差をつけます。矢印は、それでも足りないときの最後の手段です。

背景写真の視線を無視する

人物写真の上に文字を置くとき、人物が画面の外を向いていると、目もそのまま外へ抜けます。
直し方は、写真を左右反転して内側を向かせるか、文字を人物の視線の先へ移します。

ボタンを一番下だけに置く

長いLPで申込ボタンが最後にしかないと、途中で決めた人が行き先を見つけられません。
直し方は、内容の区切りごとに同じ見た目のボタンを置きます。見た目を毎回変えると、同じ役割だと伝わらなくなります。

よくある質問

視線誘導にはどんな種類がありますか？

大きく2つに分けて考えると整理できます。1つは目の動きの型で、Z型・F型・N型があります。もう1つは要素そのものの見せ方で、大きさ・色・余白・向きの4つです。
型で大まかな流れを作り、4つの手がかりで順位をつける、という組み合わせで使います。

レイアウトの4大原則とは何ですか？

近接・整列・反復・対比の4つです。情報をまとめて、線に揃えて、同じルールを繰り返し、最後に差をつけます。
視線誘導は、このうち対比を深めた話だと考えてください。まず4原則で整えてから順位をつけると手戻りが出ません。くわしくはデザインの4原則で説明しています。

イラストで視線誘導を使うときのコツはありますか？

キャラクターの顔の向き、指の向き、体の傾きが、そのまま見る人の目を動かします。読ませたい文字のほうへ向けてください。
背景の線も効きます。道や手すりのような長い線が斜めに走っていると、目はその線をたどります。線の先に主役を置くと素直に流れます。

階層を3つより増やしてもいいですか？

情報量が多いWebページなら4層まで増やして構いません。見出し・小見出し・本文・注釈のような分け方です。
ただしバナーや名刺のような小さい面では3層が上限だと考えてください。層が増えるほど1層あたりの差が小さくなって、結局どれも同じに見えます。

次に学ぶこと

このレッスンの要点をまとめます。

• 視線誘導は、読む順番を作り手が決めること
• ハイアラーキーは主役・補足・行き先の3層に分ける。主役は必ず1つ
• 手がかりは大きさ・色・余白・向きの4つ。使うのは2つまで
• 目の動きの型はZ・F・N。1つの作品で混ぜない

次のレッスンはシンメトリーとアシンメトリーです。左右対称にすると安心感が出て、崩すと動きが出ます。今回の視線誘導と組み合わせると、狙った印象を作り分けられるようになります。
配置そのものの決め方をもう一度見たい方はレイアウトの基本へ戻ってみてください。

ほかのレッスンはデザインの基本コース目次から選べます。気になるところだけ読んでも大丈夫です。