【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

バナー広告やスライドの見栄えがしっくりこなかったり、テキストが読みにくいと感じたことはありませんか？もしかするとその問題、「配色」を見直すだけで解決できるかもしれません。

まず下のバナー広告をご覧ください。

黒、青、ピンクの３色が使われていますが、読みづらく毒々しい印象です。

このバナー広告のデザインは一切変えずに、色のみを変更してみましょう。

いかがでしょうか。デザインはそのままでも、配色を見直すだけで印象を大幅に変えることができました。

本記事の目的は誰でも適切な配色ができるようにすることです。美術やデザインに明るくない方でも、ルールやコツを身につけることで上手に色が扱えるようになります。基本知識の解説に始まり、バナー広告の配色NG例から便利なツールまでご紹介します。

バナー広告のデザインについて学びたい方はこちらの記事もオススメです。

【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本

※本記事に掲載している画像の色味はディスプレイやOSによって見え方に差が出る可能性があります。

色彩と配色の基本知識
バナー広告の配色NG例
配色に役立つツール紹介
まとめ

色彩と配色の基本知識

まず最初に「色彩」についての理解を深め、その後に「配色」について学んでいきましょう。

色彩がもたらすイメージと効果

私たちが色を眺めたり身につけたりするとき、心身への効果や影響があると言われています。そこで色彩心理学などで提唱されている各色の一般的なイメージをまとめました。個人の受け止め方に多少の差はありますが、これらの定義を念頭に置きながら配色を考えていくと効果的です。

また熱さや温かみを感じる赤や黄色系を「暖色」、寒さや冷たさを感じる青や水色系を「寒色」と呼びます。それ以外の緑や紫などの色は「中間色」と呼ばれています。

RGBとCMYK

次にデザイン・印刷業界でよく耳にする「RGB」と「CMYK」について簡単にお話します。

RGBは「R（Red：赤）G（Green：緑）B（Blue：青）」の３色を指します。「光の三原色」とも言われ、パソコンやスマホ、テレビなどのディスプレイ画面はRGB３色を組み合わせることで表現されています。

対するCMYKは「C（Cyan：シアン）M（Magenta：マゼンタ）Y（Yellow：イエロー）」にK（Key plate：黒）を加えた４色を指します。「色料の三原色」とも言われ、家庭用プリンタなどはCMYK４色の塗料の混色で表現されています。

RGBでは表現できてもCMYKでは表現できない色の領域があるため、２つのカラーモードが用意されています。詳しい説明は割愛しますが、バナー広告などのディスプレイ画面上で見るものを作るときはRGBを使うということだけ覚えてもらえれば十分です。

RGB値と16進数カラーコード（HEX）

PCソフトでテキストや図形の色を変更するときに、下のようなカラースライドを見たことはありませんか？

このカラースライドはRGBをそれぞれ0から255までの256階調（16進数）の値で表しており、これをRGB値と言います。３つ全てを最大値（255）にすると「白」、最小値（0）にすると「黒」となります。

また色を選択する際に６桁の数字が表示されることがあります。

これは16進数カラーコード（HEX）と呼ばれるもので、ディスプレイの色の量を数値で表しています。CSSの色指定でも（background-color: #ff0000;）といったように、頭にハッシュ記号「＃」をつけて使われています。

参考：原色大辞典

色をRGB値とカラーコードで表すと下のようになります。

色の三属性（色相・彩度・明度）

色を理解する上で欠かせないのが「色の三属性」です。RGBとは異なる観点で、色相（Hue）、彩度（Saturation）、明度（Brightness／Value）の３つを指します。略してHSB（HSV）と呼ばれています。

色相

赤、青、緑といった色味の違いを表します。0°から360°の範囲で表されます。

彩度

色の鮮やかさを表します。彩度が高いと鮮明で目立つ色味になり、彩度が低いと鈍く落ち着いた色味になります。白や黒、灰色のように彩度を持たない色のことを「無彩色」と呼びます。

明度

色の明暗を表します。明度が最も高い状態は「白」で、最も低い状態は「黒」になります。

例えば色相337°のピンクを基準とした場合、彩度と明度を変えると下のように色味が変化します。

配色の種類

次はいよいよ「配色」についてです。世の中には様々な配色パターンがありますが、バナー広告などに応用しやすく比較的わかりやすいものをピックアップしました。シンプルな色相環（色相をサークル状にしたもの）を使いながら解説していきます。

