Display-P3画像の運用戦略 — CSS色とビットマップのハイブリッド

P3はsRGBより広い色域で、鮮やかなグラデーションやアクセントに向きます。ただしWeb全体の既定は sRGB です。配布画像をむやみにP3で出すと、端末/アプリ/ビューワ差で色ズレが起きます。本稿は「CSSのP3」×「sRGBビットマップ」のハイブリッドを前提に、例外時のP3画像運用までまとめます。

要点（TL;DR）

配布画像は原則sRGBに正規化。P3はCSSで演出する。
P3画像が必要なケースだけAVIF 10bit＋同構図のsRGB版を用意してフォールバック。
赤系/蛍光色/広いグラデは差が出やすい。P3端末とsRGB端末で目視確認。
OGP/サムネはsRGB/8bit/JPEGが安全（外部変換で色が変わるため）。

1. 戦略：CSSのP3 × sRGBビットマップ

sRGBを“土台”にし、UIのアクセントや背景グラデ、ホバー効果など演出をCSSのP3で足します。こうすれば画像の互換性を損なわず、対応端末では鮮やかに見せられます。

.btn {
  background: #7c3aed; /* sRGB */
  background: color(display-p3 0.63 0.33 0.90);
}
@supports not (color: color(display-p3 1 0 0)) {
  .btn { background: #7c3aed; } /* フォールバック */
}

テキスト色、影、グラデーション、ボーダーにも同様に適用可能。@supports でのフォールバックを忘れずに。

2. 例外：画像をP3で配る時の要件

P3画像はAVIF（10bit）で出力し、プロファイルを正しく埋める。
同構図のsRGB版も用意し、<picture>でフォールバック。
高彩度領域（赤/ピンク/蛍光）と広いグラデのトーン圧縮を確認。

<picture>
  <source type="image/avif" srcset="/kv-p3.avif 1x, /kv-p3@2x.avif 2x">
  <img src="/kv-srgb.jpg" width="1600" height="900" alt="キー・ビジュアル">
</picture>

P3画像を避けるほうが良いケース

WebViewや一部アプリは色管理が不完全です。ブランドカラーの一貫性が最重要なら、画像はsRGBに固定し、装飾はCSSで行いましょう。

3. よくある色ズレ：原因と対策

症状	原因	対策
Safariだけ鮮やか	P3画像をsRGB端末へ配信	画像はsRGB。鮮やかさはCSSのP3で付与
アプリ内WebViewで色が変	色管理が無効/実装差	画像はsRGB固定。P3画像は避ける
OGPの色が違う	プラットフォーム側で変換	OGPは sRGB/8bit/JPEG 推奨（関連：OGPテンプレ）

4. 確認手順（目視検証の標準化）

Mac Safari（P3対応）とWindows Chrome（sRGB）で同一ページを見比べる。
モバイル（iOS/Android）でも再確認。特に赤/蛍光/グラデを重点チェック。
破綻（段差/にじみ）や意図しない彩度差があれば、画像はsRGBへ、鮮やかさはCSSに移す。

5. 公開前チェック（8項目）

配布画像は原則sRGB（プロファイル/ICCの整合あり）。
CSSのP3にsRGBフォールバックを併記（@supports）。
P3画像を使う場合はAVIF 10bit＋同構図のsRGB版を用意。
赤/蛍光/広いグラデをP3端末とsRGB端末で目視検証。
OGPは sRGB/8bit/JPEG。外部再圧縮でも崩れない。
配信は srcset/sizes と優先度設計を遵守。
CLSゼロ：すべてのに寸法 or 親にaspect-ratio。
最終は /compare と /compressor で現物確認。

6. まとめ：P3は“演出”、配布はsRGBで安定

壊れない最短ルートは配布＝sRGB、演出＝CSSのP3。必要なときだけP3画像（AVIF 10bit）＋フォールバックで運用しましょう。