【入門編】Sketchの「Export Presets」を極める！マルチデバイス・複数解像度の書き出しをワンクリック化する裏技 – UI/UX・デザインツール活用バイブル

こんにちは。現場で戦うデザイナー、あるいはエンジニアのみなさん。

「またこのアイコン、全サイズ書き出し直しか……」
そんな溜息をついたことはありませんか？手作業での書き出しは、ただの時間の浪費ではありません。「ヒューマンエラーの温床」です。

Sketchには、この地獄から解放してくれる「Export Presets（書き出しプリセット）」という強力な武器があります。今回は、ただの使い方解説ではなく、開発チームに「完璧なアセット」をワンクリックで届けるための、プロの設計思想を伝授します。

—

UIデザインにおいて、書き出しは「納品」の儀式です。しかし、iOSなら `@2x`, `@3x`、Androidなら `mdpi` から `xxxhdpi` まで、WebならSVGやWebPへの変換……。これを手動で行うのは、Excelで計算を手計算するのと同じくらい非効率です。

「仕組み化」こそが、デザインと実装の境界線を消し去る唯一の手段です。

—

Sketchでの書き出し設定は、右下の「Export」パネルで行います。ここに「＋」ボタンがあるのは知っていますよね？ここが魔法の入り口です。

1. 書き出したいレイヤー（またはシンボル）を選択。
2. 右下の「Export」パネルで「＋」をクリック。
3. サイズのプルダウンから、一番下の 「Manage Presets…」 を選択します。

ここで、チームごとに必要なフォーマットを定義します。例えば、以下のような構成を作ってみてください。

ここがプロとアマの分かれ道です。Sketchの書き出しは、レイヤー名がそのままファイル名になります。
「`/`（スラッシュ）」を使ってフォルダ構造を自動化しましょう。

これだけで、開発者がフォルダを整理する手間をゼロにできます。

—

まずは、シンプルなアイコンで動作確認をしましょう。

1. 正方形のシェイプを作成し、名前を `button/submit` にする。
2. Export設定で、以下の3つを追加する。

3. 右下の「Export」ボタンを押し、書き出し先を指定。

成功の定義:
書き出されたフォルダを開き、`button` フォルダの中に `submit.png`, `submit@2x.png`, `submit@3x.png` が揃っていれば成功です。

—

ここからが、伝説級の知見です。

アセットの書き出し設定は、インスタンスごとに行う必要はありません。マスターシンボルに設定を埋め込んでください。 そうすれば、そのシンボルをどこで使おうと、書き出し設定は自動で継承されます。

書き出し設定を作ったら、開発者と一度だけ話してください。
> 「このプリセットで書き出せば、iOSのプロジェクト構造にそのままドラッグ＆ドロップできるよ」

こう伝えるだけで、彼らはあなたを「ただ絵を描く人」ではなく「プロダクトを理解しているエンジニア」として信頼するようになります。

—

UI/UXデザインは、画面を作って終わりではありません。「開発者がストレスなく実装できる状態」にして初めて、デザインは価値を持ちます。

今日紹介した「Export Presets」を使いこなせば、毎日15分かかっていた書き出し作業が、10秒のワンクリックに変わります。その浮いた時間で、ユーザーがもっと喜ぶインタラクションや、細かなマイクロコピーの調整に時間を割いてください。

それが、世界最高峰のUI/UXを作るための近道です。

何か分からないことがあれば、いつでも聞いてくださいね。一緒に最高のものを作り上げましょう！