Sketchの「Export Presets」を極める：マルチプラットフォーム時代の納品を自動化する職人技
UI/UXデザインの現場において、最も不毛な時間は「アセットの書き出し作業」です。iOSの `@2x`, `@3x`、Androidの `mdpi` から `xxxhdpi`、そしてWeb向けの `WebP` や `SVG` 最適化。これらを手動で繰り返しているとしたら、あなたはエンジニアではなく「作業員」になっています。
本稿では、Sketchの Export Presets（書き出しプリセット） を核とした、開発チームが泣いて喜ぶ「納品完全自動化」の神髄を伝授します。
—
1. プリセットは「個」ではなく「仕組み」で管理せよ
多くのデザイナーが陥る罠は、レイヤーごとに書き出し設定をバラバラに設定することです。これを解消するのが 「Export Presets」の構造化 です。
Sketchのデフォルト機能だけでは限界があるため、「Sketch Runner」 を導入してください。
- 神プラグイン：[Sketch Runner](https://sketchrunner.com/)
- これなしでSketchを語ることはできません。`Cmd + ‘` で呼び出し、`export all` と打つだけで、設定済みのプリセットを一括適用できます。
実践：プロジェクト共通の「書き出しプリセット」定義
プロジェクトのルートに `ExportPresets.json` を配置し、チーム全体でルールを共有します。以下は、iOS/Android/Webの主要フォーマットを網羅した構成例です。
{
“name”: “Production-Standard”,
“formats”: [
{ “scale”: “1x”, “suffix”: “”, “format”: “png” },
{ “scale”: “2x”, “suffix”: “@2x”, “format”: “png” },
{ “scale”: “3x”, “suffix”: “@3x”, “format”: “png” },
{ “scale”: “1x”, “suffix”: “-mdpi”, “format”: “png” },
{ “scale”: “1.5x”, “suffix”: “-hdpi”, “format”: “png” },
{ “scale”: “2x”, “suffix”: “-xhdpi”, “format”: “png” },
{ “scale”: “3x”, “suffix”: “-xxhdpi”, “format”: “png” },
{ “scale”: “1x”, “suffix”: “”, “format”: “svg” }
]
}
—
2. 開発スピードを最大化する「キーボードショートカット」の極意
マウスで「Make Exportable」をクリックしている時間は、思考のノイズです。以下のショートカットを指に叩き込んでください。
- `Cmd + Shift + E`: 書き出しダイアログの一発呼び出し。
- `Cmd + Option + E`: 選択中のレイヤーに即座に「Exportable」を追加。
- `Shift + 2`: 選択したレイヤーの書き出し設定をプレビュー（これを知っているだけで確認の手間が激減します）。
【テックリードからのアドバイス】
チームのメンバーには、Sketchの「ショートカット設定」をエクスポートし、`.plist` ファイルとしてGitリポジトリの `docs/design-guidelines/` 配下に格納することを義務付けてください。これにより、新人でもベテランと同じ速度で作業を開始できます。
—
3. 開発者との境界線を消す「命名規則」の自動化
アセットが「Untitled-1.png」で納品されたら、エンジニアはブチ切れます。書き出し時の命名は、Sketchの 「Slices」と「Naming Pattern」 を活用して強制的にルール化します。
推奨命名パターン:
`{layerName}{suffix}.{format}`
レイヤー名には必ず `icon/` や `btn/` といったスラッシュを含めることで、Sketchは自動的にフォルダ分けを行います。
- `icon/home/active` -> `icon/home/active@2x.png`
- `icon/home/inactive` -> `icon/home/inactive@2x.png`
これにより、エンジニアのIDE内では構造化されたディレクトリが自動生成され、Asset Catalogへのドラッグ＆ドロップが一瞬で終わります。
—
4. 究極の自動化：SVGO連携による「軽量化」までをワンストップで
SVGの納品は、ファイルサイズが命です。Sketch標準のSVG出力は冗長なメタデータを含みすぎます。
絶対入れるべき神プラグイン：[SVGO Compressor](https://github.com/BohemianCoding/svgo-compressor)
書き出しボタンを押した瞬間に、SVGOがバックグラウンドで走るように設定してください。これにより、手作業での圧縮工程が完全に排除されます。
設定の共有化ルール（.sketchファイルの扱い）
チーム開発において、設定ファイルは `Sketch Library` として管理します。
1. Shared Styles / Symbols に書き出し設定を含めた「テンプレートファイル」を作成。
2. 全メンバーがこのLibraryを読み込む。
3. 書き出しルールを変更する際は、Libraryを更新し、全メンバーに通知（Sketchの同期機能を利用）。
—
最後に：デザインは「納品」で終わらない
プロの仕事とは、デザインそのものだけでなく、「そのデザインがエンジニアの元に届き、正しく実装されるまでのプロセス全体」を指します。
今回紹介したプリセット管理と自動化フローは、単なる時短テクニックではありません。これは、「デザイナーとエンジニアの間の摩擦係数をゼロにするための設計思想」です。
今日からあなたのプロジェクトの `Export Presets` を見直してください。無駄なクリックを1回減らすたびに、あなたはより本質的なUI/UXの改善に時間を割けるようになります。それが、世界最高峰のプロダクトを生むための唯一の道です。