色の基本は7、2、1で解決？、イケメン今井くんへのデザインレッスン色の章｜カラーコーディネート｜Canva｜デザインのあうんVol.5

こんにちは。d-fractalのデザイナー、Ochiです。

カフェの店長に「秋フェアのチラシお願いね、PC得意でしょ」と無茶振りされたカフェのアルバイト今井くんへのささやかなデザインレッスン。
その続きのお話、第4回目です。

前回のレッスンで、たくさんの種類が使われていたフォントをたった一つのフォントファミリー（Noto Sans JP）と、その「ウェイト（太さ）」だけで美しく整理するという課題を、見事にクリアした今井くん。

彼のチラシは、見違えるほどスッキリと読みやすくなっていました。

「すごい…！これだけで、全然違いますね！」

「でしょう？情報の『強弱』がはっきりしたからよ」

しかし、私たちが次に取り組むべき新しい「問題」も同時に浮かび上がってきていました。

そう。「色」です。

「さあ、秋のフェアも、そろそろ近づいてきたしペースを上げていきましょうか」

私は、少しだけお姉さんらしく言いました。

「今日のお題は『色』よ」

◼️ 情報が増えると色も増える？

今井くんのチラシは確かに文字の整理はできました、しかし、その紙の上では、赤、黄色、緑、青…と、たくさんの色がまるで自己主張をしているかのように、ひしめき合っていたのです。

私は聞きました。

「元になった、Canvaのテンプレートにはそんなに色は使っていなかったはずだけど？今井くん…」

そう尋ねると今井くんは困ったように頭を掻き、厨房にいる店長に聞こえないように小声で。

「はい…。でも、店長から『この情報も、目立たせて』『こっちのセットはお得だから赤で囲んで』って次から次へと言われているうちにいつの間にかこんなことに…」

その気持ち、よく分かります。

情報を目立たせたい。その一番手っ取り早い方法が、「色を変えること」だと思ってしまう。

私も昔、同僚先輩のTanakaさんにこっぴどく追求されたことがあります。

「Ochiさん、あなたなんでここの色これにしたの？」

なんとなく色を決めていた私は答えることができませんでした。

デザインを学び始めた頃の、誰もが通る道だとおもいます。

前回のフォントのレッスンを、思い出してみてください。
たくさんの種類のフォントはいらなかった。
たった、一つの種類の中で「強弱」をつけるだけで、情報は整理できたはずです。

実は、色も全く同じなのです。

「前回のレッスンで、文字のグループ分けと強弱はもうできているのだから。こんなに、たくさんの色は使わなくても大丈夫よ。 なんなら、たった一色でもデザインは設計ができていれば成立するのよ」

◼️ 色の「役割」を決めてあげる

「まず、基本からね」

私は、今井くんに色の一番シンプルな「交通整理」の方法を教えることにしました。

デザインで使う色は、基本的に、3つの「役割」に分けて考えます。

ベースカラー（背景の色）：これが、一番面積の広い色。全体の印象を邪魔しないように、白や、薄いグレーといった落ち着いた色を選ぶのがセオリーです。

メインカラー（主役の色）：そのデザインの「顔」になる色。今回の秋フェアなら秋らしい少し落ち着いた「オレンジ」や「茶色」あたりが、候補になるかしら。

アクセントカラー（強調の色）：そして、これが一番のポイント。「ここだけは、絶対に見て！」という一番、大切な場所にだけほんの少しだけ使う色です。メインカラーとは、反対の色（補色）を選ぶと、非常に効果的。例えば、メインが「オレンジ」なら、アクセントは「青」といった具合に。

そして、その面積の比率もとても大切。

「ベース：70%、メイン：25〜20%、アクセント：10〜5%」

この比率を意識するだけで、どんな配色も不思議なくらい美しくまとまります。

実際に、やってみましょう。

「じゃあ、実際に、このチラシで、やってみましょうか」

私は、今井くんのCanvaの画面を操作します。

まず、背景は白（ベースカラー）のまま。

次に、大きく太いメインのキャッチコピーを、少し濃いめの茶色（メインカラー）にします。

そして、一番、目立たせたい「500円OFF！」という、クーポンの部分だけを、少し、くすんだ青（アクセントカラー）に、変更しました。

「どう、かしら？」

「すごい…！たったこれだけで全然違う…。すごくお洒落に見えます…！」

「でしょう？たくさんの色で叫び散らすよりも、たった一色静かにでも、ハッキリと主張する方が、人の目は惹きつけられるものなのよ」

もちろん、色の組み合わせには、近い系統の色で、穏やかにまとめる「近似色」のテクニックなど、他にも、色々な方法があります。
そういう意味では今井くんのチラシのアクセントカラーにした補色の「青」を、近似色でより強い店長希望の「赤」や「オレンジ」にするという方法もありです。

「でも、まずはこの「3色ルール」と「面積比」そして「反対色（補色）」という、一番基本的な考え方さえ覚えておけば大丈夫。」

「…分かりました！僕、もう一度自分で、やってみます！」

今井くんは、目を輝かせながら自分のMacBookのトラックパッドに手を置きました。

（つづく）

text by Ochi (d-fractal)