配色の基本
こんにちは、フリーランスデザイナーのちふねこです。
今日は、簡単に整う配色のコツというテーマでお話ししていきます。
配色ですね、今日のテーマは色選び。
色選びって難しいですよね。
色の数が多すぎますからね。
色選びに苦手意識を持っている方とかいらっしゃるんじゃないかと思うんですが、
今日はですね、なるべく簡単な、誰でもすぐ活かせるような失敗しない配色のコツっていうのを3つご紹介したいと思います。
はじめにもうサクッと言ってしまうと、
1つ目、一色プラス白黒で作る。
2つ目、アクセントに補色を使う。
3つ目、明度差を忘れない。
この3つです。
まず1つ目から順に解説していきます。
1つ目の一色プラス白黒っていうのはどういうことかというと、
この一色っていうのは、いわゆる有彩色と呼ばれる色味があるもの。
有彩色の反対で無彩色っていうのがあるんですけど、
白黒グレーとかは無彩色って言うんですよ。
そうじゃなくて逆に赤青黄色緑とか、
そういうグレースケールじゃないしっかり色がついたものを有彩色って呼ぶんですけど、
その有彩色の中から一色選んで、
あとはプラス白と黒っていうこの3色だけでも、
かなりいい感じのデザインができますよっていうのがこちらですね。
ちょっといい感じっていう抽象的な表現になっちゃったんですけど、
むしろたくさん色を使いすぎちゃうより、
もう有彩色は一つだけって決めた方がまとまりやすくなったりするんですよね。
その他に白だけ黒だけよりは白黒両方あると、
より表現の幅も選択肢が増えるので、
この3色、かつ白黒って無彩色でそんなに特徴がない、
なんだろうな、色としての個性が強すぎないというか喧嘩しづらいので、
どんな色に合わせてもなじみやすいのが無彩色の特徴だったりするので、
そういった意味ですごくまとめやすい簡単な配色、多分一番簡単な配色ですね。
なんで白だけ黒だけじゃなくて白黒、
補色の活用
プラス白黒っていう2色を足してるかというと、
これは3つ目の明度差の話にもちょっとつながっちゃうんですけど、
色によって明るさって違うんですよね。
例えば黄色と赤って明度が全然違うんですよ、両極端で。
赤は明度が低い、暗めの色って呼ばれていて、
黄色だと明度が高い明るい色になるんですよ。
これどう判断するかっていうと、目を細めた時に黒っぽくなるか白っぽくなるかみたいな、そういう感じなんですけど、
要はその色味を抜いた時に、そのグレースケール、白黒で見た時に黒よりか白よりかみたいなことなんですけど、
なのでそのグレースケールにした時、明度が低い色、今の例で言うと赤色の上に黒い文字を載せると結構見づらいデザインになっちゃうんですよね。
赤黒で言うと結構かっこいいデザインであえて使うっていうパターンもあるんですけど、見やすさっていう観点で言うと非常に見づらいです。
黒の文字を載せたら、その黒の文字はちょっと読みづらくなっちゃう。
のでよっぽどタイトルとして大きく入れるとか、一層読めなくてもいいぐらいの英語をさらっと入れるみたいな、そういう表現でよく使われるんですけど、
読ませたい文字としてはあんまり明度の低い色に黒を載せるっていうのは避けた方がいいですね。
逆に黄色、黄色は明度が高い明るい色なのでそれに白い文字を載せると読みづらくなっちゃうんですよ。
っていう色ごとに明度の明るい暗いっていうのがあって、載せるべき文字の色、見やすい文字の色とかが変わってくるので、
明るい文字が見やすい色もあれば、暗い文字の方が見やすい色もあるんですよ。
なので、一色選んだ後は白と黒っていう両方、黒い文字を載せるのにも対応できるし、白い文字を載せるのにも対応できる。
じゃあどっちか見やすい色だけでいいじゃんって思われるかもしれないんですが、
全部例えば黄色い背景の上に黒い文字だけを載せるってなると、ちょっと印象が単調になっちゃうんですよね。
で、そういった単調な表現を避けるために部分的に黒いボタン、四角の上に白い文字を載せるとか、
そういう色を反転させるって言ったりするんですけど、部分的にそういう反転を使うことで、
そのデザインの中で表現のバリエーションが生まれて、より伝わりやすくなるというか、
単調だと流し読みしちゃうようなところもアクセントでそういうボタンというか、反転した文字の色が挟んであることで、
自然となんだろうな、サラサラって流し読みせずにちゃんと注目ポイントが生まれるというか、
そういうメリハリにつながったりもするので、そういう意味で、
えっと、有彩色1色プラス白黒の2色っていうのが使えると、結構便利だし、もういい感じにまとまるっていう点ですごくおすすめです。
ちょっと意外とこの1点目にかなり時間を割いてしまったんですが、続いて2点目ですね。
アクセントに補色を使う。これはですね、さっきのベース、有彩色1色プラス白黒でいいって言ったんですけど、
その白か黒どっちかを補色にしてみると、結構一気に垢抜けたりします。
でその、なんだろうな、もう1色何が相性いいかなって考えるときに、
そのなんだろうな、組み合わせの良さを考えるのってまた大変じゃないですか。
なのでその選択肢の一つとして補色を使うっていう、補色を組み合わせるっていうのがよくあるんですよね。
かつ補色だと結構目立つというか、いい変化が生まれるんですよね。
いい意味で刺激になる。
ですけど、それがあんまり強すぎると、今度は余計な印象に繋がったりもするので、
あくまでアクセント程度にちょこっとワンポイントで補色入れるみたいなイメージで使うと、
すごくバランス良く、なんだろうな、適度に変化が生まれて、なんか妙に垢抜けたりするので、これもおすすめです。
明度差の重要性
最後に3点目ですね。明度差なんですけど、これは初めの1点目でも出てきた通り明るさですね。
色の明るさ。でこの明度差がなんで大事かっていうと、初めにもお伝えした通り、
これで見えやすさ、見やすさが変わるんですよ。
せっかくいろんな色使って組み合わせ考えて文字を載せても、明度差が、背景と文字の明度差がない状態だと馴染んじゃって。
背景に馴染んで、せっかくの文字が存在感がなくなっちゃうんですよね。
かつこういう見づらい配色を使ってると、どうしても素人感が出ちゃうんですよね。パッと見の印象で。
シンプルに内容が読みづらいっていうストレスもありますしね。
なのでこの明度差がしっかり意識できてるだけで、結構周りとも差が付く、付けられると思うので、こちらもぜひ活用してみてください。
以上です。聞くだけフリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやってる方もそうじゃない方もスキルアップのヒントとして参考になれば幸いです。
最後まで聞いてくださりありがとうございます。
