第34回 wordbench神戸勉強会 デザイン教えて君 色のきほん
DESCRIPTION
「第34回 WordBench神戸勉強会 デザイン教えて君」で紹介した、デザイン初心者の方向け解説スライドです。TRANSCRIPT
第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神戸勉強会 デザイン教えて君 色 の き ほ ん
■参考文献
新人デザイナーのための デザイン・レイアウトが上手になる本
著者:柘植ヒロポン