デザイナーとフロントの素材担当向けに、Figma Dev Mode 周りで揉めやすいピクセル整合・倍率・色を、書き出し前に固定する意思決定表と、リモート Mac mini M4 上の一括検収に落とし込みます。ツール横の比較は Figma／Sketch／即時設計の PNG 比較、色管理の共通語彙は sRGB／P3 チェックリストと併読してください。
このページの構成
書き出しパラメータ表
Dev Mode は仕様と実ファイルの差が出やすいので、下表を README の一行に縮約してから書き出します。
| 項目 | 推奨（Web／アプリ UI） | 注意 |
|---|---|---|
| 形式 | PNG（24bit＋アルファ） | JPEG は境界・透明に不向き |
| 倍率 | 1x／2x／3x の整数のみ | 150% 等は CSS 側と二重計上になりやすい |
| 座標・寸法 | フレーム・スライスとも整数 px | サブピクセルで縁がにじむ |
| 色空間 | sRGB 一貫（契約どおり ICC 埋め or 無プロファイル） | 二重のプロファイル付与を禁止 |
| 背景 | 仕様書どおり「透明」または指定色 | Include background の誤タップに注意 |
| 命名 | コンポーネント_状態@2x.png 等、レイヤー名＝ファイル名 |
連番 ZIP 後処理は PNG 契約・バイトゲート と同型で管理可能 |
実行チェック：倍率が整数か／カラープロファイルがsRGB 方針か／スライス名がコンポーネント辞書と一致するか—の三つを書き出し直前に必ず確認。
一括検収チェックリスト
Apple Silicon のリモート M4 に出力フォルダを置き、CI でも手元でも同じコマンドで回せるようにします。
- 件数：Export 設定のスライス数とファイル数が一致（欠け・重複なし）。
- 幾何：各ファイルの WxH が「デザイン論理 px × 倍率」と一致（±0）。
- 容量：SKU ごとの
max_bytesを超えない。超過は pngquant 等の事前合意がある場合のみ。 - 透明：仕様が透明のスライスでアルファが実在（全不透明の誤書き出しを検出）。
- sRGB：
identify -verbose等で ICC／Colorspace を README と一致。 - 命名：プレフィックス・
@2x接尾辞・禁止文字がルール通り。 - ログ：sha256・ツール版・合否を JSONL に追記してから
out/へ昇格。
よくある質問（FAQ）
Q. 注釈の赤線が PNG に入る？
通常のスライス書き出しではオーバーレイは焼き込まれませんが、誤って注釈レイヤーをマスク対象に含めていないかフレーム範囲を確認してください。
Q. Dev Mode の数値と実装の px が 1 ずれる
ボーダー・シャドウの「内側／外側」、スケールモード、および小数点丸めの組み合わせが多いです。境界は「フレーム切り」と「バウンディングボックス切り」を README で一方に決めます。
Q. Windows クライアントから見ると色が違う
ディスプレイの広色域プレビューとファイルの ICC の組み合わせです。sRGB／P3 検収に合わせ、検証モニタのプロファイルも固定してください。
次のステップ
技術インサイト一覧・ホーム・購入／パッケージ・料金・ノード・ヘルプはログイン不要で閲覧できます。
リモート Mac M4 · Figma 納品
書き出しと検収を同じノードに固定
Dev Mode の設定を表に落とし、M4 で一括ゲート。手戻りを減らします。