Figma 自動レイアウトの UI でも、PNG はにじみ・サブピクセル継ぎ目・寸法不整合が起きがちです。デザイナー／フロント素材向けに、書き出し設定・サブピクセル・整列グリッド・@1x／@2x／@3x・sRGB の判断表と、リモート Mac mini M4 で回せる一括検収手順を 2026 年版としてまとめます。
命名・倍率・落とし穴は Sketch／Figma 一括 PNG チェックリスト、書き出しパラメータワークフロー、OpenClaw：自動命名と一括検証。色彩は sRGB／P3、ICC・無損再圧縮 を参照。
課題とシナリオ
自動レイアウトは余白を端数演算で配分するため、ラスタ化の丸め方がブラウザやプレビューとずれやすいです。典型的なつまずきは次のとおりです。
- アイコンや線がぼける：24×24 pt 想定なのにフレーム幅が 23.7 px などになり、1× 書き出しでアンチエイリアスが伸びる。
- スライス間の「髪の毛」隙間：隣接フレームのバウンディングが端数ずれし、スプライトやタイル背景で 1 px がちらつく。
- @2x 寸法の不整合：1× のみ渡し、または 1.5× などカスタム倍率で
srcsetとファイル命名が噛み合わない。 - 色の漂い：埋め込み sRGB ICC がなく、Safari／Chrome／Figma プレビューでニュートラルが一致しない。
一括納品ではウォッチフォルダやマニフェスト検証が一発で止まります。Figma ビルドとディスプレイを固定したリモート Mac が差分を減らします（透かし・アーカイブ手順 とも併用可）。
書き出しパラメータ表（決定表）
UI 用 PNG の単一の正として固定。例外は文書化してから逸脱。
| 項目 | 推奨 | 理由（デザイン／フロント） |
|---|---|---|
| 書き出し形式 | PNG（透過） | UI は可逆アルファ。JPEG はフリンジ要因。 |
| フレーム @1× | 幅・高さとも整数 px | サブピクセル漂移を抑え CSS 計算を単純化。 |
| レイアウトグリッド | 1 px＋スナップ、8 pt | 余白がラスタ端に乗りやすい。 |
| サブピクセル座標 | 避け整数へ | ネスト端数は @2×／@3× で累積。 |
| 書き出し倍率 | 1×・2×・3× のみ | @1x/@2x/@3x と srcset に直結。 |
| カスタム％ | 原則オフ | 非整数寸法でバッチ検証が壊れやすい。 |
| スライス単位 | 1 コンポ／フレーム＝1 ファイル | 差分・CI が安定。 |
| 色 | ドキュメント sRGB、ICC 方針固定 | Web 既定と整合。下記検収と併用。 |
@1x／@2x／@3x：1× pt 設計で、各倍率の px は round(幅_pt × scale)（scale ∈ {1,2,3}）。100×40 pt → 100×40／200×80／300×120。199×79 のような端数はレイアウト再調整。
sRGB・ICC 検収
- Web／Android は Figma を sRGB に。
- 書き出し後、
sips -g profile／exiftool で抜取または全件、sRGB 方針外は差し戻し。 - P3 マーケ資産はフォルダ分離。
一括検証フロー（リモート M4）
リモート Mac mini M4 で版を固定し、ノートを空けたまま検収します。
- フリーズ：Figma ビルド・フォント・ディスプレイプロファイルを README 化。
- 寸法：
px = pt × scaleを全倍率で検査。奇異値は端数座標・制約を修正。 - 偶数辺（任意）：フルブリードは動画連携で幅高さ偶数 px を要求することも。
- アルファ抜取：約 5% を 400% 拡大し、平坦部のヘイローを確認。
- ICC：抜取または全件で sRGB 方針どおりか確認。
- マニフェスト：
名前 → sha256 → WxHの JSON、失敗分のみ再出力。 - アーカイブ：tar 化。監視・ログ と揃え可。
sips や PNG QA を回すと速く、ローカル PC を塞ぎません。
クロスツール一貫性
Sketch／Affinity とも 1× グリッド・同一倍率セット・[email protected] 等の命名・sRGB を共有。整数寸法＋ICC で Xcode／Web への無言リスケールを防ぐ。Figma／Sketch 透過比較 も参照。
FAQ
@2× が Figma よりブラウザでぼける：プレビュー 100% でピクセル確認し、CSS を 1× pt で合わせる。キャンバス拡縮とブラウザ補間は別物。
余白は端数でもよい？
書き出し境界は整数 px に。余白端数よりバウンディング整数が重要。
アウトライン化：ベクタ線には有効なことも。ライブストローク依存は壊れやすいので 1 点試験してから一括。
圧縮：検収後に無損のみ。ImageOptim／CLI 比較 参照。