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

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

目次
自己紹介
色ってなんなの？
色を簡単に決める方法
最後に

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

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

色には「３属性」がある
色相
明度
彩度

色相とは
色相：赤・青・黄・緑…などの「色み」のこと

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

明度とは
明度：色の「明るさ」のこと
明度が低い明度が高い

色相によって明度は違う
色みを持つ色を白黒にすると明度がわかる

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

彩度とは
彩度：色の「鮮やかさ」のこと
彩度が低い彩度が高い

有彩色・無彩色
彩度がない色を無彩色、彩度が少しでもある色を有彩色といいます。
無彩色有彩色

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

色についてさらに詳しくは
ぐぐれ

色を簡単に決める方法

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

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

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

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

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

ベースカラーを選ぶ
ベースカラーは、背景など広い色面を彩る色です。
この部分

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

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

アクセントカラーを選ぶ
少ない色面でアクセントを出すカラーです。
この部分

選び方
メインカラーから離れた色相にすると鮮やかになります。

実際にやってみよう
メインカラー青の場合
メインカラーベースカラーアクセントカラーメインアクセント

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

実際にやってみよう
メインカラー緑の場合
メインカラーベースカラーアクセントカラーメインアクセント

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

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

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

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

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

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

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

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

最後に

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

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

http://oekakigakusyuu.blog97.fc2.com	93600
http://blog.livedoor.jp	77214
http://e0166.blog89.fc2.com	50202
http://creive.me	31412
http://plus.find-job.net	19431
http://www.lifehacker.jp	17105
http://kachibito.net	15156
http://weboook.blog22.fc2.com	10856
http://gaialotlab.seesaa.net	9488
http://piyon.hatenablog.com	5275
http://oekakiantena.blog.fc2.com	3668
http://3dnchu.jimdo.com	2840
http://control.blog.fc2.com	1767
http://kattenatv.blogspot.jp	1585
http://webdesignclass.blog.fc2.com	1255
https://twitter.com	1243
http://twitter.com	991
http://bikkuri.me	936
http://w3q.jp	849
https://twimg0-a.akamaihd.net	784
http://blog.norimen.com	670
http://geno-web.jugem.jp	622
http://blogs.dion.ne.jp	535
http://blog.kzfmix.com	532
http://a0.twimg.com	504
https://si0.twimg.com	472
http://www.dcom-jp.net	462
http://kattenatv.blogspot.com	453
http://mattintosh.blog.so-net.ne.jp	398
http://yotsuba-d.com	397
http://tuyaken.com	394
http://dev-info.tose.co.jp	388
http://kogane1107.hatenablog.com	357
http://www.advertimes.com	357
https://bozuman.cybozu.com	314
http://labo.so-ra.co.jp	311
http://win201109.blog.fc2.com	301
http://kswg.net	294
http://160.intrablog.co.jp	291
http://news.mynavi.jp	248
http://hamamuratakuo.blog61.fc2.com	246
http://localhost	238
http://inspi.mobi	233
http://affiliate.nufufu.com	232
http://kuro33.sakura.ne.jp	224
http://win201302.wordpress.com	181
http://harashin.net	179
http://blog89.fc2.com	147
http://oekakiantena.blog.fc2blog.net	122
http://medaka3.blog.shinobi.jp	122
http://516.jp	120

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

by Mariko Yamaguchi

Accessibility

Categories

Upload Details

Usage Rights

241 Embeds 359K

Statistics

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