3色選んだのに、どの色を背景やボタンに使えばいいか分かりません。
PORT編集部色を「広い背景」「印象を作る主役」「目印」に分けてみましょう。色の名前より、何を担当させるかを決めると配置しやすくなります。
よい配色を見つけたのに、実際のデザインへ当てはめるとバランスが変わる。そんなときに役立つのが、ベース・メイン・アクセントという役割です。この記事では、講座の告知カードを使い、「色を選ぶ」から「使う場所を決める」までをつなげます。
ベースは広い背景、メインは印象を作る色、アクセントは注目してほしい場所に使う色です。面積の比率は目安として使い、目的と読みやすさを優先しましょう。
3つの色は、役割の名前
| 役割 | 使う場所の例 | 働き |
|---|---|---|
| ベースカラー | 背景・広い余白 | 全体の土台を作る |
| メインカラー | 見出し・帯・図形 | 印象や統一感を作る |
| アクセントカラー | ボタン・小さなラベル | 大事な部分へ目を向ける |
必ず別の色相を3つ用意する、という意味ではありません。白を背景に、青を見出しに、濃い青をボタンにする方法もあります。文字用の濃い灰色を、別に決めておくことも自然です。
告知カードで見る使い分け
自宅から参加できる、初心者向けの体験会。
この例では、見出しで講座の雰囲気を作り、ボタンで次の行動を見つけやすくしています。アクセントカラーを全部の見出しに使うと、「ここが大事」という差が小さくなります。
面積の比率は、目安で考える
70：25：5や60：30：10などの比率は、配色を整理するための目安です。Webサイトの文章が多いページと、写真中心のバナーでは色の面積が違います。数字を守るために不要な帯を足す必要はありません。
写真も色の面積に含まれる
大きな夕焼け写真があるなら、画面にはすでにオレンジが多く含まれています。そこへ鮮やかなオレンジ背景を足すより、白い余白で写真を引き立てる方法も考えましょう。
よくある失敗を直す
| 起きやすいこと | 直し方 |
|---|---|
| 全部の色が強い | 背景を淡くして、強い色の場所を絞る |
| アクセントがあちこちにある | 一番してほしい行動に使う |
| 文字まで淡い色にする | 本文用の濃い色を決める |
| ページごとに役割が変わる | 見出し・ボタンの色を共通にする |
ボタンを目立たせたくて色を変えました。でも、周りの飾りのほうが目立ちます。
PORT編集部まず飾りを控えめにしてみましょう。ボタンをさらに派手にするより、周りの色を減らすほうが、見つけやすくなることがあります。
色の差だけでなく、文字の大きさや余白も目立ち方に関わります。コントラストの基本も合わせて読むと、強調する方法を選びやすくなります。
実際に割り当てる手順
- 一番伝えたい内容と、してほしい行動を決める
- 背景に使うベースカラーを決める
- 見出しなどに使うメインカラーを決める
- ボタンやラベルにアクセントを少量使う
- 本文の文字色と、各背景の読みやすさを確認する
まず1枚の投稿で役割を決め、2枚目も同じルールで作りましょう。見出しの色が毎回同じなら、読む人も「ここがタイトル」と見つけやすくなります。役割をそろえることが統一感につながります。
色の数で迷ったときは、デザインで使う色は何色まで？で、写真や文字色の数え方も確認できます。
配色を決めた後の確認
よくある疑問：アクセントは必ず必要？
必須ではありません。静かに読ませたい記事画像なら、白と濃い青の2色でも十分です。ボタンもメインカラーで見つけやすければ、新しい色を足さずに済みます。足すことより、役割が伝わることを優先しましょう。
