デザイン術

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

投稿日:2015-11-24 更新日:

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

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

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

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

スポンサード リンク

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

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

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

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

色の三大要素

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

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

色相環と明度と彩度の説明

色相環と明度と彩度

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

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

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

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

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

色相にも明度がある

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

明度の説明

色相にも明度がある

色が持つイメージ

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

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

「色相」のイメージ

色相イメージ
太陽・怒り・情熱
海・冷たい・冷静
光・明るい・元気
 自然・平和・安全

「明度」のイメージ

明度イメージ
明るい軽い・清潔・爽やか
暗い 重い・厳粛・怖い

「彩度」のイメージ

彩度イメージ
高い派手・活発
低い 地味・おとなしい

スポンサード リンク

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

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

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

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

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

トーンの説明

トーンが持つイメージ

  • 色相に「白・灰色・黒」を足していくと、どんどん彩度が低くなる
  • 色相に「白」を足していくと、どんどん明度が高くなる
  • 色相に「黒」を足していくと、どんどん明度が低くなる
明度彩度イメージ
中間高めにぎやか
やや高めやや高めかわいい
高め低めロマンチック
中間やや低め落ち着いた
低め低め重厚感

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

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

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

70:25:5 の法則

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

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

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

70:25:5の法則

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

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

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

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

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

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

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

色選びのポイント

色相にも明度が存在するとお話ししたとおり、明るい・暖かいイメージにしたければ、明度の高い黄緑・黄色・オレンジといった暖色を中心に選ぶと自然な配色ができます。

それとは逆に、暗い・冷たいイメージにしたければ、明度の低い青や紫といった寒色を中心に選ぶと自然な配色ができます。

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

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

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

  • 同系配色
  • 反対配色

同系配色

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

同系配色

同系配色

反対配色

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

反対配色

反対配色

配色のポイント

対角線上の色を「補色」と言います。補色同士を選ぶと、色同士がぶつかり合う激しいイメージになります。

彩度の高い色ばかりを使うと、目が痛くなるケバケバしい配色になってしまうので、彩度を少し抑えた色を使うと初心者っぽさがなくなります。

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

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

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

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

同系配色の場合

同系配色の場合

反対配色の場合

反対配色の場合

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

比率には似た色を追加可能

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

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

スポンサード リンク

まとめ

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

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

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

この記事が役に立ったら
\いいね !/

Twitter で

スポンサード リンク

こちらもチェック!

今すぐ受け取る白地
  • この記事を書いた人

高木浩一

心理学と脳科学が好きなマーケター/Web集客の専門家。 大企業のマジメな広告デザインから男性を欲情させるアダルティな広告デザインまで、幅広い分野を経験した元グラフィックデザイナー。心理面をカバーしたマーケティングとデザインの両方の視点をもつ。 個人が個人として活躍する時代に向けて「使えるマーケティング」をモットーに情報発信中。

-デザイン術
-

Copyright© Web活用術。 , 2019 All Rights Reserved.