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

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

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

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

基本の理解

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

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

同じ「青」を使うとしても、背景にうっすら広く敷けばベースカラー、ロゴやヘッダーに使えばメインカラー、ボタンだけに使えばアクセントカラーというように、使う場所と量によって役割が変わります。

つまり、色そのものではなく「その色に何の仕事をさせるか」を決めるための考え方です。色を役者にたとえるなら、画面の中でどの役(配役)を任せるかを決めるイメージです。

なお、「青は信頼感」「赤は情熱」のような、色が持つイメージ(印象)とは別の話です。ここで決めるのは、その色が何を感じさせるかではなく、その色を画面のどこにどれだけ使うかです。

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

ベースカラー:
背景や余白など、デザインの土台となる、最も広い面積を占める色。
白や薄いグレーなど、無彩色(赤や青のような色みを持たない、白・黒・グレーの色。いわゆるモノトーン)や淡い色を使うことが多い。
メインカラー:
サービスのブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使う色)など、デザイン全体の印象を決める色。
アクセントカラー:
「申し込む」「購入する」のような、ユーザーにいちばんクリックしてほしいボタンなど、一番気づいてほしい要素に使う、少量だが目立つ色。
こうしたボタンはCTAボタン(CTA=Call To Action、行動喚起)と呼ばれる。

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

上の画面で言えば、背景や余白の白がベースカラー、ヘッダーや見出しの青がメインカラー、申し込みボタンのオレンジがアクセントカラーです。

白が画面のほとんどを占め、青が全体の印象を作り、オレンジはボタンの1か所だけなので、自然とボタンに目が行くのが分かると思います。

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

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

たとえばアクセントカラーが少量でよいのは、周りが落ち着いた色でまとまっている中に一か所だけ違う色があるからこそ、人の目が自然とそこに引き寄せられるためです。

インテリアやファッションでいう「差し色」と同じ考え方で、広く使えば使うほど目立たなくなります(詳しくは強調色の使い方とは?で解説しています)。

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

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

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

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

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

Q. それぞれの色はどのくらいの割合で使えばいい?
A. ベースカラー約70%、メインカラー約25%、アクセントカラー約5%という比率が定番の目安として知られています。詳しくは色の割合とは?配色の黄金比率70:25:5で解説しています。
Q. アクセントカラーは必ず必要?
A. 必須ではありませんが、ボタンやリンクなど「ユーザーに行動してほしい」要素がある場合は、アクセントカラーを用意しておくと、その要素へ視線を誘導しやすくなります。
Q. 具体的に何色を選べばいい?
A. ベースカラーは、迷ったら白や明るいグレーから始めると、ほかの色の邪魔をしにくく無難です。
メインカラーは、ロゴやブランドカラーがあればその色を使い、なければ伝えたい印象から1色選びます(落ち着きや信頼感を出したいなら青などの寒色、親しみやすさや元気さを出したいならオレンジなどの暖色、という具合です)。
アクセントカラーは、ベースカラーとメインカラーの中でしっかり目立つ色を選びましょう。
印象から色を選ぶ考え方は暖色・寒色とは?で解説しています。

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