P3→sRGB 変換で崩れない色管理 実務ガイド 2025

色が“濁る”“飽和しすぎる”といったトラブルの多くは、ICCとブラウザ実装の差異が原因です。本稿は制作〜配信の全行程で色の一貫性を保つための最低限の手順をまとめました。

制作アプリ（Photoshop/Sketch/Figma/Illustrator 等）ごとに色空間の既定動作が異なり、書き出し時にICCが脱落すると意図しない色ズレが発生します。配信面でもSNS/メール/OGPの再エンコードでICCが落ちやすく、sRGB固定が無難な場面がまだ多いのが実情です。

基本戦略

1. マスターは P3/16bit で保持し、配信用は sRGB/8bit に“明示変換”
2. ICC を正しく埋め込み（あるいは sRGB として明示）
3. JPEG/WebP/AVIF での色空間オプションを理解

補足: CSS Color Level 4 によりディスプレイ P3 の表示は拡大中ですが、画像側ICCと整合していないと破綻します。少なくともOGP/メール/広告等の横断配信は当面 sRGB固定が安全です。

参考: 色管理の基礎, P3配信の実務

形式別の実務メモ

AVIF

• nclx プロファイルで sRGB を指定、広色域→sRGB 変換は事前に実施
• 低品質設定で彩度が先に死ぬ傾向。写真は quality 50-65 から評価

WebP

• ICC 埋め込み可。減色の影響を受けやすいUI要素はPNGを検討

PNG

• UIやロゴなど厳密な色再現が必要な要素に有効。ICCを保持しつつ不要チャンク（tEXt など）は削除して膨張を回避

JPEG

• ICC を明示的に付与。モバイル閲覧の多い媒体では依然として強い

自動化レシピ（疑似コード）

# sRGB へ明示変換（ImageMagick例）
magick input-p3.tif -colorspace sRGB -profile sRGB.icc -strip output-srgb.tif

# AVIF 変換（sharp相当）
sharp output-srgb.tif --avif quality=60 chromaSubsampling=4:2:0

# WebP 変換（cwebp）
cwebp -q 80 -m 6 -metadata icc -af output-srgb.tif -o output.webp

QA チェックリスト

• [ ] ブラウザ/OS 組合せでの色再現を Canvas でも比較

• [ ] OGP 等のサムネは sRGB 固定（SNS側の再エンコードを想定）

• [ ] 印刷用途へは別フロー（CMYK）を分離

レンダリングインテントの選び方（要点）

色域外圧縮の方針で結果が大きく変わります。

• 相対的比色（Relative Colorimetric）
  • 特徴: ホワイトポイントを合わせ、色域外は境界に切り詰め
  • 向き: UI, ブランドカラー, ロゴなど定義色を崩したくない要素
• 知覚的（Perceptual）
  • 特徴: 全体の色関係を保つために広く再マッピング
  • 向き: 写真, グラデーション, スキントーン重視のビジュアル
• 飽和（Saturation）
  • 特徴: 彩度優先でビビッドに寄る
  • 向き: 情報可視化, プレゼン用グラフ（実務では使用頻度低）

実務TIP: P3→sRGB の写真は「知覚的」、UI要素は「相対的比色」を基本にし、混在ページでは要素単位でレンダリングを分けるか、変換前にレイヤーを分離して書き出します。

# ImageMagick: レンダリングインテント指定例
magick input-p3.tif \
  -intent Perceptual \
  -profile P3.icc -profile sRGB.icc \
  -strip output-srgb-perceptual.tif

アプリ別ワークフロー（現場メモ）

• Photoshop
  • 作業: P3/16bit/ICC埋め込み、プレビューは「Proof Setup: sRGB」
  • 書き出し: Export As で「Convert to sRGB」にチェック、ICC を付与
• Illustrator
  • 作業: ドキュメントカラーモード RGB、カラープロファイルは Display P3
  • 書き出し: 「sRGB に変換」を有効、SVGは color-gamut: sRGB 前提で検証
• Figma/Sketch
  • 前提: UIプレビューは端末依存。エクスポートで「Convert to sRGB」相当のオプションを強制
  • 注意: 背景ブレンドや半透明要素は書き出し後に色味確認

参考: P3 画像の配信実務, 色管理の基礎

計測と検証（ΔE / 実機）

• ΔE 目安: UI ロゴ ≤ 2、写真 ≤ 3 程度なら目視差は小さめ
• 実機確認: P3 対応 iPhone / sRGB 相当の PC ノートで見比べ
• パターン: グラデーション、スキントーン、ブランドカラーを個別確認

# 例: rawpedia の icc test patches で比較（擬似コマンド）
compare-dE input-p3.tif output-srgb.jpg --ref sRGB.icc --patches skin,brand,gradients

自動化パイプライン（Node/Sharp 擬似コード）

import sharp from 'sharp'

async function toSRGB(input: Buffer) {
  return sharp(input, { unlimited: true })
    .withMetadata({ icc: 'sRGB.icc' })
    .pipelineColorspace('srgb')
    .toFormat('avif', { quality: 60, effort: 5 })
    .toBuffer()
}

運用TIP: 透過要素や UI アイコンは PNG/WebP に分岐。nclx を使う AVIF では sRGB 指定を忘れない（広色域のまま持ち込まない）。

症状→原因→対処 早見表

• 写真がくすむ → sRGB 変換時に相対的比色でクリップ → 知覚的で再変換
• ロゴ色がズレる → 書き出し時に ICC が落ちた → sRGB へ変換し ICC 埋め込み
• SNS/OGP で色変 → プラットフォーム側の再エンコード → sRGB/JPEG 固定でアップ、事後確認

FAQ（抜粋）

Q. P3 のまま AVIF 配信はダメ？

A. ブラウザ表示は改善中ですが、SNS/アプリ/メールなど横断配信では崩れやすいです。まずは sRGB 固定で品質保証を優先。

Q. 画像と CSS color(display-p3 …) がズレるのは？

A. 画像側 ICC と CSS 側色管理の整合が崩れている可能性。どちらかに寄せて統一検証を。

まとめ

“広色域で作る／配信は sRGB で確実に”が基本。色管理トラブルは SEO 的にも品質低下として跳ね返ります。公開前に代表端末での目視確認を必ず行い、ICCの有無と表示差分をチェックリスト化して継続運用しましょう。