サブカラーとアクセントカラーの決め方｜コーポレートカラーに足す色

コーポレートカラーの決め方では、メインカラー1色に、サブカラーを1〜2色ほど組み合わせるのが扱いやすいという目安を紹介しました。この記事では、その続きとして、サブカラーとアクセントカラーのそれぞれが果たす役割の違いと、配色の分量を考えるときの目安をまとめます。

ホームページや名刺・パンフレットを作る際、メインカラーだけでは画面や紙面の単調さを埋めきれず、かといって色を増やしすぎると統一感が崩れます。サブカラーとアクセントカラーを、それぞれの役割に沿って使い分けることが、この両立のための基本的な考え方です。

サブカラーとアクセントカラーの役割の違い

サブカラーとアクセントカラーは、どちらも「メインカラー以外の色」という意味では似ていますが、使う場所と目的が異なります。

色の種類	主な役割	使う場所の例
メインカラー	会社を思い出してもらう手がかりになる、最も広く使う色	ロゴ、ヘッダー、主要な見出し
サブカラー	メインカラーを引き立てる補助の色。広い面に使っても主張しすぎない	背景、見出しの下地、区切りの帯
アクセントカラー	「ここを見てほしい」という一点を強調する差し色	ボタン、リンク、価格やお知らせの強調部分

サブカラーは、メインカラーと組み合わせたときに喧嘩せず、かつ単調にならない程度の役割を担います。一方のアクセントカラーは、使う範囲を絞り込むほど効果を発揮します。ページ全体にアクセントカラーを多用すると、どこが本当の強調点か伝わらなくなり、クリックしてほしいボタンが埋もれてしまうことがあります。

サブカラーを選ぶときの考え方

サブカラーは、メインカラーの色相環での位置関係をもとに選ぶ方法があります。

• メインカラーに近い色相を選ぶ：まとまりのある落ち着いた印象になりやすい組み合わせです
• メインカラーの反対側に近い色相を選ぶ：互いを引き立て合い、メリハリのある印象になりやすい組み合わせです
• 彩度や明度だけを変える：同じ色相のまま、薄い色・濃い色を使い分ける方法です。背景色や濃淡での区切りに向いています

どの方法を選ぶ場合も、色覚の多様性に配慮した配色の考え方とあわせて、色の濃淡だけに頼らず、文字の太さや余白でも情報の区切りを伝えられるようにしておくと、より多くの人に見やすい配色になります。

アクセントカラーを選ぶときの考え方

アクセントカラーは、メインカラー・サブカラーのどちらとも違う色相を選ぶと、強調したい箇所が引き立ちやすくなります。ただし、次の点には注意が必要です。

• メインカラーが暖色系（赤・オレンジなど）の場合、アクセントカラーも暖色系にすると、強調したい部分が埋もれやすくなります
• 注意喚起や警告の意味合いで使われることがある赤をアクセントカラーに選ぶ場合、本当に注意を引きたい場面（エラー表示など）と役割が重ならないか確認しておくと、意味の混同を避けられます
• アクセントカラーは、ボタンの背景色だけでなく、文字色やアイコンの色など、複数の場所で使うことを想定し、組み合わせたときの見やすさを確認します

配色の分量を考える

配色の解説では、「メインカラー70%・サブカラー25%・アクセントカラー5%」「60%・30%・10%」のような具体的な比率が紹介されることがあります。こうした数字は分かりやすい目安ですが、守らなければならない決まりではありません。どの比率が正解ということはなく、サイトや印刷物の内容によって調整が必要になります。

数字そのものより大切なのは、次の順番の考え方です。

1. メインカラーを最も広い面積に使う：背景や全体の基調となる部分
2. サブカラーを次に広い面積に使う：見出しの下地や区切りなど、メインカラーを補う部分
3. アクセントカラーは最小限にとどめる：ボタンやリンクなど、行動を促したい一点に絞る

この順番を守ったうえで、実際の画面や紙面を見ながら、色の主張が強すぎないか、強調したい部分がきちんと目立っているかを確認していく進め方が、数字を厳密に守ることよりも実務的です。

決める手順

1. コーポレートカラー（メインカラー）を確認する（コーポレートカラーの決め方を参照）
2. メインカラーとの関係（近い色相か、反対側の色相か）をもとに、サブカラーの候補を1〜2色挙げる
3. 強調したい操作（ボタン・リンクなど）を洗い出し、アクセントカラーの候補を1色挙げる
4. メインカラーを最も広く、アクセントカラーを最小限に配置した画面案を作り、強調点が埋もれていないか確認する
5. 色の濃淡だけに頼らず、文字の太さや余白でも情報の区切りが伝わるか確認する

確認のチェックリスト

• サブカラーとアクセントカラーを、同じ色で兼ねていないか
• アクセントカラーを使う箇所が、ページ全体で多くなりすぎていないか
• メインカラーが最も広い面積を占めているか
• 色の濃淡だけでなく、文字の太さや余白でも情報の区切りが伝わるか
• 名刺や看板など印刷物に展開したとき、画面と同じ印象で見えるか

まとめ

• サブカラーは背景や面に使う補助の色、アクセントカラーはボタンなど一点を強調する差し色という役割の違いがある
• アクセントカラーは使う範囲を絞り込むほど効果を発揮する
• 配色の分量で紹介されることがある比率は、決まりではなく目安として参考にする
• メインカラーを最も広く、アクセントカラーを最小限に、という順番で実際の画面を見ながら調整するのが実務的な進め方

色の決め方やブランドとしての一貫性のある使い方はコーポレートカラーの決め方、ロゴや色の使い方をまとめたルールはブランドガイドライン、画面と印刷の色の違いはRGBとCMYKの考え方でまとめています。サブカラー・アクセントカラーを含めた配色のご相談はサービスと料金からご確認いただけます。