【実務・中級編】FigmaでのSVG最適化の極意！不要なパスを削減して軽量なフロントエンド実装を実現する方法 – UI/UX・デザインツール活用バイブル

プロダクトのパフォーマンスを極限まで詰める局面において、多くのチームが見落としがちな盲点があります。それが「Figmaからそのまま書き出されたSVGファイルの肥大化」です。

プロダクトデザイナーが意図した美しいUIアイコン。しかし、Figmaから書き出した生のSVGをそのままフロントエンドのコンポーネントとして組み込むと、中身は不要な``タグのネスト、絶対座標の泥沼、複雑なクリッピングパス、そしてハードコードされた色彩値で埋め尽くされています。結果として、Bundleサイズの肥大化、DOMツリーの汚染、そしてCSSによる動的カラー変更の阻害を引き起こします。

この記事では、テックリードの視点から、FigmaのベクターデータをWebで最高効率でレンダリング可能な「極小・高精細なSVG」へと昇華させる最適化テクニックを伝授します。

—

1. Figma出力SVGの闇：なぜ生のSVGは「ゴミ」を含んでいるのか？

Figmaは「非破壊編集（いつでも元の状態に戻せること）」を最優先するように設計されています。この設計思想自体はデザインツールとして正解ですが、Webレンダリングエンジン（ブラウザ）の最適解とは真っ向から対立します。

生のSVGをエクスポートした際によく見られる問題点と、フロントエンドへの影響を整理しましょう。

生のSVGコードに潜む4つの罪

1. 過剰な精度の小数点と絶対座標変換（`transform=”matrix(…)”`）
Figmaのキャンバス上の絶対座標や回転情報がそのまま`matrix`属性として残ります。これにより、Web上でのスケーリングやCSSアニメーションが難解になります。
2. 無駄なグループ化（``）とクリッピングパス（``）
Figmaのフレームやグループ構造がそのまま``として出力されます。ひどい場合には、不要なマスク処理のために1つのアイコンで10個以上の空タグが生成されます。
3. ハードコードされた `fill` / `stroke` 属性
`fill=”#1A1A1A”` のように絶対値で出力されるため、フロントエンドで Hover 時の色変更やダークモード対応を行う際、CSSの `fill: currentColor;` が効かない原因になります。
4. メタデータとFigma固有属性の残留
`xmlns:svg=` や独自ID属性など、ブラウザの描画には一切関係のないバイト数がネットワークを圧迫します。

【比較】生のSVG vs 最適化されたSVG

—

2. Figmaデザイン時の最適化：エクスポート前の構造改革

最適化の第一歩は、Figmaのキャンバス上で不要な複雑性を排除することです。デザイナーとエンジニアが共有すべきベクター作成のベストプラクティスを解説します。

爆速化のためのFigmaショートカットキー

ベクトル操作の無駄を極限まで減らすため、以下のショートカットを指に叩き込んでください。

レイヤー構造と命名規則の3原則

1. フレーム境界の完全固定（Bounding Boxの統一）
すべてのアイコンは `24×24` や `20×20` などの固定規格フレームの中に配置します。フレームの背景は透過にし、子要素のパス座標をフレーム左上 `(0, 0)` に対する相対値として整理させます。
2. ブーリアン演算の「Flatten」徹底
Union, Subtract, Intersectなどのブーリアン演算はFigma内では「ライブ状態（非破壊）」です。このまま出力すると大量のパスデータが残るため、デザイン確定時に `Cmd + E` で完全に1つの複合パス（Compound Path）にまとめます。
3. ID汚染を防ぐレイヤー名
Figmaのレイヤー名は、エクスポート時に `` として出力される場合があります。英数字以外の日本語名や `Group 423` のようなデフォルト名はDOMを汚染するため、レイヤー名はシンプルにするか、後述のツールで自動削除します。

—

3. 完全自動化パイプライン：Figmaからフロントエンド実装へ

手作業での最適化には限界があります。FigmaプラグインとビルドツールのCI/CDを組み合わせたパイプラインを構築します。

