NITE and DAY.blog

遊び人クリエイターKaiのオシゴト。

ブクマ推奨!実践的【視認性UP↑】のためのデザイン講座

f:id:doubleM:20160215000423p:plain

私生活にかまけて長らくブログを放置していました;遊び人クリエイタ―のKaiです。

先日、昨年末に公開したこちらの記事ブクマで使える!実践的【強調】デザイン講座 ~注目を集めるデザインの作り方〜 - カメレオンデイズに反応を返してくださった方がいて嬉しかったので、今回は前々から計画していた続編を書いてみようと思います。

この記事の狙い
「なーんかちょっと見づらいんだよなぁ」というデザインを

「伝えたい情報が目に入ってくる」デザインに!!

 

文字編 〜視認性&可読性を高めよう!〜

文字が読みにくいのって最悪ですからね。

大きさを適切なサイズにする

f:id:doubleM:20160224134445p:plain

何に対しても言えることですが、世の中ほどほどが一番です。「適切なサイズ」を検討しましょう。

行間を適切な広さにする

f:id:doubleM:20160224134949p:plain
左→右 で before→After! ちょっと行間が変わるだけでだいぶ読みやすくなると思いませんか?

参考:http://touch-slide.jp/column/202/

揃える

f:id:doubleM:20160224135417p:plain
タグクラウドのような見せ方をしたいのなら別ですが、不揃いよりは揃っているほうが見やすいですよね。

レイアウト編 〜「コンテンツに集中」させるのがポイント!〜

今更ですが、私のデザインは「良いデザインとは意識させないデザイン」である、という前提に基づいて作られています。見ている人が、無意識にコンテンツの流れや重要度合いをキャッチできるようなデザインにすることを意識してみましょう。

揃える

f:id:doubleM:20160224135432p:plain
テキスト同様、コンテンツに集中してもらうには奇を衒わずにマメに揃えて見せてあげることが重要です。

余白を十分かつ適切にとる

f:id:doubleM:20160224135659p:plain
マージン、パディング、どちらの呼び方でも構いませんが、これらがないデザインは息苦しく見えてしまうものです。余白は十分に取りましょう。

かといって、両サイド、上下などが偏って見えるようではデザインバランスを崩してしまうだけなので、余白は均一に開ける努力をしましょう。もし、均等が難しい場合でも、「扱う数値は必ず○の倍数にする」などのルール化した数値管理を行なうと整然とした雰囲気になりますよ。

カラー編 〜ここでは特に「引き算」が大事!〜

ハレーションを避ける

f:id:doubleM:20160224140151p:plain
一般に「目がチカチカする」と表現されるハレーション。白に対して真っ黒や三原色同士など、彩度や明度にギャップがありすぎる時に目が苦しむ現象のことをいいます。色選びの際はどうぞ、「目に優しい配色」を。

近すぎる色味を使わない

f:id:doubleM:20160224140201p:plain
そもそも色の相性が酷い。。って話もありますが(笑)明度や彩度が隣接する色同士が並ぶと、判別が苦しくなるものです。ちなみに、プロがデザインする場合はこの他にも色弱の方やお年寄りを意識するなどの配慮が必要です。

まとめ

いかがでしたでしょうか。
今スグ使えそうな手法はありましたか?

デザインにまつわる名言で"Contents is King"という言葉があります。周りの「デザイン」に注意を向けさせるのではなく、できるだけストレスを取り除いて「コンテンツ」に集中してもらうデザイン。今後もそういった点に注目して、デザイン改善のポイントをお伝えしてきたいなと思っておりますので応援のほど、よろしくお願いします♪