ベースカラー・メインカラー・アクセントカラーとは?配色の役割分担を解説

記事内に広告が含まれています。

「好きな色を好きなだけ使う」という決め方では、メリハリのある配色にはなりません。

プロのデザインでは、色に「役割」を与えて考えるのが基本です。

この記事では、配色の役割分担であるベースカラー・メインカラー・アクセントカラーとは何かを、初心者向けに解説します。

基本の理解

まずは3つの役割それぞれの意味と、なぜ役割分担が必要なのかを押さえましょう。

ベースカラー・メインカラー・アクセントカラーとは、配色の中で色に与える3つの役割のことです。

同じ「青」を使うとしても、それを背景に広く敷くのか、ボタンだけに使うのかで意味が変わります。

つまり、色そのものではなく「その色に何の仕事をさせるか」を決めるための考え方です。

それぞれ次のような役割を持ちます。

ベースカラー:
背景や余白など、デザインの土台となる、最も広い面積を占める色。
白や薄いグレーなど、無彩色(白・黒・グレーのように色みを持たない色)や淡い色を使うことが多い。
メインカラー:
サービスのブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使う色)など、デザイン全体の印象を決める色。
アクセントカラー:
CTAボタン(申し込み・購入など、ユーザーに取ってほしい行動を促すボタン)など、ユーザーに一番気づいてほしい要素に使う、少量だが目立つ色。

身近な例で言えば、白い背景のWebサイトに、青いロゴとヘッダー、そしてオレンジの「申し込む」ボタンが置かれている構成がこれにあたります。

白がベースカラー、青がメインカラー、オレンジがアクセントカラーです。

色に役割を持たせることで、それぞれの色をどこにどれだけ使えばよいかの判断基準ができます。

役割分担がはっきりすることで、目立たせたい部分が本当に目立つ、メリハリのある配色になります。

「好きな色を好きなだけ使う」という決め方では、どの情報が重要かが伝わらない配色になってしまいます。

また、色の役割と使用する面積の割合をセットで考えないと、アクセントカラーのはずの色が広く使われすぎて主張が弱くなる、といったズレが起きてしまいます。

役割と面積は必ずセットで考えることが大切です。

3色の役割分担で陥りやすい失敗と、よくある疑問をまとめます。

アクセントカラーを使いすぎると、本来目立たせたかった要素が埋もれてしまい、アクセントとしての役割を果たせなくなります。「目立つ色だから」とあちこちに使うのは避けましょう。
3色の役割を決めずに配色を始めてしまい、結果的にどの色が一番重要なのか分からないデザインになってしまうことがあります。配色を始める前に、必ず役割を割り振っておきましょう。

Q. それぞれの色はどのくらいの割合で使えばいい?
A. ベースカラー約70%、メインカラー約25%、アクセントカラー約5%という比率が定番の目安として知られています。詳しくは色の割合の記事で解説しています。
Q. アクセントカラーは必ず必要?
A. 必須ではありませんが、ボタンやリンクなど「ユーザーに行動してほしい」要素がある場合は、アクセントカラーを用意しておくと、その要素へ視線を誘導しやすくなります。

役割と比率が分かったら、次は実際にどんな色を組み合わせるかを考えるステップです。色相環を使った配色パターンの選び方や、配色を手軽に試せるジェネレーターツールの使い方は配色の基本ルールとジェネレーターの紹介記事で解説しています。