アクセントカラーとは？ベース・メイン・サブ色との割合と使い方
アクセントカラーとは、配色の中で視線を集めたい場所に使う色です。60・30・10の割合、ベース・メイン・サブカラーとの違い、決め方、Web/UIでの使い方、コントラストの注意点まで解説します。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。
コントラストは、文字と背景など2つの要素の見え方の差です。デザインでは印象だけでなく、文字の読みやすさやアクセシビリティにも関わります。
アクセントカラーは、配色の中で視線を集めたい場所や、重要な情報を目立たせるために使う色です。ボタン、見出し、リンク、アイコン、差し色などに使われます。
アクセントカラーは「派手な色」ではなく、配色の中で役割を限定して目立たせる色です。よく使われる60・30・10の考え方は便利な目安ですが、絶対ルールではありません。背景や文字などのニュートラル色が大部分を占めるデザインも多く、実際には用途・面積・コントラストで調整します。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1アクセントカラーとは？
アクセントカラー（accent color）は、配色の中で特に目を引かせたい部分へ使う色です。たとえばWebサイトならCTAボタン、プレゼン資料なら重要数値、インテリアならクッションや小物などが分かりやすい例です。
| 役割 | 主な用途 | 考え方 |
|---|---|---|
| ベースカラー | 背景・余白・大きな面積 | 全体の土台。白・生成り・グレーなどニュートラル色も多い |
| メインカラー | ブランド・主役・大きな見出し | そのデザインらしさを作る中心色 |
| サブカラー | 補助・区切り・階層づけ | メインを支え、単調さを防ぐ |
| アクセントカラー | ボタン・強調・差し色 | 使う場所を絞り、視線を誘導する |
大事なのは、色名ではなく役割で考えることです。同じ赤でも、背景全面に使えばベースカラーになり、ボタンだけに使えばアクセントカラーになります。
アクセントカラーの割合は何％？60・30・10は「目安」
配色では「60・30・10」という比率がよく紹介されます。米国政府のデザインシステムUSWDSでも、primary・secondary・accentの色群をおおよそ60・30・10の関係として考えられると説明しています。ただし同時に、ニュートラルなbase色が実際には最も大きな面積を占める場合が多いとも明記されています。
「アクセントカラー＝必ず画面の10％」ではありません。ボタン1個でも十分に目立てば、実面積は数％以下でも機能します。逆に10％使っても、周囲との明度差や彩度差が小さければ目立たないことがあります。
| 比率の目安 | 役割 | 例 |
|---|---|---|
| 約60% | 主な色面・土台 | 背景や大きな面 |
| 約30% | 第二の色 | カード・見出し・補助エリア |
| 約10% | アクセント | CTA・重要数値・アイコン |
したがって、比率は「色の役割を分けるための出発点」として使い、最終的には実画面・印刷物・空間で見たときのバランスで調整します。
アクセントカラーの決め方｜5つの順番
1. 先に「何を目立たせたいか」を決める
色を選ぶ前に、アクセントの役割を決めます。購入ボタン、問い合わせ、重要数値、キャンペーン、選択中の状態など、目立たせたい対象が複数ある場合は優先順位を付けます。
2. ベース・メインカラーを決める
アクセントカラーだけ先に選ぶと、全体の配色が散らかりやすくなります。まず背景や大きな色面、次にブランドや主役となるメインカラーを決め、その上で差し色を選びます。
3. 「違い」が分かる色を選ぶ
アクセントは周囲との差があって初めて機能します。色相差だけでなく、明度・彩度も確認しましょう。青い背景に少し違う青を置くだけでは目立たない場合があります。
4. 使う場所を限定する
同じアクセント色を、ボタン、見出し、背景、装飾、本文リンクなど全部に使うと、どこが重要なのか分からなくなります。アクセントは「重要な場所だけ」に使う方が効果的です。
5. 最後に読みやすさを確認する
目立つ色でも、文字と背景のコントラストが足りなければ読みづらくなります。Webでは、WCAGの基準として通常テキストは4.5:1以上、大きな文字は3:1以上が目安です。
アクセントカラーの選び方｜色相・明度・彩度で考える
色相差を大きくする
メインカラーと離れた色相を選ぶと、差が分かりやすくなります。たとえば青系のデザインへ黄・橙系を入れると強い視線誘導を作れます。
明度差をつける
同系色でも、明るさを大きく変えるとアクセントになります。濃紺の背景に明るい水色、淡いベージュの背景に濃いブラウンなどです。
彩度差をつける
全体をくすみ色でまとめ、重要箇所だけ鮮やかな色を使うと、色相を大きく変えなくてもアクセントを作れます。
すぐ試せるアクセントカラーの配色例
ネイビー × 白 × オレンジ
落ち着いたネイビーを主役にし、オレンジをボタンや数値へ使う構成です。明度差・色相差の両方を作りやすく、アクセントの役割が分かりやすくなります。
ベージュ × ブラウン × 深いグリーン
自然素材を思わせる落ち着いた配色です。アクセントを高彩度色にせず、深い緑で差を作る例です。
淡いピンク × グレー × ワインレッド
淡い色を土台にして、暗い赤紫を少量使う例です。「アクセント＝原色」にせず、明度差で目立たせています。
Web・UIでアクセントカラーを使う場所
| 場所 | 向いている使い方 | 注意点 |
|---|---|---|
| CTAボタン | 購入・送信・問い合わせなど主行動 | 他のボタンと同じ強さにしすぎない |
| リンク | クリックできることを示す | 色だけでリンクを表現しない |
| 選択状態 | 現在地・選択中・アクティブ状態 | 枠・アイコン・文字も併用 |
| 重要数値 | KPI・価格・締切など | 強調しすぎると全体が騒がしくなる |
| 通知 | 成功・警告・エラー | 赤・緑だけに意味を依存しない |
USWDSでは、色は注意を引き重要性を示す道具である一方、人によって色の識別には差があるため、色だけで意味を伝えないことを推奨しています。
アクセントカラーとブランドカラーは同じ？
同じ場合もありますが、必ず同じではありません。
- ブランドカラー：ブランドの識別や印象を担う色
- メインカラー：その画面・資料で中心となる色
- アクセントカラー：目立たせたい場所へ限定して使う色
ブランドカラーが鮮やかな赤でも、背景や見出しに広く使っているなら、その画面ではメインカラーとして機能しているかもしれません。反対にブランドカラーをCTAだけに絞れば、アクセントとして働きます。
アクセントカラーでよくある失敗
アクセントが多すぎる
赤・黄・緑・青などを全部「重要色」として使うと、視線が分散します。まず一番重要な行動を決め、アクセントの役割を絞りましょう。
鮮やかなら目立つと思っている
彩度が高くても、背景と明度が近ければ文字は読みにくくなります。アクセントの強さと、可読性は別に確認します。
補色なら必ず相性がいいと思う
補色は強い対比を作れますが、同面積・高彩度で並べると刺激が強くなります。片方をアクセントへ回し、面積や彩度を調整すると扱いやすくなります。
「60・30・10」を固定ルールにする
比率は便利な目安ですが、ロゴ、アプリUI、編集デザイン、インテリアなど用途によって最適な面積は変わります。重要なのは数字を守ることより、役割が明確かどうかです。
アクセントカラーを決めるチェックリスト
- 最も目立たせたい対象が決まっている
- ベースカラーとメインカラーが先に決まっている
- アクセントを使う場所が限定されている
- 周囲との明度・彩度・色相差が確認できている
- 文字と背景のコントラストが確認できている
- 色だけで「成功」「エラー」「選択中」を伝えていない
- 実際のスマホ・PC・印刷物などで確認している
よくある質問
アクセントカラーは何色がいいですか？
一律に決まる色はありません。ベース・メインカラーとの差、目立たせたい目的、ブランド、アクセシビリティを見て選びます。
アクセントカラーは10％にすべきですか？
10％は目安です。実際には数％でも十分な場合があります。画面や紙面の中で役割が明確になる量へ調整してください。
アクセントカラーは補色がいいですか？
補色は強い対比を作りやすい選択肢ですが、必須ではありません。明度差や彩度差だけでアクセントを作ることもできます。
アクセントカラーと差し色は同じですか？
かなり近い意味で使われます。差し色はファッションやインテリアでよく使われ、アクセントカラーはグラフィック・Web・UIなどでも広く使われます。
コメントを残す