デザインで重要ポイントのカラー選び。選び方や便利なツールを紹介

2019.04.06

デザイン初心者にとって、大きな悩みの種となるのが「カラー」の選び方・扱い方ですね。ひとつの配色によって印象ががらりと変わるほど、デザインのイメージを大きく左右するカラー。その基礎知識を身につけて、より専門的な視点からデザインを見られるようにしていきましょう。

配色の組み合わせで使う基本の考え方3つ

「カラー」、すなわち色をつかさどる大きな要素としては、色相(赤や青、黄色などの色味)、明度(色の明るさ)、彩度(色の鮮やかさ)の3つがあります。

色相が変われば目で見たときの色そのものが変わり、明度が変われば色が淡くなったり暗くなったりと変化し、彩度が変われば色が派手で華やかな印象になったり渋く落ち着いた印象になったりします。また、同じ明度と彩度の色はまとめて「トーン」とも呼ばれます。

色相の組み合わせがデザインの印象を大きく左右するのはもちろん、同じ色相でもトーンが変わることによって、興奮や安心、派手さや上品さなど、さまざまな印象を生み出せるようになっています。

色相・明度・彩度の3つからなる様々な色を駆使し、配色を組み合わせていくことで、デザイン的な視点での「カラー」をより深く知ることができるでしょう。

同系色を使う配色

複数の色を組み合わせる「配色」は、うまく行えばデザインの効果を際立たせる一方で、場合によってはデザインが本来持つ意図を損なうこともあります。さまざまなパターンがある配色の中でも、失敗しにくい安全なやり方が「同系色を使う配色」です。

「赤・赤に近いオレンジ」など色相が似た色を組み合わせたり、同じ色相でトーンが違う色を組み合わせることで、まとまりのいい印象を与えることができます。

また、近い色相の色を使うことで単調になりがちなのが同系色を使う配色のデメリットですが、明度や彩度をがらりと変えてコントラストを生み出せば、統一感を保ちつつも変化を感じさせることもできます。

同系色を使う配色のデザインの例としては、青系で統一された「ANA」のロゴや赤・オレンジ系を組み合わせた「ENEOS」のロゴなどがあり、パッと見た色の印象で「この企業だ」と認識させられるまとまりの強さがあるのが特徴です。

色相差を利用する配色

より大胆な配色方法として知っておきたいのが「色相差を利用する配色」です。その名の通り「赤と緑」「青っぽい緑と水色」などやや色相の遠い色を組み合わせるのが特徴で、うまく配色すれば、それぞれの色の印象が重なり合ってより大きなインパクトを生みます。

この配色のコツとしては「なるべく同じトーン内の色を使う」というものがあります。色相に加えてトーンまで大きく変わってしまうとデザイン全体のまとまりを損ないやすくなるので、同じトーン、近いトーン内の色で揃えるのがポイントです。

色相差を利用する配色のデザインの例としては、濃い赤と明るい黄色を組み合わせた「すき家」のロゴ、水色と黄緑をバランスよく組み合わせた「FamilyMart」のロゴなどが有名です。

自然界の法則に習った配色

より本能的に落ち着きを感じさせてくれるのが「自然界の法則に習った配色」です。

「明るいところでは黄色っぽく、暗いところでは青紫っぽく見える」という自然界の光のルールに合わせて色の明度を調整すると、デザイン全体の調和がとれて安心感を与えます。「ナチュラル・ハーモニー」とも呼ばれる配色方法です。

逆に、それとは真逆の明度調整によって意図的に違和感を生み出す方法「コンプレックス・ハーモニー」によって、強烈な印象や何らかのメッセージ性を与える、というテクニックもあります。

より人間の心理に寄り添った配色の知識として、押さえておきましょう。

WEBデザインは色が重要。カラーの決め方

ホームページやメディアなどのWEBデザインの世界でも、カラーはとても重要なポイントになります。では実際に、どんな点に気をつけて配色をしていけばいいのでしょうか?具体的なコツを見ていきましょう。

基本のカラーは3つ。配色の役割と比率とは

WEBデザインでは、基本的には3つのカラーを軸に組み立てていきます。

3つのカラーの中で中心的な存在になる「メインカラー」は、サイトの印象を決定づける主役の色です。見出しやヘッダー、サイドバーなど、目につきやすいポイントで使われます。

使用量的にはメインカラーよりも少ないながら、より際立つ存在になるのが「アクセントカラー」です。デザイン全体を引き締める効果のあるこのカラーは、問い合わせへの誘導ポイントなど、ここぞという場面で受け手の注目を集める重要な役割を担います。

そんな2つのカラーをより活かすのが、サイト背景や余白などで使われる「ベースカラー」です。面積的には3つのカラーの中で最も大きく、メインカラーやアクセントカラーをより引き立たせ、サイト全体の色味にも影響します。

配色の比率としては「メインカラー25%、アクセントカラー5%、ベースカラー70%」ほどにするのが美しいデザインを組み立てるポイントです。

メイン、ベース、アクセントカラーの決め方

WEBデザインの3つのカラーを決めるにあたって、最初に選ぶのは「メインカラー」です。

デザイン全体の主役になるメインカラーは、デザインをどんなターゲットに見せ、どんな印象を与えたいかなどを踏まえて、それぞれの色が持つイメージとも照らし合わせて考えましょう。

また、メインカラーは見出しやロゴなど重要なポイントで使われることになることが多いので、文字などが読みやすい、明度を低めた色の方がおすすめです。

メインカラーの次には、ベースカラーを決めていきます。ベースカラーは背景や余白など最も大きな面積を占めることになるので、文字色などとの兼ね合いも踏まえて考えましょう。

