Design Stock

デザインのアレコレ

  1. HOME
  2. これで配色に迷わない!色の基礎知識と便利な配色技法について

これで配色に迷わない!色の基礎知識と便利な配色技法について

ども!TAKAです!

最近デザイン制作をしていると、同じ色の組み合わせなのに受ける印象が違ったり、なぜか調和が取れなかったりして、

これってなんなんだろーってモヤモヤすることが多くなりました。

例えば、下の写真のように

赤・黄色・青

の3色を使ってみても、同じ色の組み合わせなのに違った印象を受けます。

f:id:mtk-hcwj:20180210214439j:plain

左の組み合わせは、エネルギッシュでポジティブな印象を受けます。

一方、右の組み合わせはなんだか調和が取れてなくて不自然な印象を受けますよね。

ってことで、今日は配色をするときに迷うことが多い方向けに

基本的な色の知識と、知っていると便利な配色方法について説明したいと思います!

色の三属性

全ての色は、色相(H)、彩度(S)、明度(B)と3つの性質を持っています。

これを「色の三属性」といいます。

効果的な配色を実現するのに、とても重要な基礎知識です!

f:id:mtk-hcwj:20180210215833p:plain

カラーピッカーの赤で囲った部分ですね↑

色相

色相とは、赤や青といった「色みの性質」の違いのことをいいます。

無数にある色の中から代表的な色をピックアップして円にした「色相環」を参考にしてください。

f:id:mtk-hcwj:20180210220313j:plain
出典:https://mocot.net/170706/

ちなみに、
色相環で隣あう色のことを「類似色」といい、反対側にある色のことを「補色」といいます。

彩度

彩度とは、「色の鮮やか」のことです。

もっとも彩度が高い色を「純色」といい、もっとも彩度が低いのは「無彩色(グレー)」です。

最初に紹介した赤・黄色・青の右側は全て殉職で組み合わせています。

f:id:mtk-hcwj:20180210220859p:plain
出典:http://blog.iro-dori.net/useful/color/12359/

明度

明度とは「色の明るさの度合い」です。

明度が高ければ高いほど、「白」に近づき、低くなればなるほど「黒」に近づきます。

f:id:mtk-hcwj:20180210221244p:plain

トーン

トーン(色調)とは、明度と彩度の組み合わせで表される「色の調子」です。

このトーンという概念が配色においてはとても重要になってきます!

実は、はじめに紹介した、赤・黄色・青の右側は同じ色相なんですね。

でも、ちょっとだけ明度と彩度をいじったことで、調和の取れない違和感のある組み合わせになっています。

ということは、配色を考えるときは

同じトーンかそれに近いトーン内で色を選ぶ

ことが大切になります。

f:id:mtk-hcwj:20180210222311j:plain
出典:http://creators-manual.com/tone/

デザイン制作をするときに、カラーピッカーを使ってトーンを揃えたい方も多いと思います。

以下のサイトは同一トーンを16進数で表記しているので、よかったら利用してみてください!

iro-color.com

類似性の原理

さて、色の基本知識を抑えた上で、どのような色を組み合わせれば調和の取れた配色が実現できるのでしょうか?

先ほど、

「同じトーンかそれに近いトーン内で色を選ぶ」

ことが大切だと説明しました。

それは、

共通性がある色同士は調和する

とも言い換えることができます。

構成された配色間に色相やトーンなど何らかの共通性があると、色同士が調和しやすくなり、これを「類似性の原理」といいます。

類似性の原理を活用した代表的な配色方法は2つ。

「ドミナント・カラー配色」と「ドミナント・トーン配色」です。

ドミナント・カラー配色

f:id:mtk-hcwj:20180210230306j:plain
出典:http://creators-manual.com/color_scheme7/

ドミナントとは「支配」「優勢」という意味です。

同じ色相や、類似色で配色する方法を「ドミナント・カラー配色」と言います。

色相は変えずに明度や彩度を変えて、統一感をだす配色方法ですね

ドミナント・トーン配色

f:id:mtk-hcwj:20180210230910j:plain
出典:http://creators-manual.com/color_scheme7/

同じトーンで統一した配色を「ドミナント・トーン配色」といいます。

こちらは先ほど紹介しましたね!

トーンを揃えることによって統一感をだすとともに、トーンのもつイメージも与えることができます。

最後に

いかがでしたか?

実は今日ご紹介した配色技法はほんの一部に過ぎません。

他にも配色について学んだことをブログでご紹介できればと思います!

また、必ずしも配色技法を使う必要はなく、あくまで色選びに困った時の手助け程度に考えていただけるといいと思います。

配色だけで、一日が過ぎてしまう…

なんてこともありますからね。。笑

そういう時って、色彩理論を活用すると突破口が見えてくることもあると思います!

今日はここまで

バイバーイ