開発スピードのボトルネックを断つ：Sketchの「Export Presets」とSVGクリーンアップで実現する、コードリーダブルなアセットパイプライン
テックリードの役割とは、単に動くプロダクトを作る事ではない。開発チーム全体の認知負荷を下げ、手戻りのないシームレスなアセット供給ラインを構築することだ。
多くのプロダクト開発現場において、「デザインツールから吐き出されたSVGの汚染」は、いまだに静かなる生産性の殺し屋として君臨している。デザイナーが善意で作成したパスの結合漏れ、不要なメタデータ、意味のない`
本記事では、Sketchのポテンシャルを極限まで引き出し、Export PresetsとSVGクリーンアップ拡張を組み合わせることで、「デザイナーはデザインに集中し、エンジニアはコンポーネント実装に集中できる」完全自動化されたアセットパイプラインの構築手法を伝授する。
—
1. なぜSketchのデフォルトSVG出力はフロントエンドを破壊するのか
Sketchは優れたデザインツールだが、デフォルトのSVGエクスポータは、Adobe Illustratorと同様に「人間にとっての可読性」や「Webでの再利用性」よりも、「キャンバス上の描画の完全な再現性」を優先する。
フロントエンドエンジニアにとって、このアプローチは以下の悪夢を生む。
- 無駄なメタデータの混入: `metadata`タグや、Illustrator/Sketch固有のID属性がDOMを汚染する。
- `
`タグのスパゲッティ: グループ化の履歴がそのまま階層構造として残り、CSSでのスタイル制御（`fill: currentColor`の適用など）を困難にする。 - 硬直したビューボックス: ピクセルパーフェクトに固執した`width`/`height`の固定値が、レスポンシブデザインの障壁となる。
これを解決するために、我々はSketchの「出力の入口（Export Presets）」を最適化し、ビルドプロセスまたはプラグインによる「出口の浄化（SVG Cleanup）」を連動させる必要がある。
—
2. Sketchを支配する：高速化のためのキーボードショートカット & 隠し設定
まずは、デザインアセットの切り出しを行うデザイナー、あるいはデザインレビューを行うエンジニアが知るべき、Sketchの効率を極限まで高めるショートカットと設定から押さえよう。
必須の神ショートカット
- `⌘ + Shift + E` (Export Selected): 選択したレイヤー/アートボードを一発でエクスポートダイアログへ。
- `⌘ + Alt + G` (Group Selection): アセットのルート構造を整えるための必須動作。無駄な階層を作らないために、グループ化の作法をチームで統一する。
- `Return` (Enter) / `Esc`: レイヤー階層の潜り込みと脱出。SVGのIDやレイヤー名（これがそのままSVGのクラス名やIDになり得る）を瞬時にリネームする。
命名規則（Naming Convention）のルール化
Sketchのレイヤー名は、そのまま出力されるSVGのファイル名や要素のIDに影響する。チーム開発では、以下のプレフィックス規則を徹底すること。
- `ico_` : アイコン系（`currentColor` を適用しやすくするもの）
- `il_` : イラスト系（マルチカラー、パス構造を維持するもの）
- `logo_` : ブログパーツやブランドロゴ（正確なアスペクト比が命のもの）
—
3. 実践：Export Presetsの最適化設計
Sketchの「Make Exportable」機能では、単にSVGを選ぶだけでは不十分だ。アイコンやイラストといった「セマンティクス」ごとに、適切なプリセットを作り分ける必要がある。
1. アイコン用プリセット（Icon Preset）
- スケール: 1x (Vectorとして出力)
- サフィックス: なし、または `-icon`
- 設定思想: アイコンは原則として単色（Monochrome）であることが多いため、内部の塗りを排除し、CSSから色を制御できるようにする準備をExport段階で行う。
2. イラスト・複雑なアセット用プリセット（Illustration Preset）
- スケール: 1x
- 設定思想: デザイナーが意図したグラデーションやマスク構造を破壊しないよう、パスの結合（Flatten）を適切に行った上で出力する。
—
4. 神プラグインと外部ツールの融合：SVGクリーンアップの自動化
Sketch単体での出力を補完し、完全な「コードリーダブル」を実現するためには、SVGオプティマイザのデファクトスタンダードである SVGO の思想をワークフローに組み込む必要がある。
導入すべき外部ツール / プラグイン
1. SVgo Cleaner (Sketch Plugin):
Sketch内で完結させたい場合のエクステンション。エクスポート時にバックグラウンドで不要な属性を削ぎ落とす。
2. SVGO (Node.js CLI / Build Step):
真のプロフェッショナル環境では、Sketchからの出力フォルダを監視し、Gitコミット前やビルド時にSVGOを通すパイプラインを構築する。
—
5. ベストプラクティス：最強の `svgo.config.js` 構成例
フロントエンドチームとデザインチームの共通言語となる、SVGOの設定ファイルを提示する。この設定をプロジェクトのルートに配置することで、Sketchから出力された荒削りなSVGを一瞬でモダンなコンポーネント用コードに変換できる。
// svgo.config.js
// チームの全アセットパイプラインの品質を担保する決定版設定
module.exports = {
multipass: true, // 完全に最適化されるまで複数回パースを繰り返す
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブ対応に必須なので絶対に消さない
removeViewBox: false,
// CSSでのスタイリングを容易にするため、初期の色定義を削除
removeAttrs: {
attrs: ‘(fill|stroke)’,
},
},
},
},
// Sketch特有の不要なメタデータやコメントをパージ
‘removeComments’,
‘removeMetadata’,
‘removeTitle’,
‘removeDesc’,
// 意味のないid属性を削除し、DOMの軽量化と名前衝突を防ぐ
‘removeUnusedNS’,
‘cleanupIDs’,
// パスの小数点桁数を丸めてファイルサイズを劇的に削減（実用上影響のない2桁に設定）
{
name: ‘convertPathData’,
params: {
floatPrecision: 2,
},
},
// 単色のアイコン等で威力を発揮する要素の統合
‘mergePaths’,
],
};
この設定が生み出す恩恵
- CSSでの自由な彩色: `fill` や `stroke` が自動除去されるため、ReactやVueなどのコンポーネント内で `className=”text-primary”` や `fill=”currentColor”` を当てるだけで、状態に応じたカラー変更が即座に実現できる。
- 圧倒的な軽量化: パスの小数点制御と不要なメタデータの削除により、ファイルサイズが平均して 30%〜60% 削減される。これはモバイルWebの表示速度、ひいてはCore Web Vitalsのスコア改善に直結する。
—
6. テックリードが推進するチーム共有化ルール
ツールと設定を導入しただけでは、組織の文化は変わらない。以下のガバナンスをチームに敷くことで、このアセットパイプラインは永遠に機能し続ける。
1. デザインファイル側のルール:
アイコンを作成する際は、必ず単一のレイヤーグループにまとめ、レイヤー名に `ico_` を付与する。
2. PRレビューの自動化:
GitHub Actions等のCI/CDパイプラインにSVGOのチェックを組み込み、最適化されていないSVGがコミットされた場合はビルドエラーにする。
3. エンジニアとデザイナーの定期的な同期:
「なぜこのグループ構造だとSVGOでエラーが出るのか」という技術的背景をデザイナーに共有し、デザインシステム自体のリテラシーを底上げする。
結びにかえて
デザインツールとコードベースの境界線を取り払うこと。それこそが、優れたUI/UXエンジニアが目指すべきモダンな開発プロセスの姿だ。
SketchのExport Presetsを正しく調律し、SVGOによるクリーンアップを自動化する。たったこれだけのエンジニアリング投資で、アセットに起因する無駄な摩擦はチームから完全に消え去る。今すぐあなたのプロジェクトにこの仕組みを組み込み、真の「コードリーダブルな開発体験」を手に入れてほしい。