突然ですが、あなたは人の目線を追ったことはありませんか？ 
人が自分と違う方向をずっと見ていたら何があるんだろう？とつい気になって目線を送ってしまいますよね。
今回はそんな人の不思議な心理を使うデザインテクニックである 
<code>【視線誘導】</code>について紹介していきます。
すぐに取り入れなれるテクニックが多いので、ぜひ意識して使ってみてください！
<h3>目次</h3>
・視線誘導とは？
・11つの視線誘導 
＞視線追従 
＞トンネル効果 
＞道路効果 
＞矢印効果 
＞グーテンベルク・ダイヤグラム 
＞F型 
＞Z型 
＞N型 
＞大きいもの→小さいもの、太いもの→細いもの順にする 
＞同じ形・同じ色で揃える 
＞数の順に並べる
・まとめ
<h2>・視線誘導とは？</h2>
視線誘導とは名前の通り、人の視線を見せたいものに誘導させることを言います。
人は視線を動かす時、無意識に動かすことが多く存在します。 
それはきっと視線誘導によって無意識のうちにコントロールされていることもあります。
人間の心理効果を上手く活用してデザインに活かすことで、見た人に情報がわかりやすく伝わるというメリットがあります。
<h2>・11つの視線誘導</h2>
ここですぐに取り入れられる視線誘導の種類を紹介していきます！ 
ぜひ参考に試してみてくださいね。
<h3>＞視線追従</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/061b2d2d-b427-411e-b24f-4b5af765189b/%E8%A6%96%E7%B7%9A%E8%AA%98%E5%B0%8E(1).png" alt="視線誘導(1).png">
人は人が向いている目線の先をついつい追ってしまうことがあります。 
上記の写真のようにアイキャッチやポスターなどで、人を起用する際には人が向いている先に文章や見せたいものをレイアウトすることで、見た人の視線を誘導することができます。
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/ee48fbcf-d398-440d-9885-dee22b4253f7/2.png" alt="2.png"> 
上記の写真のように逆方向を向いていると、中々文章に目が行きませんよね。 
ポイントは<code>目線の先に見せたいものをレイアウトする</code>ということです！
<h3>＞トンネル効果</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/7949a090-2e7d-444a-a444-916dccd4da32/3.png" alt="3.png">
トンネル効果とは、囲まれているものの中心に目線がいったり、周りが暗く中心が明るいと明るい中心の場所に目線がいくことを言います。
ポイントは見せたいものを囲まれている中心においたり、明るい部分の近くにおくことで自然に視線を集めることができます。
<h3>＞道路効果</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/502967c4-8780-45d6-884d-545b894ff317/%E8%A6%96%E7%B7%9A%E8%AA%98%E5%B0%8E(2).png" alt="視線誘導(2).png">
道路効果とは、<code>「道路は先に続いている」という固定概念</code>と視線追従と同じように<code>「道の先にあるもの」が気になってしまう</code>心理から、道路の先を追ってしまうということを言います。
道路効果を利用すると道で導線を作ることにより、ユーザーの視線を集めることができます。
<h3>＞矢印効果</h3>
人は矢印を見ると追わずにはいられません。 
矢印は<code>とてもシンプルで強力な力</code>を持っています。
下の画像をご覧ください。 
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/4c736bf3-4257-44f9-9867-ca0242c8008b/4.png" alt="4.png">
なぜか右に目線を持って行かれませんでしたか？ 
このようにわかっていても目線を持っていかれてしまう程、強力な力を持っているのです。
リンク先に飛んで欲しい時などに使うと有効的かもしれませんよ！
続きはこちら→→→
<h3>＞グーテンベルク・ダイヤグラム</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/c34bbf78-3ad5-4b79-95b9-38cc2e642bb8/5.png" alt="5.png">
グーテンベルク・ダイヤグラムとは、均等に配置された情報を見る時、視線は左上から右下に流れていくというパターンのことです。
グーテンベルク・ダイヤグラムには4つのエリアに分割します。 
①最初の視覚領域 
②強い休閑領域 
③弱い休閑領域 
④最後の視覚領域
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/f295181f-da24-4921-acaf-755db6f441a5/6.png" alt="6.png">
上記のように人が目線を送る場所には流れが存在します。 
そのため、重要なことは<code>右上の1番</code>に入れないと読み飛ばされてしまう可能性があるので注意しましょう。
＞F型 
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/1ac4dd45-cef8-42ad-8984-03db4bcb5885/7.png" alt="7.png">
F型とはユーザーの視線が左上→右上→左下→右下→下とアルファベットの「F」のように視線移動するパターンになります。
<code>情報量が多いサイト</code>や<code>縦型に長いWebサイト</code>などに適しています。 
下にいくにつれて、内容が読み飛ばされたり、離脱率が高くなるので、工夫が必要になります。
＞Z型 
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/5139a4ea-4573-45e2-841c-6110a1d462e0/8.png" alt="8.png">
Z型とはユーザーの視線が左上→右上→左下→右下とアルファベットの「Z」のように視線移動するパターンになります。
F型とは違い、写真やイラストを多く使ってデザイン全体を把握させたい<code>チラシ</code>や<code>ポスター</code>などに適しています。
<h3>＞N型</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/ddc11af0-d162-4d22-8a87-089c2d5bef83/9.png" alt="9.png">
N型とはユーザーの視線が右上→右下→左上→左下とアルファベットの「N」のように視線移動するパターンになります。
N型は縦読みになるので日本語で書かれている<code>新聞</code>や<code>雑誌</code>などに適しています。
<h3>＞大きいもの→小さいもの、太いもの→細いもの順にする</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/cbe930bb-64e9-4ff7-b469-90165a7f2e61/11.png" alt="11.png">
上の画像のように大きなものや太いものは視線を集めやすいです。 
サイズに変化をつけるだけで見せたいものをストレートに伝えやすくなります。 
差が大きければ大きいほど視線誘導の効果は高まりやすいです。
<h3>＞同じ形・同じ色で揃える</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/f600ff7f-4350-4dcd-9fa1-9dcd8ab98a92/12.png" alt="12.png">
同じ形や同じ色で揃えると1つのグループとして捉えることができます。 
優先順位がほぼ同じだったり、同じような内容が多い時には同じ形、同じ色で揃えると視線を集めやすく、コンパクトに伝わります。
<h3>＞数の順に並べる</h3>
<img src="https://storage.googleapis.com/p_6396af1a5786fe0afd5f9e43/70ed2ba9-fa01-4bf9-9118-a4bc69081cb9/13.png" alt="13.png">
数を数える時はほとんどの場合、1から数えますよね。 
日常の習慣から無意識に数字にそって視線を誘導させることができます。
ただ、数字があったとしても、数字が抜けていたり、順番が違っていたりすると見た人にストレスや混乱を招いてしまうかもしれないのでしっかり順番通りになるように注意しましょう。
<h2>・まとめ</h2>
今回はデザインの心理効果【視線誘導】について紹介してきました。 
見た人の目線をどう誘導し、見たいものを直球でわかりやすく伝えることができるかが重要なポイントになってきます。
街の中や身近なところでも無意識のうちに視線誘導されていたなんてことも多々あると思います。 
どんな場所にどんなテクニックが使われているのか意識しながら、生活してみると大きなヒントが隠れているかもしれませんよ。 
ぜひ、取り入れてみてくださいね！
最後までご覧いただきありがとうございました。 
また次回お会いしましょう。

デザインの心理効果 No.1 -【視線誘導】