Sketchを「ただの描画ツール」で終わらせるな：アセットパイプラインの深淵と最適化の極致
UIデザインの現場において、Sketchから書き出されたSVGが「肥大化」していることに気づかないデザイナーやエンジニアは、既に淘汰の対象だ。Sketchの「Smart Export」は便利だが、それはあくまで「人間が見るためのもの」であって「マシンが解釈するための最適解」ではない。
我々が目指すべきは、アセットの書き出しという手作業を排除し、ビルドパイプラインの一部として「ピクセル単位の完全な軽量化」を自動化することだ。今日は、Sketchという殻を突き破り、裏側でどうSVGOとCLIが呼吸を合わせるのか、その技術的深淵を共有する。
—
1. なぜSketchのデフォルト書き出しは「ゴミ」を含んでいるのか
Sketchの書き出しは、Adobe Illustratorのそれに比べれば遥かにクリーンだが、それでも以下の「不要物」が混入する。
- Sketch特有のメタデータ: `sketch:type`などの名前空間。
- 不必要なグループ情報: 書き出し時に展開されず、無意味な入れ子構造を残す `
` タグ。 - 精度過剰な浮動小数点: `12.0000000001` といった、ブラウザのレンダリング精度を遥かに超えた座標データ。
これらは数KBの差かもしれないが、数千のアセットを持つ大規模プロダクトでは、ネットワーク転送量とパース時間に直結する。
—
2. 自動化の核心：CLIを活用した「最適化パイプライン」の構築
GUIでポチポチ書き出すワークフローは今すぐ捨てろ。Sketchの `sketchtool` を活用し、書き出し直後にSVGOを叩き込む「自動化フック」を組むのが、プロフェッショナルの矜持だ。
ワークフローの自動化スクリプト (`optimize_assets.sh`)
このスクリプトは、Sketchファイル内の特定のスライスを抽出し、即座にSVGOで最適化してデプロイ可能な状態まで圧縮する。
!/bin/bash
依存チェック
if ! command -v svgo &> /dev/null; then
echo “SVGOがインストールされていません。npm install -g svgo”
exit 1
fi
1. sketchtoolを使用してスライスを書き出し
/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool export slices ./design.sketch –output=./dist/svg –formats=svg
2. SVGOで不要なメタデータを一掃
–precision 2: 座標精度を2桁に制限（視覚的劣化を抑えつつサイズを激減させる）
–enable: 必要なプラグインを明示的に有効化
svgo -f ./dist/svg –precision 2 \
–enable removeViewBox=false \
–enable cleanupIDs \
–enable collapseGroups \
–disable removeUnknownsAndDefaults \
–config ./svgo.config.js
echo “最適化完了: アセットは準備整いました。”
—
3. SVGOの真価を引き出す `svgo.config.js` の極意
SVGOの設定ファイルこそが、アセットの品質とパフォーマンスの境界線を決める。適当なプリセットを使うな。
module.exports = {
multipass: true, // 複数回パスを通して極限まで圧縮
js2svg: {
indent: 0, // インデントを削除してバイト数を削る
pretty: false,
},
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
removeViewBox: false, // UIコンポーネントとして使うならViewBoxは必須
cleanupIDs: { prefix: ‘icon-‘ }, // IDの衝突を回避しつつ短縮
},
},
},
‘removeDimensions’, // width/height属性を消し、CSS制御を優先させる
‘sortAttrs’, // 属性の順序を一定にし、Gzip圧縮率を向上させる
],
};
ここが技術的ハイライト:
- `multipass: true`: 一度の最適化では削除できない冗長なパスを、複数回スキャンして完全に排除する。
- `sortAttrs`: Gitの差分管理にも寄与する。属性順序を正規化することで、コミット時のDiffが驚くほど綺麗になる。
—
4. エンジニアとデザイナーの「暗黙知」を技術で解決する
デザインシステムの運用において、最もコストがかかるのは「書き出し忘れ」と「最適化忘れ」だ。これを解決するには、Sketchのプラグイン開発に踏み込む必要がある。
`sketch-svgo-plugin` 等の既存プラグインをそのまま使うのも悪くないが、大規模開発なら、Sketchの `onExport` イベントを監視し、書き出し先でバックグラウンド実行されるデーモンを構築すべきだ。
- 監視の仕組み: `fswatch` を使用して、特定のディレクトリ（書き出し先）への書き込みを検知。
- イベント駆動: ファイルが書き出された瞬間に最適化スクリプトがトリガーされる。
これにより、デザイナーは「書き出す」という意識すら持たず、ただ保存するだけで、エンジニアのGitHubリポジトリには「最適化済み、Lint済み、圧縮済み」のアセットが降ってくる。これこそが真のDevOpsであり、デザインシステムを組織に定着させるための「自動化の力」だ。
—
5. 最後に：伝説的エンジニアからの提言
UIのパフォーマンスは、コードの書き方だけで決まるのではない。ツールが吐き出す「生の素材」にまで徹底的に介入した者だけが、真の高速化という果実を手にできる。
Sketchは素晴らしいツールだが、それはあくまで「入り口」だ。その先にある、SVGOが刻むバイト単位の最適化と、パイプラインという名の大動脈を設計せよ。それができるアーキテクトこそが、今後5年のプロダクト開発を支配する。
さあ、今すぐビルドスクリプトを開き、不要なメタデータをゴミ箱へ捨て去る設定を書き加えたまえ。それが、君のUIが「世界最速」になるための第一歩だ。