人の目の動きを理解しよう。

こんにちは。こんばんわ。きららです。
昨日の夜からアレルギーっぽいぷちぷちができて、テンションだだ下がりです。。
かゆくてあんまり眠れないし。でもアレルギーのお薬飲むと眠気くるし。くそー。
昔から肌きれいなのだけが取り柄だったのになー。
お昼に皮膚科に行ったら、体が弱っててアレルギー反応をしめしてるんだろうって言われました。
お薬飲むのとクリームぬりぬりで耐えるしかない。
おかげで今日はすっぴん勤務でした。

そんな感じで今日も記事執筆をしました。
お題はまたデザイン系です。
色々なデザインテンプレートまとめをしていたのですが、きれいな配色だったり、オシャレでポップなものがあったりとおもしろかったです。

では今日のきららの気になりポイント。

視線誘導について。

Webサイトに限らず、デザインをするときによく言われるのが「視線誘導」です。
今日は、主な視線誘導のパターンを紹介しようと思いますー。


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

グーテンベルク・ダイヤグラムとは、均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。
人の目が情報を追う時に、左上から右下方向へ移動しながら遷移する、というものです。
なので、テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がけましょうということ。
でも、この法則はドキュメントを読むときの目の動きなので、媒体によって効果的なレイアウトは変わってきます。


Z型

横書きの紙媒体の紙面では、「左上→右上→左下→右下」というZの形にユーザーの視線が移動するので、この導線上に重要なコンテンツを配置しようねってこと。


F型

これは、特にWebサイトに適用される法則です。
インターネットが当たり前のいまの時代に合った法則といえます。
まずはロゴ部分からヘッダーが目に入り、続いて見出し、メニュー、記事…という視線の移動です。
サイトイメージなどを考慮して作られたレイアウトによって変わってくると思いますが、目立たせたいコンテンツは左上に配置しましょうってこと。


大きいものから小さいもの

人はまず、大きいものに目がいきます。
それから小さいものに移動します。
なので、一番目立たせたいタイトルなどは大きくしましょうってこと。
目に引っかからなければ、見てほしい情報をユーザーの目に届けるのは難しくなります。


同じ形、同じ色で統一感

同じ形や同じ色のコンテンツ同士を追いかけるのも、人の目の移動の特徴です。
コンテンツの流れをつくりたいときは、なるべく同じ色、同じ形などで統一感を持たせるといいってこと。

人の視線の動きっておもしろいですよね。
わたしはあまのじゃくなので、こういうこと言われると違うかんじで見る!と思ってWebサイトとか見てみるのですが、やっぱりこの法則にはあらがえず。。。w
デザイナーさんにとっては当たり前のことだと思いますが、デザイナーではなくても、こういうことを知っておくことは大切です。

締め。

じんましんつらい。。。
なんだか嫌な予感がします。。。
なるべくやらなくてはいけないいろんなことを集中してやって、休む時間を捻出しようと思います。
ではまた明日。

このブログについて

今年入社した2015年の新卒が、ライターになっちゃいました。毎日の業務の中で、Webマーケティングに関するその日の気になりポイントを中心に、個人的なことを織り交ぜながらゆる~く書いてます。
彼氏大好ききららが日々どんな成長をしていくのか、温かい目で見守っていただければと思います。記事内で間違いなどありましたら、ぜひ指摘してください。
お問い合わせ等はこちらまで。

▶︎kirara@basicinc.jp


ツイッターにて交流も可能です。いっぱい@をいただけるとうれしいです~。

最近の記事