絶妙な色の組み合わせと良質なデザインの関係性

「この色の絶妙な組み合わせはなんだろう」
「このサイトはどんな色が合っているだろう」
デザイナーならば一度は配色に頭を悩ませるはずです。

色は見た人に、その意味を伝えれます。だから、色の選択を間違えると意味を正しく伝えることができません。
色は、デザインをする上で必要不可欠な要素であり、プロジェクトの成功にも大きく関係していくため、デザイナーは非常に気を使う要素です。

この世界には、何万色もの色があります。デザイナーはその中から最適なパターンの組み合わせを選ばないといけません。
しかし、意味のないデザインはないため、そのルールに従って配色することによりデザイナーはしっかり配色できます。
知っといたほうがいい配色のルールや知識を解説していきたいと思います。

色相環と虹

色の関係を表すのに「色相環」というものがあります。
赤、橙、黄、緑、青、藍、紫といった様々な色を、順番に並べた円形の図で、それぞれ色の反対側（例えば、赤の反対は青緑など）に補色がくるように作られています。

この色相環と同じ順番で並んでいるのが虹です。虹はどの国も共通で色が並んでいます。人間によって作られた色相環も、自然のものを参考に作られています。

自然と配色の関係

配色は元から自然界にあるものを使うことにより、見た人は自然と受け入れやすくなります。例えば、「木の緑」、「空の青」、「白い雲」という組み合わせは、たくさんの人がほとんど毎日見る配色です。
人は自分が経験、体験したものは自然と受け入れやすくなり、逆にあまり馴染みのないものは違和感を感じてしまいます。デザインはこの違和感をなくしたり、あえて出したりして、バランスを整えます。
また、真っ黒というものは自然界には存在しないそうです。
なので、配色で黒を使うとき、純粋な黒ではなく、なにかしらうっすらと色を混ぜたほうがなじんだりします。

ナチュラルハーモニーとコンプレックスハーモニー

色相環を見ると明度や彩度が同じでも黄色周辺の色と、反対側の紺色周辺の色では、それぞれ感じる明るさが違います。

暖色系の黄色は明るく見え、逆には寒色系である紺色に近い色は暗く見えるからです。
色により感じる明るさの違いは、自然界では自然のことです。例えば、日光が当たった葉っぱは明るい黄緑に感じますし、日光が当たらず日陰になった部分は暗く感じる青緑に見えます。

これを利用し、配色のうち明るい方に黄色に近い色を置き、暗い方に紺色に近い色を置くことをナチュラルハーモニーと呼び、その逆、明るい方に紺色に近い色を、暗い方に黄色に近い色を置くをコンプレックスハーモニーと呼びます。

色の役割分担

最も大きな面積を占める基本となるベースカラー、サイトの印象を決定づける主役のメインカラー、全体の5％と少ないけど全体を引き締めるアクセントカラー。
ベースカラーを70パーセント、メインカラーを25パーセント、アクセントカラーを5パーセンの割合にするとバランスよく見えます。

ベースカラー

この色は主にサイトの背景色なります。
白、黒、グレーの無彩色は他のメインカラー・アクセントカラーの妨げになりにくいので、サイトとかでもよく使われていると思います。

メインカラー（キーカラーともいう）

この色は最初に決めましょう。なぜかというとサイトのイメージを大きく左右するからです。メインカラーは文字が読みやすいなどの理由から明るさを落とした方が使用しやすいです。

アクセントカラー

全体の色調を引き締めたり、ベースカラーやメインカラーを引き立てる役割を持つ色のことです。
アクセントとなる色はお問い合わせのボタンの色などのクリックをして欲しいところや、注目させたいところに使用すると効果は大きいです！

色の意味

色相環の中の3色と、無彩色の白と黒の意味を紹介します。

赤

連想するワード 情熱、活発、積極的、注意

興奮作用がある赤は、情熱、活発の色というイメージがあります。
赤はとても目立つので、より目立たい部分に使われることが多く、警告や警戒といった注意を促す部分にも使われたりします。

青

連想するワード 清潔、冷静、誠実、落ち着き

海や空のイメージがあり、見た人に安心感を与えます。寒色系の色なので、食欲の低下などのイメージを与えるためファミレスなどの色には向かないです。
また、信頼や誠実などのイメージから企業や病院などのサイトで使用されています。

ピンク

連想するワード 可憐、愛情、女性的、優しい

女性らしさを印象づけ、そこから優しさ、可憐さ、愛情といったイメージがあります。女性向けのデザインだと効果抜群ですが、他色との組み合わせysトーンで、対象となる年齢が変わります。ターゲットによって、色を考えましょう。

白

連想するキーワード：純白、清潔、平和、洗練

清潔であり清楚なイメージで、平和や正義を象徴する色でもあります。他の色を引き立てる効果を持つ白は、ベースカラーとして使用されることがとても多い色です。同じ無彩色の黒とは裏腹に、ポジティブな印象ですが、無機質などのネガティブなイメージも持ちます。

黒

連想するキーワード：洗練、高貴、優雅、不安

いろいろな色を混ぜ合わせれる色で、重たいものをもっと重たく、硬いものをもっと硬く感じさせる効果があります。明るめな色と組み合わせることのより、その色をより明るく見せ、強く主張できます。黒は、暗さや影、葬式というイメージからネガティブな印象があります。

このように配色にはルールがあります。
では次に無料のカラーツールを紹介していこうと思います。

これはAdobeが提供している新しいカラーパレットを生成できるツールの一つです。これは有名なので知っている方もいるのではないでしょうか。このツールの便利なところはphotoshopやIllustratorとの連携できる機能があるところです。
Adobe Kuler

これは、ページの上にある検索欄にカラーコードを入れるとその色に関係するいろいろな情報を出してくれます。
Color Hexa

日本の「和」がほしい！という方はオススメです。画面上で好きな色をクリックすると背景色がクリックした色に変化します。
日本の伝統色

まとめ

いかがでしたでしょうか？
色というのは、デザインを見た人に対し、印象に強く残ります。どのような印象を与えたいのか考えて色を選択し、どのような感じで配色するかを考えるのは、難しいけど楽しさもあります。

これを考える力を身に付けるには、本の表紙や、Webサイト、雑誌などをたくさん見て、どのような配色で作られてるかを見たり、色の理論を勉強するなど、いろんな方法がありますが、やはり大事なのは、自分で考えて手を動かすことではないかなと思います。
やってみて成功しなかったら調べてみる。そうすることにより、ただ見てるのとは違い自分自身に得られるものが大きくなります。

デザイン以外にも言えることですけど、自分に足りないものがある。けどそれが何なのかわからないというときは、完成しているものと比較するのが良いです。

みなさんも色の基本を身に付けて楽しくデザインをしていきましょう。

マーケティングでお悩みでしたら、
Bigmacにお任せください。