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

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

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

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

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

More Related Content

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