デザインを制作する上で、配色を考えることは非常に重要なことです。
しかし、いざセンスを身に付けようと、色について学習すると、色相環や色立体などを元に知識として学習しますが、頭でっかちになり、実際のデザイン制作の現場では、それらの知識をうまく使えなかったりします。
この記事では難しい色彩理論などを抜きにして、現場で使えそうな、ポイントを抑えた正しい配色テクニックについて考えていきたいと思います。
配色の原則
配色の原則としてよく言わるのが、配色の比率を70%:25%:5%とすることです。
全体における色の比率を、この数値に設定することで、美しく見えるとされています。それぞれの比率は下記になります。
①70%＝ベースカラー
②25%＝テーマとなる色
③5%＝アクセントカラー
①ベースカラー：
下地となる背景色を設定します。
文字を中心に読ませたい場合や、写真をメインに見せたい場合は、白背景を使ったデザインを見ることが多のではないでしょうか。
（商品を魅力的に見せたいECサイトや、文字をメインに情報を伝える役所関係のサイトなどは、視認性の確保のため、白背景を使ったデザインを見ることが多いと思います。）
②テーマとなる色：
ブランドカラーやイメージカラーを設定します。
テーマとなる色は、文字通りサイトのテーマカラーになるので、
全体の印象を決定づけるものとなります。
③アクセントカラー：
サイト全体に対しての、いわゆる「差し色」と考ます。
ファッションでもそうですが、差し色を何にするかで、センスの良さが変わってくる場合があります。差し色は全体的な「締め」を演出するうえでも非常に重要です。
次にこの原則を利用した参考サイトを見ながら、考えていきます。
Appleのサイトは、ベースカラーをホワイト系（70%）として、
テーマカラー（25%）をブラック系、そしてアクセントカラー（5%）をビジュアルの写真の色としています。
特にアクセントカラー（5%）は、メインビジュアルの蛍光色が文字通りアクセントとして機能していて、サイト全体で見たときに美しく見えます。
このデザインのように、ビジュアル写真で使われている色味も考えて制作します。ですので、デザイナーは写真選定の段階から配色を考える必要があります。
ベースカラーをホワイト系（70%）、テーマカラー（25%）をイエロー系、
アクセントカラー（5%）をブラック系にしています。
イエローの使い方がとても美しく、ブラックとホワイトとうまく調和しています。薄いグレー写真の中にイエロー、ブラックを使用している点もとても上手いです。
ベースカラーである背景色を大胆にパープル系（70%）とし、テーマカラー（25%）をホワイトとしています。
アクセントカラー（5%）はシャボン玉に映り込んでいるレインボー
の色味と考えられます。
ベースカラーは配色における面積が一番大きいので、このような彩度の強いパープルを大胆に配置することで、個性的でインパクトのあるビジュアルを作りだしています。
このように、良いと思ったデザインの配色比率を分析することで、色彩感覚を養うことができます。
捕色で色のコントラストを考える
配色において、隣り合う色同士のコントラストを考えます。
コントラストを意識することで、美しく調和のとれた配色を実現出来ます。
下記の「色相環」を見てください。
色彩について学習すると理論が深まりますが、
理論を現場で応用するとなると、なかなか難しいでしょう。
今回は難しい色彩理論は考えません。
各色の反対に位置する色を見てください。
例えば、黄色であれば青紫、青緑であれば赤です。
この反対側に位置する２色を「補色」と呼びます。（反対色といわれることがありますが意味は一緒です。）
補色を使用することによって、調和のとれた配色を実現することができます。例を見てみましょう。
TSUTAYAのロゴはブルー系とイエロー系の補色を大胆に使った、コントラストが強いロゴになっています。
また、デザイン的にも余計な要素を一切そぎ落とし、「T」の文字のみを象った
デザインになっていて、一目で認識できる、視認性が非常に高いデザインになっています。
セブンイレブンのロゴも、補色を取り入れたロゴとして有名です。
色が与える印象をうまく取り込み、野外でも目を引くような配色構成になっています。
Webデザインでも下記のようなサイトは、うまく補色を使い、力強い配色を生み出しています。
ブランドカラーのみを使用し、コントラストが強い、くっきりとした補色関係を生み出しています。強めのコントラストでアルコール炭酸飲料のイメージをうまく伝えていると思います。
このサイトではアクセントカラーをレッド系として、補色の関係性をサイト内にうまく落とし込んでいます。
コンバージョンボタンである「会員登録」にレッド系を施し、全体の調和を崩さずにうまく目立たせています。
ライムグリーンの帯を使用して、全体として重くなりすぎない、さわやかなイメージの配色を作りだしています。
重くなりがちな彩度のオレンジ系を使用していますが、フッターの
ブラックとの間にライムグリーンを使用しているので、全体対的に爽やかさも印象付けています。全体のバランスを崩さないような配色を構築しています。
色そのものが与える印象を考える
色そのものが与える印象を考えていきたいと思います。
ここで各色が与える、主な心理効果やイメージを見ていきたいと思います。
・赤系：興奮や刺激をもたらす、購買意欲の促進、食欲の増進、警戒心や注意力を喚起させる。情熱、闘争、活気、勝利。
・青系：精神的に落ち着かせる作用、知的・クールな印象を与える、集中力を高める、爽快感、体温を下げる、痛みの緩和。解放、広大、落ち着き、憂鬱。
・緑系：情緒の安定や安心感を増大させる、緊張を緩和、リラックス作用、体の組織を生成。癒し、くつろぎ、さわやか、エコロジー。
・ピンク系：幸せな気持ち・優しい気持ちにさせる、愛らしく見える、満ち足りた気分にさせる、女性ホルモンの分泌を助ける。華麗、幼さ、甘い、アイドル、繊細。
・オレンジ系：楽天的で陽気、身体を活動的にする、代謝をよくする。万人受けする、大衆的。にぎやか、ビタミン、夏、自由奔放、陽気。
・紫系：高貴さや高級感を与える、インスピレーションを与える、鎮静効果、性的なイメージ、催眠効果。芸術、繊細、永遠、エキゾチック、神秘、魔法、優雅、欲求不満。
・黒：高級感を与える、自己主張を強くする、強さや権力などを感じさせる。
プロ意識、クール、寂しさ、不安、高級、力、死。
デザイン制作の配色においては、目的にあった色を使用する必要があります。
商品やサービスのコンセプトやターゲットを明確にしたうえで、色の持つ特性を活かす配色をしましょう。
業種別に色の設定を見ていけば、使われている色にある傾向があります。
作例を見ていきましょう。
IT系やWebサービス系の企業のロゴには、青系が使用される傾向があります。
青の特性は、知的・冷静なイメージや信頼感を与えることができます。
青系に設定することによって、IT系企業ならではの知性的な部分や、正確性をイメージさせることができます。
ちなみ世界的にみても、有名企業はロゴに青を使う傾向があるそうです。
大企業にとって「信頼」のイメージは、最も大事な要素かもしれません。
飲食系の企業のロゴには、赤系やオレンジが使用される傾向があります。
食欲増進や、活気などをイメージさせる赤や、大衆性を与えるオレンジなどで気軽に店に入りやすい狙いをロゴで表現しています。
また、リラックス作用やくつろぎを感じさせる緑系も使用される傾向があります。このような飲食店は、比較的長居させてもよいような、安心できる店づくりを狙いとしているのでしょう。
いずれにせよ、色の決定は安易に直感的に決めるのではなく、コンセプトやターゲットなどを明確にして決定していくものです。
試行錯誤して色彩感覚を磨くのが重要
今回ご紹介したのは、あくまで配色を決める際のテクニックですが、実際には現場で試行錯誤して配色感覚を磨くことが重要です。
理論を学ぶことも重要ですが、配色は絶対的な正解はありませんので、現場で選んだ色を使う意味を、自分なりに頭を使って考えることが重要でしょう。
参考になるオススメ本「COLOR DESIGN カラー別配色デザインブック」
