可読性を高める!理解を深めるデザイン!【デザインで自分発信】

O635IZFQ7J

こんちはっす!脳内アーティストSHUN INANUMA(@shuninanuma)です!

【デザインで自分発信】今回は第3回目!

前回の記事はこちら!リズムを生む!集中して見てもらえるデザイン!【デザインで自分発信】

前々回の記事はこちら!勢いが欲しい、インパクトが欲しい時のデザイン!【デザインで自分発信】

デザインには芸術的デザインと商業的デザインの2種類あると思っている。芸術的デザインとは例えばピカソとかの絵が分かりやすいかな?商業的デザインとはフライヤーやチラシなど。商業的デザインは人に伝わるか伝わらないかが非常に重要になってくる!

今回は人に伝えるデザインを作る上で気をつけたい、可読性や理解を深めてもらうデザインについてお伝えする!今回も初心者が陥りがちなデザインを反面教師として、伝わるデザインを作っていこう!

 

左揃え、中央揃え、右揃えの罠!!

おそらくデザイン初心者でも、大きく分けて揃え方には3種類あることが想像つくと思う!

wordやexcelでも使った事がある人は多いかもしれない!ぱっと周りのデザインを見てみよう!どこを左揃えにしているのか、どこを中央揃え、どこを右揃えにしているのか。それを意識するだけで自分がデザインを作る時の引き出しになる。

見渡せたかな??見出しは中央揃えが多く、文章は左揃えが多かったんじゃないかな??

 

初心者が特に陥りがちなのが、やたら中央揃えを使う事!

名刺を例に見てみよう!こちらがやたら中央揃えを使った名刺!

meisidemo

そしてこちらが電話番号などの情報を中央揃えを使わずに左揃えにした名刺!

meisidemo2

両方とも文字情報を読もうとしてほしい。どうだろう??

きっと下の方が読みやすいはず!何故か??目線が戻るポイントが同じだからだ!目線を赤い線で引いてみた!これでなるほど分かるはず!

meisidemo3 meisidemo4

タイトル以外、文章は基本左揃えだと覚えて欲しい!やたら中央揃えにはしないこと!これだけで大分デザインは理解を深める!!

 

装飾しすぎる罠!!

デザインのソフトは高機能であるがゆえに、初心者はこれでもかと機能を使いたがる!笑

その気持ちは分からなくもないけれどもそれではだめだ!だめだめ!!そこには重要な視点が抜けている!誰の為の高機能かという点!商業的デザインにおける機能は見る人の為を思い使い分けるべき!

例を出すと長方形の塗りと線!初心者は塗りにも線にも色をつけがち!塗りに色をつけるなら線に色はなし、線に色をつけるなら塗りに色はなしと覚えよう!色をつけるのはどちらか一方である!

botttandemo

これだけで可読性が一気に高まるよ!

やたら影とか、色を使ってはダメだ!見る人の事を考えよう。何の為の影なのか、何のためにその色を使っているのか説明出来なければ答えはNOだ!!

 

近いこと、近くないことは関係性を示す!!

レイアウトや配置ってかなり差が出る所です!ここも例を使って説明してみよう!

写真とそれに関しての説明文を配置したデザインを例にしてみる!

picturedemo

ぱっと見で写真に対しての説明文がどちらの写真に対しての説明か分かっただろうか??次にしっかりと意識して配置した例!

picturedemo2

 

お分かりいただけだろうか??関係性がある部分は近く、関係性が薄い部分は遠くする。空白が均等であれば同じグループだと読み手は思ってしまう。逆に同じグループなのであれば空白を同じにすべきだと理解できる!

ほんの少しの違いだけれども、これだけで読み手は全体の構成やロジックが理解しやすくなるのだ!

 

まとめ

つまりデザイナーとデザイン初心者の違いはよく考えているかの違いですね。

シンプルなデザインにしても、計算されて考えられてシンプルなのかどうか。同じ要素で同じようなデザインを作らせても全く違うものになります。

全ての配置に必然性を!!そうすれば、自然に可読性を高め、理解を深めるデザインになる!

【デザインで自分発信】第3回目でした!

 

line@

profile3_28
お前誰だよ!!って方はこちらをクリック↑↑

O635IZFQ7J

シェアしてもらえると飛んで跳ねて踊るよ!

どこ探しても見つからない超リアルな収支結果

line@banner

全くもって順調な人生ではなかった。楽しんで苦しみ抜いた大学を中退しての6年間。新卒フリーランスでも、起業経験者でも、サラリーマン経験者でもない。超リアルなフリーランスのお金の話をLINE@で発信中。毎週更新!見逃すでない!