配色パターンの基本と選び方｜2色・3色の組み合わせ例を解説

はじめに

「色の組み合わせが決まらない」「なんとなく選んだら全体がバラバラに見える」という経験はないでしょうか。配色はデザインの印象を大きく左右しますが、センスだけに頼ると品質が安定しません。

実は配色には、プロのデザイナーが実践している基本的な法則があります。この法則を知っておくだけで、センスがなくても見栄えのよい色の組み合わせを選べるようになります。

本記事では、配色パターンの基本理論から2色・3色の具体的な組み合わせ例、場面別の選び方まで体系的に解説します。Webサイト・資料・SNS投稿など、あらゆる制作物の配色に役立てていただける内容です。

配色の基本知識

色相・明度・彩度とは

配色を正しく理解するためには、まず色の三属性（色相・明度・彩度）を把握することが重要です。

色相（Hue） は、赤・青・黄・緑といった色の種類を指します。色相は円形に並んだ「色相環」で表現され、配色の組み合わせルールを考える際の基本となります。

明度（Value / Brightness） は、色の明るさの度合いです。明度が高いほど白に近く、低いほど黒に近くなります。同じ色でも明度を変えるだけで、軽快な印象にも重厚な印象にもなります。

彩度（Saturation） は、色の鮮やかさの度合いです。彩度が高いほど鮮やかで目を引く色になり、低いほどくすんだ落ち着いた色になります。ビジネス用途では彩度を抑えた配色が信頼感を生みやすい傾向があります。

色相環の見方と活用方法

色相環とは、色相を円形に配置した図で、配色の関係性を視覚的に把握するためのツールです。色相環上での位置関係によって、配色パターンの名称と特性が決まります。

主な位置関係は以下の通りです。

配色で迷ったとき、まず色相環上で「隣同士か」「向かい合っているか」を確認するだけで、組み合わせの方向性が定まります。

トーン（色調）の基本

トーンとは、同じ色相でも明度・彩度の組み合わせによって生まれる色のイメージのことです。たとえば「明るいピンク」と「くすんだピンク」は同じ赤系でも、受け取られる印象は大きく異なります。

代表的なトーンと印象の対応は以下の通りです。

配色を選ぶ際は色相だけでなくトーンを揃えることで、全体の統一感が生まれます。

配色パターンの主な種類

同一色相・類似色相配色

同一色相配色とは、同じ色相の中で明度・彩度のみを変えて複数の色を組み合わせる方法です。

たとえば「濃い青・中程度の青・薄い青」のように、1色の濃淡でまとめる手法です。統一感が高くシンプルな印象になり、初心者でも失敗しにくい配色パターンです。

類似色相配色は、色相環上で隣り合う色同士を組み合わせる方法です。

「青×青緑×緑」「黄×黄橙×橙」のような組み合わせで、調和感がありながら変化もあるバランスが特徴です。ナチュラルテイストや柔らかい印象を出したいときに向いています。

補色・対比色配色

補色配色とは、色相環上で正反対に位置する色を組み合わせる方法です。

「赤×緑」「青×橙」「紫×黄」が代表例で、鮮やかなコントラストを生みます。視認性が高く目立つため、注目を集めたい箇所（ボタン・バナー・キャッチコピー）に効果的です。

ただし、補色を同じ面積・同じ彩度で並べると「ハレーション（色がちらついて見える現象）」が起きやすいため、一方の色を淡くするか、使用面積に差をつけることがポイントです。

対比色配色は補色ほど強くなく、色相環上で120°〜150°程度離れた色の組み合わせです。鮮やかさとまとまりのバランスが取れており、スポーツブランドやエンターテインメント系のデザインで多く使われます。

トライアド・テトラードなど多色配色

トライアドとは、色相環上に等間隔（120°）で並ぶ3色を使う配色です。

「赤・青・黄」や「橙・緑・紫」が代表例で、バランスよくカラフルな印象を作れます。ただし、3色すべてを高彩度で使うとうるさく見えるため、1〜2色を低彩度にするか、使用面積を変えて主従関係をつくることが重要です。

テトラードとは、色相環上に等間隔（90°）で並ぶ4色を使う配色で、豊富な色彩表現が可能になります。

4色使うと複雑になりやすいため、1色をメインカラーとして大きく使い、残りをアクセントとして小さく使うルールを守ると安定します。

2色・3色の配色組み合わせ例

2色配色のパターンと選び方

2色配色はシンプルでまとまりやすく、ビジネス用途に特に適しています。選び方のパターンは主に3つあります。

