カラーパレットの作り方｜配色をまとめる基本手順と考え方

カラーパレットは、デザインや資料で一緒に使う色をまとめた「色のセット」です。きれいな色を何色も集めるより、まず用途と主役を決め、色の役割を分けてから調整すると使いやすいパレットになります。

1. まず主役になる色を1色決める

ブランドカラー、写真の中で最も印象的な色、季節のテーマ色など、最初の1色を決めます。主役が曖昧なまま色数を増やすと、まとまりにくくなります。

同じ色相の明暗でまとめるモノクロマティック、隣り合う色を使う類似色、反対側を使う補色、等間隔に3色を選ぶトライアドなどが代表的です。Adobe Colorのような色相環ツールも、この関係を使って候補を作ります。

背景・本文・ボタンが全部同じ明るさだと、要素の境界が分かりにくくなります。同じ色相でも明るさを変え、背景は淡く、文字は十分に暗く、アクセントは必要な場所だけ強くするなど役割を分けます。

Webでは美しさだけでなく可読性が必要です。通常テキストは背景とのコントラスト比4.5:1以上がWCAGのAA基準です。また、色だけでエラーや状態を示さず、テキスト・アイコン・線なども併用します。

色は面積が大きくなると印象が変わります。小さなスウォッチだけで判断せず、実際の背景・文字・写真と並べて確認してください。色しるべの配色ラボを使えば、候補色を並べて比較できます。

色数を増やすほど情報の優先順位は複雑になります。まず2〜3色で役割を作り、必要な場合だけ補助色を追加する方法が扱いやすいです。基本の配色関係は色の組み合わせも参照してください。