デザイナー・運用・フロント素材担当向け。PNG 色彩管理で sRGB と Display P3 を整理し、ICC／書き出し・プレビュー・透明チャネル・デザイン納品検収までを短くまとめます。リモート Mac で検証環境を固定すると説明が安定します。
① なぜモニター間で PNG が偏色するのか
Display P3 と sRGB では彩度の高い色ほど差が出ます。P3 のまま書き出すとブラウザ／OS の変換で濃淡がばらつき、プレビューと Chrome では透明チャネルだけ違和感が出ることもあります。正とする色空間と ICC の扱いを先に決めないとデザイン納品検収が揉めます。バッチ時の色ずれは 大判 PNG の色ずれとリモート M4 参照。
② ツール別：ICC／色彩記述と書き出しプリセット比較表
Web／アプリ向けマスター PNG の目安。P3 マスター運用は README に明記してください。
| ツール | ドキュメント／キャンバスの色彩 | PNG 書き出しの推奨 | ICC／プロファイル |
|---|---|---|---|
| Figma（Mac） | 基本 sRGB。P3 参照フレームは個別確認 | sRGB・倍率固定、エクスポートをライブラリ化 | ICC は限定的。README に sRGB 前提を記載 |
| Sketch | ドキュメントのプロファイル依存。Web は sRGB 推奨 | Export プリセットで解像度・形式を統一 | カラー管理＋書き出し手順を文書化 |
| Affinity | working space を sRGB／P3 から選択 | 8-bit、Web は sRGB 書き出し | ICC 埋め込みのオン／オフを統一 |
| Photoshop | 編集と書き出しの変換を分離 | 書き出しで sRGB 変換、UI は 8-bit PNG | プロファイル埋め込みを仕様で固定 |
| プレビュー／ブラウザ | — | チェッカー背景の上に重ねて確認 | OS ディスプレイプリセットを手順に含める |
一括出力の流れは Affinity／Sketch／Figma の PNG ワークフロー と併用するとプリセット差が減ります。
プレビュー検証ステップ（チェックリスト）
- 1 検証 Mac のディスプレイプリセットを記録し毎回同じ条件で開く。
- 2 プレビューで実寸・拡大。必要なら
sipsで一覧サムネを並べる。 - 3 Safari／Chrome で白・灰・黒背景のページに載せて比較。sRGB 仕様なら P3 画面では鮮やかに見える点を事前共有。
透明チャネル検収のチェックポイント
- 境界 アンチエイリアスに赤／青フリンジがないか。
- 余白 アルファ外にゴミピクセルがないか。
- 深度 Web は 8-bit＋アルファに統一し 16-bit 混入を検査。
③ リモート Mac 検証フロー（3 ステップ）
リモート Mac を検証の単一ソースにし、各 PC のキャリブレーション差を隔離します。
- 環境固定：VNC／SSH で同一ユーザー。ディスプレイ設定を手順書化。ご利用ガイドに沿って再現。
- サンプル比較：代表 3〜5 枚をプレビューとブラウザで並べ、スクショを証跡に。
- ゲート：命名・寸法・ICC 方針を満たすものだけ
approved/へ。差し戻しはチケットに理由を。
④ 一括検収：命名とアーカイブ
[email protected] のように倍率を含め、色空間は manifest.csv 等で color_space=sRGB と記録。zip／LFS にはハッシュかタグを付与。Makefile やシェル 1 本に再現手順を寄せるとデザイン納品検収が速いです。
⑤ FAQ：偏色と透明エッジ
Q. Windows でだけ薄い。 A. ガンマとブラウザ差が多い。sRGB 書き出し＋仕様明記＋サンプル数枚でスポット確認。
Q. P3 のまま Web 用 PNG にできるか。 A. ICC とブラウザ依存。一般 Web は sRGB マスターと P3 派生を分けるのが安全。
Q. 透明の縁が滲む。 A. 乗算アルファと書き出し背景（完全透明）を確認。Photoshop の辺の減光やラスタライズ設定も。
次のステップ：デザイン納品向けリモート Mac シナリオ
デザイン納品検収を回すチームほど、固定のリモート Mac が効きます。ホームで概要を確認し、購入・レンタルページからデザイン向けシナリオを選んでください。PNG の大量書き出し手順は M4・4K PNG バッチ、接続は ご利用ガイド（閲覧ログイン不要）。
PNG 一括書き出し・色彩検証を Mac mini M4 シナリオで安定運用
固定環境で sRGB／Display P3 の運用ルールを守り、デザイン納品検収をスケールさせます。