Design Stock

デザインのアレコレ

  1. HOME
  2. 混色系と顕色系 ー ひとが色選びに失敗する理由とその解決策

混色系と顕色系 ー ひとが色選びに失敗する理由とその解決策

デザイン制作で特に難しいのが配色選び。

配色とは2色以上の調和の取れた色の組み合わせのことです。

レイアウトや使用する書体が決まっても、配色がうまくできないと考えていたイメージを表現することができません。

いざ、制作物を作ってみると

「なんか思っていたイメージにならないんだよな…」

と感じる人は多いと思います。

今日はそんな方に向けて、どうして人は色選びに失敗してしまうのかを説明し、それを解決する超便利なツールをご紹介したいと思います!

混色系と顕色系

みなさんはデザインをする時、色選びに何を使っていますか?

多くの方はPhotoshopやIllustratorなどにあるカラーパレットを使用しているのではないでしょうか。

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

実はこれ自体に、人が色選びに失敗する理由が隠されています。

というのも、色を数値化する方法は人間向きと人間向きじゃない2種類があって、カラーパレットは人間向きではないんですね。

混色系

f:id:mtk-hcwj:20180208110950p:plain
出典:http://www.toyoink1050plus.com/color-solution/chromatics/basic/002.php

混色系とは、「赤・白・黒」など何個かはじめに元となる色を決めてそれらの混ぜ具合によって色を表現する方法です。

RGBやCMY、XYZなどがこれにあたりますね。

この表現手法、実は人間向きではありません。

というのも、混色系は機械で使われることを想定して数学的に扱いやすよう設計されているんですね。

顕色系

f:id:mtk-hcwj:20180208112158j:plain
出典:http://blog.livedoor.jp/mtsk44h6-004/archives/cat_149458.html

一方、顕色系とは「色相・明度・彩度」という色の三属性で表現する方法です。

こちらは混色系とは異なり、人間の知覚に近い形で色を配置したものになります。

つまり、うまい色の組み合わせを実現するには

  • 色相
  • 明度
  • 彩度

の3点を意識すればいいんですね。

じゃあ、どうするの?

先ほどのカラーピッカーにはHSBというバーがあり、この値を変更することで、

「色相・明度・彩度」を変えるのに近い形で色を表現することができます

が、

先ほども言った通り、これはRGB色空間で人間向きではありません。

RGB空間とは可視光の空間のことを言い、彩度が高い配色になりやすいんですね。

ベストなのはマンセル色空間という、物体色をベースにした空間を使って色を選ぶことです。

そしてそれを実現してくれるのが「HUE360」と呼ばれる超便利なツール!

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

好きな色を選択すると、それに合う他の色を自動的に検出してくれます。

下にバーが表示され、選択した色を数値化してくれるのでコピー&ペーストをして実際に使うことができます!

開発してくださったのは、渋谷でデザイナーとしてフリーで活動していらっしゃるおばら つかささんです。

(素晴らしいアプリをありがとうございます…!)

最後に

今日は色選びに役立つツール「HUE360」を紹介しました。

しかし、デザイナーによっては既存の写真や画像を使って配色をしなければならないこともあると思うので、目的や場面に合わせて使用してみてください!

配色はとても奥が深いので、今後も学んだことをどんどん記事にしていけたらと思います!

今日はここまで

バイバーイ