モノトーン（同一色相の濃淡）

同じ色の明暗を使う方法で、最も統一感が出やすいパターンです。背景をライトブルー、文字・アクセントをダークネイビーにするような使い方が代表的です。

隣接2色（類似色相）

色相環上で30°〜60°隣の色を組み合わせます。青と青緑、緑と黄緑など、自然界に多い組み合わせで、見る人に安心感を与えます。

補色2色

赤と緑、青とオレンジのように対照的な色を組み合わせます。コントラストが強く目立ちますが、主役と補助の役割を明確にしないとまとまりを失います。

3色配色のベースカラー・アクセントカラーの決め方

3色配色では、色ごとに役割を決めることが重要です。一般的には「70：25：5の法則」が使われます。

この比率を守るだけで、どんな3色の組み合わせでも全体がまとまりやすくなります。

印象別の配色パターン一覧

伝えたい印象に合わせた代表的な配色パターンを以下にまとめます。

場面別の配色の選び方

Webサイト・LPの配色

Webサイト・LPの配色では、可読性とブランド一貫性の両立が最優先です。背景色はホワイトか極めて薄い色に抑え、テキストとのコントラスト比（WCAG基準：4.5:1以上）を確保することが重要です。

メインカラーはブランドカラーをそのまま使うのが基本ですが、彩度が高すぎる場合は少し落とすと目への負担が減ります。CTAボタン（資料請求・お問い合わせなど）には補色またはアクセントカラーを使うことで、クリック率の向上が期待できます。

プレゼン資料・スライドの配色

プレゼン資料では、スクリーンで見やすい配色を選ぶことが重要です。暗い会場でのプロジェクター投影では、白背景より薄いグレー・紺系の背景が反射しにくく見やすくなることがあります。

スライドの配色は最大3色に絞り、強調したい箇所のみアクセントカラーを使います。多くのスライドで使われている「白背景×濃紺テキスト×オレンジ強調」の組み合わせは、視認性とビジネス感のバランスが優れており、迷ったときの定番です。

SNS投稿・バナーの配色

SNS投稿やバナーは、スクロール中に目を止めてもらうためにコントラストと独自性が重要です。一般的にはビビッドな色や補色の組み合わせが目立ちますが、競合アカウントとの差別化も意識が必要です。

ブランドカラーを一貫して使い続けることで、ユーザーに「このブランドの投稿だ」と認識させる効果が生まれます。バナーではテキスト面積を小さくし、背景色とのコントラストを高くすることで、一瞬で内容が伝わるデザインになります。

配色でよくある失敗とその改善策

色数が多すぎる

初心者に多い失敗のひとつが、使う色数が多すぎることです。5色以上の色が混在すると、視線が散乱してデザインがまとまらなくなります。

改善策は、使用する色を原則3色（ベース・メイン・アクセント）に絞ること。どうしても増やしたい場合は、既存の3色の明暗バリエーションで対応するのが最もシンプルで効果的です。

コントラスト不足で読みにくい

淡いグレーの背景に薄い文字色を使ったり、明るい緑の上に白いテキストを置いたりすると、コントラストが不足して読みにくくなります。この問題はアクセシビリティ（視覚障害のある方への配慮）の観点からも重要です。

改善策として、テキストと背景の明度差を大きくすること、そしてWCAG（Webコンテンツアクセシビリティガイドライン）に準拠したコントラスト比を確認するツール（Contrast Checkerなど）を活用することをおすすめします。

ブランドイメージとのミスマッチ

配色パターン自体は美しくても、ブランドや業種のイメージと合っていない場合、信頼感を損ないます。たとえば医療・法律系サービスで高彩度の赤オレンジを多用すると、信頼性よりも刺激的な印象が勝ってしまいます。

改善策は、業種・ターゲット・ブランドのパーソナリティに合ったトーンを最初に定義してから配色パターンを選ぶことです。「落ち着いた×若々しい×誠実×革新的」などのキーワードをブランドに当てはめ、対応するトーンを選ぶアプローチが有効です。

まとめ

配色パターンには、センスではなく理論的なルールがあります。色相環を使った組み合わせの種類（類似色・補色・トライアドなど）を理解し、70：25：5の面積比率でベース・メイン・アクセントの役割を割り当てることで、誰でも安定した配色が実現できます。

場面（Web・資料・SNS）や伝えたい印象によって適切なパターンを選び、色数は3色以内に絞ることがきれいなデザインへの近道です。