デザイナー・運用・フロント素材担当の方が、リモート Mac 上で Sketch／Figma から一括 PNG を出力し、サイズ規範と命名規範で統一したい方向けに、実行可能な「手順＋検証チェックリスト」をまとめました。@1x／@2x／@3x の取り決め、プレフィックス・スライスルール、よくある偏色・解像度のトラブル対処まで掲載しています。
目次
なぜサイズと命名規範が納品効率に影響するか
サイズがバラバラだとフロントで srcset や Retina 対応が崩れ、命名が不統一だと自動化・検索・差し替えがしづらくなります。あらかじめ「何倍率で出すか」「ファイル名のルール」を決めておくと、リモート Mac で一括出力したあとの検証時間を減らし、納品後の差し戻しも防げます。
- サイズ統一：@1x／@2x／@3x の対応関係を設計と開発で共有し、実ピクセルが仕様通りか確認しやすくする。
- 命名統一：プレフィックス（例：アイコン種別）・サフィックス（倍率）・切图（スライス）ルールを決め、スクリプトや OpenClaw での一括検証が可能になる。
Sketch／Figma 一括 PNG 出力の常用設定比較
両ツールとも「対象を選んで一括エクスポート」が可能です。設定の違いを押さえておくと、リモート Mac で再現しやすくなります。
| 項目 | Sketch | Figma |
|---|---|---|
| 対象 | アートボード／スライス（Make Exportable） | フレーム／コンポーネント／選択レイヤー |
| 倍率 | 1x, 2x, 3x を個別 or 一括で指定 | 1x, 2x, 3x, 4x 等をエクスポート設定で指定 |
| 命名 | レイヤー名がそのままファイル名。プラグインで一括リネーム可 | レイヤー名がファイル名。サフィックスに @2x 等を付与可能 |
| 透過 | 背景なしで PNG 出力可能 | 「Include background」オフで透明 PNG |
@1x／@2x／@3x とサイズ規範表
デザインの 1x 基準サイズと、出力ピクセルを対応させた一覧です。仕様書やチェックリストにそのまま使えます。
| 1x（基準） | @1x 出力 | @2x 出力 | @3x 出力 |
|---|---|---|---|
| 24×24 | 24×24 | 48×48 | 72×72 |
| 48×48 | 48×48 | 96×96 | 144×144 |
| 100×100 | 100×100 | 200×200 | 300×300 |
| 375×812（画面） | 375×812 | 750×1624 | 1125×2436 |
検証時は「デザイン上の 1x サイズ × 倍率 ＝ 出力 PNG の幅・高さ」になっているかをチェックします。
命名規範（プレフィックス・サフィックス・切图ルール）と検証ポイント
命名を統一すると、リモート Mac で一括出力したあとのスクリプト検証や差し替えが楽になります。
- プレフィックス：種別（例
icon_、btn_、banner_）を付けておくとフィルタ・自動化しやすい。 - サフィックス：倍率を
@1x／@2x／@3xで統一（例[email protected]）。 - 切图（スライス）ルール：1 要素＝1 スライスにし、レイヤー名をそのままファイル名に使うと一貫する。
検証チェックリスト（命名）：
- ファイル名に禁止文字（スペース・日本語等）が含まれていないか
- 倍率サフィックスが仕様通りか（@1x／@2x／@3x）
- プレフィックスがチーム規定と一致しているか
- 拡張子が
.pngで統一されているか
実行可能な手順と推奨ワークフロー
リモート Mac で Sketch／Figma から一括 PNG を出し、サイズ・命名を検証するまでの流れです。
- 仕様の確定：倍率（@1x／@2x／@3x）、命名ルール（プレフィックス・サフィックス）、フォルダ構成をドキュメント化する。
- デザイン側の準備：Sketch ならスライスを「Make Exportable」、Figma なら Export 設定で PNG と倍率を指定。レイヤー名を命名ルールに合わせる。
- リモート Mac で一括出力：VNC／SSH でリモート Mac に接続し、Sketch／Figma で一括エクスポート。出力先を 1 フォルダにまとめる。
- サイズ検証：画像の実寸（幅・高さ）が仕様表と一致するかをスクリプトまたは OpenClaw でチェック。
- 命名検証：上記「命名」チェックリストでファイル名を検証。問題があればレイヤー名を直して再出力。
- 納品：検証済みフォルダを ZIP または共有リンクで渡す。
よくある出力の色ずれ・解像度問題のトラブルシューティング
- 色ずれ・偏色：カラープロファイルを sRGB に統一。Figma の「Include background」や Sketch の背景レイヤーを確認。リモート Mac のディスプレイ設定も sRGB 推奨。
- 解像度が想定と違う：デザインの 1x フレームサイズと、エクスポート倍率（@2x 等）の積が実際のピクセルになることを確認。Figma の「Export scale」や Sketch の「Export 2x」の設定を見直す。
- 透過が白く抜ける：背景を「なし」にして出力しているか確認。Figma は「Include background」オフ、Sketch は背景レイヤーを非表示 or 削除。
- ファイルが巨大で重い：必要以上に @3x／4x を出していないか、解像度上限（例 4K）を決めてから出力する。
次のステップ
一括 PNG の透明チャンネル・パラメータ比較はリモート Mac デザインワークフロー比較（Figma／Sketch／即時設計）で、Mac と Windows の違いはMac と Windows デザインワークフロー比較で詳しく解説しています。技術インサイト一覧から他の記事もご覧いただけます。リモート Mac で安定して一括出力・検証を回したい場合は、ホームまたはレンタルページから専用ノードの利用をご検討ください。