PNG-8 失敗の本丸はディザ未確認・アルファ誤解・白フリンジです。デザイナー／納品向けに選定表・実務チェックリスト・透過検収・M4 一括の所要目安・サイズ FAQ を整理。色 sRGB／P3、自動巡検 OpenClaw、白抜き SKU EC QA と併用。
PNG-8 と PNG-24 の選定比較表
フラット表現でディザ許容・バイト重視なら PNG-8。グラデ・ソフト影・多段アルファが核なら PNG-24／32。キロバイト優先で後から縁取り事故を起こさないことが重要です。
| 観点 | PNG-8（インデックス） | PNG-24／32（トゥーカラー＋アルファ） |
|---|---|---|
| 色・グラデ | 256 色・バンディングはディザで緩和。フラット向き。 | 全色域・ランプ保持。 |
| アルファ | 1bit／単色透過寄り。ソフト影は難。 | フルアルファで合成が安定。 |
| 容量 | フラットな PNG-24 比で多くは 4〜7 割削減。 | 大きめ。再圧縮や損失 PNG と併用も。 |
| 用途 | アイコン・アトラス・KB 厳しいポータル。 | ヒーロー・影・ダーク厳密案件。 |
| 検収 | ディザ・パレット・縁の負荷高。 | 色は比較的楽。ICC は別確認。 |
ライト／ダーク両対応で承認が薄い場合は、縁取りリスクから PNG-24 寄りが無難です。
ディザ／パレットパラメータ実務チェックリスト
チケット／README に貼ってバッチと共有。
- パレット：既定 256。フラット＋QA 合意で 128／64。
- ディザ：写真系は 拡散。パターンはブランド指名時のみ（名称を記録）。
- 強度：写真 75〜100%、ベクター寄り 0〜35% から。
- 透過：UI はオン。JPEG 先なら不透明版別納。ソフト影は PNG-8 に頼らない。
- インターレース：原則 オフ。
- ICC：既定 sRGB。P3 は色彩記事に従う。
- CLI／ゴールド：確定コマンドを
EXPORT_PRESET.mdに固定。プリセットごと_gold.pngを先合意。
透明エッジと白フリンジの検収ステップ
フリンジは実背景の合成契約。チェッカーだけでは不十分。
- 3 背景：#000000・#FFFFFF・ブランド中間色の上に合成（Safari 等で目安）。
- 倍率：100／200／400%。
- 参照差分：PNG-24 と重ね 差分 ブレンドで縁のスペックルを検出。
- 白 SKU：#FFFFFF 上でリム確認。大量 SKU は EC 白抜き記事の表と整合。
- ダーク UI：#121212／#000000 で明マット残りを見る。
- 記録：レビュアー・背景・合格／不合格／例外承認をログ化。
リモート M4 の一括処理ルート（スクリプト／アクション）と所要時間の目安
同一プリセットの大量処理はリモート Mac mini M4 に逃がし、熱と競合を避けます。表は PNG 約 100 枚・複雑度混在時の目安帯です。
| 経路 | 自動化の内容 | 目安（100 ファイル） | 向く場面 |
|---|---|---|---|
| 手動「書き出し」 | ファイルごとに形式を人が選択。 | 45〜90 分 | 少数修正や単発納品。 |
| Photoshop／Affinity アクション | リサイズ、モード変更、Web 用保存、閉じるを記録。 | 20〜40 分 | 創作ステップをドキュメント内に閉じたいとき。 |
| シェル＋ pngquant／optipng | フォルダループ、JSONL ログ、しきい値検査。 | 3〜10 分 | フラグ固定のインデックス大量処理に最適。リモート M4 と相性よし。 |
| ImageMagick＋後段オプティマイザ | 幾何正規化のあと減色・無損しぼり。 | 5〜12 分 | ラスタソース混在で前処理が必要なとき。 |
pngquant ループ→optipng は契約に応じて。監視でドロップ運用。ログ型は OpenClaw 記事に合わせる。
リモート M4 は並列・ツール固定・SSH。大量 pngquant を制作端末から分離。
書き出し後のファイルサイズしきい値 FAQ
しきい値はフロント／CDN と決める予算線。表は出発点です。
| アセット種別 | 初期しきい値（インデックス PNG-8 目安） | エスカレーション |
|---|---|---|
| 16〜32px ツールバーグリフ | < 5〜12KB | 超過ならメタデータ重複や真彩色混入を疑う。 |
| タブ／ナビアイコン @2x | < 15〜35KB | PNG-24 と比較し、インデックスの優位が薄ければ再検討。 |
| カード／タイル系（Web） | < 80〜180KB | ディザノイズと LCP のトレード。許可なら WebP／AVIF 併設。 |
| ヒーロー／マーケ帯 | チーム定義（例 150〜400KB 帯） | PNG-8 は稀。使用時はバンディングのブランド承認を必須化。 |
Q. 小さいのに却下？
A. 実機で見た目劣化、またはディザで圧縮効率が落ちた場合。品質か形式を見直す。
Q. @2x／@3x の上限
A. 画素面積に比例させ、bytes_max を倍率別にマニフェスト化。
Q. 管轄
A. デザイン＝見ため、フロント＝転送予算。共有表で直前差し戻しを防ぐ。
まとめ
PNG-8 は条件付き納品手段。チェックリストと実背景検収をセットにし、大量は リモート Mac M4 の CLI に。しきい値を監視へ載せると再現性向上。専用ノードで制作端末を空け、納期リスクを下げられます。