SVG はスケールと差分管理に向き、本番では依然として PNG バンドルが必要な場面が多いです。2026 年の納品では、見た目のシャープさは「出力ピクセル＝論理ピクセル×倍率」で決まり、口頭の「高 DPI」だけでは足りません。エンジニアが img に渡すのは最終ピクセル寸法であり、メタデータの DPI は参照されない経路がほとんどです。本文では sRGB／Display P3 の比較表、論理ピクセル・@2x／@3x と DPI の整理、主要ツールと CLI のパラメータ、リモート Mac M4 一括処理の検収チェックリストをまとめます。ホームのサービス概要とあわせて、技術インサイト一覧から関連記事へ進めます。
① 色彩空間の意思決定（比較表）
Mac PNG の色彩管理（sRGB／Display P3） と同じく、「母版の色彩空間」と「配布の色彩空間」を文書化してください。ラスタライズはベクターの色をピクセル格子に落とす瞬間なので、ここで初めて「どのプロファイルの値として焼き付けるか」が確定します。下表は SVG→PNG の意思決定用です。納品前に README にチャンネル別の色空間を 1 行で書いておくと、検収時の口頭説明が減ります。
| シーン | 推奨の書き出し色彩 | 母版の扱い | 誤った選択のリスク |
|---|---|---|---|
| Web／ミニプログラム／一般的な運用バナー | sRGB 8bit PNG | P3 画面で制作しても、書き出し前に sRGB へ変換 | ICC ラベルだけ変更し実変換なし → 他端末で彩度異常やグレー化 |
| ブランド KV、広色域を残すキャンペーン用パック | Display P3 専用ディレクトリ＋リスト明記 | P3 母版 SVG／デザインを保持 | 既定 sRGB パックと混在 → フロントが誤ディレクトリを参照 |
| iOS スライス・アプリ内ビットマップ | 多くの場合 sRGB（チーム HIG に従う） | iOS アイコン／PNG 納品マトリクス と整合 | @3x 欠落、審査用素材との色空間不一致 |
| 印刷用ではない画面プレビュー PNG | プレビューは sRGB、印刷は CMYK 別ライン | 300 DPI プレビューを唯一の正としない | 画面倍率と印刷加網の混同 |
チャネルが増えるほど、「sRGB 既定パック」と「P3 オプション」をディレクトリ単位で分けたほうが安全です。混在フォルダはフロントのインポートミスや CMS の誤参照を招きやすく、検収ログだけでは後追いが困難になります。
② 論理ピクセル・倍率・DPI の対応
覚えておくべきは 倍率は幅・高さのピクセルに掛けることです。下表は論理幅 W・論理高 H（pt または CSS px）を例にしています。DPI 列はメタデータとしてよく使う目安（72／96 基準で @2x は 144／192 など）ですが、検収は常にピクセル数が正です。デザイナーとフロントが同じ用語で話すには、「論理 24px＝@2x なら 48px 出力」のように 1 例をチケットに貼ると齟齬が減ります。
| リソース／倍率 | PNG ピクセル（幅×高さ） | よく使う DPI メタデータ（目安） | 検収の合言葉 |
|---|---|---|---|
| 基準 @1x | W × H |
72 または 96（ツール既定による） | 注釈の論理寸法と一致 |
| @2x | (W×2) × (H×2) |
144（72×2）または 192（96×2） | 縦横とも 1x の整数倍 |
| @3x | (W×3) × (H×3) |
216 または 288 | 同上＋エンジニア命名と一致 |
SVG に絶対サイズがなく viewBox のみの場合は、ソースまたはエクスポートコマンドで「設計基準幅」を先に決め、倍率ごとに PNG を生成してください。同一アイコンがスクリプトごとに別の論理ピクセルになるのを防ぎます。長辺やファイル数が増えるほど、手元 Mac を占有せず リモート Mac にキューを載せたくなるはずです。夜間キューやスライス戦略は M4・4K PNG バッチ書き出し の「版固定＋manifest」思想と共通です。DPI を後から sips 等で書き換える作業は、ピクセルが正しければ優先度を下げて構いません。
③ デザインツールとバッチスクリプトのパラメータ
Affinity／Sketch／Figma の PNG ワークフロー と接続する場合、SVG を中間形式にするかコンポーネントから直接書き出し、幅・高さ＝論理×倍率 を厳守し、色彩は原則 sRGB（P3 専用パックを別ける場合を除く）にします。フィルタやブレンドモードが重いアートは CLI の単純変換で再現が落ちることがあるため、その類はソースアプリの書き出しを正とし、CLI はアイコンや単純図形の量産に寄せると安全です。
| 手段 | パラメータの要点 | 向くケース |
|---|---|---|
| Figma／Sketch | PNG＋倍率（2x、3x）またはカスタム「w×倍率」、色彩は sRGB | コンポーネント化 UI、稿どおりの表現 |
| Affinity Designer／Photo | SVG を開きピクセル寸法を固定 → プロファイルを sRGB に変換してから一括 | 複雑なグラデ、印刷データと同源 |
| Adobe Illustrator | アセット書き出しやスクリプト：ピクセル単位で縦横指定、sRGB プロファイルに同期 | 大量アートボード、アクション運用が成熟したチーム |
| Inkscape CLI | inkscape file.svg --export-type=png --export-width=<W×scale>（縦横の一方をロックして歪み防止） |
ヘッドレス一括、ビルドへの組み込み |
| rsvg-convert（librsvg） | rsvg-convert -w $((W*scale)) -o out.png in.svg など、版とフォントを固定 |
軽量、CI／launchd に載せやすい |
PDF ラスタライズとの対照は PDF 転 PNG の DPI・色彩チェックリスト を参照してください。共通項は 先にピクセルを決め、そのあと DPI を語ることです。バッチを Makefile や 1 本のシェルに寄せ、入力ディレクトリと出力ルートを環境変数化すると、リモート Mac への移設が容易になります。自動 QC の流れは OpenClaw PNG 一括検証 とも相性がよいです。
④ リモート Mac M4 一括検収チェックリスト
リモート Mac 上で OS 小バージョン・フォント・CLI の版を固定したうえで、表を印刷またはチケットに貼って運用できます。検収は全件ピクセル比較ではなく、代表セット＋境界ケース（細線・小文字・グラデ端）を決め打ちすると現実的です。合格したディレクトリだけを approved/ に移し、差し戻し理由をチケットに残すと次バッチが速くなります。
| 検査項目 | 操作 | 合格基準 |
|---|---|---|
| ピクセル契約 | スクリプトまたは sips -g pixelWidth -g pixelHeight で抜き取り |
「論理 W／H×該当倍率」と一致（±0 をリストで明示） |
| 倍率命名 | @2x @3x またはディレクトリ規約を確認 |
フロントの srcset／Xcode アセット規則と一致 |
| 透明と縁 | #FFFFFF／#0B0B0B 背景でプレビュー | 想定外の色にじみ・半透明ゴミなし |
| 色彩意図 | ICC 埋め込みまたは剥離を抜き取り確認 | README-color と一致、sRGB パックに「偽 P3」なし |
| 再現性 | 別の同版リモート機で同一入力を再実行 | ピクセル一致、または文書化した許容差内（アンチエイリアス等） |
| 失敗の再実行 | manifest に失敗パスを記録 | 1 ファイル単位で再試行でき、全件やり直し不要 |
⑤ FAQ
構造化データはページ先頭の FAQPage JSON-LD を参照してください。本文では運用でよく出る論点だけ短く補足します。チーム内用語（「Retina」「2x」「倍率」）を README で一度だけ定義しておくと、新メンバーのオンボーディングが楽です。
Q. DPI だけ 300 にすればシャープになりますか。 A. ピクセルが増えなければ多くの Web では見た目は変わりません。足すのは 縦横のピクセル数 です。
Q. SVG がシステムフォント依存で、リモートでレイアウトが崩れました。 A. ラスタ前に テキストをアウトライン化するか、リモート Mac に同じフォントファミリを入れてください。
Q. @2x と @3x を同じスクリプトで回せますか。 A. scale=2 と 3 をループし manifest に 1 行ずつ残せます。@3x を縮小して @2x の代わりにしないでください（ぼけます）。
まとめ
SVG から PNG への 2026 年納品は、論理×倍率 でピクセルをロックし、配布既定は sRGB、Display P3 は別パックに分ける。リモート Mac（M4 級）でツールチェーンを固定し、上記チェックリストで検収します。意思決定表と検収表をそのままチケットテンプレにコピーできる形にしておくと、デザインとエンジニアの合意コストが下がります。環境を揃えたバッチ実行が必要なチームは、ホームで概要を確認し、購入・レンタル（プラン）からシナリオを選び、接続手順はログイン不要の ご利用ガイド を参照してください。関連記事は 技術インサイト一覧 からどうぞ。
リモート Mac で Retina 用 PNG パイプラインを固定する
SVG → @2x／@3x PNG を固定された リモート Mac M4 で回すと、スリープ中断や版の漂流を減らせます。以下は閲覧に ログイン不要 です。
同一 macOS・同一 CLI でラスタライズと検収
色彩 README と manifest をチームの単一ソースにし、素材担当とフロントが同じ合格基準を共有できます。