Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. 「視覚」を意識したデザイン手法まとめ

「視覚」を意識したデザイン手法まとめ

デザイナーにとって大切なことは、見た目の印象ではなく伝えたい情報を適切にユーザーに届けることですよね。

Webデザインに限らず、チラシやパンフレット、名刺では五感の中で視覚しか使いません。だからこそ、視線の動きや視覚に訴えかけるデザインが効果的と言えます。

と、いうことで

今日はデザイナーが意識するべき、ユーザーの視線の動きと情報処理の裏技を活用したデザインのコツについて紹介したいと思います!

 

視線の動き

まずは、ユーザーの視線の動きに注目して見たいと思います!

ユーザーが情報を収集するときには横書き、縦書きに限らず上から下へ視線は流れていきます。

しかし、縦と横では視線の動き方が違うんですね。

一体どのように違うのでしょうか?

横書き

f:id:mtk-hcwj:20180203101900p:plain
出典:http://architecture.jp/jireilog/marketing/webdesign01/

横書きの場合、必ずとは限りませんが媒体によってZ型とF型に分けることができます。

Z型はチラシやパンフレットなど紙媒体でよく見られるパターンです。

優先順位の高い情報(見出しや連絡先)などを左上(始点)や右下(終点)に持ってくるとユーザーに伝わりやすくなります。

一方、F型はWebサイトを閲覧するときによく見られるパターンです。

Z型同様、始点の位置は左上です。

異なるのは中見出しや小見出しが多いWebサイトに合わせて視線が縦から横に多く流れる点です。

デンマークのユーザビリティ研究者、ニールセン博士によるビートマップを使用した調査ではF型の動きを見て取ることができます!

f:id:mtk-hcwj:20180203102720p:plain

出典:http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

縦書き

f:id:mtk-hcwj:20180203104002j:plain
出典:http://copymarketing.net/?p=249

縦書きの場合は、逆Nの流れで視線が動きます。

これも横書き同様、優先度の高い情報を適切な場所に配置することによって、情報を伝わりやすくすることができます。

わかりやすい例には新聞があります。

右上に新聞名や大見出しなどの大切な要素を、あとは読ませたい流れに沿って情報を配していますよね。

「3」の法則

f:id:mtk-hcwj:20180203113732j:plain
出典:http://www.chrome-life.com/mac/3954/

みなさん、よく要点を3つにまとめると相手に伝わりやすくなると聞いたことはありませんか?

アップルの創業者スティーブ・ジョブズがこの手法を頻繁に使ったことで知られていますね。

ジョブズのプレゼンではiPhoneとMac、iPadの3つを並べたスライドだったり、「薄く」「軽く」「高速」という商品の魅力を3つの形容詞を使って紹介したり。

日本でも「三種の神器」や「朝起きは三文の徳」、「三人寄れば文殊の知恵」など「3」という数字を使った言葉はたくさんあります。

「上中下」「松竹梅」「金銀銅」などのランクづけもそうですね。

人間は情報処理の能力上、短期記憶で保持できる情報の量は7±2が限界だと言われています。

±2というバッファの理由は、情報1個あたりの重みによって人間が処理できる情報量が変わってくるからです。

数字やグラフを用いたビジュアルデザインは処理しやすく、文字情報は文字が多くなればなるほど、重たく感じてしまいます。

そして、3という数字はマジックナンバーとも言われていて、人間が記憶しやすい情報量だと言われています。

なんだか不思議で奥が深いですよね。。

最後に

いかがでしたか?

今日は受け手の視覚に基づいて情報を整理する手法について紹介しました!

読者がストレスなくスムーズに情報を得ることができるよう、みなさんもぜひデザインをするときに応用してみてください!