ベースカラー選びのコツとしては、明度の高い淡い色にすると、デザインの中でなじみやすくなります。また、白やグレーなどは他のカラーの邪魔をしにくいので、安全な選択肢と言えるでしょう。

最後にアクセントカラーを決めますが、ここでは「一目で気づく」というインパクトが大切なので、他の2カラーとは大きく離れた色を入れてみるのもいいでしょう。そのようにして「目立つ」ことを意識するのが重要です。

デザインで意識すべきカラーの持つイメージ

それぞれのカラーは、見る人にどんな印象を与えやすいかがある程度決まっています。代表的なカラーの印象やメリット・デメリットを押さえて、配色の基礎知識として覚えていきましょう。

赤色から連想されるイメージ

代表的な暖色として知られ、特に人気の高い色でもある「赤」。炎や血を連想させる色で、イメージもそんな連想からもたらされます。

赤のイメージとして代表的なのが「情熱」「生命力」などです。そこから「勝利」「正義」といったイメージももたらされます。一方で「血」の連想から警戒を感じさせる色でもあり、そういった印象が赤信号やランプなどに使われています。

デザイン面では鮮やかで力強い印象を与えることで、ロゴマークなどにも人気の高い色です。赤単色のロゴも数多くあります。また、明度を落としたいわゆる「ワインレッド」などは、高貴なイメージの表現にも効果的です。

青色から連想されるイメージ

赤と並んで人気の高い色「青」は、派手で力強い赤とは対照的に、静かで落ち着いた印象を与える寒色です。

「空」や「水」、「地球」などからの連想が強く、清潔感や平和、誠実さ、知的さなどのイメージを感じさせるのが特徴です。そのため、テクノロジー系の企業や信用を重視する企業(保険やコンサルティング会社)のロゴのカラーとして人気を集めてきました。

一方で、冷たさや不安、寂しさなどをイメージさせることもあるため、その点では注意も必要です。

緑色から連想されるイメージ

暖色でも寒色でもない「緑」は、強烈なインパクトはないものの、植物からの連想で「自然」「エコ」「環境」などをイメージさせます。また青信号の色にも使われているように、安全や安らぎを感じさせる色でもあります。

緑をメインに使うデザインには自然や生活との調和を印象づけるロゴなどが多く、一方では、若葉のように鮮やかな黄緑(若さのイメージ)で若者向けの企業やサービスであることを印象づけるものもあります。

黄色から連想されるイメージ

「黄」は、他の色相と比べると最も明度が高い色になります。「ひまわり」「太陽の光」などを連想させるため、明るさや暖かさ、かわいらしさなどのイメージを持たれるのが一般的です。

また、黒と組み合わせて使うといわゆる「警戒色」になるため、注意や危険をイメージされることもあります。

同じ黄でもトーンを調整することで印象が変わり、明度を高めて子どもっぽさや親しみやすさを演出したり、彩度を落として金色の代替色に使い、落ち着きや高級感を生み出したりすることもできます。

橙色から連想されるイメージ

「橙(だいだい)」、いわゆるオレンジ色は、色相の近い赤や黄に似た印象を呼ぶ色です。実際に、赤や黄と組み合わせて使われることも多くなっています。

橙が連想させるのは太陽や柑橘系の果物、夏などが一般的で、元気や健康をイメージさせてくれます。

明るくポジティブな雰囲気を持っているので、大衆向けのサービスのロゴなどで多く使われてきました。また、食欲をそそる色でもあるので、飲食店のロゴの色としても人気です。

元気のよさや親しみやすさを表現しやすい一方で、高級感などを演出するのには向かない、と言われています。

デザインで便利なカラー決め参考サイト5選

デザインの場面でカラーを決めるときには、配色の組み合わせを実際に目で見て確認できるようなツールを使うのが便利です。こうしたカラーツールにはWEBサイト上で無料で使えるものも多くあるので、活用していきましょう。

代表的な無料カラーツールとして知られているのが、「Color Supply」です。WEBデザインやグラフィックデザインに特化したツールで、アイコンやグラデーションを実際に見ながら配色を決めることができます。

Color Supply

「Random Material Palette」も、代表的なカラーツールです。直感的な操作で配色の組み合わせを見ることができるので、よりダイレクトにカラーデザインの印象をつかむことができます。

Random Material Palette

「Grabient」」は、鮮やかなグラデーションカラーのパターンを参考にできるカラーツールです。グラデーションの組み合わせなどは自分でカスタマイズすることができるので、お好み・こだわりの表現を見せられます。

Grabient

「WebGradients」は、即座にWEBデザインに活用できるのが魅力のカラーツールです。サイトには180種類ものグラデーションカラーが揃っていて、クリックひとつでコードをコピーして、そのままWEBデザインに使用できます。

WebGradients

「ColorMind」は、人工知能を使ったカラーツールです。写真や映画やアートをもとにした配色カラーパレットが、ワンクリックで自動的に作られます。カラーデザインについて自信がない初心者の方にとっては、心強い味方になります。

ColorMind

このように、カラーツールには無料でも優れたものがいくつもあり、カラーデザインを手助けしてくれます。配色などの感覚をつかむためにも、積極的に活用していきましょう。

カラー決めでワンランク上のデザイナーに

デザインのイメージを決定的に左右するカラー選びは、完成度に最も深く関わる要素のひとつです。カラーデザインでセンスを見せれば、ワンランク上のデザイナーになれます。

カラーの基礎知識をしっかりと身につけ、便利なカラーツールを最大限に活用して、デザインのクオリティをグッと高めていきましょう。

その他のテーマ

ART

CULTURE

CRAFT

FOOD

TIME