色彩センスのいらない配色講座 色は理論的に説明できる
目次 <ul><li>自己紹介 </li></ul><ul><li>色ってなんなの? </li></ul><ul><li>色を簡単に決める方法 </li></ul><ul><li>最後に </li></ul>
自己紹介 <ul><li>職業:デザイナー </li></ul><ul><li>物心ついたときには絵を描くのが好きだった </li></ul><ul><li>そのままの勢いで某美大某デザイン科に進学 </li></ul><ul><li>社会に出...
色ってなんなの? 死ぬの?
色には「3属性」がある <ul><li>色相 </li></ul><ul><li>明度 </li></ul><ul><li>彩度 </li></ul>
色相とは <ul><li>色相:赤・青・黄・緑…などの「色み」のこと </li></ul>
色の3原色 <ul><li>この3色だけでほぼ全ての色が作れます。 </li></ul>RGB ( ディスプレイなどの場合 ) CMY ( 塗料などの場合 ) 赤・青・緑 青 ( シアン ) ・赤 ( マゼンタ ) ・黄
明度とは <ul><li>明度:色の「明るさ」のこと </li></ul>明度が低い 明度が高い
色相によって明度は違う <ul><li>色みを持つ色を白黒にすると明度がわかる </li></ul>
明度を目で見るコツ <ul><li>薄目で見ると明度がわかりやすい! </li></ul>http://www.gatag.net/02/06/2009/170000.html Photo by belgianchocolate
彩度とは <ul><li>彩度:色の「鮮やかさ」のこと </li></ul>彩度が低い 彩度が高い
有彩色・無彩色 <ul><li>彩度がない色を無彩色、彩度が少しでもある色を有彩色といいます。 </li></ul>無彩色 有彩色
つまり、色とは <ul><li>なんかセンスがある奴が感覚的に選ぶもの </li></ul>「色相」「明度」「彩度」の3属性で言い表し、選ぶことができるもの
色についてさらに詳しくは <ul><li>ぐぐれ </li></ul>
色を簡単に決める方法
使う色は3色をベースにする <ul><li>3色を 70 % :25 % :5 %くらいの比率にする方法があります。 </li></ul>ベースカラー :70% メインカラー :25% アクセントカラー :5%
3色ベースのデザイン例 大塚製薬 POCARI SWEAT stevia 日本製紙クレシア scottie 新生銀行 パワード定期プラス ポスター AEON WAON 公式サイト http://www.waon.com/ 日産 エコカー:モコ ...
まずメインカラーを選ぶ <ul><li>メインカラーは、色をつけようとしている対象のテーマとなる色です。 </li></ul>この部分
選び方 <ul><li>メインカラーは、ある程度「明度の低い」色が扱いやすいと思います。 </li></ul>明度が高いと文字が読めない 明度が低いと読めて使いやすい
選び方 <ul><li>あとは、イメージや好みや戦略で決めたらいいんじゃないでしょうか! </li></ul><ul><li>ターゲットユーザーが好きそうな色 </li></ul><ul><li>競合と被らない色 </li></ul><ul><...
ベースカラーを選ぶ <ul><li>ベースカラーは、背景など広い色面を彩る色です。 </li></ul>この部分
選び方 <ul><li>背景などになる色なので、白や薄い(明度が高い)色が扱いやすいと思います。 </li></ul>発光しすぎな色は目が痛い 明度が低いと暗くなる
選び方 <ul><li>無彩色もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早いと思います。 </li></ul>明度の高い無彩色・濁色 メインカラーの明度を上げた色 白 グレー 薄い茶色 メインカラー メインカラー メイン...
アクセントカラーを選ぶ <ul><li>少ない色面でアクセントを出すカラーです。 </li></ul>この部分
選び方 <ul><li>メインカラーから離れた色相にすると鮮やかになります。 </li></ul>
実際にやってみよう <ul><li>メインカラー青の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント
実際にやってみよう ポカリスエット web サイト http://pocarisweat.jp/ ライフカード  web サイト http://www.lifecard.co.jp/ VISA  ロゴタイプ
実際にやってみよう <ul><li>メインカラー緑の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント
実際にやってみよう modx web サイト http://modx.com/ デザイン表札 .com  表札デザイン http://www.designhyousatsu.com/style.html
4色目以降について <ul><li>あくまでベースが3色なのであって、きっちり3色では色が足りなくなると思います。 </li></ul>http://free-photo.gatag.net/2011/03/13/170000.html Pho...
カラーの分割 <ul><li>カラーを「分割」するという考え方があります。 </li></ul>メインカラーの分割 アクセントカラーの分割 分割 分割
分割の仕方 <ul><li>分割するのはいいとして、何色を足せばいいわけ? </li></ul>「 色相 」が同じで「 トーン 」が違う色 「 トーン 」が同じで「 色相 」が違う色 もしくは
トーンとは <ul><li>明度と彩度の複合概念。 </li></ul><ul><li>同じ色相でも明暗・強弱などの違いがあり、それをトーンと言います。 </li></ul>彩度 明度 ※ 図は日本色研  web サイトより転載 http://...
カラー分割の例 <ul><li>「色相」が同じで違う「トーン」の色 </li></ul>Cacoo web サイト https://cacoo.com/ この部分
カラー分割の例 <ul><li>「トーン」が同じで違う「色相」の色をさらに分割 </li></ul>WAON web サイト http://www.waon.net/ この部分
色面の比率に注意 <ul><li>色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまいます。 </li></ul>
最後に
色はこれが全てじゃない <ul><li>今回お話したのはあくまで一手法です。 </li></ul><ul><li>「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。 </l...
ありがとうございました! Photo by sueety
Upcoming SlideShare
Loading in...5
×

