配色の基礎とカラーパレットの作り方｜色相環・補色・70:25:5の比率

サイトやスライドを作るとき、「色選びでいつも迷う」「なんとなく選んだら全体がちぐはぐに見える」という経験はないでしょうか。配色はセンスの問題だと思われがちですが、実際にはいくつかの基本ルールと型を知っていれば、誰でも安定した見栄えを作れます。本記事では、色の基礎から実際のカラーパレットの組み立て方までを、Webデザインですぐ使える形でまとめます。

配色とは：色の三属性と色相環

配色とは、複数の色を意図を持って組み合わせることです。その土台になるのが、色を構成する三つの属性です。

• 色相（Hue）：赤・青・黄といった「色味」そのもの。色の種類を表します。
• 明度（Lightness/Value）：色の明るさ。白に近いほど高く、黒に近いほど低くなります。
• 彩度（Saturation/Chroma）：色の鮮やかさ。高いほど派手に、低いほどくすんで灰色に近づきます。

このうち色相を円環状に並べたものが色相環（カラーホイール）です。赤・橙・黄・緑・青・紫が少しずつ変化しながら一周し、隣り合う色ほど色味が近く、向かい合う色ほど対照的になります。配色の多くは、この円のどこから色を取るかで決まると言っても過言ではありません。まずは色相環の上で「近い色」「遠い色」を意識することが、配色の第一歩です。

頭の中だけで色相環を扱うのは難しいので、カラーパレット生成ツールで基準色を一つ決め、そこから色がどう広がるかを目で見て確かめてみると理解が早まります。

配色パターン：同系色・補色・トライアド

色相環上のどこから色を選ぶかによって、配色には定番の「型」があります。代表的なものを押さえておけば、迷ったときの強力な指針になります。

同系色（類似色）配色は、色相環で隣り合う色をまとめて使う方法です。たとえば青〜青緑〜緑のように、色味が近いため自然にまとまり、落ち着いた上品な印象になります。失敗しにくいので、配色に慣れていない段階で最もおすすめできる型です。

補色配色は、色相環で正反対に位置する2色（赤と緑、青とオレンジなど）の組み合わせです。互いを引き立て合い、強いコントラストが生まれるため、目を引きたいポイントに効果的です。ただし同じ彩度・面積で並べると目がチカチカするので、後述する比率とトーンの調整が欠かせません。

トライアド配色は、色相環を正三角形で結んだ3色を使う方法です。バランスが取れていて鮮やかな印象になり、ロゴやイラストなど華やかさが欲しい場面に向きます。このほか、補色の片方を2色に分ける「スプリットコンプリメンタリー」など応用もありますが、まずは上記3つを使いこなせれば十分です。

黄金比 70:25:5：ベース・メイン・アクセント

色を「何色使うか」と同じくらい重要なのが、「どの色をどれくらいの面積で使うか」です。色数を増やすよりも、面積の配分を整えるほうが、整って見えるデザインへの近道になります。よく使われるのが70:25:5の比率です。

• ベースカラー（約70%）：背景や余白など、最も広い面積を占める色。白やごく薄いグレーなど、主張しすぎない色が向きます。
• メインカラー（約25%）：そのサイトやブランドの中心となる色。見出しやナビゲーション、主要なパーツに使い、印象を決定づけます。
• アクセントカラー（約5%）：ボタンやリンク、強調したい箇所に少しだけ使う色。メインの補色など対照的な色を選ぶと、わずかな面積でもしっかり目立ちます。

ポイントは、アクセントは「少しだけ」だからこそ効くということです。目立たせたいからと面積を増やすと、かえってどこを見ればいいか分からなくなります。まずベースとメインで全体の落ち着いた土台を作り、最後にアクセントをひとさじ加える——この順番を意識すると、配色は一気に安定します。

トーンを揃える：明度と彩度のコントロール

色相（色味）を上手に選んでも、なぜか調和しない——その原因の多くはトーンのばらつきにあります。トーンとは、明度と彩度の組み合わせによって決まる色の「調子」のことです。鮮やかな色とくすんだ色、明るい色と暗い色が無秩序に混ざると、まとまりが失われます。

色相がバラバラでも、トーンが揃っていれば不思議とまとまって見える。

逆に言えば、色相が違っても明度と彩度の水準を揃えれば、配色は一気に統一感を持ちます。たとえば「すべてパステル調（高明度・低彩度）でそろえる」「すべて深く落ち着いた色（中明度・中彩度）でそろえる」といった具合です。実際の調整では、次の2点を意識すると失敗が減ります。

• 彩度をそろえる：鮮やかさのレベルを近づけると、複数の色がチームのようにまとまります。
• 明度差はコントラストに使う：文字と背景など、読みやすさが必要な部分では明度差を意図的に大きく取ります。逆に隣り合わせて穏やかに見せたい部分は明度差を抑えます。

とくにWebでは文字の読みやすさが重要で、背景と文字の明度差が小さいと可読性が落ちます。装飾としての調和と、テキストとしての読みやすさは別物として、明度差をどこで効かせるかを使い分けましょう。

HEX・RGB・HSL：Webでの色の表し方

Webで色を扱うには、色を数値で指定する方法を知っておく必要があります。代表的なのがHEX・RGB・HSLの3つです。

HEXとRGBは、いずれも赤・緑・青の光の強さで色を表します。HEXはそれを16進数2桁ずつ並べた表記で、CSSやデザインツールで最も広く使われます。

配色を考えるうえで特に便利なのがHSLです。色相・彩度・明度を直接指定できるため、「色味はそのままに明るさだけ上げる」「彩度を下げてくすませる」といった、これまで説明してきたトーンの調整がそのまま数値操作になります。たとえば同系色配色なら色相の数値を少しずつずらし、トーンを揃えたいなら彩度・明度を固定する、といった具合です。HEXとHSLを行き来できると作業効率が大きく上がるので、カラーコード変換ツールで同じ色がそれぞれどう表記されるかを確かめておくとよいでしょう。

Webでの実践：パレットの作り方手順

ここまでの知識を踏まえ、実際にWebサイト用のカラーパレットを組み立てる流れを整理します。

1. メインカラーを1色決める

ブランドや伝えたい印象に合う色を一つ選びます。これがパレットの軸になります。青系なら誠実・知的、緑系なら安心・自然、赤やオレンジなら情熱・活発、といった色の持つイメージも参考にしましょう。

2. 配色パターンで色を広げる

メインカラーを起点に、同系色でまとめるのか、補色でメリハリを付けるのかを決めます。カラーパレット生成ツールを使えば、基準色から類似色・補色・トライアドといった候補が一度に得られるので、ここで全体の方向性を固めます。

3. ベース・アクセントを決め、トーンを揃える

背景となるベースカラー（白〜淡いグレー）と、強調用のアクセントカラーを決めます。最後に各色の彩度・明度を見直してトーンを揃え、文字と背景には十分な明度差を確保します。完成した色はカラーコード変換ツールでHEXに変換すれば、そのままCSSに貼り付けられます。

配色は、色相環・配色パターン・70:25:5の比率・トーンという4つの考え方を押さえるだけで、感覚に頼らず安定した結果を出せるようになります。まずはメインカラーを一つ決め、ツールで候補を広げながら、自分の手でパレットを組み立ててみてください。実際に色を動かして比べることが、配色を身につける一番の近道です。

なお本記事は一般的な情報提供を目的としたものであり、最適な配色は媒体・ブランド・アクセシビリティ要件によって変わります。最新の公式情報やガイドラインを確認のうえ判断してください。