色と配色、色の持つイメージ

こんにちは。デザイナーのアピコです。
本記事では、デザインに大きく影響される色・色の決め方・色の持つイメージについて、詳しく解説したいと思います。
是非最後までチェックしてくださいね。

カラーホイール（色相環）

カラーホイール（色相環）とは

赤・黄・青を基準とした12色をサークル上に配置したものです。
色の組み合わせを考えるときに役に立ちます。

カラーホイルはまず赤・黄・青の3原色（Primary Color）からはじまります。
これらの色をもとにして、他の色を作ることができます。

3原色のうち、2つの色を同じの量だけ混ぜ合わせると違い色ができるので、原色と原色の間に位置しています。できた色は「二次色（Secondary Color）」と言います。

色相環を見てみると、赤と青を混ぜれば紫に、青と黄を混ぜれば緑になり、そして黄と赤を混ぜるとオレンジになります。

ちなみに、原色と二次色を混ぜてできた色は「三次色（Tertiary Color）」といいます。

カラーホイールの使用方法

カラーホイールで隣り合った色は類似色と呼ばれ、類似色を組み合わせるとまとまりがある印象になります。

カラーホイールで反対側に位置する色は補色と呼ばれ、色の差が大きくお互いの色を引き立てる組み合わせになります。

色の組み合わせはこちらの記事でまとめていますので、ご覧ください。

色の分類

無彩色と有彩色

色は、彩度の有り無しで大きく2種類に分けることができます。
白・黒・灰色等の色みのない「無彩色」と、赤・黄・青などの色みのある「有彩色」です。

有彩色はさらに純色・清色・濁色に分類できます。
純色は最も彩度が高い色で、 清色は純色に白もしくは黒を入れた色のことでスッキリときれいな色であり、濁色は純色に白と黒の両方（グレー）を混ぜた色のことで濁ってソフトな色です。

暖色・寒色・中性色

色はさらに「暖色」「寒色」「中性色」の3つに分けることができます。
「暖色」は赤、オレンジ、黄色など、暖かさを感じる色です。
「寒色」は青、青緑、青紫など、寒さや冷たさと感じる色です。
「中性色」は黄緑、緑、紫など暖色と寒色のどちらにも属さない色です。

色の持つイメージ

色には心理的な効果と特有なイメージがあると言われています。色が少し違うだけでも、見た目の印象は大きく変化していきます。
Web・グラフィックデザインからファッション、インテリアデザインまで、色の与えた効果を活用して日常生活の中で様々な所に使われています。

・暖色の持つイメージ：明るい、暖かい、愛情、活発、危険、緊急
・寒色の持つイメージ：涼しい、冷たい、冷静、落ち着き、信頼、誠実
・中性色の持つイメージ：穏やか、自然、安全、高貴、悲しみ

夏になると寒色が、冬になると暖色が、多く使われるのは上記に紹介した効果を使うからです。
季節によって空間の印象を変えたい時に活用することができます。

色の持つイメージ一覧（白色、黒色、赤色、黄色 ...)

白 - White

一般的なイメージ：純粋・神聖・清潔・明るい・平和・自由、善・潔白・孤独・緊張・未来　 など
→白色は黒と灰色とともに無彩色に属する色です。白は何色とも組み合わせるので、現在ベースカラーとしてWebサイトによく使われています。

黒 - Black

一般的なイメージ：高級感・男性的・暗闇・恐怖・沈黙・厳粛　など

赤 - Red

Photo by Doruk Yemenici on Unsplash

一般的なイメージ：情熱的・力強さ・アクティブ・おめでたい・興奮・怒り・衝動的・刺激・生命力　など
→強いインパクトがある赤はロゴに使われたブランド・企業が沢山あります。商売において購買意欲を高める効果をもたらせる色と言われているので、バッジやボタンなど赤を使っています。

黄 - Yellow

一般的なイメージ：好奇心・幸福・光・活動的・軽快・エネルギー・希望・明るさ　など

