こんにちは！今回のテーマは「デザインのコントラスト」です。
デザインのコントラストとは何なのか、意味や種類についてお話していきたいと思います！
コントラストとは
ここで言うコントラストとは、簡単に言うと「メリハリ」のことです。
コントラストと聞くと、白と黒のような色の明暗を思い浮かべる方も多いかもしれません。
それも正しいのですが、「色」だけでなく「サイズ」や「質感」にメリハリをつける事もデザインでは「コントラストを付ける」と言います。
大きい物と小さい物、複雑な形とシンプルな形など、要素と要素にメリハリをつけることで重要な場所を強調し、わかりやすくすることが出来ます。
また、視線を誘導してあげることが出来るので、見る人にとって見やすくストレスのないデザインにすることが出来ます。
コントラストの種類
サイズや質感のコントラストと言われても、少し想像し辛いかもしれません。
そこで、デザインのコントラストにはどんな種類があるのか、代表的な物をまとめてみました。
色のコントラスト
色の明暗にメリハリを付けます。
一番認知度が高くて単純な方法です。明度の低い暗い色と明度の高い明るい色の組み合わせでコントラストを付けます。
白と黒が最もコントラストの高い組み合わせになりますが、白黒に限らず、有彩色でも同じことが言えます。
例えば下の図のような、濃い緑と薄い緑の組み合わせを見てみて下さい。
左の図(A+E)のように明暗にメリハリが付いていれば、自然と濃い色の方に目が行くのではないでしょうか。
右の図(D+E)だと明度が近い為、どちらを見れば良いかわからず、視線が定まらず見辛いかと思います。
また、色のコントラストが付けられていないと、下記のような問題が発生します。
カテゴリ名と背景の明度が近く、文字が読み辛くなってしまっていますね。
このような問題を解決する為に、色のコントラストをしっかり付けてあげましょう。
色合いにメリハリが付き、文字が読みやすくなりました。
サイズのコントラスト
要素と要素のサイズにメリハリを付けます。
図形を大小で表すことはもちろん、テキストの場合も同じことが言えます。
例えば下の図を見て下さい。
1枚目の図だと、文字のサイズが全て同じなので、どこが重要なのか？カテゴリは分かれているのか？などが分かり辛いかと思います。
2枚目のように、優先度ごとに文字の大きさと太さに強弱を付けることで、注目して欲しい場所を強調して視線を誘導することが出来ます。
また、どんな項目があるのかパッと見て分かりやすくすることが出来ます。
面積のコントラスト
面積の大きさでメリハリを付けます。
シンプルな例だと上の図のように、要素(色や形など)の条件は同じでも、面積が大きい方が強調されます。
ただ、単純に面積が大きければ目立つと言う訳ではありません。逆のパターンもあり、面積が小さい方が強調される場合もあります。
例えば下のような図です。
背景の面積に対して、あえてテキストの面積は小さくすることで、目を引く印象的なデザインにすることが出来ます。
質感のコントラスト
質感の差異でメリハリを付けます。
よく見掛けるいくつかの例を挙げてみます。
複雑な物とシンプルな物の組み合わせや、クリアな物とぼかした物など、注目して欲しい要素に目が行くように強弱を付けます。
派手な柄のシャツと派手な柄のパンツの組み合わせだと、どこを見たらいいのか分からなかったり、目が疲れたりしますよね。(あえてそう言う組み合わせをする場合もありますが…)
自然と目に入ってくるような、調和の取れたコントラストを作ることが出来ます。
おわりに
コントラストは「メリハリ」が大事です。
コントラストを付ける際は、消極的にならずに思い切って強弱を付けてみましょう。
ちょっと強弱を付けただけでは却って分かり辛くなってしまうこともあります。
ちょっとやり過ぎかな？となったら、その際はデザインの引き算をしてあげれば大丈夫です！
しっかりメリハリを付けて、見やすくわかりやすいデザインを作ってみましょう！
それではまた！デジマースのコンでした。
