Download as PDF, PPTX
Uploaded byKimio Nakanishi
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
「第34回 WordBench神戸勉強会 デザイン教えて君」で紹介した、デザイン初心者の方向け解説スライドです。
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
- 1.
- 2. 自己紹介 WEBデザイナー/ディレクターとして働きながら、 デザインの勉強をしています。 ! WEBデザインやグラフィックデザインなどの、 基礎的な事（技法とかテクニックなど）を中心とした Basic Design Noteというブログを運営しています。 チミヲ Kimio Nakanishi @chimiochimio 第34回 WordBench神戸勉強会 デザイン教えて君 色 の き ほ ん
- 3.
- 4.
- 5. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の決め方にはルールがあります。 デザイナーの直感で色を決めることはありません。 また、色を決めるための法則や手法もあります。 A ご質問に対しての回答 ※ちなみに、インスピレーション（Inspiration）とは「直感」とか「ひらめき」って意味ですね。
- 6. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん …直感で色を決めると、どんな不都合が考えられるのか？ ちょっとだけ考えてみましょうか。 ご質問に対しての回答 ちなみに
- 7. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その1 直感で選んだ色は、 伝えたいイメージとマッチしてますか？
- 8. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その1 直感で選んだ色は、 伝えたいイメージとマッチしてますか？ 伝える必要のあるイメージ ・高級感のある ・大人の雰囲気
- 9. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その1 直感で選んだ色は、 伝えたいイメージとマッチしてますか？ 伝える必要のあるイメージ ・高級感のある ・大人の雰囲気 直感で選んだ色
- 10. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その2 直感で決めた色数で、 伝えたいイメージを演出出来てますか？
- 11. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その2 直感で決めた色数で、 伝えたいイメージを演出出来てますか？ ・落ち着きのある ・リラックス出来る雰囲気 演出したいイメージ
- 12. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご質問に対しての回答 不都合 その2 直感で決めた色数で、 伝えたいイメージを演出出来てますか？ 演出したいイメージ ・落ち着きのある ・リラックス出来る雰囲気 直感で選んだ色たち
- 13. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 直感で色を決めると、いろいろと残念な事があるでしょ？ ご質問に対しての回答
- 14. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん …前置きがちょっと長かったですが、ここから先は 色のきほんについて少しだけ解説していきますね。
- 15. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 配色のことを考える前に、まずは「色のきほん」を知っておこう。
- 16. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 色の三属性 とは？
- 17. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 色の三属性 とは？ 色相・明度・彩度のことを 言います。
- 18. 色相 しきそう 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 色相とは、赤・青・黄などの色味の種類 のことを言います。
- 19. 色相 しきそう 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 色相とは、赤・青・黄などの色味の種類 のことを言います。 赤 橙 黃 緑 青 紫 …普段口にしてる色の名前が色相のことを指してる訳です。
- 20. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 先ほどの6色の関係をよりわかりやすく配置すると… 色数は少ないですが、このように それぞれの色を円形に配置したもの を色相環と言います。
- 21. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 先ほどの6色の関係をよりわかりやすく配置すると… 隣り合う色同士は類似色と言い、 対角線の色を補色と言います。
- 22. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 先ほどの6色の関係をよりわかりやすく配置すると… 類似色同士の組み合わせは、色味が 近いので穏やかな印象を与えや すいです。 ! 補色同士の組み合わせは色味が離れ ているので、目をひく強い印象を 与えます。
- 23. 明度 めいど 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 明度とは、色の明るさ・暗さのことを言 います。
- 24. 明度 めいど 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 明度とは、色の明るさ・暗さのことを言 います。 白 黒 色の中で一番明るい色は 白 で、一番暗い色は 黒 です。
- 25. 明度 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 同じ 赤 でも、明度が変わると色の印象も随分と違ってきませんか？ 明度は白と黒以外の色にも関係してきます。 明るい赤 暗い赤
- 26. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 明るい色と暗い色それぞれを組み合わせると… 明るい色の組み合わせ 暗い色の組み合わせ 明るい色の組み合わせは、 爽やかで軽い印象を与えます。 暗い色の組み合わせは、 落ち着きある重厚な印象を 与えます。
- 27. 彩度 さいど 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 彩度とは、色の鮮やかさ・鈍さのことを 言います。
- 28. 彩度 さいど 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 彩度とは、色の鮮やかさ・鈍さのことを 言います。 鈍い 鮮やか 最も彩度の高い色は 純色 と言います。鈍くなるにつれ全体が灰色に近づきます。
- 29. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 純色と鈍い色それぞれを組み合わせると… 純色の組み合わせ 鈍い色の組み合わせ 純色の組み合わせは、 鮮やかで強い印象を与えます。 鈍い色の組み合わせは、 冴えない暗い印象を与えます。
- 30. トーン とは？ 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1
- 31. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 トーン とは？ 色の調子のことを言います。 明度と彩度を組み合わせたもので表せます。
- 32. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 つまりこんな図です。 鮮やか鈍い 暗い 明るい
- 33. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 それぞれのトーンでは与える印象がちがいます。 鮮やか鈍い 暗い 明るい 冴えた 明るい 強い 濃い 浅い 柔らかい 鈍い 暗い うすい 明るい 灰み 灰み 暗い 灰み
- 34. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 色の三属性とトーン解説 その1 それぞれのトーンでは与える印象がちがいます。 鮮やか鈍い 暗い 明るい 冴えた 明るい 強い 濃い 浅い 柔らかい 鈍い 暗い うすい 明るい 灰み 灰み 暗い 灰み それぞれのトーンの印象を 覚えると、今後の色選びが グッと楽になります。
- 35. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のきほん解説 その2 配色の考え方はたくさんあります。ここでは少しだけ紹介します。
- 36. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のポイント解説 その2 代表的な配色方法はこんな感じのものがあります。 1.対比を用いた配色例 色相による対比 明度による対比 彩度による対比 2.共通性を用いた配色例 同一色相の配色 同一トーンの配色
- 37. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のポイント解説 その2 その他にはこんな配色方法もあります。 3.アクセントカラー 4.セパレーションカラー アクセントカラーは色相・明度・彩度と対照的な色を使うのがポイント セパレーションカラーは無彩色か無彩色に近い低彩度色を使うのがポイント
- 38. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のポイント解説 その2 扱う色数はどうすればいい？？ 色数が 増えると 賑やかさを演出できますが、 それぞれの色の印象は薄れます。 ※扱うそれぞれの色の割合は同じと考えます。
- 39. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のポイント解説 その2 色数が少ないほど色のメッセージ性は上がります。 ＞ 色のメッセージ性低い色のメッセージ性高い …それじゃ、色数は必ず少なくしないといけないの？？
- 40. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん 配色のポイント解説 その2 色数が多いことが悪いのではなくて、扱い方が重要。 Multi Color 伝えたいターゲットに合わせて色数を考えてみましょう。 色数の多い部分の面積を少なくする。 背景色を活用して多色の部分をまとめる。
- 41. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん …結局長くなったのですが、今日の色のきほんに ついての解説はここまでです。
- 42. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ご清聴ありがとうございました！
- 43. 第34回 WordBench神戸勉強会 デザイン教えて君色 の き ほ ん ■参考文献 新人デザイナーのための デザイン・レイアウトが上手になる本 著者：柘植ヒロポン