COLOR GUIDE
配色とは？配色の基本・配色理論・考え方
配色とは、複数の色を目的に合わせて組み合わせることです。色相・明度・彩度・トーン・面積・役割から、配色理論を実用的に整理します。
資料・研究ベース配色理論は候補を作るための枠組みです。用途・文化・ブランド文脈によって適切な配色は変わります。
配色とは、複数の色を組み合わせて、情報・雰囲気・機能を伝えることです。「相性のいい色」を探すだけでなく、背景・文字・主役・アクセントなど、各色に役割を与えるところまで含めて考えます。
配色の基本は4つの視点
- 色相：色相環上で近いか、離れているか
- 明度：明るさの差があるか
- 彩度：鮮やかさをどこに置くか
- 面積：どの色を広く、どの色を小さく使うか
代表的な配色理論
Adobe Colorでは、monochromatic、analogous、complementary、triadなど色相環の関係を使ってパレットを生成できます。これらは「正解」を決めるものではなく、候補を体系的に作るための枠組みです。
トーンをそろえる方法も有効
日本色彩研究所のPCCSでは、明度と彩度を複合したトーンで色を整理します。違う色相でもトーンをそろえると、印象の共通性を作りやすくなります。
実用ではアクセシビリティも配色の一部
Webや資料では、文字と背景のコントラスト、色覚の多様性、色だけに依存しない情報設計が必要です。見た目がきれいでも読めない配色は実用的ではありません。
迷ったら2〜3色から始める
まず2色または3色で役割を作り、必要なときだけ補助色を増やします。具体例は色の組み合わせと配色ラボで確認できます。
関連して読みたい記事
- 色の組み合わせ｜相性のいい配色と基本の考え方
- 補色とは？反対の色を組み合わせる配色の基本
- 2色の組み合わせ一覧｜相性のいい配色パターン
- 3色の組み合わせ一覧｜バランスのいい配色パターン
- デザインの配色｜文字・背景・アクセント色の組み合わせ方
配色は小さな色見本だけで決めない
同じ組み合わせでも、背景として広く使う色と小さなアクセントでは印象が変わります。実際の用途に近い面積で並べ、文字・写真・素材と一緒に確認してください。配色ラボで候補を比較し、Webや資料ならコントラスト、ファッションやネイルなら素材と光の当たり方まで見ると、机上の色相関係だけに頼らない実用的な配色になります。
参考にした資料
出典・確認情報
情報確認日2026-09-14
色相調和の分類を参照。トーンは日本色彩研究所PCCS、可読性はW3C WCAG 2.2を補助参照。