色彩センスのいらない配色講座

1,674,136

Published on

BP study #46

Published in: Design
36 Comments
1.7k Likes
Statistics
Notes
No Downloads
Views
Total Views
1,674,136
On Slideshare
0
From Embeds
0
Number of Embeds
235
Actions
Shares
0
Downloads
0
Comments
36
Likes
1,686
Embeds 0
No embeds

No notes for slide

Transcript of "色彩センスのいらない配色講座"

  1. 1. 色彩センスのいらない配色講座 色は理論的に説明できる
  2. 2. 目次 <ul><li>自己紹介 </li></ul><ul><li>色ってなんなの? </li></ul><ul><li>色を簡単に決める方法 </li></ul><ul><li>最後に </li></ul>
  3. 3. 自己紹介 <ul><li>職業:デザイナー </li></ul><ul><li>物心ついたときには絵を描くのが好きだった </li></ul><ul><li>そのままの勢いで某美大某デザイン科に進学 </li></ul><ul><li>社会に出たらデザインの話が通じなさすぎて悶絶 </li></ul><ul><li>そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている </li></ul>marippe_
  4. 4. 色ってなんなの? 死ぬの?
  5. 5. 色には「3属性」がある <ul><li>色相 </li></ul><ul><li>明度 </li></ul><ul><li>彩度 </li></ul>
  6. 6. 色相とは <ul><li>色相:赤・青・黄・緑…などの「色み」のこと </li></ul>
  7. 7. 色の3原色 <ul><li>この3色だけでほぼ全ての色が作れます。 </li></ul>RGB ( ディスプレイなどの場合 ) CMY ( 塗料などの場合 ) 赤・青・緑 青 ( シアン ) ・赤 ( マゼンタ ) ・黄
  8. 8. 明度とは <ul><li>明度:色の「明るさ」のこと </li></ul>明度が低い 明度が高い
  9. 9. 色相によって明度は違う <ul><li>色みを持つ色を白黒にすると明度がわかる </li></ul>
  10. 10. 明度を目で見るコツ <ul><li>薄目で見ると明度がわかりやすい! </li></ul>http://www.gatag.net/02/06/2009/170000.html Photo by belgianchocolate
  11. 11. 彩度とは <ul><li>彩度:色の「鮮やかさ」のこと </li></ul>彩度が低い 彩度が高い
  12. 12. 有彩色・無彩色 <ul><li>彩度がない色を無彩色、彩度が少しでもある色を有彩色といいます。 </li></ul>無彩色 有彩色
  13. 13. つまり、色とは <ul><li>なんかセンスがある奴が感覚的に選ぶもの </li></ul>「色相」「明度」「彩度」の3属性で言い表し、選ぶことができるもの
  14. 14. 色についてさらに詳しくは <ul><li>ぐぐれ </li></ul>
  15. 15. 色を簡単に決める方法
  16. 16. 使う色は3色をベースにする <ul><li>3色を 70 % :25 % :5 %くらいの比率にする方法があります。 </li></ul>ベースカラー :70% メインカラー :25% アクセントカラー :5%
  17. 17. 3色ベースのデザイン例 大塚製薬 POCARI SWEAT stevia 日本製紙クレシア scottie 新生銀行 パワード定期プラス ポスター AEON WAON 公式サイト http://www.waon.com/ 日産 エコカー:モコ http://www2.nissan.co.jp/EVENT/TAX/MOCO/ VISA ロゴタイプ
  18. 18. まずメインカラーを選ぶ <ul><li>メインカラーは、色をつけようとしている対象のテーマとなる色です。 </li></ul>この部分
  19. 19. 選び方 <ul><li>メインカラーは、ある程度「明度の低い」色が扱いやすいと思います。 </li></ul>明度が高いと文字が読めない 明度が低いと読めて使いやすい
  20. 20. 選び方 <ul><li>あとは、イメージや好みや戦略で決めたらいいんじゃないでしょうか! </li></ul><ul><li>ターゲットユーザーが好きそうな色 </li></ul><ul><li>競合と被らない色 </li></ul><ul><li>クリックされやすい色 </li></ul><ul><li>俺は緑が好きなんだ! </li></ul>
  21. 21. ベースカラーを選ぶ <ul><li>ベースカラーは、背景など広い色面を彩る色です。 </li></ul>この部分
  22. 22. 選び方 <ul><li>背景などになる色なので、白や薄い(明度が高い)色が扱いやすいと思います。 </li></ul>発光しすぎな色は目が痛い 明度が低いと暗くなる
  23. 23. 選び方 <ul><li>無彩色もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早いと思います。 </li></ul>明度の高い無彩色・濁色 メインカラーの明度を上げた色 白 グレー 薄い茶色 メインカラー メインカラー メインカラー ベースカラー ベースカラー ベースカラー
  24. 24. アクセントカラーを選ぶ <ul><li>少ない色面でアクセントを出すカラーです。 </li></ul>この部分
  25. 25. 選び方 <ul><li>メインカラーから離れた色相にすると鮮やかになります。 </li></ul>
  26. 26. 実際にやってみよう <ul><li>メインカラー青の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント
  27. 27. 実際にやってみよう ポカリスエット web サイト http://pocarisweat.jp/ ライフカード web サイト http://www.lifecard.co.jp/ VISA  ロゴタイプ
  28. 28. 実際にやってみよう <ul><li>メインカラー緑の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント
  29. 29. 実際にやってみよう modx web サイト http://modx.com/ デザイン表札 .com 表札デザイン http://www.designhyousatsu.com/style.html
  30. 30. 4色目以降について <ul><li>あくまでベースが3色なのであって、きっちり3色では色が足りなくなると思います。 </li></ul>http://free-photo.gatag.net/2011/03/13/170000.html Photo by Tambako the Jaguar
  31. 31. カラーの分割 <ul><li>カラーを「分割」するという考え方があります。 </li></ul>メインカラーの分割 アクセントカラーの分割 分割 分割
  32. 32. 分割の仕方 <ul><li>分割するのはいいとして、何色を足せばいいわけ? </li></ul>「 色相 」が同じで「 トーン 」が違う色 「 トーン 」が同じで「 色相 」が違う色 もしくは
  33. 33. トーンとは <ul><li>明度と彩度の複合概念。 </li></ul><ul><li>同じ色相でも明暗・強弱などの違いがあり、それをトーンと言います。 </li></ul>彩度 明度 ※ 図は日本色研 web サイトより転載 http://www.sikiken.co.jp/pccs/pccs04.html
  34. 34. カラー分割の例 <ul><li>「色相」が同じで違う「トーン」の色 </li></ul>Cacoo web サイト https://cacoo.com/ この部分
  35. 35. カラー分割の例 <ul><li>「トーン」が同じで違う「色相」の色をさらに分割 </li></ul>WAON web サイト http://www.waon.net/ この部分
  36. 36. 色面の比率に注意 <ul><li>色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまいます。 </li></ul>
  37. 37. 最後に
  38. 38. 色はこれが全てじゃない <ul><li>今回お話したのはあくまで一手法です。 </li></ul><ul><li>「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。 </li></ul>
  39. 39. ありがとうございました! Photo by sueety

×