今回はデザインの基本の配色に関してお伝えいたします。

色の使い方の基本を学ぶことによって、デザインを意図付け、意味付けしましょう。

 

 

 

 

スポンサーリンク







配色とは?

配色とは、色を配ること…

すみません。

でもそのままなのです。

色を配置させることです。

配色は、

意図があり、イメージを伝え、ブランドを浸透させ、情報を読み手に伝わりやすくする

という事を目的にして行う必要があります。

 

情報の受け取り手が感じる色のイメージ

この情報はなんとなく知っている方も多いとは思いますが、おさらいです!

赤色には、

「情熱的、愛、力強い、パワフル、購買意欲を高める、食欲増進を図る」というプラスのイメージと

「チープ、危険、力強い(マイナス面で)」というマイナスイメージがあります。

赤色がブランドイメージのものは頭に残りやすい

という大きなメリットもあります。

上記情報でピックアップしたいものは、

ブランドイメージが頭に残る

という点と

チープになる

という点です。

ブランドイメージが頭に残る

赤色メインでブランディングをしていくと顧客の印象に強く残ります。

実際に赤色のブランドの会社がどれだけイメージに残っているかを下の画像でテストしてみます。

画像から連想するブランドを当ててみてください。

<赤と黄色のハンバーガーのお店>

 

<赤と白のチョコレート菓子>

 

なんのブランドかブランド名を言わなくてもわかったのではないでしょうか?

他にも、「赤色のプロ野球チーム」と言ったらすぐに浮かびますが、

プロ野球を知らない人には

他のチームの色なんてわからないものです。

 

赤色を使いすぎるとチープになる

赤色は効果の高い原色です。

これをあまり使いすぎるとチープな印象になります。

例えば当サイトのロゴは「気軽に 学べる」という事をテーマとして

パステルカラーの水色を使用しています。

このデザインを赤色にするとどうなるでしょうか?

急に安っぽくなりました。

これが赤の力です。

印象強くすることは出来ますが、赤の使い方は難しく、

使いすぎるとチープになります。

 

赤の印象です。

 

オレンジ

続いてオレンジ色です。

一般的にはオレンジの効果は赤に集約されることが多いです。

効果に被りがあるからですね。

ですが、そんなことは置いておき、

効果の解説を行います。

オレンジ色には

「エネルギッシュ、食欲増進、楽しそう、親しみやすい」というプラスのイメージと、

「中途半端、頭に残りづらい、チープ」というマイナスのイメージがあります。

赤色と違うところは、赤より優しい色になるので、

元気なイメージでも、力強すぎず、楽しそう、親しみやすそうなイメージを与えます。

逆に色としてはイメージが半端になるので、印象としては残りづらく、色の多用でチープになってしまうという効果もあります。

黄色

黄色が与えるイメージについてです。

黄色は

「活発なイメージ、開放的、明るい、幸福」なプラスのイメージと、

「軽いイメージ、幼いイメージ、危険なイメージ」というマイナスのイメージがあります。

アクセントのイメージにはぴったりですが、ベースカラーを明度の低い色にしないとコントラストが低く見づらくなります。

今回の記事の黄色の見出しも背景色と同化して見えなくなったため、文字背景を付けました。

 

緑が与えるイメージです。

緑は、

「安心できる、自然なイメージ、リラックスできる、安全なイメージ」というプラスなイメージと

「緑単色では人工的なイメージになってしまう」というマイナスなイメージがあります。

緑単色では人工的なイメージになってしまいます。

アクセントカラーとして使ったり、グラデーションをかけたりすると自然な印象になります。

 

青色

青色のイメージ。

青色には

「リラックス効果、若々しい、清潔さ、誠実さ、クール」というプラスのイメージと

「食欲減退、冷たい、堅苦しい」というマイナスのイメージがあります。

 

紫色

紫色は、

「艶やか、ミステリアス、大人な雰囲気」というプラスイメージと、

「協調性がなく浮いている」というマイナスなイメージがあります。

紫が強すぎると、ちょっと引いてしまう人もいますので使い方は難しいですが、大人な雰囲気を出すのにはピッタリなので、ターゲットを明確にした情報を伝えることが出来ます。

 

ピンク色

ピンク色には、

「可愛らしい、女性的、優しい」というプラスのイメージと、

「子供っぽい、男性への情報伝達に向かない、弱弱しい」というマイナスのイメージがあります。

ターゲットが明確に女性であれば効力を発揮しますが、伝えたい情報によっては、子供っぽさが出てしまい、使用に向かないこともあります。

 

白色

白色を使うことは多いと思います。

そんな白色のイメージは、

「清潔感、整理されている、純粋」なプラスのイメージと、

「味気ない」という大きなマイナスイメージがあります。

白色ベースでは、内容を読んでもらうには最適ですが、白色ベースだと味気なく、「読む」というアクションにつながりづらいこともあります。

また白色は明度が高く、コントラストを付けやすい色になるので、アクセントとなる色にはピッタリです。

 

黒色

黒色は白色と同様使い方によってイメージは変わります。

黒色のイメージは、

「高級感、知的さ」というプラスイメージと、

「不自然、不安、恐怖」というマイナスイメージがあります。

もっとも明度が低い色になります。明度の高いベースカラーと組み合わせるとアクセントになります。

自然界に「真っ黒」というものは存在しません。

なので、基本的にデザインで黒色を使う場合は、

真っ黒ではなく、若干白色よりの黒色や、ベースカラー寄りの黒色を使うと自然に受け入れてもらえます。

 

彩度

色の彩度とはどれだけ色が鮮やかな状態かを表すものです。

<写真で表すと…>

彩度の高低で印象は大きく変わります。

 

明度

明度とは色の明るさを示すものです。

<写真で表すと…>

明度の高低でも印象は大きく変わります。

 

色の相性

色には相性があります。

色相の近い色は馴染みやすく、

色相の遠い色は、アクセントになります。

 

コントラスト

コントラストとは色の抜けのことを指します。

色の明度の差、色相の差を言います。

コントラストが低い状態では、色と色が馴染み自然なイメージに、

コントラストが高い状態では、色の差が激しいため、アクセントになります。

伝えたい情報によってコントラストを使い分ける

伝えたい情報はコントラストを高い状態にし、はっきりとした印象で伝える必要があります。

逆に、なじませたいイメージはコントラストを低い状態にして伝えるといいですね。

<伝えたい情報はコントラストを高く>

 

<馴染ませたいイメージはコントラストを低く>

縁取り文字もコントラストを意識する

縁取り文字の作成方法はコチラ

【初心者向け】縁取り文字の作成方法~Adobe Illustrator CC2017~

縁取り文字を作成する際も、コントラストが低い状態だと、文字がぼやけて見えにくくなります。

イメージを大事にし、同系色を文字色と文字縁に利用することもありますが、このような場合は明度に差をつけ縁取り文字を作成する必要があります。

 

 

色を使う数

基本的にデザインで使う色の数は、3つとなります。

「ベースカラー」「メインカラー」「アクセントカラー」

の3種類です。

ベースカラーは、デザイン全体のイメージを担うカラーです。

メインカラーは、ベースカラーを引き立てるカラーとなります。

アクセントカラーは、伝えたい情報を明確に伝えるためのカラーとなります。

 

色を使う比率

色を使う比率は、

ベースカラー70%

メインカラー25%

アクセントカラー5%

が黄金比率と言われています。

試しに一つ画像を作ってみました。

ベースカラーはホワイト

メインカラーはオレンジ

アクセントカラーはオレンジの明度を低くしたもの

を使用しました。

 

色の特性を理解して配色しましょう。