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