プロモーション手法

【使えると楽になる】マーケターに必要な配色の知識

初心者マーケター
初心者マーケター
デザイナーから上がってきたクリエイティブが何か変だが何が変なのかわからない

初心者マーケター
初心者マーケター
簡単なクリエイティブは自分で制作したいが、素人っぽいクリエイティブになってしまう

 

こんなお悩みの方のために、最低限の配色の基本をまとめました。これで自信を持って配色を決められるようになりますよ。

色の三属性

色の三属性とは、色相明度彩度のことです。

白、黒、灰色以外の色は、どのような色もこの3つの要素を含んでいます。

 

色相

色相とは赤、青、緑、オレンジ、紫などと言った色みの違いを表すものです。

色相を調整することで、暖色や寒色といった配色の調整を行うことができます。

彩度

鮮やかさの度合いの指標のことを意味します。そして彩度の中でその値が最も高い色を「純色」と呼びます。

明度

色の明るさを表す指標を意味します。

 

色相を決めるために役立つ「色相環」

色相環とは、色相を順序立てて輪っか状に配置したものを意味します。色の三原色(赤・青・黄)をそれぞれ2つずつ混ぜると、二次色(赤みの橙・緑・紫)ができることが特徴です。

さらには三原色と二次色を混ぜると三次色ができ、これらを等間隔に並べると下の図のように12色の色相環ができます。

カラーホイール(The Color Wheel)は、「赤」「黄」「青」を基準とした12色をサークル上に配置したものです。

色相環を使うことで感覚ではなくルールにあった配色ができます。

https://ichi-up.net/2015/099

https://chot.design/concept-of-design/991f0145bd9b/

補色

色相環の反対側にある色を2色の関係のことを補色と言います。
補色は、互いの色を最も目立たせる色の組み合わせです。コントラストをはっきりとつけたい、すなわち重要であるテキストなどを目立たせたい時に活用する色になります。

色の差が大きくお互いの色を引き立てる組み合わせになります。

 

トライアド

色相環の等しい距離にある、三角形から色を組み合わせる方法です。
3色以上の色でコントラストをつけたいときに効果的です。赤を基準とすると残りの2色は黄緑と、青紫になります。
トライアドを意識してデザインすることで3色以上でもバランスの良い配色をすることができます。

 

類似色

色相環の隣り合う色を組み合わせる方法です。
共通する色を基調に持つので調和のとれた組み合わせになります。
2色や3色選んでも使用できるため、統一感のあるデザインをすることが可能になります。類似色を組み合わせるとまとまりがある印象になります。

 

トーン(色調)

トーンとは色を構成する3つの属性、色相、明度、彩度のうち、彩度明度をあわせたもので、【明度と彩度が似ている色を集めたグループ】のことです。

以下のような12種類のグループがあります。この図はPCCS(日本色研配色体系)が定めるトーンの名前とイメージをあらわしたものです。

 

画像引用:日本色研事業株式会社HP

各トーンには、それぞれ名前以外に、関連付けられるイメージがつけられています。たとえば、ブライトトーンには【健康的な】【陽気な】【華やかな】といった形容詞が定められています。

それぞれのトーンのイメージを説明すると少し多いので、別記事にしましたので以下の記事も是非ご覧ください。頭に入れておくとデザインのディレクションをする際、表現が豊かになってやりやすくなると思います。

https://hiyoko-marketing.com/color-tone/

 

色ごとの特徴

人間は、色にそれぞれ共通のイメージを持っています。

それは、行動心理学に基づいた先天的なものというよりは、色に囲まれたこの世界で過ごす中で後天的に身についたイメージがほとんどです。

 

ここでは大まかな色の特徴をご紹介しますので、さらに詳しく知りたい方は以下の記事にまとめているのでご覧ください。

https://hiyoko-marketing.com/color/

暖色(赤・オレンジ・黄)

暖色系の色は食欲や購買意欲を高める効果があると言われているため、食品系の広告などに使用されることが多いです。

特に赤はセールの価格やキャンペーンバナーなどにも多く使用されます。

目立つ色なので、一番見て欲しい箇所に配色すると効果がありますが、アクセントとして最も強調したい部分のみに使用すると効果的です。

寒色(青・水色)

寒色系の色は血圧や心拍数を下げ興奮を鎮めたり、食欲を抑制させる効果があるとされています。

 

重圧感、高級感、都会、力強さ

収縮色、後退色、重量色といった色のイメージ効果を持っています。
黒は有彩色をもっとも引き立たせる色です。

クレジットカードのランクとしてゴールドカードの上にブラックカードがあるように、黒はゴールドよりも高いステータスで扱われることも多いです。

白がものを軽く見せる効果があるのと反対に、黒はものを重く見せる効果もあります。

黒から連想するイメージ
高級・クール・暗闇・死・恐怖・悪・威厳
スーツ・葬式・髪の毛・カラス・墨・夜・タイヤ・ピアノ

 

清潔、クリーンな、シンプル、純粋、無垢

膨張色、進出色、軽量色のイメージ効果を持っています。
潔白なイメージから、清潔感や純粋なイメージを与える色です。

病院や飲食店といった清潔感をイメージさせたい場所では白い壁や白い制服が使用されることも多いです。

デザインでは他の色の邪魔をしないため、使用頻度も高めの色になります。

白から連想するイメージ

清潔・無垢・潔さ・美しさ・純粋・神聖
結婚式・病院・羽根・雪・雲・綿・牛乳・雲・紙・ウサギ

https://chot.design/concept-of-design/baa728edc1ac/

 

 

配色のバランスの決め方

配色のバランスには、美しく見える比率が以下の通りに決まっています。

【配色の黄金比率】

ベースカラー:メインカラー:アクセントカラー =70%:25%:5%

 

ベースカラー

最も大きな面積を占める基本となる色です。
余白や背景などに用いることが多いです。メインとアクセントのカラーを引き立てるための、脇役的な色として使います。無彩色、またはメインカラーを明るくした色を使用すると良いです。

 

メインカラー

全体のデザインのイメージをつける主役の色です。彩度が高めのはっきりとした色にすると良いです。広い面積で使用しても見づらくならない色にしましょう。

 

アクセントカラー

メインカラーを際立たせる役目があります。メインカラーの補色を使う場合が多いです。補色じゃなくても、メインカラーとのコントラストがとれる色を選択しましょう!全体を引き締め、ユーザーの目を引く役割があります。

これらを守ってデザインをすることで、大きな違和感やとんでもない配色になる可能性は低くなるので、しっかりと守ってデザインをするようにしましょう!

 

終わりに

最低限必要な配色のルールをご説明しました。

デザインにおいて配色はとても重要で、10年以上デザイナーをやっている方でも、「配色は難しい」と口を揃えておっしゃいます。そんな難しい配色を初学者の方達がどのようにデザインをすれば良いかというと、配色の基礎を抑えて徹底的に真似ることです。

最初は、参考サイトなどを見つけ真似をしていきながら少しずつ配色の知識を身につける世にしましょう!

 

参考文献:色の事典(色彩活用研究所サミュエル/監修)

ABOUT ME
ゆみやん
都内の事業会社に勤めるOL29歳独身です。好きなものは、旅行、猫、東京巡り、ランニングです。筋トレは死ぬほど嫌いですがMなので超やってます。 【社会人1年目〜3年目】広告代理店で身を削り鬱になる→【4年目〜現在】事業会社へ転職し、マーケティング担当として超絶楽しく働いています。 副業でマーケティングコンサルとWEBデザイナーも行なっておりますので、是非ポートフォリオご覧くださいませ m(_ _)m