Design Stock

デザインのアレコレ

  1. HOME
  2. 色がなんだかくすむときに知っておきたい!色の特性と色を見えやすくするコツ

色がなんだかくすむときに知っておきたい!色の特性と色を見えやすくするコツ

チラシやパンフレットなどのデザインで、文字や図版を紙面上に配置すると、なんだか見えづらくなってしまうことがありませんか?

紙面に限らず、Webサイトのデザインでも写真の上などに特定の要素を配置すると色がくすんで見づらくなってしまうことがあります。

僕も文字や図版の色を選ぶときは、周りの色の影響で見えづらくならないか注意しています。

しかし、配色のトライ&エラーを繰り返していると時間があっという間に過ぎてしまうんですね。

そんな非効率をなくすために、

「こういう色の組み合わせはやらない方がいい」

という考え方をあらかじめ知っていれば、とても便利ですよね!

ということで、今日は色の特性と色を見えやすくする「セパレーションカラー」という考え方についてご紹介したいと思います!

色の視認性

f:id:mtk-hcwj:20180214192549j:plain

はっきりと見えることを「視認性が高い」といい、見えにくいことを「視認性が低い」といいます。

では文字や図版の視認性は何によって決まるのでしょうか?

それは色同士の「明度差」です。

明度差が大きいほど視認性が高くなり、明度差が小さいほど視認性が低くなります。

デザイナーは明確に伝えなければならない要素がある場合はしっかりと視認性が高くなるように配色を工夫しなければなりません。

「明度」について知らない方はこちらの記事をご覧ください↓

www.design-stock.jp

ハレーション

f:id:mtk-hcwj:20180214193122j:plain

ハレーションとは、彩度が高い色同士を組み合わせることをいい、

ハレーションが起こると目がチカチカして要素が見えづらくなります。

どうしても彩度が高い色同士を組み合わせたい場合は文字を袋文字にするなどして白や黒を挟み、ハレーションを抑えることが大切です。

色の対比現象

色の対比現象とは、隣接する色と色が接したときに互いに影響しあって、本来の色をは異なる色に見える現象のことです。

色自体は変わらないにもかかわらず、周りの色との関係性によって明らかに違う色に見えてしまいます。

明度対比

f:id:mtk-hcwj:20180214195632j:plain
出典:https://liginc.co.jp/346817

上図の中央にあるAとBではどちらが明るく見えるでしょうか?

多くの方はBの方が明るいと答えると思います。

しかし、実際はAとBの両方とも全く同じ色です。

この現象のことを「明度対比」といいます。

明度対比とは、周りにある他の色の影響を受けて、本来の明るさよりも明るく、または暗く見える現象のことです。

彩度対比

f:id:mtk-hcwj:20180214200116j:plain
出典:https://liginc.co.jp/346817

今度はAとBを比べたときAはくすんで見え、Bは鮮やかに見えませんか?

こちらも実際にはAB共に同じ色を使用しています。

これを「彩度対比」といい、周りにある他の色の影響を受けて、本来よりも彩度が高く見える現象のことをいいます。

色相対比

f:id:mtk-hcwj:20180214200803j:plain
出典:https://liginc.co.jp/346817

こちらもAとBを比べてみると、色が違って見えると思います。

実際には同じ色なのに、Bの方がより赤っぽく見えますね。

これは「色相対比」といい、隣合う色同士が影響しあって色相が違うように見える現象です。

補色対比

f:id:mtk-hcwj:20180214200826j:plain
出典:https://liginc.co.jp/346817

こちらは「補色対比」といいます。

AとBを比べると、Bの方が彩度が高く見えませんか?

色相が正反対にある補色同士を組み合わせると、互いの色がより強調されて、彩度が増したように感じる現象です。

それでは最後に、色がかすんで見えるときに役立つ、色をより見えやすくするコツについてご紹介したいと思います!

セパレーションカラー

f:id:mtk-hcwj:20180214195014j:plain

曖昧な色を同じ紙面に使用する時に、配色の中間に別の色を入れることにより、メリハリをつけたり全体を引き締めることができます。

この間に挟む色のことを「セパレーションカラー」といいます。

デザイン制作では似たようなトーンの色を使って色同士の境界線が曖昧になってしまうことがよくあります。

そのような時は明度や彩度の異なる別の色を挟むことによって、2色を分割すると共にアクセントを加えてあげましょう。

最後に

デザイン制作をしていてなぜか色がくすんで見えたり、全体的に色の違いがはっきりしない時は、その原因を知っておくことはとても大切なことです。

考え方を知っているだけで解決策をすぐに思いつくことができるので、悩む時間を減らし、より効率的に制作することができます。

みなさんもぜひ、今回ご紹介した色の特性を理解した上で、デザイン制作に取り組んでみてください!

今日はここまで

バイバーイ