デザイン初心者でも簡単にプロの配色をマスターする

たとえあなたがデザイン初心者でも、簡単にプロの配色に近づくテクニックを紹介します。そのテクニックとは、ずばり「トーン」と「比率」です。

これは僕が十数年のデザイナーとしてのキャリアから体得したものなので、もしかしたら一般的ではないかもしれません。（一応、カラーコーディネーターの資格も2級ですが持ってます）

ですが、もしもあなたが「デザイン初心者だけどプロっぽく配色したい！」という要望があれば、ぜひ読んでみてください。

プロの配色に必要な予備知識

配色は、感情やイメージを伝えるためには大切な要素です。

ですが、「トーン」と「比率」を知らないまま配色しようとすると、なんだか安っぽい印象の配色になってしまいがちです。

そこで、「トーン」と「比率」を理解する予備知識として、まずは色の基本である「色の三大要素」を確認しておいてください。

色の三大要素

色には三大要素（色相・明度・彩度）があります。この3つの要素の組み合わせで、さまざまなイメージを表現できます。

なるべく簡単に配色できるように、難しい概念や理論は説明を省きます。詳しく知りたい場合は、下に載せているリンク先などで学んでみてください。

色相環と明度と彩度

色の三大要素について、日本電色工業株式会社さんのHPの説明がわかりやすかったので抜粋します。

色相
赤、黄、緑、青、紫という言葉で区別できる色の性質です。お互いが連続してつながりあって色相の輪をつくります。

明度
色には色相とは別に明るい色、暗い色というように色を比較して区別することができます。明るい色はさわやかで軽快な感じの色に、また、暗い色は重厚で落ち着いた感じの色になります。これを色の"軽重感"といいます。

彩度
色の鮮やかさやくすみの程度を数量的に表したのが彩度です。鮮やかな色ははなやかな目立つ色になりますし、くすんだ色には、おだやかで上品な色が多いようです。これを"派手地味感"といいます。

参照サイト：日本電色工業株式会社

色相にも明度がある

見落としがちですが、色相にも明度が存在しています。色相を白黒にしてみると、黄色は明度が高く、青や紫は明度が低いことがわかると思います。

色相にも明度がある

色が持つイメージ

色の三大要素について知ってもらったところで、それぞれの要素が持つイメージについて整理しておきたいと思います。この感覚は、デザイナーでなくても誰もが持っている感覚だと思います。

次のようなイメージです。

「色相」のイメージ

「明度」のイメージ

「彩度」のイメージ

プロの配色に近づくための「トーン」とは

予備知識の「色の三大要素」を知ってもらったことで、プロに近づく配色をするために必要な「トーン」がわかりやすくなると思います。

「トーン」とは、明度と彩度の複合概念です。

明度と彩度を同時に扱うことで、感情やイメージを表現することができます。全体のトーンを整えることが簡単に配色するコツです。デザイン初心者の配色は、トーンを意識できていないことが多いように感じます。

トーンによるシチュエーションのイメージは、下図のとおりです。トーンについては、「色相」は考えなくて大丈夫です。

トーンが持つイメージ

• 色相に「白・灰色・黒」を足していくと、どんどん彩度が低くなる
• 色相に「白」を足していくと、どんどん明度が高くなる
• 色相に「黒」を足していくと、どんどん明度が低くなる

スポンサード リンク

プロの配色に近づくための「比率」とは

「トーン」について知ってもらったら、つぎは配色の「比率」について解説します。

バナー画像やヘッド画像をつくる場合は、「何をメインで訴えるのか」という主役をつくらなければいけなくなります。そこで、各色の比率を調整することでバランスをとります。

70：25：5 の法則

「70：25：5 の法則」とは、配色のバランスを取るための割合を示した法則です。他にも「60：30：10」という比率もありますが、だいたいこれ位の比率で各色を配置するとバランス良くまとまります。

一番目立たせたい色をアクセントカラーにします。アクセントカラーはベースカラーとは反対の色か、明度差をつけるようにして目立たせます。

• 70％ ⇒ ベースカラー
• 25％ ⇒ メインカラー
• 5％ ⇒ アクセントカラー

「トーン」と「比率」を使ってプロの配色をする

配色に必要な「トーン」と「比率」を理解してもらったと思いますので、実際に配色してみましょう。

Step.1　イメージに沿ってトーンを決める

どんなイメージの配色にしたいのか、全体のトーンを決めます。

例えば、明るく元気な配色にしたいなら、トーンは彩度をやや高く、明度を高めにします。冷たく暗い配色にしたいなら、トーンは彩度をやや低く、明度を低めにします。

Step.2　イメージに沿ってメインの色相を決める

つぎはイメージに沿ったメインの色相を選びます。例えば、明るく元気な配色にしたいなら、黄色やオレンジを選びます。冷たく暗い配色にしたいなら、青色や紫色の色相を選びます。

Step.3　イメージに沿って同系配色か反対配色にする

一色のみで明度差をつけた配色にすると、単調で寂しいイメージになります。そのため、単調になりすぎないように、近い色相の色味を加えます。

色選びには大きく分けると、次の2パターンの選び方があります。

• 同系配色
• 反対配色

同系配色

落ち着いたイメージにしたいなら、近い色相の色味を2、3色選んで同系配色にします。

同系配色

反対配色

賑やかなイメージにしたいなら、近い色相の色味を2色程度と、その色味の反対色を1色程度を選んで反対配色にします。補色よりも少しずれた反対色を選ぶと、バランスの取れた元気のある配色ができます。

反対配色

Step.4　配色の比率を決める

トーンと色相を選んだら、配色の比率を決定します。

全体的に明るいイメージにしたいなら、ベースカラーを最も明るく、次いでメインカラーを明るくします。

全体的に暗いイメージにしたいなら、ベースカラーを最も暗く、次いでメインカラーを暗くします。アクセントカラーは、ベースカラーと最も明度差をつけるようにします。

同系配色の場合

反対配色の場合

また、色相の隣り合う似た色同士（近い色）であれば、それぞれの箇所に色を追加してもバランスが崩れることはありません。

Webサイトのカラー設計の場合、余白に使うベースカラーは白が多いと思いますので、実際はメインカラーとアクセントカラーに色味を入れることになると思います。

その場合はメインカラーとアクセントカラーの領域の部分で、さらに70：25：5を作るイメージで配色させることができます。

スポンサード リンク

まとめ

配色で重要なことは、全体の「トーン」と「比率」です。表現したい「感情」や「イメージ」のトーンに合わせて色を選び、比率を決めます。

実際には使う色数はもっと多いこともありますが、全体の「トーン」と「比率」を守れば簡単にプロに近づく配色ができます。

少しでもお役に立ちましたら幸いです。