オレンジ - Orange

Photo by Gabriel Izgi on Unsplash

一般的なイメージ：活発・家庭・暖かい・温もり・フレッシュ・にぎやかさ・親しみ・ポジティブ　など
→多くの場合には若いクライアントに関連付けられています。明るい色合いの色なので、学校（幼稚園）、IT,テクノロジ分野によく使われています。

茶 - Brown

一般的なイメージ：温もり・安定・素朴・安定・落ち着き・質素・堅実・静けさ　など

緑 - Green

Photo by Thomas Broeker on Unsplash

一般的なイメージ：穏やかさ・調和・自然・平和・安全・バランス・協調・新鮮・さわやか・やすらぎ・森林・健康・リフレッシュ　など

青 - Blue

一般的なイメージ：平和・安全・冷静・静寂・誠実・清潔・クリア・若い・さわやか・水・空・海　など
→安心感・信頼感のイメージを与えるので、サイトや企業ロゴマークによく使われています。

紫 - Purple

Photo by Milad Fakurian on Unsplash

一般的なイメージ：優雅・上品・神秘・古典的・伝統・知性・気品・ロマンス・幻想的・エキゾチック・ラベンダー　など

桃色（ピンク）- Pink

Photo by Kier In Sight on Unsplash

一般的なイメージ：エレガント・エロティック・幸福・女性的・ハート・美容・ロマンチック・愛情・艶やか・可愛らしさ　など

配色のルール

配色の考え方

色を選ぶ時は、カラーホイル（色相環）を使って色の組み合わせを考えています。
色数はできるだけ3色程度に制限することです。なぜかというと、色数がどんどん増やしていくとデザイン全体のバランスを取るのが難しくなり、デザイン自体がまとまりのない、安っぽい印象を与えることになるからです。
配色の色数を絞ったら、配色比率を考えていきます。

色の配色比率「70:25:5の法則」

一般的に、使用する3色を「70％ : 25% : 5%」の比率にして、配色するとバランスの取れた配色になるとされています。

最も大きな面積を占める色は「ベースカラー（70％）」で、ブランドのイメージカラーなどデザインの中心になる色は「メインカラー（25％）」で、画面にアクセントを持たせる色は「アクセントカラー（5％）」です。
配色にもある程度のルールがあり、ルールに基づいて色を決めていけば、全体的にバランスを簡単に取ることができます。

色を決める順番：メインカラー（25％）→ ベースカラー（70％）→アクセントカラー（5％）

メインカラーの決め方

制作物のイメージを大きく左右するメインカラーは一番初めに決めます。
メインカラーの傾向は文字が読みやす可読性の問題から明度を低くした色が使いやすいとされています。 サイトに使うロゴの色をメインカラーに使用しているサイトも多く見かけます。

ベースカラーの決め方

メインカラーの次は作成物の全体に70％の面積を占めるベースカラーを決めていきます。このカラーは主にサイトの背景色、余白となる色です。
無彩色（白、黒、グレーなど）またはメインカラーやアクセントカラーの明度を上げた色をベースカラーにするとデザインしやすくなります。

アクセントカラーの決め方

アクセントカラーはワンポイントで画面にアクセントを持たせる時に使用する色です。
全体に占める面積の割合は一番小さい、最も目立たつ色なのでメインカラーとカラーと異なる色を選びましょう。 アクセント色はお問い合わせフォームのボタンなどよく使われています。

まとめ

いかがだったでしょうか。以上で色・配色・色の持つイメージをご紹介しました。
配色がうまくなるために色の基本知識・色の意味をしっかり理解するのはもちろん、何より実際に色を組み合わせてどれがよいかよくないか確かめてみるのも大切なことです。
最後までお読みいただき、ありがとうございました。

弊社ではディレクター・Webデザイナー・フロントコーダーの経験のある方を積極的に採用しております！！
ご興味ありましたら、是非ご応募ください。皆さんのご応募をお待ちしております。