汚れたSVGは技術的負債である：Sketchからコードリーダブルなアセットを自動抽出する「究極のパイプライン」構築術
多くのデザイナーが「書き出し」ボタンを押して生成したSVGを見て、フロントエンドエンジニアが顔をしかめる――。この光景は、もはやUI開発の悪習と呼ぶべきだ。
SketchのデフォルトのSVGエクスポートは、可読性を犠牲にして「描画の再現性」を優先する。結果として生成されるのは、無意味な`id`、`Sketch固有のメタデータ`、`過剰なネスト`、そして`不要なグループタグ`の山だ。これは単なるファイルサイズの増大ではない。DOMの深さを増大させ、ブラウザのレンダリングコストを上げ、CSS/JSからの制御を困難にする「負債」である。
本稿では、Sketchを単なる描画ツールとしてではなく、「クリーンなSVGを生成するデータソース」へと変貌させ、CI/CDパイプラインに直結させるための極限の自動化手法を伝授する。
—
1. Sketchエクスポートの「物理的限界」を突破する
Sketchで書き出されたSVGには、`sketch:type`のような独自名前空間や、不要な`transform`属性が混入する。これらを人間が手作業でクリーンアップするのは愚の骨頂だ。
戦略：Sketchは「Rawデータ生成機」に徹する
Sketchの設定で最も重要なのは、SVG書き出し設定を「SVGOMGやSVGOを通すための『中継地点』と割り切ること」だ。
1. シンボル活用による命名規則の強制: Sketchのレイヤー名はそのままSVGのIDやクラス名になる。命名規則を`icon/action/delete`のように厳格化し、フォルダ構造とSVGのパス構成を同期させる。
2. グループ化の抑制: Sketch上で「グループ」が多すぎると、SVGには`g`タグが乱立する。書き出し前に「Flatten」を徹底するか、シンボル化によってコンポーネント単位でカプセル化せよ。
—
2. CLI駆動による完全自動化パイプライン
手作業での書き出しは排除せよ。SketchのCLI（`sketchtool`）とNode.jsのビルドスクリプトを組み合わせ、SVGの書き出しからクリーンアップまでを0.1秒の世界に落とし込む。
独自パイプラインのアーキテクチャ
以下の構成をプロジェクトの`post-build`や`pre-commit`フックに組み込む。
1. sketchtoolによる特定のシンボルをSVGとして抽出
/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool export slices ./design.sketch –formats=svg –output=./src/assets/svg/
2. SVGOを叩き、不要なゴミを徹底排除する
npx svgo -f ./src/assets/svg/ –config=svgo.config.js
究極の `svgo.config.js`
ここで重要なのは、デフォルト設定を使わないことだ。我々は「コードリーダブル」を求めている。
module.exports = {
plugins: [
{ name: ‘preset-default’, params: { overrides: { removeViewBox: false } } },
‘removeDimensions’, // width/heightを消してCSS制御可能にする
‘removeStyleElement’, // インラインスタイルを排除
‘removeScriptElement’, // セキュリティリスクの排除
{
name: ‘prefixIds’, // 複数SVGがページ内に混在してもID衝突を防ぐ
params: { prefix: (node, info) => info.path.replace(/\.[^/.]+$/, “”) }
},
‘cleanupIDs’, // 使われていないIDを削除
‘removeComments’ // デザイナーのメモなど不要
]
};
—
3. レイヤー・メモリ消費・パフォーマンスのハック
上級エンジニアが突き当たる壁は「複雑なパスのデータ量」だ。Sketchの「Vector」ツールで描きすぎたパスは、DOMのノード数を爆発させる。
- パスの簡略化 (Simplify Paths): Sketch上のパスが多すぎる場合は、エクスポート前にプラグイン等でパスのノード数を削減せよ。レンダリング負荷はノード数に比例する。
- メモリとファイルサイズの最適化:
- カラー変数の利用: 可能な限りSketchの「Global Colors」を使い、CSS変数のインライン展開を容易にする。
- Path Dataの圧縮: SVGOの`convertPathData`プラグインで、座標を整数単位まで丸めることで、Gzip圧縮効率を極限まで高める。
—
4. プロダクトデザイナーとエンジニアの「言語」を統一する
真のUI/UXエンジニアにとって、Sketchのファイルは「デザイン」ではなく「仕様書」だ。
1. デザインシステムとの紐付け: Sketchの「Library」を更新した際、即座にCLIが動き出し、SVGが最適化されてGitにコミットされるまでのフローを自動化せよ。
2. Data-Attributeの活用: プロトタイピング時、SVGに`data-testid`などの属性を埋め込みたい場合は、Sketchのレイヤー名の末尾に特定のルール（例: `__test`）を付与し、独自スクリプトで正規表現で属性に変換するフィルターを通す。
—
結びに：伝説のアーキテクトからの提言
「ツールを使う」のと「ツールを支配する」のでは、アウトプットの質に雲泥の差が出る。Sketchから書き出されたSVGをそのままWebアプリケーションに放り込むのは、未調理の食材を皿に盛るようなものだ。
我々の仕事は、デザインという「意図」を、ブラウザが最も効率よく処理できる「機械語」に近いレベルまで研ぎ澄ますことにある。CLIを叩き、SVGOの設定を極め、パイプラインを自動化せよ。そこにこそ、UI/UXエンジニアとしての真の価値がある。
もしあなたが今日、単に「書き出し」ボタンをクリックしたのなら――明日からは、そのボタンを「ビルド」という言葉に置き換えることから始めてほしい。