写真をデザインに使う：配色テーマとコントラスト確認

なぜ写真から色を取ると失敗しないか

「ピンクと水色でかわいい感じに」と頭で色を選ぶと、9割の場合バラバラの印象になります。理由はシンプルで、自然の中ではほぼ全ての色が「光の影響を受けた、ややくすんだ色」であり、頭で選ぶ純色（#FF0000 とか #00FF00）は自然界にほぼ存在しないからです。

写真から色を取ると、自動的に同じ光の下にある色を選ぶことになり、全体の調和が取れます。とくに風景写真は、晴天・曇天・夕方など光が統一されているのでデザインに使いやすいです。

5色テーマの作り方

デザインの基本「5色テーマ」を写真から作ります。

1. メイン色（1色）：写真で最も面積が大きい色。空なら水色、植物なら緑、夕焼けなら橙。
2. アクセント色（1色）：写真で目を引く小さな色。人物の服・花・看板など。メイン色の反対側の色相を選ぶと締まる。
3. 背景色（1色）：白に近い淡い色。写真の明るい部分から取る。
4. テキスト色（1色）：濃い色。写真の影の部分から取ると自然。
5. 補助色（1色）：メインとアクセントの中間。グラデーションや区切り線に使う。

本ツール（/img-color-pick/）で5回クリックして履歴に並べれば、5色テーマがすぐ作れます。

WCAGのコントラスト比を必ず確認する

きれいな配色を作っても、文字が読みづらいデザインは失敗です。Web Content Accessibility Guidelines (WCAG) 2.2 の SC1.4.3 Contrast (Minimum) では、本文と背景のコントラスト比に基準を設けています。

つまり背景色とテキスト色の組み合わせは必ず4.5:1以上。写真から取った色をそのまま使うと、淡い色同士で2:1になることが多く、その場合はテキスト色を「写真の影部分の濃い色」に置き換える必要があります。

被写体別：色の拾い方のコツ

実装に落とす：CSS変数として登録

取った5色をCSS変数として登録すれば、全ページで使い回せます。

:root {
  --color-main: #2A6FAA;       /* メイン：空の青 */
  --color-accent: #E07A3F;     /* アクセント：夕焼け橙 */
  --color-bg: #F5F0E8;         /* 背景：雲のクリーム */
  --color-text: #2A2520;       /* テキスト：影の濃茶 */
  --color-sub: #94B5D0;        /* 補助：薄い水色 */
}

このうち、本文用のテキストには `var(--color-text)`、背景には `var(--color-bg)` を組み合わせ、コントラスト比4.5:1以上を確認します。カラーコード変換でHEX→RGBに変換して、CSSで `rgba()` の半透明指定にも応用できます。

配色作成の落とし穴

• ・「気に入ったから」で色を増やしすぎる：5色を超えると統一感が崩れる。6色目以降は黒・白・グレーで対応。
• ・明度（HSLのL値）が近い色ばかり選ぶ：濃い色・薄い色のメリハリがないと「全部似てる」印象に。
• ・RGB値の合計が極端な色：純色（#FF0000 など）は写真からはほぼ取れないが、CSSで指定したくなる。やめておく方が無難。
• ・カラーブラインド（色覚多様性）を忘れる：赤と緑の区別がつきにくい方が日本人男性の5%程度いる。重要情報を色だけで伝えない。