gazou-compressor.jp

デザイン→開発アセット受け渡しプレイブック(命名・密度・形式)

受け渡しの“揺れ”は不具合の温床です。ここでは命名・密度・形式・フォルダ構成の共通テンプレを提示します。合意してテンプレ化してしまえば、毎回のすり合わせが要りません。

関連ツール
命名は /rename、高DPI出力は /density-export、PNGロスレス整形は /png-lossless が最短です。

要点(TL;DR)

  • 命名:{name}-{width}w-v{version}.{ext} or name@2x などに統一。
  • 形式:UI=SVG優先/写真=AVIF/WebP/透過UI=PNG。
  • 密度:装飾は1x中心、必要に応じ 2x/3x。
  • フォルダ:img/ui/ img/kv/ img/logo/ のように機能別。

1. 受け渡しテンプレ(ZIPの中身)

/img
  /ui
    button.png
    button@2x.png
    button@3x.png
  /kv
    hero-1200w-v3.webp
    hero-800w-v3.webp
  /logo
    logo.svg

2. ルール詳細(命名・密度・形式)

3. 合意事項チェック

  • 命名規則のドキュメント化(例/反例付き)。
  • 出力密度の決め方(デバイス/画面の想定)。
  • 形式の使い分け(SVG/PNG/AVIF/WebP)。
  • 受け渡しパッケージの構成(ZIP階層)。
  • 最終の見えは /compare で合意。

4. まとめ:テンプレに乗せる

合意テンプレに沿えば、受け渡しの摩擦はほぼ消えます。まずは /rename /density-export を標準に据えましょう。

gazou-compressor.jp 編集部
画像圧縮・変換・背景除去などの実践テクニックと、Webで“速く・軽く・崩さない”ためのノウハウを発信しています。
所属トピック: 画像形式と圧縮(WebP/JPEG/PNG/AVIF/HEIC)

関連記事