「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。
今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。
１．視線をつかまえる
Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。
「人の顔」を使う
まずはこの画像を見てみてください。
最初に、どれを「見てしまいました」か？
「人の顔」が最初に目に入った、という方が多いのではないでしょうか。
たとえばずらりと色々な写真が並んでいて、その中に人の顔の写真が1枚混じっていると、なぜかそれが最初に目に入りやすいです。
人が生きていくうえで「人の顔を見る」ということは大事なことなのでできるだけ早く認知するようになってるのかな、と思うのですが詳しい理由はよくわかりません。
とりあえず、ふらふらした視線を最初にキャッチしたいときには、人の顔の写真を使うとわりとつかまえやすい、というのを覚えておくと、広告などを作る際に役に立つことがあります。
その他目立たせる方法
UIなどを作る際に、「このボタンは特別だからちょっと目立たせたい」とか、「この部分はよく理解してほしいから読んでほしい」とか、他よりも優先的に見てもらいたい部分を作りたい、といったことは結構あるものです。そんな時に「他と区別して目立たせる」方法としてたとえばこんなやりかたがあると思います。
他にも視線をキャッチする方法として「目立つ」ために「派手な動き」や「点滅」なんていうのもあるのでしょうが、この辺りは嫌がられるような事も多いので割愛。
２．視線を導く
続いて、視線をどこかに導くための方法です。
広告寄りのWebサイトでは文章などを読んでもらうために。また、UIなどでは操作に関わるものが自然と目に入るとよいと思いますし、そういったことを実現する視線をうまく誘導してやるための方法論です。
「人」の視線
他の人が見ているもの、って何だか妙に気になることありませんか？
実際、無意識的に誰かが見ている方向と同じ方向をつい見てしまう、ということが結構あります。
これもデザインの場面で応用できます。
たとえば読んでほしいコピーがあるとして、その横にそれを見ている形で人の写真や人のイラストを置くと、そのコピーに視線が自然に移動しやすくなります。
矢印を使う
矢印には、なぜかその矢印の向いている方向にあるものを見てしまう、という効果があります。
これについては説明するよりも例を見ていただいたほうが早いと思うので画像をご覧くださいませ。
何となく矢印の向いている方向にあるものを見てしまうことが多いと思います。
ちなみに矢印は、必ずしも「→」みたいな形でなくても、何かしら先がとがったようなカタチであれば十分に役目を果たせます。
リズム、関連性、上下によって導く
視線を導く、という意味では、同じ形を規則的に並べる、などの方法で次々に視線を送ることもできると思います。たとえばこんな感じ。
同じ形のもの、同じ規則性で並んでいるものは「一連のつながりのあるもの」と認識されやすいです。また、水や物体の運動の関係で、上下だと「上から下」に流れていくのを「自然」だと感じやすいので、関連のあるものを上から下へ並べたりして視線を導く方法があります。
他にもあれこれと視線をうまく導く方法があると思います。色々研究して、使い勝手のよい魅力的なWebサイトなどを作り上げていきましょう！
コメント
> １．視線をつかまえる
始めに「狙え！」に目が行きました。
webサイト見るときは大抵は左上からなので、位置も関係しているのでしょうが、写真の中で文字が目立っていた事も理由としてあります。
顔認知は有名人なら目を引きますが、あまり見慣れない顔だと効果は薄いかも。
自分の頭の中にあるものとマッチするようなものが現れると、視線を集める事ができるのだと思いますので、広告する物のイメージが、頭の中にある形や色とマッチすると効果が高いのかもしれません。
好みもあるでしょうから、寺に目が行く人もいるでしょうね。
日本語まったく知らない外国の人とかは、文字見てもわかんないですし。
投稿者: Anonymous | 2007年9月 8日 11:19
僕も「狙え！」→「寺」の順に視線がいってしまいました。この『人の顔法則』は知識としてあったのですが、【同じクオリティの素材であれば】という前提条件が必要なのかなぁと考えてしまいました。
あと、web独特の上から下の視線移動の強さもあるのかな。
投稿者: Anonymous | 2007年9月 8日 11:59
>Anonymousさん
やはり…。
「狙え！」のところはご指摘の通り位置的に最初に目が行きやすいのと、画像のコントラストが非常に強いため、そこに目が向く人もいるだろうな、とはサンプル画像を作りながら思っておりました。今回できるだけ「顔」が変に目立たないようにモノクロにしたりしたため、サンプルとしてあまりいい例ではなかったかなと反省しております。（※カラーのほうが効果が高いです）
>顔認知は有名人なら目を引きますが、あまり見慣れない顔だと効果は薄いかも。
個人的な経験上、ではありますが、例えば電車に乗ったときに電車内のどの広告に「なんとなく」目がいくか、というとやはり人の写っているものが多いです。その際、被写体が「知っている人か否か」はわりと関係なく、単に「人が写っている」ものに目が向きます（自分だけですかね…）。
そうして「なんとなく」視線が向いた後、その広告に「注意、意識を向ける」か否か、を「写ってるのが誰なのか」によって判断するフェイズがあります。その際には被写体が有名人など知っている人だと注意が向きやすく、広告としての効果が高くなるのかな、と。
投稿者: yamazaki | 2007年9月 8日 12:01
僕も「狙え！」しか見ませんでした。
投稿者: Anonymous | 2007年9月 8日 19:18
＞字＾顔＾動物＾建物＾食物～など、視線．目線の着眼点としては
目立つモノ＾奇異珍．品(人)＾食べ物など、日常生活ではそうですがコマーシャル＾ビジネス的には
人と文字によって購買心を煽り
、目の欲＾所有の欲をそそる工夫がなされ、じっくり思考しないでその気にさせる、暗示効果を
常に狙う商用デザインアイデアは
読心力や嗜好の本能欲をも衝く企画がされると思います。
アリーナ会場や運転中では一点．一方向に集約集中されますでせう。自然＾文化遺産のお宝モノには特に飽きることなく凝視するもので、対人外交的比重が多い生活
では人工的弊害によるマイナス面
～対立競争心からの失意リスク影響は必須の社会でもあり、無視無頓着も在る常の現実、とは視線タイトルの本旨外れるメンタル談義粋ですが「見て癒される表情」とは希少限定され嫌悪されては逆効果！？
投稿者: くぼ | 2007年9月 8日 23:03
＞字＾顔＾動物＾建物＾食物～など、視線．目線の着眼点としては
目立つモノ＾奇異珍．品(人)＾食べ物など、日常生活ではそうですがコマーシャル＾ビジネス的には
人と文字によって購買心を煽り
、目の欲＾所有の欲をそそる工夫がなされ、じっくり思考しないでその気にさせる、暗示効果を
常に狙う商用デザインアイデアは
読心力や嗜好の本能欲をも衝く企画がされると思います。
アリーナ会場や運転中では一点．一方向に集約集中されますでせう。自然＾文化遺産のお宝モノには特に飽きることなく凝視するもので、対人外交的比重が多い生活
では人工的弊害によるマイナス面
～対立競争心からの失意リスク影響は必須の社会でもあり、無視無頓着も在る常の現実、とは視線タイトルの本旨外れるメンタル談義粋ですが「見て癒される表情」とは希少限定され嫌悪されては逆効果！？
投稿者: くぼ | 2007年9月 8日 23:03
↑↑～一件消去して下さい。ダブクリ。
投稿者: くぼ | 2007年9月 8日 23:16
>顔認知は有名人なら目を引きますが、あまり見慣れない顔だと効果は薄いかも。
見慣れない顔でも目を向けてしまう理由の一つが解りました。
こちらが顔を認知しているという事なのでしょうが、広告の
人の目線がこちらを向いているときに、見られているという
感じを受けて、その広告を見てしまいますね。
見るというより、視界に一瞬だけ入った顔がこちらを見てて、
なんか気になってしまうというものです。
投稿者: Anonymous | 2007年9月13日 20:47