必須のFigma神プラグイン

SVG Export Options

`viewBox` の有無、`id` 属性の除外、カラーの `currentColor` 化をエクスポート時点で制御できる必須プラグイン。

Clean Document

プロジェクト全体から、非表示レイヤーの削除、空グループの解除、ピクセルグリッドへのスナップをワンクリックで自動実行。

最強の最適化エンジン「SVGO」の極限設定

フロントエンドのビルドプロセス（またはGit Commit時）に SVGO (SVG Optimizer) を組み込みます。以下は、プロダクション環境で耐えうる最高精度の `svgo.config.js` です。

// svgo.config.js
module.exports = {
multipass: true, // 複数回パスを通して圧縮率を極限まで高める
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxを削除するとレスポンシブ性が失われるため【絶対無効化】
removeViewBox: false,
// 精度の丸め込み（デフォルト: 2桁。16×16〜24×24のアイコンなら精度2で十分）
cleanupNumericValues: {
floatPrecision: 2,
},
// 不要な要素・属性の完全削除
removeUselessDefs: true,
cleanupIDs: true,
},
},
},
// の無駄なネストを完全に崩してフラット化
‘collapseGroups’,
// 描画属性（fill/stroke）にハードコードされたカラーコードを ‘currentColor’ に置き換える
{
name: ‘convertColors’,
params: {
currentColor: true, // 特定の色または全ての色を currentColor 化
},
},
// 無駄な `fill=”none”` や `stroke=”none”` を削除
‘removeUselessStrokeAndFill’,
// 属性の順序をソートしてGzip/Brotliの圧縮率を向上させる
‘sortAttrs’,
],
};

—

4. チーム開発における運用ルールとCI/CD組み込み

どれほど優れた設定ファイルを書いても、チーム全体で運用ルールが徹底されなければ意味がありません。開発プロセスに「最適化の自動化ガードレール」を設置しましょう。

Husky + lint-staged によるGitコミット時の自動コミットフック

デザイナーがエクスポートしたSVGファイルをリポジトリの `src/assets/icons/` に追加した瞬間、自動的にSVGOが走り、極限まで軽量化された状態でコミットされる環境を作ります。

`package.json` の設定例

{
“scripts”: {
“prepare”: “husky install”
},
“lint-staged”: {
“src/assets/icons/.svg”: [
“svgo –config=svgo.config.js”,
“git add”
]
},
“devDependencies”: {
“husky”: “^8.0.0”,
“lint-staged”: “^13.0.0”,
“svgo”: “^3.0.0”
}
}

チーム共有用の「SVG Iconガイドライン」テンプレート

デザインシステム運用時、デザイナーとエンジニアのハンドオフ資料（Figma Componentの冒頭など）に以下のルールを明記してください。

【アイコンコンポーネント制作ルール】
1. キャンバスサイズ: 24x24px（固定）
2. カラー: #000000（単色）で作成すること（コード化時に `currentColor` へ自動変換されるため）
3. パスの状態: 制作完了時、全レイヤーを選択して `Cmd + E` (Flatten) を実行し、1個のパスにする
4. 線（Stroke）の使用: 原則不可。すべて `Cmd + Shift + O` で塗り（Fill）へ変換すること
5. レイヤー構造: 不要な Group / Frame のネストは全廃すること

—

まとめ：1バイトへの拘りが製品の品質を決める

SVGの最適化は、単なる「ファイルサイズの削減」にとどまりません。

1. レンダリングの高速化（ブラウザのレイアウト計算負荷とDOMツリーの軽減）
2. 保守性の飛躍的向上（CSSによる柔軟なスタイリングとカラー制御）
3. デザインシステムとコードの一致（不要なラッパーや不確定要素の排除）

UI/UXエンジニアの本質は、デザインの美しい意図を、一滴の無駄もなくコードへと変換することにあります。Figmaから書き出すその1つのSVGに魂を込め、チーム全体の開発パフォーマンスを圧倒的な高みへと引き上げましょう。