2024年3月11日
もう悩まない!効果的な配色のコツ・ポイント5選
目次 ▼
この記事を読むのに必要な時間は約 8 分です。
チラシ、ポスター、冊子、プレゼン資料、Webなど、さまざまなデザインにおいて「配色」は読み手の印象を大きく左右します。
せっかく良い内容が書かれていたり、レイアウトがわかりやすくても、配色がイマイチなだけで「読みにくい」「なんだかダサい」といった印象を持たれてしまうこともあります。
しかし、配色選びは簡単ではなく、数ある色の中から組み合わせを考えるとなると毎回頭を悩ませてしまう…という方も多いのではないでしょうか。
そこで今回は、配色のコツとポイントをご紹介いたします。
ポイント1.まずは色の基本を押さえる
まずは色の基本についてご紹介します。これらを理解しておくことで、配色選びがしやすくなります。
色の三属性
色には「色相」「彩度」「明度」という三つの性質があり、これらを合わせて「色の三属性」と呼びます。
色相
色相とは、赤・黄・緑・青・紫といった色味のことを指します。これらの色相を循環するように一つの円に配置したものを「色相環」と呼びます。
彩度
彩度とは、色の鮮やかさを表す要素です。彩度が高いほどくすみのない鮮やかな色になり、彩度が低いほどくすみがかったグレーに近い色合いになります。
また、白・黒・グレーは「無彩色」と呼ばれ、色相や彩度が存在しません。反対にこの三色以外の色は「有彩色」と呼ばれます。
明度
明度とは、色の明るさを表す要素です。明度が高いほど明るい色になり、白に近づいていきます。反対に明度が低いほど暗い色になり、黒に近づいていきます。
補色
色相環上で反対側に位置する二つの色を「補色」と言います。
例えば、赤と緑、黄と紫などが補色にあたります。
補色は色相の差が最も大きい色同士のため、組み合わせるとコントラストの強い配色になります。
近似色
色相環上で隣り合った位置にある色を「近似色」と言います。
例えば、黄色の近似色には橙色や黄緑があります。
近似色同士を組み合わせると、まとまりや統一感のある配色になります。
ポイント2.色数を絞る
配色を考える際に気を付けたいのが「必要以上に多くの色を使いすぎないこと」です。
たくさんの色を使うとカラフルなデザインにはなりますが、色数が増えれば増えるほど情報量が多くなり、本当に強調したい部分が伝わりにくくなってしまいます。
基本的には、このあとご紹介する「ベースカラー」「メインカラー」「アクセントカラー」の3色程度に絞ることがおすすめです。
ポイント3.配色の比率は「70:25:5」
一般的に配色の比率は、ベースカラー70%、メインカラー25%、アクセントカラー5%の「70:25:5」がよいとされています。
ベースカラー
ベースカラーは3色の中で最も占める割合が高く、背景などの広範囲に使用される色です。一般的には、白や明度の高い色、淡い色、薄い色などがベースカラーとしてよく使われます。
メインカラー
メインカラーは、その名のとおりデザイン全体のメインとなる色です。全体の印象を決める重要な色で、主に鮮やかな有彩色が使われます。コーポレートカラーやイメージカラーが使われることも多いです。
配色を決める際は、まず最初にメインカラーを決め、それからベースカラー、アクセントカラーの順に決めていくとスムーズです。メインカラーは全体の印象を左右する色のため、読者やユーザーにどのような印象を与えたいか意識しながら決めるとよいでしょう。
3色以上使用したい場合は、メインカラーの割合を分割するのも一つの方法です。その際、すでに使用している色とトーンや色相をそろえることで、煩雑にならずバランスのよい配色になります。
アクセントカラー
アクセントカラーは、デザイン全体の中で特に強調したい部分に使用する色です。3色の中で最も占める割合が低いですが、その分目を引き、視線を集めやすくなります。
アクセントカラーを決める際は、ベースカラーやメインカラーと正反対となる補色を使用すると、デザインにメリハリが生まれます。
ポイント3.「読みやすさ」「伝わりやすさ」を意識する
どのような媒体であっても、配色は「読みやすい」「伝わりやすい」ことが重要です。
文字と背景のコントラストをつける
文字と背景が似たような色合いだと、色同士の境目がぼやけて文字が読みにくくなってしまいます。
色同士のコントラストをつけるためには、彩度や明度、色相で差をつけることが重要ですが、文字の視認性や可読性を高めるには、明度の対比をつけることが効果的です。コントラストをつけることでメリハリが出て、鮮明で読みやすい配色になります。
▼視認性や可読性については以下の記事もあわせてご覧ください。
純色の使用は避ける
純色とは、彩度と明度が最も高い色のことです。IllustratorやPhotoshopなどのデザインソフト上にあるカラーピッカーにおいて一番右上の色を指します。
実際に以下の色例を見るとわかりやすいですが、純色はチカチカして読みにくく、目にも負担がかかってしまいます。
どうしても純色に近い色を使用したい場合は、純色から彩度と明度を少しずつ下げることで、鮮やかさは保ちつつも落ち着いた印象にすることができます。
ハレーションに注意
ハレーションとは、明度差のない、彩度が高い色同士を組み合わせたときに、色同士の境目がチカチカして不快感を引き起こす現象を指します。
ハレーションを避けるためには、どちらかの色の明度や彩度を調整したり、色同士の間に別の色を入れることが効果的です。前述の純色を避けることもハレーションの回避につながります。
ポイント4.目的やターゲットにあわせた配色
それぞれの色が持つイメージ
色にはそれぞれ連想されるイメージを持っています。個人差はありますが、代表的な色のイメージは以下のとおりです。
赤・・・情熱的、活力、刺激、危険
青・・・冷静、知的、誠実、さわやか
緑・・・安らぎ、自然、健康、安定
黄・・・光、元気、エネルギー、にぎやか
紫・・・高貴、上品、優雅、神聖
白・・・純粋、清潔、無垢、新しさ
黒・・・重厚、クール、厳粛、恐怖
色を選ぶ際には、まず見た人にどのような印象を与えたいかを考え、それに合った色を選ぶとよいでしょう。季節やテーマに適した色を選択するのも一つの方法です。
また、同じ赤でも彩度が異なるとイメージもがらっと変わります。イメージに合わせて彩度も選択するようにしましょう。
配色によるイメージ
同じ色を使用していても、色の組み合わせによって与える印象は大きく異なります。例えば、彩度の低い色と無彩色を組み合わせることで、シックで落ち着いた印象が生まれますし、彩度の高い暖色とその補色を組み合わせることでダイナミックで活気ある印象を与えることができます。
イメージとなる形容詞と配色の組み合わせは、以下のようなカラーチャートを参考にするとよいでしょう。
配色を考える際には「かっこいい」「おしゃれ」のような漠然としたイメージではなく、そこからさらにイメージを細分化して考えるとよいです。曖昧なイメージだと人によって想起する色が異なり、制作会社やクライアントとの認識のずれが生じやすくなります。
以下のようなマトリックスを用いて考えるとイメージが具体化・言語化され、周りともイメージを共有しやすくなるでしょう。
また、ターゲットによっても好まれる配色が異なります。例えば、子ども向けの場合は暖色や高彩度のポップな配色、企業向けの場合は寒色や低彩度のシックな配色が適していると言えます。読み手となるターゲットを意識した配色が重要です。
ポイント5.配色サイトを参考にする
ここまで配色のポイントをご紹介しましたが、配色に迷ったらカラーパレットサイトを参考にするのがおすすめです。これらのサイトは自動で配色を提案してくれるため、アイデア出しとしても活用することができ、気に入った配色を見つけやすいでしょう。
Color Space
Color Spaceは、基準となる色を1色指定すると、その色に合ったさまざまな配色パターンを自動生成してくれるサイトです。
メインカラーやコーポレートカラーがすでに決まっており、それに合った配色を知りたいという場合に使いやすいでしょう。
Color Supply
URL:https://www.colorsupplyyy.com/app
Color Supplyは、色相環から色を選択すると、それをベースにした20種類の配色を提案してくれるサイトです。補色、近似色、フレッシュ、リッチなどさまざまな種類の配色パターンを見ることができます。
配色を使ったデザインのサンプルも表示されるため、実際の見え方をイメージしやすいのも特徴です。
Color Hunt
Color Huntは、色のイメージから配色を探すことができるサイトです。
「Pastel」「Dark」「Cold」などのキーワードを選択すると、そのイメージに合った4色の配色が表示されます。また、選択したイメージから色を絞り込んだり、キーワードを追加したりすることも可能です。
まとめ
今回は、配色のコツとポイントをご紹介しました。
もちろん、デザインにおいては色以外にもさまざまな要素が重要ですが、配色を工夫するだけでも全体の印象が大きく変わり、デザインの質が格段に上がります。
デザイナーでなくても、これらの配色ルールを理解しておくことで、デザイナーや制作会社とのやりとりもスムーズになるでしょう。
すぐに実践できるポイントばかりですので、ぜひ参考にしてみてください。