【実務・中級編】Sketchの「Smart Export」とSVGO最適化：Web・アプリの読み込み速度を劇的に改善する軽量化の裏技 – UI/UX・デザインツール活用バイブル

Sketchの「Smart Export」とSVGO最適化：Web・アプリの読み込み速度を劇的に改善する軽量化の裏技

プロダクトのパフォーマンスは、そのままUXの品質に直結する。LCP（Largest Contentful Paint）やTBT（Total Blocking Time）の最適化にどれだけフロントエンドエンジニアが奔走していようとも、デザインハンドオフの段階で肥大化したSVGや無駄なメタデータを含むPNGが混入していれば、その努力は一瞬で水泡に帰す。

特にアイコンやベクターイラストレーションの主流であるSVGは、「テキストファイルである」がゆえに、デザインツールが吐き出すゴミ（エディタ固有のメタデータ、隠しレイヤー、不要なグループ、不可視のパス）をそのまま抱え込みやすい。

本稿では、Sketchの「Smart Export」のポテンシャルを極限まで引き出し、CLIツール群（SVGO）とエコシステムを結合させることで、「デザイナーが書き出した瞬間に、エンジニアがそのままプロダクトのコアコードに組み込めるクリーンなアセット」を自動生成する究極のワークフローを解説する。

—

1. なぜSketchのデフォルト書き出しではファイルサイズが肥大化するのか？

Sketchの「Make Exportable」は極めて直感的で優れた機能だが、何も考えずに書き出すと以下の「パフォーマンスキラー」が生成される。

1. エディタ依存のネームスペース: IllustratorやSketch特有の `sketch:` タグや `inkscape:` などの不要なXML属性。
2. 隠しレイヤーと空の `` タグ: デザインの試行錯誤の過程で残された不可視の要素や、構造化されていない単なるグループ化の残骸。
3. 過剰な小数点以下の精度: ベクターの座標値が `12.3456789px` のような高精度（浮動小数点）で出力される。Webブラウザの描画において、小数点第3位以降の精度は視覚的に判別不可能であり、純粋なバイト数の無駄遣いだ。
4. 不要な `id` 属性: デザイン上で使用されていたレイヤー名（例: `Rectangle 1 Copy`）がそのままSVGのIDとして残り、ファイル容量を圧迫するだけでなく、HTML埋め込み時のクラス名汚染や重複バグの原因になる。

これらを人力でクレンジングするのはエンジニアの仕事ではない。デザインシステムを構築するプロフェッショナルであれば、「パイプラインの自動化」によって根絶すべきである。

—

2. 開発スピードを加速させるSketchの隠しショートカット

まず、デザインの源流であるSketch側でのアセット準備を極限まで効率化する。マウス操作を排除し、キーボードショートカットで爆速のグルーピングとエクスポート設定を行え。

  • `Cmd + Shift + E`: 「Export」パネルの即座の呼び出し。
  • `Cmd + G` (シンボル化 / グループ化): アセットのルートとなるアートボードやグループの命名規則（例: `icon/24/search`）を瞬時に整える。
  • アセットの命名規則（Smart Exportの肝）:

SketchのSmart Exportでは、スラッシュ（`/`）を用いることで、書き出し時に自動的にディレクトリ構造を生成できる。

  • レイヤー名: `components / buttons / primary`
  • 書き出し設定: PDF / SVG / PNG@1x, @2x
  • 結果: `components/buttons/primary.svg`, `components/buttons/primary.png` などが指定フォルダへ一発で整理されて出力される。

—

3. チーム開発の品質を担保する「神プラグイン」と環境構築

Sketch単体ではカバーしきれない最適化のラストマイルを埋めるのが、プラグインとCLIの連携だ。

必須プラグイン: SVGO Compressor

  • 概要: Sketch上でSVGを書き出す際、内部で自動的にSVGO（SVG Optimizer）を走らせてくれるプラグイン。
  • 導入のメリット: デザイナーは普段通り「Export」を押すだけで、軽量化されたSVGがディスクに保存される。エンジニアへ渡す前の「最適化忘れ」を物理的に防ぐことができる。

CLIによる完全自動化: `svgo` との連携

プラグインだけでは対応しきれない複雑なバッチ処理や、デザインシステム全体のCI/CDパイプライン（GitHub Actionsなど）に組み込むために、Node.jsベースのSVGOを使いこなす。

