図解の配色の基本
おはようございます。ライターをしたりデザインをしたり、在宅個人事業主として働いているこばやしです。
今日は、前日開催した図解の講座の中で、質問があって、図解の配色ですね。
どういったロジックで設定しているのかな、みたいなところの質問があったので、
僕もその場で解答できなかったので、追加で解答していこうかなと思います。
ただ、音声だとなかなかわかりにくいので、これもゆくゆくノートとかに写真とかも織り混ぜながら解説したいなと思います。
先に音声で言語化したいなと思います。
今回、図解の配色で悩む場合の解決方法ということで、
70対25対5の法則だったり、77対3対1ぐらいの法則みたいな、いろいろ言いがわれ方がたくさんあるみたいなんですけど、
配色の比率っていうところをまず抑えるのがいいかなということで、
それの周辺の話についても進めていきたいなと思います。
図解だけじゃないんですけど、デザイン系の話全般で言うと、
基本的には配色はあまり多くない方がごちゃつかないのでいいかなと思います。
基本的には3色くらいに抑えておくのがいいかなと思いますね。
ここで70対25対5の法則みたいなものが登場するっていう感じですね。
どういうことかというと、配色を3つに抑えるというのは、
例えばベースカラーと呼ばれるもの、そしてメインカラーと呼ばれるもの、
そしてアクセントカラーと呼ばれるもの、3つ登場してきたりもするんですけど、
そこで色をどう分けていくのかっていうのを考えるのはこの配色になりますね。
想像してほしいのは、例えばスライド1枚あって、
そこに何か図解が載っかるみたいな感じなのを想像してほしいんですけど、
よくあるベースカラーはやっぱり白とか淡いグレーとか、
一番紙面上でよく使われるようなもの、白がベースカラーになったりすると思います。
ちょっと白黒判定する場合もあったりするんですけど、
だいたいベースカラーは白が多いですかね。
これが7割ぐらい使われる紙面上で表現されるという感じかな。
そこにメインの図形とかがちょっと入ってくるようであれば、
それが青だったり、グリーンだったり、黄色だったりとか色々あると思うんですけど、
それがメインカラーになりますよね。
そこにやっぱり5%ぐらいの差し色というか、アクセントカラーと呼ばれるものが入ってきていて、
大事なところを強調したりとかするのにこのアクセントカラーを用いるみたいな感じで、
この3つですね。ベースカラー、メインカラー、アクセントカラーというものが配色としては定められれば、
図解としては結構まとまり、図解としてというか、ごちゃつかない配色になるかなという感じですかね。
トーンと配色の調和
配色の時にごちゃつかないというか、違和感が少なくなるようにするためには、
よく同型色で揃えてみようみたいなのもあったりしますかね。
ベースカラーが白であれば、メインカラーは、例えば青にした時にアクセントカラーをどうするかというと、
メインカラーが濃いめの青なのであれば、青系の明るい水色っぽいものにする、
ちょっと近いもの、同型色でまとめるパターンがあったりとか、
または思い切って反対色と言ったりするんだったっけな、
名前の故障は忘れちゃったんですけど、青のメインカラーに対して黄色のアクセントカラーにするみたいな、
反対色って、色の対比が目立つようなものがあるんですけど、
そこに合わせて黄色系にしてアクセントカラーに持っていくとか、
ああいうやり方もありますかね、同型色か反対色かみたいな感じ。
中途半端に濃いめの青に濃いめの緑を合わせちゃうと、見にくかったりとかメリハリがつかなかったりするので、
こういうのはあまりいけてないかなっていう感じですかね。
あとは、配色のそのものもそうなんですけども、
ちょっと音声ながら伝えにくいんですけど、色のトーンを揃えておくっていうことも結構重要です。
トーンってなんやねんって話なんですけど、
例えば、パステルカラーと呼ばれるものだったりとか、
くすみ系のちょっと落ち着いた色系とか、
その赤、青、黄色とかって色そのものではなくて、
全体のトーン、ちょっと落ち着いてるとか、もしくは蛍光色みたいな、
蛍光ピンクとか蛍光の黄色とか蛍光の青とかって結構あると思うんですけども、
そういうもののトーンを揃えておくと、
図解としても見やすくなるっていう感じかな。
デザインの基礎的なところなんですけど。
トーンがバラバラだとどうなるかというと、
めちゃめちゃ蛍光色の黄色使ってるのに、
そこにめちゃめちゃ落ち着いたパステルみたいな、
くすみ、ブルーみたいなのをちょっと合わせてしまうと、
そのトーンが合ってないので、なんか違和感が出ちゃう。
ちょっと感覚的な話では恐縮なんですけど、
違和感が出ちゃうっていう感じなんですよね。
なので、色自体は同じ色。
色相が一緒って言い方でやってるのかな。
なんか調和が取りやすく、青に水色に白みたいな、
そういうもので合わせていたりとか、
類似色って言ったりするんですけど、
お隣、緑の隣って黄色だったり黄緑だったりするので、
そういうものと合わせていたりとか、
あとアクセントカラー、補色って言ったりするのかな。
全然反対側の色、青であれば黄色だし、
っていうような感じの、
そういう配色にするっていうことと、
あとはトーンを合わせて配色をする。
色調ですかね。トーンは色調かな。
薄系だったり、ビミッド、鮮やか系なものは、
なるべく両立というか、
どっちも使うようなことはせずに、
クライアントワークにおける配色
合わせておくっていうのがポイントかなと思います。
実際のクライアントワークだと、
クライアントさんありきで図解を作るので、
この辺りはメディアのトンマナに合わせる。
SEO記事に挿入するのであれば、
だいたいウェブメディアの配色ってあるじゃないですか。
黒系、ボタンがアクセントカラーになっていて、
ベースカラーが白なのかグレーなのかベージュなのかって決まっていて、
グローバルメニューとかがメインカラーになっている、
黒っぽいみたいな感じで決まっていたりすると思うので、
そこの配色をカラーピッカー拡張機能とかを使って、
組み取ってそこにある程度合わせていくような感じがいいかなと思います。
アンミカじゃないんですけどね。
白って二役色あんねんみたいな感じで、
カラーピッカーで合わせてあげたほうがいいかなと思いますね。
あとは全くなんでもいいですって言われた場合は、
配色ツールを使って参考になる配色を提案するのがいいかなと思います。
デザインって説明できないと本当は良くなくて、
なんとなく青にしましただとちょっとあんまり良くなくて、
例えばコーポレートカラーに合わせましたが、
一応メディアのトンマナに合わせましたっていう論拠になるので、
それはもちろんOKなんですけど、
例えば新規にメディアを立ち上げたいとか、
図解自体は新しいテイストで配色はしたいんですって言われた時には、
やっぱり色を選ぶ時に色自体にも色から受ける印象っていうのが結構あって、
例えば青のちょっと落ち着いてる系だったら知的に見えるとか、
オレンジとかだと元気に見えるとか、
赤だと情熱的みたいな、
一応色によっての感情みたいなイメージがあったりするので、
やっぱりそういうところをクライアントさんの思いだったりとか、
メディアの与えたい印象みたいなものだったりとか、
配色の組み合わせによっても、
なぜこの配色にできたのかっていうのを説明できるように、
自分の中でだけでもいいので、
クライアントさんに説明できるように配色のイメージを付けてあげると良いのかなと思いますね。
この領域まで至ってくると結構デザイナーっぽい感覚になってきたりするので、
ぶっちゃけ僕がノンデザイナーに近いので、
そこまでは別に求めないと思います。
求めないというか、ライター向けにデザインだったり図解っていうのをやるにあたっては、
そこまではいらないけど、そこまでできたらなお差別化になるよねっていうぐらいの程度かなと思いますので、
図解の配色を結構悩む場合もあったりもするし、
若干のセンスみたいなのもあったりするので、
あそこは無駄に配色ツールを使ってみたりとか、
クライアントさんの本物に合わせるっていうのが最低限できたら問題ないかなと思うので、
そういう感じでやってみるといいのかなというふうに思います。
ちょっと音声だとわかりにくいと思うので、またこれもノートとかに書き起こしたいなというふうに思います。
ではでは、失礼いたします。
