1.
色彩センスのいらない配色講座 色は理論的に説明できる

2.
目次 <ul><li>自己紹介 </li></ul><ul><li>色ってなんなの？ </li></ul><ul><li>色を簡単に決める方法 </li></ul><ul><li>最後に </li></ul>

3.
自己紹介 <ul><li>職業：デザイナー </li></ul><ul><li>物心ついたときには絵を描くのが好きだった </li></ul><ul><li>そのままの勢いで某美大某デザイン科に進学 </li></ul><ul><li>社会に出たらデザインの話が通じなさすぎて悶絶 </li></ul><ul><li>そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている </li></ul>marippe_

4.
色ってなんなの？ 死ぬの？

5.
色には「３属性」がある <ul><li>色相 </li></ul><ul><li>明度 </li></ul><ul><li>彩度 </li></ul>

6.
色相とは <ul><li>色相：赤・青・黄・緑…などの「色み」のこと </li></ul>

7.
色の３原色 <ul><li>この３色だけでほぼ全ての色が作れます。 </li></ul>RGB ( ディスプレイなどの場合 ) CMY ( 塗料などの場合 ) 赤・青・緑 青 ( シアン ) ・赤 ( マゼンタ ) ・黄

8.
明度とは <ul><li>明度：色の「明るさ」のこと </li></ul>明度が低い 明度が高い

9.
色相によって明度は違う <ul><li>色みを持つ色を白黒にすると明度がわかる </li></ul>

10.
明度を目で見るコツ <ul><li>薄目で見ると明度がわかりやすい！ </li></ul>http://www.gatag.net/02/06/2009/170000.html Photo by belgianchocolate

11.
彩度とは <ul><li>彩度：色の「鮮やかさ」のこと </li></ul>彩度が低い 彩度が高い

12.
有彩色・無彩色 <ul><li>彩度がない色を無彩色、彩度が少しでもある色を有彩色といいます。 </li></ul>無彩色 有彩色

13.
つまり、色とは <ul><li>なんかセンスがある奴が感覚的に選ぶもの </li></ul>「色相」「明度」「彩度」の３属性で言い表し、選ぶことができるもの

14.
色についてさらに詳しくは <ul><li>ぐぐれ </li></ul>

15.
色を簡単に決める方法

16.
使う色は３色をベースにする <ul><li>３色を 70 ％ :25 ％ :5 ％くらいの比率にする方法があります。 </li></ul>ベースカラー :70% メインカラー :25% アクセントカラー :5%

17.
３色ベースのデザイン例 大塚製薬 POCARI SWEAT stevia 日本製紙クレシア scottie 新生銀行 パワード定期プラス ポスター AEON WAON 公式サイト http://www.waon.com/ 日産 エコカー：モコ http://www2.nissan.co.jp/EVENT/TAX/MOCO/ VISA ロゴタイプ

18.
まずメインカラーを選ぶ <ul><li>メインカラーは、色をつけようとしている対象のテーマとなる色です。 </li></ul>この部分

19.
選び方 <ul><li>メインカラーは、ある程度「明度の低い」色が扱いやすいと思います。 </li></ul>明度が高いと文字が読めない 明度が低いと読めて使いやすい

20.
選び方 <ul><li>あとは、イメージや好みや戦略で決めたらいいんじゃないでしょうか！ </li></ul><ul><li>ターゲットユーザーが好きそうな色 </li></ul><ul><li>競合と被らない色 </li></ul><ul><li>クリックされやすい色 </li></ul><ul><li>俺は緑が好きなんだ！ </li></ul>

21.
ベースカラーを選ぶ <ul><li>ベースカラーは、背景など広い色面を彩る色です。 </li></ul>この部分

22.
選び方 <ul><li>背景などになる色なので、白や薄い（明度が高い）色が扱いやすいと思います。 </li></ul>発光しすぎな色は目が痛い 明度が低いと暗くなる

23.
選び方 <ul><li>無彩色もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早いと思います。 </li></ul>明度の高い無彩色・濁色 メインカラーの明度を上げた色 白 グレー 薄い茶色 メインカラー メインカラー メインカラー ベースカラー ベースカラー ベースカラー

24.
アクセントカラーを選ぶ <ul><li>少ない色面でアクセントを出すカラーです。 </li></ul>この部分

25.
選び方 <ul><li>メインカラーから離れた色相にすると鮮やかになります。 </li></ul>

26.
実際にやってみよう <ul><li>メインカラー青の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント

27.
実際にやってみよう ポカリスエット web サイト http://pocarisweat.jp/ ライフカード web サイト http://www.lifecard.co.jp/ VISA ロゴタイプ

28.
実際にやってみよう <ul><li>メインカラー緑の場合 </li></ul>メインカラー ベースカラー アクセントカラー メイン アクセント

29.
実際にやってみよう modx web サイト http://modx.com/ デザイン表札 .com 表札デザイン http://www.designhyousatsu.com/style.html

30.
４色目以降について <ul><li>あくまでベースが３色なのであって、きっちり３色では色が足りなくなると思います。 </li></ul>http://free-photo.gatag.net/2011/03/13/170000.html Photo by Tambako the Jaguar

31.
カラーの分割 <ul><li>カラーを「分割」するという考え方があります。 </li></ul>メインカラーの分割 アクセントカラーの分割 分割 分割

32.
分割の仕方 <ul><li>分割するのはいいとして、何色を足せばいいわけ？ </li></ul>「 色相 」が同じで「 トーン 」が違う色 「 トーン 」が同じで「 色相 」が違う色 もしくは

33.
トーンとは <ul><li>明度と彩度の複合概念。 </li></ul><ul><li>同じ色相でも明暗・強弱などの違いがあり、それをトーンと言います。 </li></ul>彩度 明度 ※ 図は日本色研 web サイトより転載 http://www.sikiken.co.jp/pccs/pccs04.html

34.
カラー分割の例 <ul><li>「色相」が同じで違う「トーン」の色 </li></ul>Cacoo web サイト https://cacoo.com/ この部分

35.
カラー分割の例 <ul><li>「トーン」が同じで違う「色相」の色をさらに分割 </li></ul>WAON web サイト http://www.waon.net/ この部分

36.
色面の比率に注意 <ul><li>色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまいます。 </li></ul>

37.
最後に

38.
色はこれが全てじゃない <ul><li>今回お話したのはあくまで一手法です。 </li></ul><ul><li>「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。 </li></ul>

39.
ありがとうございました！ Photo by sueety