グローバルインストール（プロジェクトごとのローカルインストールを推奨）
npm install -g svgo

—

4. 実用的な設定ファイル（YAML）のベストプラクティス構成例

SVGOの真価は、プロジェクトの要件に合わせた「設定ファイル（`svgo.config.mjs` または `svgo.config.js`）」のチューニングにある。過剰に最適化しすぎてSVG内のパスが崩れては本末転倒だからだ。

以下に、Web・アプリ開発の現場で最も堅牢かつアセットを極限まで削ぎ落とす、実戦投入済みの設定ファイルコードを提示する。

`svgo.config.mjs` (ES Modules)

/

  • Production-ready SVGO Configuration for Design Systems
  • チーム全体のUIアセット最適化の基準となる設定

/
export default {
multipass: true, // 完全に最適化されるまでパースを複数回繰り返す（強力な圧縮）
js2svg: {
indent: 2, // 可読性を保つためのインデント（本番埋め込み時は 0 でも可）
pretty: false, // 圧縮モードを有効化
},
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブデザインの命なので絶対に削除しない
removeViewBox: false,

// アイコンの色をCSS（currentColorなど）で制御するため、ハードコードされた色を削除
// ※多色アイコンの場合はこの設定を外すか、個別に調整してください
removeUnknownsAndDefaults: {
keepDataAttrs: false,
},
},
},
},
‘sortAttrs’, // 属性の順序をソートし、Gitの差分をクリーンに保つ
‘removeDimensions’, // width / height属性を削除し、viewBoxによる完全なレスポンシブ化を促す
{
name: ‘removeAttrs’,
params: {
// Sketch固有の不要なメタデータ属性を徹底排除
attrs: ‘(sketch:type|data-name|fi-.)’,
},
},
],
};

この設定ファイルをプロジェクトのルートに配置し、以下のコマンドで一括処理を行えるようにしておく。

ディレクトリ内の全SVGを一括最適化
svgo -f src/assets/svg -o dist/svg –config ./svgo.config.mjs

—

5. チーム開発における共有化ルールとワークフローの構築

優れたツールと設定も、チームで運用ルールが属人化しては意味がない。以下のフローをチームの標準（Definition of Done）として定着させよ。

1. 命名規則の厳格化:
Sketch上のレイヤー名・アートボード名は、そのままフロントエンドのコンポーネント名やファイル名になることを意識させる。「`Rectangle copy 3`」のような名前が存在した時点で、PRレビューでリジェクトする文化を作る。
2. デザインハンドオフの自動化:
デザイナーはSketchのSmart Exportで指定ディレクトリに書き出す。
Git管理下であれば、pre-commitホック（Husky等）やGitHub ActionsでSVGOを自動実行し、リポジトリにコミットされるSVGは常に最適化された状態を強制する。

# GitHub Actions Workflow例 (.github/workflows/optimize-svg.yml)
name: Optimize SVGs
on:
push:
paths:

  • ‘src/assets//.svg’

jobs:
svgo:
runs-on: ubuntu-latest
steps:

  • uses: actions/checkout@v4
  • name: Run SVGO

uses: svg/svgo-action@v3
with:
config: ./svgo.config.mjs

3. PNGの取り扱いについての補足:
PNGに関してはSketchの「Make Exportable」で `@1x` と `@2x` を適切に書き出し、ビルドプロセスまたはCDN（CloudinaryやImageKitなど）側でWebP / AVIFへの自動変換パイプラインを通す。Sketch上では「必要最低限の解像度で原寸書き出しする」ことだけを担保する。

—

結びにかえて

ツールを「ただ使う」レベルから、「システムとしてハックする」レベルへ引き上げること。それがテックリードの役割だ。

SketchのSmart ExportとSVGOを組み合わせたこのワークフローを導入すれば、ファイルサイズは平均で 30%〜70% 削減され、Gitの差分は美しくなり、何よりもエンジニアが「デザインデータのゴミ掃除」という無駄な作業から解放される。

デザインとコードの境界線をシームレスにつなぎ、プロダクトのパフォーマンスを極限まで高めろ。今日から君のチームのパイプラインを書き換えるんだ。

スポンサーリンク
タイトルとURLをコピーしました