この記事を読むのに必要な時間は約 14 分です。
センスはいらないから安心してね
配色は色のセンスがなくて難しいという人が多いですが、
センスがなくても知識さえあれば、ちゃんと配色できます。
スポンサーリンク
色の基本は 色相 彩度 明度
色には基本的な要素として、
・色相（しきそう）＝色の種類
・明度（めいど）＝色の明るさ
・彩度（さいど）＝色の鮮やかさ
があります。
色相
色相はいわゆる色味のことです。（赤や青や緑や黄色といった色の種類）
英語ではＨue（ヒュー）といい、画像ソフトなどでは、頭文字をとってＨで表します。
上は色相をつなげた色相環というものです。
隣り合う色が近い色（類似色）、
向かい合う正面の色が最も遠い色（反対色または補色）となります。
上図は内側の環は、分かりやすく12色に分けてあります。
明度
明度は色の明るさのことです。
上の図が、明度を表した図です。
明度が高い＝白に近い明るい色、
明度が低い＝黒に近い暗い色です。
英語ではLightness（ライトネス）、画像ソフトなどでは、頭文字をとってLで表します。
上の孫くんで、明度が高いのはどちらでしょう。
答えは右です。
彩度
彩度は色の鮮やかさのことです。
英語ではSaturation（サチュレイション）、画像ソフトなどでは、頭文字をとってＳで表します。
彩度が高い＝色味の強い鮮やかな色
彩度が低い＝グレーに近い鮮やかではない色（無彩色）といいます。
です。
彩度の最も高い色は、その色相の中の純色といいます。
上の孫くんで、彩度が低いのはどちらでしょう。
答えは左です。
３つを組み合わせてあらゆる色ができています。
色の３属性といいます。
上は明度と彩度を縦横軸にした図です。
色相は赤です。
明度と彩度の組み合わせで、おなじ赤でも無限に近い色があることがわかります。
さらに上の図が、色相別に存在します。
周りのものを見るときに、色の明度、彩度を意識してみましょう。
スポンサーリンク
色の組み合わせで読みやすさが変わる
チラシでは、目立たせたい文字を目立つ色にするのが基本です。
前回やった、重要な情報（タイトルや日付、場所など）を目立たせたいですね。
目立たせる色には、目立つ色を使いたいところですが、目立つ色とはどんな色でしょうか？
彩度が高い（純色）と思いますが、それだけとは限りません。
例えば、鮮やかな赤は、白地にはとても目立ちます。
鮮やかなオレンジ色の中ではどうでしょうか。
つまり、色の目立ち方は相対的なのです。
色の組み合わせによって、目立ったり目立たなかったりします。
逆に、鮮やかな緑色の中に置いたらどうでしょうか。
こういう場合は、間に彩度の低い色をはさむよ
目立つ色の組み合わせは、対比の激しい純色
目立つ色の組み合わせは、基本的に対比の激しい色です。
対比の激しいとは、まったく違った色という意味です。
３要素とも反対の組み合わせの色です。
究極の反対色は黄色と黒
非常に目立つ色の組み合わせは、危険を伝える色などに使われています。
例えば、ふみきりや立ち入り禁止に使われる、黄色と黒の組み合わせはとても目立ちます。
最も明度と彩度の高い色である黄色と、最も明度と彩度の低い色の黒の組み合わせは、最も対比の激しい組み合わせといえます。
救急車に使われる赤と白も、最も彩度が高く、明度が低めの赤と、最も彩度の低く明度の高い白の組み合わせです。
パトカーの白と黒は、言うまでもなく、最も明度の高い色と低い色の組み合わせです。
お店のテーマカラーなどの色もこうしたものが多いです。
黄色と青、赤と白、赤と緑、オレンジと緑、などなど…
黄色と青だけでも、IKEA、Tポイントカード、GUなどいろいろ浮かびますね。
赤と緑はセブンイレブンなど。間に無彩色の白を入れて、ハレーションをおこすのを防いでいます。
こうした組み合わせは、思わず目が行ってしまう最も目立つ色です。
国旗などにもこうした色の組み合わせはよく使われています。
読みやすい色の組み合わせ
彩度の高い赤と緑の組み合わせはとても目立ちます。
しかし文字にすると目がチカチカして読みにくくなってしまいます。
あまりにも対比が激しい色は、国旗やマークなどには向きますが、じっくり読む文章などには向きません。
本文の小さい文字は、読みやすい白字に黒などを使うばあいが多いです。
WEBサイトの場合、文字色は真っ黒ではなく、グレーにしてハレーションを防いでいるものがほとんどです。
スポンサーリンク
色の黄金比 70：25：5
実際に色を選んでいくときに、迷うと思いますが、簡単に使えるセオリーがあります。
色の黄金比といって、使いたい３色を、70％、25％、5％の比率で選びます。
この比率で配色すると、バランスよくまとまります。
上はその比率の図です。
ベースカラー 70％
メインカラー 25％
アクセントカラー 5％
まず、 ベースカラーとは、そのチラシの一番面積の多い部分の色です。
多くの場合、紙の色そのものの白や薄い色です。上に文字がのりますね。
メインカラーとは、ポイントになる一番目立つ色です。
タイトルや目立たせたい部分に使います。この色が最も目立ちます。
彩度を高くするのをお勧めします。
アクセントカラーとは、小さい面積ですが、メインカラーを引き立てる色です。
アクセントカラーは、メインカラーの反対色や、明度や彩度が反対の対比の大きい色を使うとメインカラーが引き立ちます。
上はこのサイトのカラーです。
ベースカラーは面積の大きい地の色、
メインカラーは最も目立つ色で、上下のバーの部分、
アクセントカラーは文字色の黒です。
他に色を使いたい場合でも、上の色と色相や明度、彩度を合わせるとうまくなじみます。
色を選ぶときの鉄則
・色数はできるだけ少なく！ 多くても上記に3色にしましょう。
・色の３要素のどれかをそろえるとうまくいきます。
同じ色相でまとめる
同じ色相で３色をまとめると、きれいな配色になります。
簡単にできるおすすめのカラーです。
おなじトーンでまとめる
明度や彩度をまとめた例です。
上は、明度は高く、彩度は低めのパステルカラーでまとめています。
中は、明度も彩度も中間でまとめています。
下は、明度が低く、彩度は高い、濃いトーンです。
こうすると色相をバラバラにしても、統一感がでます。
アクセントカラーを反対色にするのもおすすめだよ
まとめ
今回は色の基礎知識についてやりました。
知識さえあれば、センスはなくてもきれいな配色は誰にでもできます。
これは私が使っているおすすめアプリです。
Color Pal
アンドロイドアプリです。
イメージを検索して簡単にカラーを探せます。
お気に入りを保存しておくこともできて便利。
※追記 このサイトもとても参考になります。
反対色、類似色など色の関係性が直観的にわかりますね。
いろいろいじって好きな組み合わせを見つけてみてください。
デザインの基礎についてのおすすめ書籍はこちらです。
初版を読みました。今は4版なので多少変わってるかもしれません。デザイナーではない人に向けたデザインの本です。
デザインを分かりやすく理論的にまとめた本としてははしりですね。
これも古い本ですが、さらに実践的に書かれていておすすめ。
カラーパレットの作り方も載っています。
デザイン、文体から作者の誠実な人柄が伝わる良い本です。
次回は具体的に実際のチラシに色をつけていきましょう。
続きを見る
7_色を知れば色を選べる ダサいチラシをかっこよく
スポンサーリンク