チラシの色が決まらない！配色の選び方をハッシー先生に聞いてみた

配色ってなぜ大事？

僕はもともと幼稚園の先生をしていました。園だよりや行事のお知らせを作るとき、色をたくさん使えば楽しそうに見えると思っていた時期があります。でも、色が増えるほど「どこが大事なのか」がぼやけてしまうんですね。

いまはWeb制作の仕事で、行政や園・学校、福祉の現場、地域のお店など、いろいろな方のチラシやサイトを手がけています。そこでよくいただくのが「色だけがどうしても決まらない」というご相談です。色は最初に目に入る情報なので、迷う気持ちはとてもよく分かります。

もうひとつ大事なのが、読みやすさです。おしゃれな淡い色どうしを組み合わせると、文字が背景に溶けてしまうことがあります。年配の方や、明るい屋外でスマホを見ている方には、それだけで情報が届かなくなってしまいます。

それに、色には場面ごとの「らしさ」もあります。役所のお知らせなら落ち着いた信頼感、園の行事なら明るさとやわらかさ、福祉の案内なら安心感。同じ内容でも、色が場面に合っていないと、読む前に「自分に関係ない」と思われてしまうこともあるんです。

ツールの使い方

配色パレット集は、4色ひと組の配色を、使う場面と読みやすさで選べるツールです。

1. 使う場面と系統でしぼりこむ
   「行政・自治体」「園・学校」「福祉・医療」「飲食・お店」「地域イベント」「企業」から場面を選びます。暖色・パステル・和の色・季節の色などの系統でもしぼれて、人気順や新しい順にも並べ替えられます。
2. 文字に使える組み合わせを確かめる
   一覧には、その配色のうち文字に使える組み合わせが何組あるかが表示されています。気になる配色を開くと、4色からできる6通りの組み合わせを「文字OK」「大きな文字ならOK」「文字には不向き」に分けて見られます。
3. 見本で確かめて、書き出す
   同じ画面で、Webページのファーストビュー・A4チラシ・名刺に当てはめた見本が見られます。気に入ったら、色をクリックしてカラーコードをコピーしたり、CSS変数やHEX一覧のコピー、SNS用画像（PNG）、Illustrator用スウォッチ（ASE）の書き出しができます。

気に入った配色には「いいね」も付けられます。サイトに保存するのはいいねの数だけで、個人を特定する情報は保存されません。

僕がいいなと思っているのは、見本が「Webページ」「チラシ」「名刺」と、実際に使う形で見られることです。小さな色見本だけだときれいに見えても、広い面に塗ると印象が変わることはよくあります。完成に近い形で比べられると、決めるまでの迷いがずいぶん減ります。また、配色ごとにURLをコピーできるので、「この色でどうですか」とチームやお客様に相談するときにも便利です。

ここがポイント

• 色は3つの役割に分ける
  「文字の色」「背景の色」「目立たせる色」に分けて考えると迷いません。目立たせる色は1色にしぼって、申込みボタンや日程など大事な所だけに使います。
• 好きな色を全部使わない
  4色あっても、すべてを同じ量で使う必要はありません。背景は白や生成りに近い明るい色を広く、濃い色は文字に、という配分にすると落ち着きます。
• 淡い色どうしで文字を組まない
  パステルの背景に黄色やピンクの文字は、見た目はかわいくても読みにくくなりがちです。「文字には不向き」と出た組み合わせは、飾りや背景の模様に回しましょう。
• 最後は文字色と背景色を数字で確認
  配色を開いた画面から、選んだ2色を文字色コントラスト確認ツールで開けます。細かい注意書きに使う色は、ここで念のため確かめておくと安心です。

まとめ

色選びに正解はひとつではありません。でも、「だれに届けたいか」と「ちゃんと読めるか」の2つを押さえておけば、大きく外すことはなくなります。センスに自信がなくても大丈夫です。迷ったら、まず場面から選んでみてください。

一度決めた配色は、チラシ、ポスター、サイト、SNSと、同じ色で使い続けるのがおすすめです。色がそろっていると、「あ、いつものあのお知らせだ」と覚えてもらいやすくなります。書き出したカラーコードを、チームの共有メモに残しておくと安心ですよ。

配色パレット集を使ってみる

自分のチラシやサイトに当てはめるとどうなるか迷ったら、気軽にお問い合わせください。ロゴやブランドの色に合わせた配色づくりも、一緒に考えます。