3色までと聞きました。白や文字の黒、写真の色も数えるんですか？
PORT編集部3色は、最初に配色を整理するための目安です。背景や見出しなど自分で指定する色を先に決め、写真を含めた画面全体で、散らかって見えないか確かめましょう。
「配色は3色まで」と聞くと、白を入れたらあと2色しか使えないの？と迷いますよね。色数に絶対の上限があるわけではありません。初心者が大切にしたいのは、色を数えることより、増やした色に理由があるかです。写真やグラフが入る場合も含め、判断の仕方を説明します。
最初は背景・主役・強調の2〜3色を中心にすると整理しやすくなります。白や文字色、濃淡、写真を機械的に数える必要はありませんが、見た目への影響は確認しましょう。
3色は、迷いを減らす目安
3色に絞ると、同じ役割の色を何種類も使うことが減ります。見出しは青、次の見出しは赤、その次は紫という状態より、同じ青でそろえたほうが構成をつかみやすくなります。
初心者向けの体験レッスン。
初心者向けの体験レッスン。
3色でも全てを鮮やかに広く使えば、強い印象になります。逆に4色でも、淡い背景と濃い文字に、少量の色を役割ごとに使えばまとまることがあります。
白・黒・濃淡はどう数える？
| 色の種類 | 考え方 |
|---|---|
| 白・薄い灰色の背景 | 土台として決める。広い面なら印象への影響も大きい |
| 濃い灰色の本文 | 文字用の共通色として固定する |
| 同じ青の濃淡 | 同系色として整理できるが、濃さを増やしすぎない |
| 写真の中の色 | 数え切る必要はない。全体の配色との相性を見る |
「白と黒は絶対に数えない」など、全てに通用する数え方はありません。実際の制作では、使うカラーコードをメモして、同じ役割で微妙に違う色が増えていないか確認するほうが役に立ちます。
写真があるときの整え方
花の写真にピンクと緑が入っているなら、見出しを写真の緑に近づける方法があります。すでに写真がにぎやかなら、背景は白にして余白を残すだけでも整理できます。
写真から拾った色を文字に使う場合は、背景との読みやすさを別に確認しましょう。写真との相性がよくても、淡い色の小さな文字は読みにくくなります。
色を増やしてよい場面
グラフや区分を見分けるとき
4つのデータを比較するグラフなら、区分に応じて4色使うことがあります。その場合も、色だけで区別せず、項目名・線の種類・記号などを添えましょう。3色に収めるために違いを分かりづらくする必要はありません。
ブランドや企画に理由があるとき
子ども向けイベントで多彩な楽しさを伝える、複数のカテゴリーを示す、といった目的があるなら、色を増やす理由になります。ただし、通常の本文や共通のボタンまで毎回変えると、操作の手掛かりが揺らぎます。
色数を増やす前に、ベース・メイン・アクセントの役割を決めておくと判断しやすくなります。
散らかった配色を直す順番
- 同じ役割の色を1つに統一する
- 背景や飾りの彩度を控えめにする
- 目立たせる場所を1〜2か所に絞る
- 写真を置いた状態で余計な色を減らす
- 文字の読みやすさを確認する
何色使ったか分からないくらい、細かな色が増えてしまいました。
PORT編集部まず見出し・本文・背景・ボタンの色をメモしてみましょう。同じ見出しなのに別の色になっている部分をそろえるだけでも、整理しやすくなります。
薄い青をいくつも作るより、見出し用・囲み用の2段階に固定すると再現しやすくなります。濃淡の調整は、色相・彩度・明度も参考にしてください。
2色から始める練習
まず白い背景と濃い青だけで、タイトル・本文・ボタンのある告知を作ります。ボタンは濃い青に白い文字。次に「新着」のラベルだけに別の色を足してみましょう。追加した色で何が見つけやすくなったか説明できれば、足す理由ができています。
