こんにちは！プロダクト開発の現場で、デザイナーとエンジニアの橋渡しに情熱を燃やしている先輩エンジニアです。
今日は、オープンソースの本格的デザインツール「Penpot」と、モダンなフロントエンド開発を直結させる、とっておきの実践知見をお話しします。
「デザインカンプからSVGを書き出してそのままコードに貼ったら、謎のメタデータや不要なグループタグが満載で、スタイルの上書きに苦労した……」
そんな絶望を味わったことはありませんか？これをマスターすれば、毎日のアセット調整作業が劇的に楽になり、プロダクション環境にそのまま耐えうる「極限まで軽量化された美しいSVG」を爆速で手に入れられるようになります。
今回は、Penpotの基本セットアップから、SVG最適化の極意、そしてビルドパイプラインへの組み込みまでを一気に駆け抜けていきましょう。
—
1. Penpotとは何か？（ツールの役割と選定理由）
Penpotは、デザインとコードのギャップを埋めるために生まれた、オープンソース初のWebベース・デザイン＆プロトタイピングツールです。
最大の特長は、レイアウトエンジンにCSS FlexboxやGridの概念がネイティブで組み込まれている点です。つまり、最初から「Webの構造」を意識したデザインが可能になっています。Figmaなどの優れたツールは数あれど、「デザイナーが作ったレイアウトが、そのままエンジニアのメンタルモデル（CSS）と完全に一致する」という体験において、Penpotの優位性は群を抜いています。
2. インストールと最も重要な基礎セットアップ
Penpotを始めるのは驚くほど簡単です。今回はローカル環境でサクッと立ち上げる方法を見ていきましょう。Dockerさえ入っていれば、わずか数分であなた専用のPenpot環境が手に入ります。
Docker Composeによる起動
適当なディレクトリに `docker-compose.yml` を作成し、以下の設定を記述します。
version: “3.8”
services:
penpot-frontend:
image: penpot/frontend:latest
ports:
- “9001:8080”
restart: always
depends_on:
- penpot-backend
- penpot-exporter
penpot-backend:
image: penpot/backend:latest
restart: always
environment:
- PENPOT_PUBLIC_URI=http://localhost:9001
depends_on:
- penpot-postgres
penpot-exporter:
image: penpot/exporter:latest
restart: always
penpot-postgres:
image: postgres:15
restart: always
environment:
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot
volumes:
- penpot_postgres_data:/var/lib/postgresql/data
volumes:
penpot_postgres_data:
external: false
ターミナルで以下のコマンドを実行します。
docker compose up -d
ブラウザで `http://localhost:9001` にアクセスすれば、Penpotのウェルカム画面があなたを迎えてくれます。
—
3. HelloWorld的な動作確認：プロダクション品質のSVGを意識した最初のコンポーネント
さて、環境が整ったら、さっそく「プロダクション直結のSVG」を出力するための基礎作りの動作確認をしてみましょう。
命名規則とグループ構造の鉄則
PenpotからエクスポートされるSVGは、レイヤーパネルの構造と名前をそのまま引き継ぎます。ここに無頓着だと、出力されたコードに `g id=”Rectangle-Copy-2-3″` のようなゴミが量産されます。
1. アートボードの作成: 24x24pxのアイコン用アートボードを作成（名前を `icon-arrow-right` とリネーム）。
2. パスの整理: パスやシェイプの名前を、CSSで扱いやすいように `shape-base` など意味のある名前に変更。
3. グループの最小化: 不要なグループ（`Ctrl + G` で生成される階層）は極力排除し、フラットな構造を保つ。
これらを意識してキャンバス上に簡単な矢印アイコンを作り、右パネルの「Export」からSVG形式でダウンロードしてみてください。
—
4. 本題：不要なメタデータを一掃しプロダクション直結のSVGを出力する設定術
エクスポートしたSVGを開いてみてください。「``」や、編集用の不要な属性、エディタ固有のIDが残っていませんか？
これを手動で消すのはエンジニアの仕事ではありません。SVGO（SVG Optimizer）を用いた自動化パイプラインを構築し、デザインの変更からプロダクションコードへの反映までを完全自動化しましょう。
ステップ1: プロジェクトへのSVGOの導入
フロントエンドのプロジェクトルートで、SVGOをインストールします。
npm install -D svgo
ステップ2: 攻めの `svgo.config.js` の作成
ここが今回の核心です。デザイナーがPenpotからきれいに書き出したSVGに対し、「デザインの意図（色や形状）は保持しつつ、Webにとって不要な情報を徹底的に削ぎ落とす」ための設定ファイルを作成します。
プロジェクトのルートに `svgo.config.js` を配置してください。
// svgo.config.js
module.exports = {
multipass: true, // 圧縮を限界まで繰り返す
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブ対応に必須なので絶対に消さない
removeViewBox: false,
// CSSでfillを制御したいので、デフォルトの黒色などを強制削除（ currentColor化の準備）
removeAttrs: { attrs: ‘(xmlns)’ },
},
},
},
// Penpot固有の不要なメタデータやコメントを削除
‘removeComments’,
‘removeMetadata’,
‘removeEditorsNSData’,
// 使われていないIDやクラスをパージ
‘cleanupIds’,
// パスを極限まで軽量化（小数点以下の桁数を丸める）
{
name: ‘convertPathData’,
params: {
floatPrecision: 2, // 2桁に丸めることで精度を保ちつつ容量削減
},
},
// 可能な限りCSSで色を変えられるように currentColor を適用したい場合に追加
// {
// name: ‘addAttributesToSVGElement’,
// params: {
// attributes: [{ fill: ‘currentColor’ }],
// },
// },
],
};
ステップ3: ビルドパイプラインへの組み込み（自動化の裏技）
デザイナーが新しいSVGを `src/assets/svg/raw/` に放り込んだら、ビルド時やコミット時に自動で最適化され、`src/assets/svg/optimized/` に出力される仕組みを作りましょう。
`package.json` に以下のスクリプトを追加します。
“scripts”: {
“svg:optimize”: “svgo -f src/assets/svg/raw -o src/assets/svg/optimized”
}
これで、ターミナルで `npm run svg:optimize` と叩くだけで、Penpot由来の冗長なSVGが一瞬にしてプロダクションクオリティの軽量コードに生まれ変わります。さらにこれを `husky` などのGitフックや、CI/CDのビルドプロセスに組み込んでしまえば、手動の最適化作業は完全にゼロになります。
—
おわりに
いかがでしたでしょうか？
Penpotという強力なオープンソースツールをベースに、レイヤーの命名規則という「デザイン側の工夫」と、SVGOによる「コード側の自動化」を組み合わせることで、デザイナーとエンジニアの境界線は驚くほどシームレスになります。
「デザインが変わるたびにSVGのコードを手で修正している……」そんな無駄なストレスから今日で解放されましょう。毎日の開発体験が、もっと楽しく、もっとスマートになりますように！