Webのカラーマネジメント実務（sRGBとDisplay P3の使い分け・実装レシピ）

要点（TL;DR）

• まずは sRGBで統一（画像・CSS・OGP）。事故を未然に防ぐ。
• 発色がCVに効く“点”だけP3を上乗せ（LPヒーロー、ブランドカラーの面積が大きい図版など）。
• 画像は picture + media=color-gamut:p3 の二段配信。CSS色は color(display-p3 …) を @supports で上書き。
• 書き出し＆比較は /compressor と /compare が最短。

1. なぜ“sRGB基準＋P3上乗せ”なのか

2. 最短フロー（5分）

1. 画像解像度を統一：本文 1200–1600px／一覧 600–800px。密度差は /srcset で吸収。
2. 既定はsRGB。全画像をsRGBで書き出し、CSS色も sRGB の値で定義。
3. 候補を洗い出し：LPヒーロー、ブランドカラーの大面積図版、製品写真の発色が重要な箇所。
4. P3版を追加：該当画像だけ P3 で書き出し、media="(color-gamut: p3)" で提供。
5. CSS色を上書き：ブランド主要色は color(display-p3 …) を @supports で上乗せ。

3. 実装レシピ：画像（sRGB→P3の段階配信）

sRGBを既定とし、P3対応環境だけP3版を差し替える構成です。width/height は必須（CLS対策）。

<picture>
  <!-- P3対応環境（上位） -->
  <source
    media="(color-gamut: p3)"
    type="image/avif"
    srcset="/img/kv-p3-1200.avif 1200w, /img/kv-p3-1600.avif 1600w"
    sizes="(max-width: 800px) 100vw, 800px" />
  <source
    media="(color-gamut: p3)"
    type="image/webp"
    srcset="/img/kv-p3-1200.webp 1200w, /img/kv-p3-1600.webp 1600w"
    sizes="(max-width: 800px) 100vw, 800px" />

  <!-- 既定（sRGB） -->
  <source
    type="image/webp"
    srcset="/img/kv-srgb-1200.webp 1200w, /img/kv-srgb-1600.webp 1600w"
    sizes="(max-width: 800px) 100vw, 800px" />
  <img
    src="/img/kv-srgb-1200.jpg"
    srcSet="/img/kv-srgb-1200.jpg 1200w, /img/kv-srgb-1600.jpg 1600w"
    sizes="(max-width: 800px) 100vw, 800px"
    width="800" height="450" loading="eager" decoding="async" alt="..." />
</picture>

書き出しは /compressor、仕上げの比較は /compare で行うと手戻りが少なくなります。

4. 実装レシピ：CSSカラー（P3を上乗せ）

まず sRGB の色を定義し、対応環境でだけ color(display-p3 …) に置き換えます。

/* 既定：sRGB（#1D4ED8） */
:root { --brand: #1d4ed8; }

.button { background: var(--brand); color: #fff; }

/* 対応環境で P3（color(display-p3 r g b)）を上書き */
@supports (color: color(display-p3 1 0 0)) {
  :root { --brand: color(display-p3 0.1176 0.3059 0.8470); } /* 近似のP3座標 */
}

5. 応用：いつP3を使うか