以前の記事で、色の基礎知識とそこから得る印象について解説いたしました。
ホームページ制作活用！発色方法の基本と色の与える印象

今回は、実際に色を組み合わせるときのコツをお話しします。ちょっとしたポイントを押さえれば、色の勉強をしたことがない方でも簡単にオシャレな配色ができるようになりますよ！

前回の記事と合わせて、ぜひホームページ制作や企業のイメージカラー決めなどにご活用ください。

目次

1. 1.色のトーンとは？
   　1-1.色相（色味）
   　1-2.明度（明るさ）
   　1-3.彩度（鮮やかさ）
2. 2.配色のコツ
   　2-1.共通する色を組み合わせる
   　2-2.類似する色を組み合わせる
   　2-3.正反対の色を組み合わせる
   　2-4.イメージを合わせて配色
3. 3.配色の黄金比は“7：2：1”？
4. 4.まとめ

色のトーンとは？

色を変化させるにあたって、色相・明度・彩度の3つの要素が関わってきます。

その中でも、明度と彩度を変化させた色の度合いを「トーン（色調）」と言います。「この赤、もうちょっと落ち着いたトーンのほうがいいかな」なんて使い方をします。

暖色や寒色といった色相に加えて、明るさや鮮やかさに関わるトーンのポイントを押さえれば、プロでなくともそれらしい色の組み合わせができます。

色相とは、赤、青、黄…といった色味のことです。

ちなみに、赤と緑、黄と紫、青とオレンジなど、正反対の色の関係を補色といいます。色を円形に並べた色相環において、真逆の位置にある色同士です。

明度とは、文字通り色の明るさのことです。明るい色ほど白っぽく、暗い色ほど黒っぽくなります。

「パステルカラー」といえば、ふだん色に興味がない人でも耳にしたことがあるのではないでしょうか？パステルカラーは明度の高い色で、明るい、柔らかい、軽量…といった印象を抱かせます。

反対に、明度の低い色は暗い、硬い、重厚感がある…といったイメージを与えます。

女性や子ども向けの製品、親しみを重視したサービスには明度の高い色が、男性や大人向けの製品、高級志向のサービスには明度の低い色が使われることが多いです。

彩度とは、色の鮮やかさのことです。彩度の高い色は「ビビッドカラー」や「純色」と呼ばれます。

彩度が上がれば上がるほど、元気、フレッシュ、若い、明るい、活き活き、といった印象が演出できます。ですが、使いすぎると目に痛い配色になりかねないので、ちょっと取り扱いに注意が必要な色です。

彩度が低い色は「鈍い色」と表現することもあります。色味の違いが出にくいので、色数を増やしてもまとまって見える反面、彩度を下げすぎると画面がぼやけてしまうことも。

色相、明度、彩度、の3つのポイントを踏まえた上で、まずは2つの色を使った配色をしてみます。

色相、明度、彩度のどれかを揃えた配色です。同じオレンジでも明度を変えてみたり、同じ彩度の赤と青を組み合わせたり…という配色です。配色のコツとしては一番簡単なポイントです。

色相やトーンを合わせることで、複数の色にまとまりが出て見えます。

上記では3つの要素のうち1つを全く同じにしたのに対して、「明るめの赤とオレンジ」というように、色相やトーンが近いもの同士を組み合わせる方法です。グラデーションのイメージに近いと言うとわかりやすいかもしれません。

企業や商品のイメージカラーがすでに1つに固定されている場合は、既存の印象を損なうことなくデザインできるのでおすすめです。

明るい赤と暗い緑、といった、明度差のある補色を組み合わせたり、鮮やかな黄と鈍い紫、といった彩度差のある補色を組み合わせたり、といった配色です。

色数を増やしすぎると見づらくなってしまいますが、大きなインパクトを与えることができる組み合わせです。メリハリをつけたい、賑やかな印象にしたい、というときにはぴったり。ちょっと勇気のいる配色ですが、思い切って真逆の色を合わせてみると、意外な発見があるかもしれません。

桜と言えば白っぽいピンクと葉っぱの緑、青空と言えば明るい青に雲の白…というふうに、物や風景のイメージに合わせて配色する方法です。一定のイメージを不特定多数の人と共有できるのでおすすめです。

季節に合わせたイベントの特設ページや、特定の商品を取り上げる際などに活用できます。

配色のコツは、色の選び方に加えてその「比率」も大切です。3色を組み合わせるとき、一般的には以下のような比率で組み合わせるのがよいとされています。

ベースカラー：7
サブカラー：2
アクセントカラー：1

ベースカラーは全体のイメージに大きく関わってくるので、明度が高く、彩度が低い色を、アクセントカラーには明度が低く、彩度が高い色を置くことが多いです。逆に言えば、ベースカラーに鮮やかな色を持ってくれば、大きなインパクトを与える配色にできます

おすすめの配色は、ベースカラーとサブカラーを色相やトーンが近い色でまとめて、アクセントカラーに補色や明度・彩度に差がある色を設定する方法です。

色が散らかった印象もなく、アクセントカラーのおかげで色鮮やかな画面構成にできますよ！

色相（色味）、明度（明るさ）、彩度（鮮やかさ）と配色のコツについてお伝えしました。

比率やトーン（色調）によるイメージを理解した上でホームページなどを見てみると、「あ、この色がベースカラーだから、こんなイメージなんだろうな」なんて、新しい発見があるかもしれません。

まずは配色のコツを意識しながら、7：2：1の比率に当てはめて試してみてください。必ず「これいいかも！」な組み合わせが見つかりますよ！

ライター：野倉

愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F
TEL： 052-485-6846
※ ホームページ制作や活用サポートの　お問い合わせはコチラから