同じ色相の配色（同一色相配色）

同じ色相内での配色です。明度や彩度を変えて組み合わせます。色相が一緒なので調和が取りやすく失敗しにくいですが、メリハリには欠けるかもしれません。

似た色相の配色（近接・類似色相配色）

隣接する色相の中で組み合わせた配色です。同じ色相の配色よりも多少メリハリをつけることができます。

補色配色

補色同士の配色です。「補色」とは色相環の反対側に位置する色を指します。お互いの色を引き立て鮮やかに見せることができます。

トライアド配色

色相環の中で正三角形を作り３色を組み合わせた配色です。

スプリットコンプリメンタリー

最初に１色選び、その色の補色と隣接した２色を組み合わせた配色です。

トーン（色調）

「トーン」とは彩度と明度を組み合わせた複合概念です。複数の色を使う場合はトーンを合わせることを意識すると一体感が出やすいです。柔らかく優しい印象にしたいときは「ペール」、シックで落ち着いた印象にしたいときは「ディープ」……といったように、トーンの持つ印象から配色を選んでみるのも良いでしょう。

配色比率「70:25:5」の法則

色をつける際に覚えておきたいのが配色比率の法則です。ベースカラー、メインカラー、アクセントカラーの３色を設定し、配色をそれぞれ「70：25：5」の割合にすると均衡の取れた美しい配色になります。

ベースカラー

背景や余白など最も広い面積に使う色です。メインカラーやアクセントカラーを引き立てる色を設定します。

メインカラー

デザイン全体を印象付ける色です。例えばメインコピー、テキストの背景などに使うと良いでしょう。ベースカラーに近い色相を使うとバランスが取りやすいです。

アクセントカラー

デザイン全体にアクセントをつける色です。強調したいテキストやCTAボタンなどにポイントとして使います。３色の中で最も目立つ色を設定します。

４色の場合は下のように比率は変えずに色を分割して考えると良いでしょう。

バナー広告の配色NG例

ここまでは基本知識を学んできましたが、次は応用編として実際にバナー広告を作るときにやってしまいがちな配色のNG例を紹介していきます。

可読性や視認性が悪い

バナー広告では可読性や視認性を高くする必要があります。基本的にモノクロにしたときに明度差がある配色を心がけましょう。また補色配色は組み合わせによってはハレーション（色と色がぶつかりあって境目が白くぼやけて見える現象）が起こり非常に見にくいです。その場合は間に無彩色や彩度の低い色を挟むか、それぞれの色のトーンを調整すると見やすくなります。

原色を多用している

RGBにおいて原色※は扱いが難しくチープな印象を持たれかねません。さらに原色同士の配色もハレーションが起こりやすいため、彩度や明度を調整して使うことを推奨します。また黒が強すぎる場合も濃い灰色にすると柔らかい印象になります。

とはいえ原色が完全にNGというわけではなく、注意を引きつけるデザインや蛍光色のネオン風のデザインなど、原色を活かしたバナー広告も存在します。

※RGB（赤・緑・青）とRGB３色が重なった部分の色（黄色・ピンク・水色）

色数が多すぎる

“美しい配色は、多くの色ではなくごく限られた色の使用で達成できる”

これは「近代色彩学」の著者として知られる物理学者ルードの言葉です。色数が多いほどバランスが取りにくくなるため、まとまらないときは３〜４色程度に減らしてみてください。４色以上使いたい場合はトーンをそろえると統一感を出すことができます。

色の持つ印象と異なる使い方をしている

見る人に誤解や違和感を与えないように配色もTPOをわきまえることが大切です。注意を引きたいところに薄く淡い色を使ったり、暖房器具のバナー広告に寒色を使うなど、色のイメージから大きくかけはなれた使い方をしないように気をつけてください。

ターゲットや商材との相性が良くない

バナー広告では色の持つ印象だけでなくターゲットや商材写真、遷移先のランディングページとの相性も肝心です。例えば化粧品のバナー広告で「ターゲットが女性だから明るいピンク」といったように一概に決めてしまうのは非常に危ういです。ターゲットが40代以上であれば明るいピンクより落ち着いた色味のピンクが合うかもしれませんし、モノトーン調の高級化粧品であればそもそも「ピンク」が不適切かもしれません。商材によってはブランドイメージを厳守した色を使うことも重要です。迷ったときはランディングページから色を拝借するのも１つの手です。