配色の基本｜初心者でも失敗しにくい色の選び方

色の組み合わせと、使う場所を考える

配色とは、複数の色を選び、文字・背景・写真・ボタンなどに割り当てることです。服を選ぶとき、トップスだけでなく靴やバッグとの組み合わせを考えるのと似ています。同じ3色でも、どの色を広く使うかで印象が変わります。

色を選ぶ前に決めること

先に「誰に」「何を」「どんな気持ちで見てほしいか」を1行で書きます。たとえば「仕事帰りの人に、静かに休めるカフェを知ってほしい」。この場合は、元気いっぱいの原色より、落ち着いたベージュや深い緑を試せます。これは正解を決めるルールではなく、候補を絞るための考え方です。

「おしゃれ」だけでは候補が広すぎます。「落ち着いている」「親しみやすい」など、具体的な言葉を1〜2個選びましょう。

失敗しにくい選び方

1．背景を選ぶ

まずは白や薄いベージュなど、文字を置きやすい色を広い面積に使います。最初から鮮やかな色を全面に広げると、文字色の調整が難しくなりがちです。

2．主役の色を選ぶ

見出しやイラストなど、印象を作る場所に使う色です。カフェなら緑、海のイベントなら青など、内容に合う候補を1色決めます。写真がある場合は、写真の中の色を拾う方法も使えます。

3．強調する色を選ぶ

申し込みボタンや「新商品」のラベルなど、見つけてほしい箇所に使います。色を足す前に、主役の色を濃くするだけで目立つかも試しましょう。3色必須ではありません。

役割の詳しい決め方は、ベース・メイン・アクセントカラーで図を使って説明しています。

組み合わせで迷ったとき

近い色でまとめる

青と青緑など、近い色の組み合わせは統一感を作りやすい方法です。全部が同じ濃さだと見分けにくいので、背景は薄く、文字は濃くします。

反対に近い色は少量にする

青とオレンジなど、色相環で離れた色は目立つ組み合わせを作れます。ただし、両方を大きく使うと強く感じることも。小さなラベルやボタンから試しましょう。色相環は色を輪に並べた図で、色同士の距離を考える目安になります。

違いを調整する軸は、色相・彩度・明度を読むと分かりやすくなります。

見た目より先に、読めるか確認

淡いピンクの背景に白い文字は、雰囲気がよくても読みづらくなることがあります。本文は濃い色にし、淡い色は背景や飾りに使うと調整しやすくなります。

Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。

「赤が必須、青が任意」のように色だけで意味を伝えるのも避けましょう。「必須」という文字を添えると、色の見え方にかかわらず内容を受け取れます。

参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。

作りながら覚える練習

同じカフェ告知を、まず背景・主役・文字の3役で作ります。次にボタンだけ色を変えて、最初にどこへ目が向くか見比べてみましょう。

よくある疑問：テンプレートは使っていい？

もちろん使えます。最初は色を一度に変えず、背景だけ、次に見出しだけ、と少しずつ変更しましょう。よい組み合わせを自分で再現すると、どの色が何を担当しているか分かるようになります。