第34回 WordBench神戸勉強会デザイン教えて君　色のきほん

第34回 WordBench神戸勉強会デザイン教えて君

色のきほん

自己紹介

WEBデザイナー/ディレクターとして働きながら、デザインの勉強をしています。 !WEBデザインやグラフィックデザインなどの、基礎的な事（技法とかテクニックなど）を中心とした “Basic Design Note”というブログを運営しています。

チミヲ Kimio Nakanishi@chimiochimio

第34回 WordBench神戸勉強会デザイン教えて君色のきほん

…まずは、質問の確認とその回答から。


色の決め方には何かルールがありますか？インスピレーションで色を選んだりするのか、それとも何か法則があって選んでいるのでしょうか？

Q

ご質問内容



色の決め方にはルールがあります。デザイナーの直感で色を決めることはありません。また、色を決めるための法則や手法もあります。

A

ご質問に対しての回答

※ちなみに、インスピレーション（Inspiration）とは「直感」とか「ひらめき」って意味ですね。


…直感で色を決めると、どんな不都合が考えられるのか？ちょっとだけ考えてみましょうか。


ちなみに



不都合その1

直感で選んだ色は、伝えたいイメージとマッチしてますか？



不都合その1


伝える必要のあるイメージ

・高級感のある・大人の雰囲気



不都合その1


伝える必要のあるイメージ

・高級感のある・大人の雰囲気

直感で選んだ色



不都合その2

直感で決めた色数で、伝えたいイメージを演出出来てますか？



不都合その2


・落ち着きのある・リラックス出来る雰囲気

演出したいイメージ



不都合その2


演出したいイメージ

・落ち着きのある・リラックス出来る雰囲気

直感で選んだ色たち


直感で色を決めると、いろいろと残念な事があるでしょ？



…前置きがちょっと長かったですが、ここから先は色のきほんについて少しだけ解説していきますね。


色の三属性とトーン解説その1

配色のことを考える前に、まずは「色のきほん」を知っておこう。



色の三属性とは？



色の三属性とは？

色相・明度・彩度のことを言います。

色相しきそう



色相とは、赤・青・黄などの色味の種類のことを言います。

色相しきそう



色相とは、赤・青・黄などの色味の種類のことを言います。

赤橙黃緑青紫

…普段口にしてる色の名前が色相のことを指してる訳です。



先ほどの6色の関係をよりわかりやすく配置すると…

色数は少ないですが、このようにそれぞれの色を円形に配置したものを色相環と言います。




隣り合う色同士は類似色と言い、対角線の色を補色と言います。




類似色同士の組み合わせは、色味が近いので穏やかな印象を与えやすいです。 !補色同士の組み合わせは色味が離れているので、目をひく強い印象を与えます。

明度めいど



明度とは、色の明るさ・暗さのことを言います。

明度めいど



明度とは、色の明るさ・暗さのことを言います。

白黒

色の中で一番明るい色は“白”で、一番暗い色は“黒”です。

明度



同じ“赤”でも、明度が変わると色の印象も随分と違ってきませんか？

明度は白と黒以外の色にも関係してきます。

明るい赤暗い赤



明るい色と暗い色それぞれを組み合わせると…

明るい色の組み合わせ

暗い色の組み合わせ

明るい色の組み合わせは、爽やかで軽い印象を与えます。

暗い色の組み合わせは、落ち着きある重厚な印象を与えます。

彩度さいど



彩度とは、色の鮮やかさ・鈍さのことを言います。

彩度さいど



彩度とは、色の鮮やかさ・鈍さのことを言います。

鈍い鮮やか

最も彩度の高い色は“純色”と言います。鈍くなるにつれ全体が灰色に近づきます。



純色と鈍い色それぞれを組み合わせると…

純色の組み合わせ

鈍い色の組み合わせ

純色の組み合わせは、鮮やかで強い印象を与えます。

鈍い色の組み合わせは、冴えない暗い印象を与えます。

トーンとは？





トーンとは？

色の調子のことを言います。明度と彩度を組み合わせたもので表せます。



つまりこんな図です。

鮮やか鈍い暗い

明るい



それぞれのトーンでは与える印象がちがいます。


明るい

冴えた

明るい

強い

濃い

浅い

柔らかい

鈍い

暗い

うすい

明るい灰み

灰み

暗い灰み



それぞれのトーンでは与える印象がちがいます。


明るい

冴えた

明るい

強い

濃い

浅い

柔らかい

鈍い

暗い

うすい

明るい灰み

灰み

暗い灰み

それぞれのトーンの印象を覚えると、今後の色選びがグッと楽になります。


配色のきほん解説その2

配色の考え方はたくさんあります。ここでは少しだけ紹介します。


配色のポイント解説その2

代表的な配色方法はこんな感じのものがあります。1.対比を用いた配色例

色相による対比明度による対比彩度による対比

2.共通性を用いた配色例

同一色相の配色同一トーンの配色



その他にはこんな配色方法もあります。3.アクセントカラー

4.セパレーションカラー

アクセントカラーは色相・明度・彩度と対照的な色を使うのがポイント

セパレーションカラーは無彩色か無彩色に近い低彩度色を使うのがポイント



扱う色数はどうすればいい？？

色数が増えると

賑やかさを演出できますが、それぞれの色の印象は薄れます。

※扱うそれぞれの色の割合は同じと考えます。



色数が少ないほど色のメッセージ性は上がります。

＞色のメッセージ性低い色のメッセージ性高い

…それじゃ、色数は必ず少なくしないといけないの？？



色数が多いことが悪いのではなくて、扱い方が重要。

Multi Color

伝えたいターゲットに合わせて色数を考えてみましょう。

色数の多い部分の面積を少なくする。背景色を活用して多色の部分をまとめる。


…結局長くなったのですが、今日の色のきほんについての解説はここまでです。


ご清澄ありがとうございました！


■参考文献

新人デザイナーのためのデザイン・レイアウトが上手になる本

著者：柘植ヒロポン

第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん

Design

第34回 WordBench神戸勉強会デザイン教えて君　色のきほん