デザインを体系的に捉える「色」

今回は色についてと色の決め方についての記事を書いていきます。

色について知る

まずは色がどのように作られるかところから解説していきます。
主に色は、HSVやRGB、CMYといった方法で色を作っています。

HSV
全ての色は、３つの属性から成り立っています。その３つの属性とは
色相　彩度　明度　です。
どんな色であってもこの３つの値を決めることで表すことができます。

色相・・・赤・青・黄・緑といった色みのことです。
彩度・・・色の鮮やかさのことです。彩度が低いと白や黒、グレーといった色に近くなります。
明度・・・色の明るさのことです。明度が高くなると白っぽくなり、明度が低いと黒っぽくなります

RGB
PCのディスプレイなどで見る映像は光の三原色と言われるRed　Green　Blue　を重ねることで、色を表示しています。
全ての色を重ねると白になります。

CMY
本やポスターといった印刷物は、色の三原色と言われるCyan　Magenta　Yellowを重ねることで色を表しています。
印刷物では、CMYにK(Key plate)を加えたCMYKで色を表現してます。
全ての色を重ねると黒になります。

色の役割

色には大きく分けて２つの役割があります。それは、機能的な役割と情緒的な役割です。

機能的な役割
機能的な役割とは、いわゆるトイレの女性は赤、男性は青みたいな色のやつですね！色によって男女を分ける機能があるようなものを挿します。

色相で差をつける・・・強調する機能がある
明度で差をつける・・・可読性をあげる機能
彩度で差をつける・・・注目度をコントロールする機能
象徴的な色を使う・・・色を記号として認識させる機能
同じ色を使う・・・色でグループ化させる機能
色に強弱をつける・・・色で階層を分ける機能

情緒的な役割
情緒的な役割とは、色が五感に訴えるような物です。

視覚に訴える色・・・先進色・後退色や膨張色・収縮色
味覚に訴える色・・・赤色は辛いなど
嗅覚に訴える色・・・紫はラベンダーなど
聴覚に訴える色・・・鮮やかな色は賑やかなど
触覚に訴える色・・・赤色はあったかいなど
記憶に訴える色・・・赤と緑がクリスマスなど

色の印象

色には、それぞれ与える印象が変わります。そのため、コンセプトに合うように与える印象をコントロールしましょう。googleで　色 印象　などで検索すれば、どんな色がどんな印象をあたえるかをまとめてある記事はたくさんあるので、詳しくはそちらをご覧ください。色相だけでなく、彩度や明度を変えても印象が変わります。

色の作り方

1. 色相を決める
色相は、コンセプトに合うように色の印象や色で与えたい役割に応じて決めます。

2. 明度を決める
明度を操作して、暗くしたり、明るくしたりして、色の印象や役割に合うようにします。

3. 彩度を決める
彩度を操作して、鮮やかにしたり、濁らせたりして、色の印象や役割に合うようにします。

4. 微調整
微調整して、イメージに合うようにしましょう！

配色

配色を決めるのは難しいですよね！でも今は基準の一色を決められれば、簡単に配色が決められるようになりました。googleで 配色　と検索すれば配色をサポートしてくれるサイトはいろいろあります。それらを使うこととで簡単にクオリティが高くなると思いますが、配色の種類は数パターンしかありません。それらを理解できれば、より効果的なはいよくを選ぶことができると思います。

色相、明度、トーンを揃える配色
色に統一感があり短調な配色になります。

「ドミナントカラー」「トーンオントーン」「ドミナントトーン」など。

反対色を使う配色
色にメリハリを作りたい時の配色になります。

「アクセントカラー」「セパレーション」など。

変化を少なくした配色
繊細さを作りたいときの配色になります。

「カマイユ」など。

多くの色相を使った配色
楽しさなどを作りたい時の配色になります。難しいですが、赤みや青みを揃えるといい配色なります。

「フォームシェード」「クルーシェード」など。

似ていて、差のある配色
色に統一感があり、短調にならない配色になります。

「グラデーション」など

自然的な配色
自然を表したいときや落ち着きを感じだせたいときの配色になります。

「ナチュラルハーモニー」など

人工的な配色
人工的な印象や斬新さ・新しさを感じさせたい時の配色になります。

「コンプレックスハーモニー」など