MIHATSU
ベージュピンク白シンプル購入品紹介noteノート記事見出し画像(4).png

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

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

2023.06.19
MEDIA

突然ですが、あなたは人の目線を追ったことはありませんか?
人が自分と違う方向をずっと見ていたら何があるんだろう?とつい気になって目線を送ってしまいますよね。

今回はそんな人の不思議な心理を使うデザインテクニックである
【視線誘導】について紹介していきます。

すぐに取り入れなれるテクニックが多いので、ぜひ意識して使ってみてください!

目次

・視線誘導とは?

・11つの視線誘導
>視線追従
>トンネル効果
>道路効果
>矢印効果
>グーテンベルク・ダイヤグラム
>F型
>Z型
>N型
>大きいもの→小さいもの、太いもの→細いもの順にする
>同じ形・同じ色で揃える
>数の順に並べる

・まとめ

・視線誘導とは?

視線誘導とは名前の通り、人の視線を見せたいものに誘導させることを言います。

人は視線を動かす時、無意識に動かすことが多く存在します。
それはきっと視線誘導によって無意識のうちにコントロールされていることもあります。

人間の心理効果を上手く活用してデザインに活かすことで、見た人に情報がわかりやすく伝わるというメリットがあります。

・11つの視線誘導

ここですぐに取り入れられる視線誘導の種類を紹介していきます!
ぜひ参考に試してみてくださいね。

>視線追従

視線誘導(1).png

人は人が向いている目線の先をついつい追ってしまうことがあります。
上記の写真のようにアイキャッチやポスターなどで、人を起用する際には人が向いている先に文章や見せたいものをレイアウトすることで、見た人の視線を誘導することができます。

2.png
上記の写真のように逆方向を向いていると、中々文章に目が行きませんよね。
ポイントは目線の先に見せたいものをレイアウトするということです!

>トンネル効果

3.png

トンネル効果とは、囲まれているものの中心に目線がいったり、周りが暗く中心が明るいと明るい中心の場所に目線がいくことを言います。

ポイントは見せたいものを囲まれている中心においたり、明るい部分の近くにおくことで自然に視線を集めることができます。

>道路効果

視線誘導(2).png

道路効果とは、「道路は先に続いている」という固定概念と視線追従と同じように「道の先にあるもの」が気になってしまう心理から、道路の先を追ってしまうということを言います。

道路効果を利用すると道で導線を作ることにより、ユーザーの視線を集めることができます。

>矢印効果

人は矢印を見ると追わずにはいられません。
矢印はとてもシンプルで強力な力を持っています。

下の画像をご覧ください。
4.png

なぜか右に目線を持って行かれませんでしたか?
このようにわかっていても目線を持っていかれてしまう程、強力な力を持っているのです。

リンク先に飛んで欲しい時などに使うと有効的かもしれませんよ!

続きはこちら→→→

>グーテンベルク・ダイヤグラム

5.png

グーテンベルク・ダイヤグラムとは、均等に配置された情報を見る時、視線は左上から右下に流れていくというパターンのことです。

グーテンベルク・ダイヤグラムには4つのエリアに分割します。
①最初の視覚領域
②強い休閑領域
③弱い休閑領域
④最後の視覚領域

6.png

上記のように人が目線を送る場所には流れが存在します。
そのため、重要なことは右上の1番に入れないと読み飛ばされてしまう可能性があるので注意しましょう。

>F型
7.png

F型とはユーザーの視線が左上→右上→左下→右下→下とアルファベットの「F」のように視線移動するパターンになります。

情報量が多いサイト縦型に長いWebサイトなどに適しています。
下にいくにつれて、内容が読み飛ばされたり、離脱率が高くなるので、工夫が必要になります。

>Z型
8.png

Z型とはユーザーの視線が左上→右上→左下→右下とアルファベットの「Z」のように視線移動するパターンになります。

F型とは違い、写真やイラストを多く使ってデザイン全体を把握させたいチラシポスターなどに適しています。

>N型

9.png

N型とはユーザーの視線が右上→右下→左上→左下とアルファベットの「N」のように視線移動するパターンになります。

N型は縦読みになるので日本語で書かれている新聞雑誌などに適しています。

>大きいもの→小さいもの、太いもの→細いもの順にする

11.png

上の画像のように大きなものや太いものは視線を集めやすいです。
サイズに変化をつけるだけで見せたいものをストレートに伝えやすくなります。
差が大きければ大きいほど視線誘導の効果は高まりやすいです。

>同じ形・同じ色で揃える

12.png

同じ形や同じ色で揃えると1つのグループとして捉えることができます。
優先順位がほぼ同じだったり、同じような内容が多い時には同じ形、同じ色で揃えると視線を集めやすく、コンパクトに伝わります。

>数の順に並べる

13.png

数を数える時はほとんどの場合、1から数えますよね。
日常の習慣から無意識に数字にそって視線を誘導させることができます。

ただ、数字があったとしても、数字が抜けていたり、順番が違っていたりすると見た人にストレスや混乱を招いてしまうかもしれないのでしっかり順番通りになるように注意しましょう。

・まとめ

今回はデザインの心理効果【視線誘導】について紹介してきました。
見た人の目線をどう誘導し、見たいものを直球でわかりやすく伝えることができるかが重要なポイントになってきます。

街の中や身近なところでも無意識のうちに視線誘導されていたなんてことも多々あると思います。
どんな場所にどんなテクニックが使われているのか意識しながら、生活してみると大きなヒントが隠れているかもしれませんよ。
ぜひ、取り入れてみてくださいね!

最後までご覧いただきありがとうございました。
また次回お会いしましょう。

Author
<<