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

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

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

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

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

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

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

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

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

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

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



色彩と配色の基本知識

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

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

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

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

RGBとCMYK

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

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

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

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

RGB値と16進数カラーコード(HEX)

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

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

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

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

参考:原色大辞典

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

色の三属性(色相・彩度・明度)

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

色相

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

彩度

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

明度

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

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

配色の種類

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

同じ色相の配色(同一色相配色)

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

似た色相の配色(近接・類似色相配色)

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

補色配色

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

トライアド配色

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

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

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

トーン(色調)

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

参考:​​PCCSのトーン

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

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

ベースカラー

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

メインカラー

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

アクセントカラー

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

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

バナー広告の配色NG例

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

可読性や視認性が悪い

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

原色を多用している

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

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

※RGB(赤・緑・青)とRGB3色が重なった部分の色(黄色・ピンク・水色)

色数が多すぎる

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

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

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

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

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

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

配色に役立つツール紹介

カラースライドから1色ずつ選んでいくのは難易度が高く時間もかかります。デザイナーでも色見本の書籍やWebサイトを参考にしている方は多いですから、慣れないうちは便利なツールを積極的に活用していきましょう。

Adobe color CC

配色の可読性や視認性を合格/不合格で判断してくれるサイトです。

カラーコードの取得も可能です。

COLOR SUPPLY

2〜4色の組み合わせを感覚的に選べるサイトです。下にサンプルが出てくるのでイメージが沸きやすく、お気に入りの配色を登録したりカラーコードを取得することもできます。

3色の組み合わせはメインカラー、アクセントカラー、ベースカラーを決めるときにも参考になります。

Color Zilla

Google Chromeの拡張機能です。ブラウザ上の色をスポイトでコピーしたり、Webページ内で使われている色(CSSによる指定)を解析することができます。RGB値やカラーコードの取得もでき、画像サイズの確認やブラウザ上でカラーパレットの利用もできる多才なツールです。

まとめ

色の組み合わせのバリエーションは無限大ですが、美しく読みやすい配色にはルールや制約があるということをご理解いただけたのではないでしょうか。目的に応じて適切な色を選択できるようになれば、表現したいことや伝えたいことをより強力なものにすることができるでしょう。

メールや資料作成など私たちが日常的に色を使う機会はたくさんあります。バナー広告だけにとどまらず普段の業務でも積極的に活用してみてください。

参考書籍・Webサイト

配色の教科書

フォント配色見本帳

ノンデザイナーデザインブック

DICカラーデザイン株式会社の公式HP

日本色研のHP

この記事のURLをコピーする
Kaori Naito

Kaori Naito

マーケティングや運用広告に興味を持ち、2021年2月よりアナグラムに入社。ディスプレイ広告やLP制作などを担当。“数字を追えるデザイナー”になるべく奮闘中。前職は観光土産やキャラクターグッズ、求人広告のデザイナー。散歩しながらレトロな喫茶店を探すのが趣味。

最近書いた記事