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