60:30:10の法則
色の配分を決めるときにもっとも役立つルールです。インテリアデザインから生まれた考え方ですが、どんなプロジェクトにも使えます。
- 60%：ベースカラー。一般的にはニュートラルカラーややさしい色合いを使い、背景や広い面を占めます。
- 30%：サブカラー。個性を加える色です。ブロック、メニュー、家具などに使います。
- 10%：アクセントカラー。もっとも目を引く色です。ボタン、アイコン、ディテールに使います。
たとえば、オフホワイトを60%、ネイビーを30%、オレンジを10%にします。
厳密に測る必要はありません。1色が主役、1色が脇役、1色が目立つ役という考え方が大切です。
ニュートラルカラーの役割
ニュートラルカラーとは、白、黒、グレー、ベージュ、クリーム色、明るい茶色などのことです。ほとんどの色と合わせられます。
目を休ませ、強い色を引き立ててくれます。ニュートラルカラーのないパレットは、たいてい疲れる印象になります。
- 白とオフホワイト：清潔感と広がり。
- グレー：モダンで控えめ。パレット全体に合わせて、暖かみのあるグレーかクールなグレーを選びましょう。
- ベージュと砂色：温かみと自然な雰囲気。
- 黒または黒に近い色：上品さとコントラスト。文字には、純粋な黒よりもごく濃いグレーのほうが目にやさしいことが多いです。
色温度で組み合わせる
色は暖色（赤、オレンジ、黄色）と寒色（青、緑、紫）に分けられます。組み合わせ方には、シンプルな方法が3つあります。
- 暖色だけ：居心地が良くエネルギッシュ。レストランや親しみやすいブランドに最適です。
- 寒色だけ：落ち着いていてプロフェッショナル。医療、テクノロジー、金融に最適です。
- 寒色ベース＋暖色のアクセント：もっとも使いやすい方法です。落ち着いた背景の中で、暖色のアクセントが視線を集めます。
よくある失敗は、主役の色を決めずに、強い暖色と寒色をたくさん混ぜてしまうことです。
文字のコントラスト
どんなにきれいな色でも、文字が読めなければ意味がありません。文字と背景のコントラストは、読みやすさとアクセシビリティの鍵です。
- 明るい背景には暗い文字を、暗い背景には明るい文字を使いましょう。
- 白い背景に黄色、明るい緑、ライトグレーの文字は避けましょう。
- 赤の上に緑のように、鮮やかな補色同士を重ねるのは避けましょう。ちらついて目が疲れます。
- WCAGのガイドラインでは、通常の文字で4.5:1以上、大きな文字で3:1以上のコントラスト比が求められます。
色の組み合わせは、コントラストチェッカーで確認できます。
失敗しない色の組み合わせ15選
次の組み合わせは、安心して使える出発点です。ベースにして、必要に応じてニュートラルカラーやアクセントを加えましょう。
- ネイビーとクリーム色：クラシックで誠実、読みやすい組み合わせ。
- 黒とゴールド：高級感と上品さ。
- 青とオレンジ：補色同士でエネルギッシュ。
- フォレストグリーンとベージュ：ナチュラルで落ち着いた印象。
- ピンクとチャコールグレー：モダンでバランスが良い。
- 黄色と黒：コントラストが最大で、注意喚起に最適。
- バーガンディと砂色：温かく洗練された印象。
- ターコイズとコーラル：爽やかで夏らしい。
- 紫と淡いライラック：単色配色でクリエイティブ。
- 茶色とセージグリーン：アースカラーで、ナチュラル系ブランドに最適。
- グレーとピーチ：やさしく親しみやすい。
- ペトロールブルーと淡い黄色：落ち着きの中に明るさをひとさじ。
- テラコッタとオフホワイト：温かく地中海風。
- ダークティールとマスタード：レトロで個性的。
- 白と赤：ストレートでエネルギッシュ、遠くからでもよく目立つ。
カラーコード付きのアイデアは、色の組み合わせのページでさらにたくさん紹介しています。
色別・合う色の一覧
メインカラーがすでに決まっているなら、次の一覧をすぐに使える出発点にしてください。
- 赤：白、黒、グレー、ネイビー、ベージュ。大胆にしたいならピンクやオレンジ。
- オレンジ：ネイビー、ターコイズ、白、クリーム色、茶色。
- 黄色：グレー、黒、ネイビー、白。マスタードはダークグリーンとよく合います。
- 緑：ベージュ、白、茶色、ゴールド、淡いピンク。
- 青：白、オレンジ、グレー、黄色、コーラル。ネイビーはほぼニュートラルカラーのように使えます。
- 紫：グレー、ライラック、ゴールド、セージグリーン、白。
- ピンク：グレー、ネイビー、オリーブグリーン、白、ゴールド。
- 茶色：クリーム色、緑、ペトロールブルー、オレンジ、オフホワイト。
ほぼすべての一覧にニュートラルカラーが入っていることに注目してください。強い色を合わせるときに、もっとも失敗しにくい方法です。
自分だけの配色を作る方法
- 伝えたいことをもとに、メインカラーを選びます。
- 色相環でサブカラーを探します。落ち着いた印象なら隣の色、目を引く印象なら反対側の色を選びます。
- ニュートラルカラーを1〜2色加えます。
- いちばん大切な部分のために、アクセントカラーを1色だけ選びます。
- ウェブページ、スライド、部屋の写真など、実際の例でパレットを試します。
迷ったら色数を減らしましょう。ほとんどのプロジェクトは3〜5色で十分です。
配色でよくある失敗
- 色を使いすぎる。ごちゃごちゃして、何も目立たなくなります。
- すべての色を同じ分量で使う。主役の色がないと、どこを見ればいいのかわかりません。
- コントラストを忘れる。文字が読めない、ボタンに気づかれないといった問題が起きます。
- すべてを鮮やかにする。彩度の高い色ばかりだと疲れます。やさしい色合いと組み合わせましょう。
- 使う環境を考えない。色は自然光の下、画面上、印刷物でそれぞれ違って見えます。
- そのまま真似する。あるブランドでうまくいったパレットが、あなたのターゲットに合うとは限りません。
- 色温度の違うニュートラルカラーを混ぜる。クールなグレーと暖かいベージュを並べると、濁って見えることがあります。ニュートラルカラーは同じ系統から選びましょう。
- 複数の画面で確認しない。パソコンではきれいに見えても、スマートフォンではくすんで見えることがあります。必ず複数の端末で確認しましょう。