「資料の色をどう決めればいいか分からない」 「なんとなく色を付けたら、まとまりがなくなった」
配色はセンスの問題に見えますが、実際には手順の問題です。
この記事では、お手本の写真から色を借りて配色を組み立てる方法を整理します。ゼロから色を選ぶより、はるかに失敗しにくいやり方です。
INFO
結論： 色をゼロから考えないでください。好きな写真から抜き出すのが、最も早く確実です。
1. なぜ写真から色を借りると失敗しないのか
自然の風景や、プロが撮った写真の色は、同じ光の下で成立しているため、色同士の関係がすでに調和しています。
夕暮れの写真ならオレンジと紫が、森の写真なら深緑と黄緑と茶が、互いに喧嘩しない状態で並んでいます。この関係ごと借りてしまえば、色彩理論を知らなくてもまとまった配色になります。
お手本にしやすい題材
- 自然の風景（空、海、森、砂漠）
- 好きなブランドの商品写真
- 落ち着いた印象のインテリア写真
- 料理の写真（暖色系がほしいとき）
2. 写真から色を抜き出す
画像を読み込むと、その中で面積の大きい色を順に取り出せます。HEXとRGBの両方が得られるため、そのまま資料やCSSに貼り付けられます。
カラーパレット抽出ツール
画像から主要な色を抽出し、HEXとRGBのカラーコードを表示します。クリックするだけでコピーできます。
3. 抽出した色を役割に振り分ける
抜き出しただけでは配色になりません。役割を決めることで初めて使えるようになります。
定番の比率は 70：25：5 です。
| 役割 | 比率 | 選び方 |
|---|---|---|
| ベース | 70％ | 最も明るく淡い色。背景に使う |
| メイン | 25％ | 中間の色。見出しや図形に使う |
| アクセント | 5％ | 最も鮮やかな色。強調箇所だけに使う |
WARNING
最も鮮やかな色を背景に敷くと、目が疲れて内容が入ってきません。鮮やかな色ほど使う面積を小さくするのが原則です。
4. カラーコードの読み方
HEX（16進数）
#FF6B6B
└┬┘└┬┘└┬┘
赤 緑 青
各2桁が 00〜FF（0〜255）で、赤・緑・青の強さを表します。#FFFFFF は白、#000000 は黒です。
RGB
rgb(255, 107, 107) のように書きます。中身はHEXとまったく同じで、表記方法が違うだけです。
| 使う場所 | 一般的な表記 |
|---|---|
| Webサイト（CSS） | HEX |
| PowerPoint・Word | RGB |
| デザインツール | どちらも可 |
5. 読みやすさを必ず確認する
配色が美しくても、文字が読めなければ失敗です。
- 本文の文字と背景には、十分な明度差を確保する
- 淡い色の上に淡い色の文字を置かない
- 薄いグレーの文字は、思っている以上に読みにくい
TIP
判断に迷ったら、画像を一度グレースケールにしてみてください。白黒にしたときに文字が背景に溶けるなら、色があっても読みにくい配色です。
グレースケール化は、モノクロ変換ツールで確認できます。
モノクロ・セピア変換ツール
画像をグレースケールに変換できます。配色のコントラストが十分かを確認する用途にも使えます。
6. やりがちな失敗
① 色を増やしすぎる 強調したい箇所が増えるたびに色を足すと、どこも目立たなくなります。3色に絞り、強調は太字や余白で表現してください。
② 純色をそのまま使う
#FF0000 のような純度100％の色は、画面上でぎらついて見えます。写真から抜き出した色は自然に濁っているため、この点でも扱いやすくなります。
③ 意味と色が食い違う 警告を緑、成功を赤にすると混乱を招きます。慣習に沿った色を使ってください。
まとめ
- 配色は好きな写真から借りるのがいちばん早い
- 抽出した色に ベース70／メイン25／アクセント5 の役割を振る
- 鮮やかな色ほど面積を小さくする
- HEXとRGBは同じ色の別表記。用途で使い分ける
- 白黒にして文字が読めるか、必ず確認する
- 色数は3色まで。強調は色以外の手段も使う
センスではなく手順で決められると分かれば、配色で悩む時間は大きく減ります。