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

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

色 の き ほ ん

自己紹介

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

チミヲ Kimio Nakanishi@chimiochimio

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

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

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

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

Q

ご質問内容

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

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

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

A

ご質問に対しての回答

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

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

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

ご質問に対しての回答

ちなみに

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

ご質問に対しての回答

不都合 その1

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

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

ご質問に対しての回答

不都合 その1

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

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

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

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

ご質問に対しての回答

不都合 その1

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

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

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

直感で選んだ色

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

ご質問に対しての回答

不都合 その2

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

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

ご質問に対しての回答

不都合 その2

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

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

演出したいイメージ

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

ご質問に対しての回答

不都合 その2

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

演出したいイメージ

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

直感で選んだ色たち

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

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

ご質問に対しての回答

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

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

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

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

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

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

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

色の三属性 とは？

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

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

色の三属性 とは？

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

色相しきそう

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

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

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

色相しきそう

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

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

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

赤 橙 黃 緑 青 紫

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

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

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

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

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

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

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

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

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

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

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

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

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

明度めいど

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

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

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

明度めいど

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

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

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

白 黒

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

明度

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

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

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

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

明るい赤 暗い赤

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

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

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

明るい色の組み合わせ

暗い色の組み合わせ

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

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

彩度さいど

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

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

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

彩度さいど

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

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

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

鈍い 鮮やか

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

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

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

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

純色の組み合わせ

鈍い色の組み合わせ

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

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

トーン とは？

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

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

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

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

トーン とは？

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

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

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

つまりこんな図です。

鮮やか鈍い暗い

明るい

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

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

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

鮮やか鈍い暗い

明るい

冴えた

明るい

強い

濃い

浅い

柔らかい

鈍い

暗い

うすい

明るい 灰み

灰み

暗い 灰み

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

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

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

鮮やか鈍い暗い

明るい

冴えた

明るい

強い

濃い

浅い

柔らかい

鈍い

暗い

うすい

明るい 灰み

灰み

暗い 灰み

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

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

配色のきほん解説 その2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

色数が 増えると

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

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

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

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

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

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

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

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

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

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

Multi Color

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

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

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

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

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

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

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

■参考文献

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

著者：柘植ヒロポン