こんにちは！プロダクトデザイナー、そしてフロントエンドのコードを愛するエンジニアの皆さん。
日々のデザイン作業で、デザイナーが作った美しいアイコンやイラストをエンジニアに引き渡す際、こんなやり取りが発生していませんか？
> 「なんかSVGのコードがやたら複雑で、CSSで色が変わらないんだけど……」
> 「ごめん、Sketchからそのまま書き出しちゃった。中身の構造、汚かった？」
……胸が痛む瞬間ですよね。
Sketchからデフォルト設定のままSVGを書き出すと、謎の `id` や、使われていない `g`（グループ）タグ、不要なメタデータが大量にコード内に生成されてしまいます。これらはフロントエンドのパフォーマンスを落とすだけでなく、スタイル（CSS/JS）の制御を困難にする「負債」でしかありません。
今回は、Sketchの「Export Presets（書き出しプリセット）」の極限最適化と、SVGクリーンアップの自動化を組み合わせ、フロントエンドエンジニアが思わず笑顔になる「コードリーダブルなSVG」を爆速で出力するフローを伝授します。
これをマスターすれば、デザインとコードの境界線が溶け、チーム全体の開発体験（DX）が劇的に向上しますよ。さあ、一緒に見ていきましょう！
—
1. なぜSketchのデフォルトSVG出力は「汚い」のか？
まず敵を知ることから始めましょう。
Sketchは優れたデザインツールですが、そのベクター演算の歴史的背景から、SVG書き出し時に以下のような「余計なお世話」をやらかします。
- 不要なグループタグ（`
`）の乱立: レイヤーを整理するためにグループ化グローバルにした階層が、そのままSVGに持ち込まれる。 - 自動生成される一意のID: Sketch内部で管理されているレイヤーID（例: `id=”Rectangle-Copy-2″`）がそのまま残り、複数配置した際にIDが衝突する。
- 不要なメタデータの混入: 編集ソフト特有のタグや、使われない`xmlns`、`version`属性。
これらは、Webのパフォーマンスやアクセシビリティ、そしてコンポーネント化（ReactやVueでのSVGインライン展開など）において完全なノイズです。
—
2. 基礎セットアップ：Sketchの「Export Presets」を極限までチューニングする
まずは、Sketch自体の書き出しエンジンをしつけることから始めます。毎回「SVGとして書き出して……」と手動で設定するのではなく、Export Presetsとしてシステム化しましょう。
手順：最強プリセットの作成
1. Sketchで任意のシェイプを選択し、右サイドバーの「Make Exportable」をクリック。
2. フォーマットを SVG に指定。
3. プレフィックスやサフィックスのルールを整える（必要に応じて）。
ここで重要なのは、Sketch標準の書き出しだけで完璧なコードを得ようとしないことです。Sketchはあくまで「純度の高いベクターパスを生み出す母艦」と割り切り、次のステップである自動化ツールへバトンタッチする準備を整えます。
—
3. 救世主降臨：SVGクリーンアップの自動化フロー
ここからが本番です。書き出されたSVGを、人間の手でエディタを開いて整形するのはエンジニアリングの敗北です。「保存または書き出した瞬間に、自動でクリーンアップされるパイプライン」を構築しましょう。
今回は、業界標準のSVG最適化エンジンである SVGO (SVG Optimizer) を軸にした、最もモダンでスマートなワークフローを紹介します。
ステップ1: CLI環境とSVGOのインストール
ターミナルを開き、グローバル（またはプロジェクトごと）にSVGOを導入します。
Node.js環境が前提となります
npm install -g svgo
ステップ2: チームで共有する最適化設定（`svgo.config.js`）
ここがキモです。プロジェクトのルートに設定ファイルを作成し、「何を残し、何を消すか」を厳密に定義します。フロントエンドフレンドリーな設定のサンプルを置いておきますね。
// svgo.config.js
module.exports = {
multipass: true, // 複数回最適化を繰り返し、限界まで圧縮する
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブ対応に絶対必要なので消さない
removeViewBox: false,
// スタイル制御を邪魔する自動生成IDを削除する
cleanupIds: true,
// 意味のない空のグループタグを削除
removeEmptyContainers: true,
},
},
},
// 色をCSS（fill=”currentColor”など）で制御しやすくするため、ハードコーディングされた色を必要に応じて削除
// ‘removeAttrs’, { attrs: ‘(fill|stroke)’ } なども状況に応じて活用
],
};
—
4. 動作確認（HelloWorld）：究極のクリーンコードを生み出す
実際に、このパイプラインが正しく機能するかテストしてみましょう。
1. Sketchでの作業
適当なアイコン（例: 24×24のシャープなホームボタンのアイコン）をSketch上で作成します。この時、パスファインダー（Union, Subtractなど）を使って、パスが綺麗に結合されているかを確認してください（これが一番大事なデザイン側の作法です）。
2. SVGの書き出し
Sketchから該当アイコンをSVGとして任意のフォルダ（例: `src/assets/svg/raw/`）に書き出します。
この時点でのコードを覗くと、まだ少し余分な属性がついているはずです。
3. 自動クリーンアップの実行
ターミナルから、先ほど用意したSVGOを実行します。
svgo -f src/assets/svg/raw -o src/assets/svg/optimized
爆誕した最適化済みSVG（出力結果のイメージ）:
……どうですか、この美しさ！
不要な `id` も、謎の `g` タグも一切ありません。`fill=”currentColor”` を仕込んでおけば、親要素のCSSカラー（`color: #3b82f6;` など）に完全追従する、フロントエンドにとって最高のコンポーネント素材の出来上がりです。
—
5. さらに進んだ現場の知見：プラグインやBuild時への組み込み
毎回のコマンド実行すら面倒だというあなたへ。さらに一歩進んだ自動化のアイデアです。
- Sketchプラグインの活用:
「SVGOifier」などのSketchプラグインを使えば、Sketchのメニューからワンクリック（あるいはショートカット）で、レイヤーを選択した状態から最適化されたSVGを直接クリップボードにコピーしたり、ファイル出力したりできます。
- Bundler（Vite / Webpack）やGit Hooksとの統合:
デザイナーがSVGをGitリポジトリにプッシュした際、あるいはフロントエンドのビルドプロセス（Viteのプラグインなど）で、自動的にSVGOが走るように設定しておくと、「誰もSVGの汚れを気にしなくていい世界」が完成します。
—
お疲れ様でした！
今回紹介したフローを導入すれば、「デザインデータをコードに直す苦痛」から解放され、純粋にプロダクトの体験作りに集中できるようになります。
「たかがSVG、されどSVG」。こういう細部のこだわり（Craftsmanship）の積み重ねが、プロダクト全体のクオリティを底上げし、デザイナーとエンジニアの信頼関係を強く結びつけてくれます。
明日からのあなたのワークフローに、ぜひ取り入れてみてくださいね。それでは、また！