今更聞けないデザインテクニック②：色の選び方

デザインする時に迷う色選び

ホームページをデザインする時、チラシをデザインする時、真っ白なパワーポイントに「クリックしてタイトルを入力」と表示されているとき…

どうやって配色してますか？

とりあえず適当に作り始めて、行き当たりばったりに配色してしまうと、「後悔してる未来」しか想像できませんよね？と言ってもトップレベルのデザイナーさんともなるとフィーリングでささっと理にかなった配色をしてしまうのかもしれません、がそこまでレベルが達してない人はそうもいかない。

そこで、基本的な配色方法を頭に入れておけば、デザイン時の配色を考える時間が少しは緩和されると思うのでちゃちゃっとさわり程度に…

真剣に勉強する気があるならガッツリ勉強すればかなり面白いと思います。

ちなみにワタクシは配色がチョーーーーーー苦手です！！

マンセルの色相環

基本的にはマンセルの色相環という、なんかどこかで見た事があるカラービッカーみたいな感じの色相環を参考にします。Wikipediaだとマンセル・カラー・システムで出て来ます。

マンセル・カラー・システム (Munsell color system) とは、色を定量的に表す体系である表色系の1つ。

色彩を色の三属性（色相、明度、彩度）によって表現する。マンセル表色系、マンセル色体系、マンセル システムとも言う。

Wikipedia

で、Wikipedia先生から拝借すると、マンセル・カラー・システムとはこんな感じのヤーツです。

MunsellColorCircle

このマンセルの色相環を使って色の組み合わせを考える事ができる、

Webデザイナー御用達の便利なサイトがHUE/360。

Google Chrome使ってるなら便利なWebページ上の色をスポイドで抽出する拡張機能。

基本的には、ベースカラーを1つ決め、

隣接しているカラーが類似色、

対角線上にある色が補色（反対色）

という事が分かるだけでも全然オッケー。

デザイン中の「このキャッチフレーズ目立たせたいんだけど…」という場面に

「このデザインなら補色はあの色だな。」という事が思い浮かべば上出来でしょう。

ホームページデザイン時のカラーバランス・配色比率

バランスの良い配色はベースカラー70％・メインカラー25%・アクセントカラー5%と言われています。

例えば「赤」がコーポレートカラー（イメージカラー）の場合。

一般的にはホームページのデザインだと白ベースがほとんどで、

クライアントから「ウチは赤がコーポレートカラーなので是非真っ赤なホームページにしてほしい」等と注文がない限りはトリッキーな色をベースカラーとして背景にする事もないと思います。

おそらくそういう場合、ロゴマーク等にも赤が使われているでしょう。

ベースカラー：白（75%）

メインカラー：赤（25%）

アクセントカラー：青（5%）

というような感じである程度使う色が決まってきます。

ホームページの場合はリンクのデフォルト色が青色なので、ユーザビリティを考慮するとあまりにリンクの色に近い色はどうかな…と思いますが。

配色いろいろ

配色色色って書くと色がめっちゃ続きますね。御御御付けみたいだ…

配色計画の事をカッコよく言うとカラースキームだそうです。

ダイレクトコンプリメンタリーカラースキーム

コンプリメンタリーカラースキーム

メインカラーの補色を使った配色です。

自分で画像作りながら「こんな配色しねーだろ！」と思ったのは内緒ですが、安心してください。

ベースカラーの白と黒が75%締めた感じで作り直したのが以下です。

ダイレクトコンプリメンタリーカラースキーム

うむ、なんか海外のサイトみたいですね…

ちなみにメインカラーの補色の類似色を配色していくのは、メインカラー一色から補色3色のように色相環上で広がっていく事からスプリットコンプリメンタリースキームと言います（どうでもいい。）

トライアドカラースキーム

トライアドカラースキーム

色相環上でメインカラーから三角形を描くような配色がこれ。

また、色相環上で四角形を描くように4色で配色するカラースキームをテトラディックカラースキームといいます。（tetradで四つ組という雰囲気の意味）

若干違いますがGoogleのロゴなんかそれっぽいですよね。

ワタクシはわりとテトラディックカラースキームが好きなのですが、何かの本で「子供が好む」とか書かれてました…

モノクロマティックカラースキーム

モノクロマティックカラースキーム

メインカラーの色相を変えず、明度、彩度を変えて作成されたカラーテーマ。

シンプルで落ち着いた雰囲気を出すには良さそうですね。

まとめ

デザイナーの業務は結局クライアントが神様です。

色々と勉強してデザインテクニックを身につけても、クライアントに「ここはどうしても赤で～」と指定されると赤にするしかありません。

ただ、「ここをこうしたいんだけど良い方法ないかな…」と言ったときに提案出来るだけの勉強はしておくべきだと思います。勉強しますハイ。