配色はセンスじゃない｜相性の良い色を揃えるための「計算」と「ルール」

「この色とこの色、なんか合わないな……」

デザインをしていると、こういう感覚的な壁にぶつかることがよくあります。センスの問題かなと思いがちですが、実は配色の崩れにはほぼ共通した原因があります。

色相・明度・彩度の3要素が噛み合っていないだけ。これを知っておくと、感覚に頼らず「ロジック」で修正できるようになります。

なぜ「ランダムな色」は失敗するのか

試しに色を3つランダムで選んでみると、だいたい次のような問題が起きます。

原因は、色を構成する3つの変数がバラバラだからです。

この3つに関係性（Logic）を持たせない限り、配色は整いません。

配色の出発点は、**色相環（カラーホイール）**を使った幾何学的な関係作りです。代表的なパターンを3つ紹介します。

色相環で180°反対側に位置する組み合わせ。コントラストが最も強くなるため、CTAボタンなどのアクセントに最適です。
例：青×オレンジ、赤×緑

色相が近い色（30°〜60°程度）を並べる方法。UIデザインやブランドカラーのグラデーションによく使われます。
例：青→青緑→緑

色相を120°ずつ均等に分ける方法。バランスが良く、ポップで元気な印象を与えます。

実は、色相よりも先にユーザーの脳に届くのは明度です。

背景、メインコンテンツ、アクセントカラーの間に適切な明るさの差がないと、視覚的な階層（Visual Hierarchy）が崩れます。逆に言えば、明度差さえ適切なら、色が多少バラついていても画面は整って見えます。

目安として、背景と要素の明度差が5%未満だと「ぼやけた」印象になり、50%以上だとコントラストが強すぎて目が疲れます。15〜30%程度の差を意識するのが、最もバランスを取りやすい範囲です。

初心者のデザインが「安っぽく」見える最大の原因は、**すべての色の彩度が高すぎる（ビビッドすぎる）**ことです。

すべての要素が彩度100%で主張し合うと、ユーザーの目は落ち着く場所を失います。次のような配分を意識するだけで、プロっぽい落ち着いた画面になります。

「ここぞ」という場所以外は、彩度を下げる勇気を持つことが大切です。

もしプログラムで配色を制御したり、ジェネレーターを作ったりするなら、RGBやHSLではなくOKLCH（L:明度, C:彩度, H:色相）という色空間を使うのがおすすめです。

従来のHSLなどと違い、OKLCHは「人間の目が感じる明るさ」に基づいて計算されます。
「明度（L）を10上げたのに、青色だと明るさが変わったように見えない」といった現象が起きにくいため、ロジックベースで配色を組む際の強力な武器になります。

「センスのある配色」の正体は、感覚ではなく、次の3つのロジックを積み重ねた結果です。

「なんか合わない」と感じたときは、まず明度差からチェックしてみてください。それだけで原因が特定できることがほとんどです。