対比させて強調!デザインの基本原則「コントラスト」とは?

悩む人
悩む人

デザインを作ったけど、なんだかパッとしないし、

何が伝えたいのかよくわからなくなってしまった・・・。

どうすればいいだろう?

そんなお悩みを解決します!

こんにちは!現役デザイン学生のなかあ(@nakablog_)です!
デザインの大学に通いながらブログを書いたりTwitter発信をしたりしています。

デザインの基本原則、コントラスト対比とも呼ばれていて、目立たせたい部分とそうでない部分で分けるのに使うことができます。

デザインの4つの基本原則はノンデザイナーズ・デザインブックという本が起源で、今ではデザインの世界で当たり前に使われている原則です。

4つの基本原則は、デザイナーも非デザイナーも覚えておくだけで、必ず役に立つのでぜひ最後まで読んでください!

今回は「コントラスト」について解説します!

4つの基本原則をまとめた記事はこちら↓

デザインの基本原則「コントラスト」とは

コントラストとは、ある要素と別の要素を対比させて、「目立たせたい部分」「そうでない部分」に分けるために使います。

目立たせたい部分だけに色を付けたり、大きくしたりして、適切にコントラストをつけると、情報がわかりやすく伝わるようになってデザイン全体の見栄えも格段に良くなります。

コントラストで情報がわかりやすくなる

コントラストを意識していないデザイン
コントラストを意識したデザイン

上のデザインをご覧ください。

一枚目のコントラストを意識していないデザインは、文字の大きさ、太さがどれもほぼ同じなので、どこに目をやればいいのかわからなくなっています。

また、見栄え的にもよろしくありません。何が伝えたいデザインなのか分かりづらいですね。

それに対して二枚目のコントラストを意識したデザインでは、ひと目で「セールをやっていること」がわかります。そして、「最大80%OFF」、「8/4 11:00 – 8/11 23:59」の情報が流れるように見てとれます。

これは情報の強調したいレベルに応じて、文字の大きさ、太さを調整したデザインになっているからです。情報がわかりやすく、伝わりやすくなりますね。

コントラストで見栄えが良くなる

コントラストを意識していないデザイン
コントラストを意識したデザイン

一枚目のデザインは読む気も起きませんよね。

しかし、二枚目のデザインのように重要度の高い要素は、文字を大きくしたり、色を付けたりすることで、読む気を出させることができます。

また、コントラストをつけることで、デザイン全体の見栄えも良くなります。

新聞もこのコントラストの原則を使っているので読みやすくなっていますよ~!

新聞
コントラストを使った新聞

デザインの基本原則「コントラスト」まとめ

  • コントラストは目立たせたい部分とそうでない部分を分けることができる
  • 情報がわかりやすく、伝わりやすくなる
  • デザイン全体の見栄えが格段に良くなる

コントラストで対比できる要素は様々です。

  • 大きい文字と小さい文字
  • 画像と文字のレイアウト
  • 暗い色と明るい色
  • 密度の高い部分と余白が多い部分

状況に応じて適切なコントラストで、わかりやすく伝えるための工夫をしましょう!

Twitterもやってますので、ぜひ覗いていってください~!

タイトルとURLをコピーしました