EC デザイン・運用向け。商品詳細の長尺バナーをPNGに分割（スライス）するときの意思決定マトリクスと検収チェックリスト、実行手順を整理しました。キーワード：PNG、EC、リモート Mac、スライス高さ、遅延読み込み、プレースホルダ。
巨大 PNG 一枚載せは LCP 悪化とファイル上限超過の両リスクがあります。スライス・命名・体積ゲートを先に固定し、リモート Mac M4 で一括すればローカルのメモリ・版差を隔離できます。自動命名と一括検証と併読すると運用が繋がります。
長尺詳細画像のシナリオとパフォーマンスリスク
縦長「説明図」はピクセル総量でデコード負荷が跳ねます。遅延読み込み（lazy）とプレースホルダを必須扱いし、ファーストビューだけ通常読み込みに限定するタグ付けをデザインで先に決めます。
| 判断軸 | リスク | 推奨アクション |
|---|---|---|
| 一枚納品 | LCP・デコード遅延・上限超過 | 高さスライス、幅はモール推奨に固定 |
| 透過＋白背景 | エッジのかすれ・線の断裂 | 透明エッジ処理を検収表に明記 |
スライス高さとブレークポイント対照表
モバイル幅 390〜430px 基準でスライス高さを決め、Retina は 2× 書き出しと論理高さの対応表を運用と共有します。
| コンテンツタイプ | 目安スライス高さ（論理 px） | 備考 |
|---|---|---|
| 写真・グラデ | 800〜1200 | 帯域優先 800、品質 1200 |
| フラット UI | 1000〜1600 | 平坦部はインデックス色候補 |
| 細線・境界線 | 境を跨がない高さ | 線は 1 枚に収める |
最大単辺ピクセル：原則 長辺 ≤ 4096px（厳モールは 2048px）。超過は幅削減かスライス増。
PNG-24 とインデックス色（PNG-8）のしきい値
セクションごとに最適化が変わります。深掘りはPNG-8 パレット意思決定マトリクスへ。
| 条件 | PNG-24（フルカラー） | インデックス色（256 色以下） |
|---|---|---|
| 半透明・ソフトシャドウ | 必須 | 不適切（バンディング） |
| 単色・アイコン的 | 可 | 推奨（容量削減） |
| 写真 | 推奨 | 原則不可（ディザ目立つ） |
リモート Mac 一括処理のディレクトリ構成とログ
リモート Mac M4 夜間バッチは入出力と失敗を分離し冪等再実行可能にします。
in/：書き出し元out/slices/{sku}_{detail}_seg{nnn}_w{width}.png：合格のみfailed/：寸法・バイト・チャネル NGlogs/{jobId}.jsonl：ハッシュ・終了コード・所要 ms
命名例：{sku}_detail_seg{3桁}_{variant}_w{px}.png。商品カットと揃えるならEC 白抜き一括・命名・QAに合わせます。
実行手順：書き出しパラメータ・命名・透明エッジ
- sRGB 埋め込み統一（P3 のまま納品しない）。
- ガイドでスライス高さ固定、偶数 px。
- 透明エッジ：透過のままか白敷きか SKU で一方に決め、縁 1px を目視＋サンプリング。
- セグメントバイト上限超過は
failed、oxipng／再スライスをログ付き再実行。 - マニフェスト（sku, seg, w, h, bytes, sha256）を CSV／JSON で渡す。
公開前：遅延読み込みとプレースホルダ検収 FAQ
Q. 全部 lazy でよいか。
A. ファーストビューは eager／デフォルト。折りたたみ内は lazy＋高さ確保。
Q. プレースホルダの検収は。
A. アスペクト一致、CLS 目安、低帯域での視認性。
詳細な Q&A はページ先頭の構造化データ（FAQPage）も参照してください。
一括検収チェックリスト（抜粋）
| 項目 | 合格条件 |
|---|---|
| 寸法 | 幅一致・高さ仕様どおり・長辺上限内 |
| チャネル | SKU 単位で透過／不透明を混在させない |
| ファイル名 | 正規表現 OK、連番欠番なし |
| 結合・lazy | 実機で継ぎ目なし、属性が仕様通り |
リモート Mac M4 で一括スライスとバッチ検収を専用環境に
EC 詳細のPNG スライスは、枚数・容量・遅延読み込みの設計がそのまま CV に効きます。ホームでサービス概要を確認し、料金・ノードからリモート Mac を選んで、夜間バッチとログ検収を自前ワークステーションから切り離してください。
スライス高さとPNG 形式しきい値を表で先固定し、命名・ログ・failed をセットにするとデザインと運用のズレが止まります。自前リソースが厳しければリモート Mac M4 に同じ検収を載せ替えてください。購入・レンタルはログイン不要で進められ、手順はご利用ガイドで確認できます。