Penpot SVG Code Editor極限活用術：デザインとコードを完全同期させるプロダクション・ハック
テックリードの皆さん、日々のデザインハンドオフに疲弊していないか？
「デザイナーが納品したFigmaのアセットを、エンジニアがコードに落とし込む過程でパスが崩れる」「SVGの不要なメタデータ（`
私たちは長年、この「デザインとコードの断絶」という構造的負債を抱えてきた。しかし、オープンソース・プロトタイピングの旗手であるPenpotが持つ「SVG Code Editor（内部コード直接編集機能）」を正しくハックすれば、このワークフローは劇的に変わる。
Penpotは単なる「オープンソースのFigma代替」ではない。「デザインの実体が最初からクリーンなSVGコードである」という、エンジニアにとって最も都合の良い真実を突き詰めたツールだ。
本稿では、PenpotのSVG Code Editorを極限まで使い倒し、デザインとコードを完全同期させて開発スピードを爆発的に高めるプロの実践テクニックを徹底解説する。
—
1. Penpot SVG Code Editorの核心：なぜ「生コード編集」なのか？
GUIキャンバス上での操作は直感的だが、複雑なベクターグラフィックス、データビジュアライゼーション、あるいはマイクロインタラクション用のSVGアセットを扱う場合、GUIの抽象化レイヤーが足かせになる。
PenpotのCode Editor（右サイドバーの下部、またはショートカットで呼び出すコードビュー）は、キャンバス上のオブジェクト構造とSVGのDOMが完全な双方向バインディング（Two-way binding）で結ばれている。
プロが知るべきキーボードショートカット
開発生産性を極限まで高めるため、以下のショートカットを指に叩き込んでほしい。
- Code Editorのトグル: `Ctrl + Alt + C` (Mac: `Cmd + Option + C`)
- Tip: 画面分割（Split View）の要領でコードとビジュアルを同時に監視しながらパスをいじるのが現代のテックリードのスタイルだ。
- コード変更の即時反映: `Ctrl + Enter` (Mac: `Cmd + Return`)
- エディタ内で書き換えたSVGコードを、一瞬でキャンバス上のベクターノードへコンパイルする。
—
2. アニメーション用パス（Path）の極限最適化テクニック
CSS/JSアニメーション（`stroke-dasharray`や`motion-path`など）を実装する際、デザイナーが作成したパスの構造が複雑すぎたり、不要なグループ（`
実例：無限ローディングスピナーのパス最適化
GUIで綺麗な円を描こうとすると、予期せぬオフセットや不要なトランスフォーム属性が埋め込まれることがある。これをCode Editorで直叩きし、プログラム制御しやすい「神コード」に浄化する。
Before（GUI生成の冗長なSVG）:
After（Code Editorでリファクタリング後）:
余計な`
この状態であれば、フロントエンドエンジニアはCSSの `@keyframes` で `stroke-dashoffset` を操作するだけで、バグのない滑らかなアニメーションを数行で実装できる。
—
3. チーム開発を加速する：SVGクリーンアップと設定の共有化ルール
複数人で大規模なデザインシステムを構築する際、SVGの命名規則や属性の揺れは、プロダクトのビルドエラーやパフォーマンス低下の温床になる。Penpotのチーム機能とコードエディタを組み合わせ、組織としての「コード品質のガバナンス」を効かせる。
必須のクリーンアップ・ルール
1. IDのセマンティクス化: デフォルトで生成される乱数ID（例: `path-94821`）はすべて削除または意味のあるBEM風のID（例: `id=”icon-cart-badge”`）にリネーム。
2. インラインスタイルの排除: `style=”fill: #000; …”` のような記述を禁止し、可能な限りpresentation attribute（`fill=”currentColor”`など）に変換して、テーマ（ダークモード等）の切り替えに対応させる。
チーム共有すべき設定ファイル（Design Token連携）
Penpotのデザイン変数をコード側と完全に同期させるため、プロジェクトのルートに配置する設定ファイルのベストプラクティスを共有する。
`penpot-tokens.json` (デザインシステム用トークン定義)
PenpotのプラグインやAPI連携、またはCI/CDパイプラインでSVGの色やサイズを自動検証するための設定例。
{
“$schema”: “https://json.schemastore.org/design-tokens.json”,
“version”: “1.0.0”,
“description”: “Penpot SVG Code Editor pipeline synchronization tokens”,
“color”: {
“primary”: {
“value”: “#3B82F6”,
“type”: “color”,
“comment”: “SVGのデフォルトプライマリカラー。currentColorへの置換対象”
},
“surface”: {
“value”: “#0F172A”,
“type”: “color”
}
},
“vector”: {
“strokeWidth”: {
“sm”: { “value”: “1”, “type”: “dimension” },
“md”: { “value”: “2”, “type”: “dimension” },
“lg”: { “value”: “4”, “type”: “dimension” }
}
}
}
`.svgo.yml` (SVG自動最適化設定)
Penpotからエクスポート、あるいはCode Editor経由で抽出されたSVGを、コミット前に自動でプロダクション品質に引き上げるためのSVGO設定。チームのGitリポジトリ（`.github/workflows`等）に組み込むことを強く推奨する。
.svgo.yml – Production-grade SVG Optimization for Penpot Exports
multipass: true # 完全に最適化されるまでパースを繰り返す
plugins:
- name: preset-default
params:
overrides:
removeViewBox: false # レスポンシブ対応に必須のため維持
cleanupIds: true # Penpot特有の重複IDをパージ
- removeDimensions: true # width/heightを削除しCSS制御（width/height 100%）を可能に
- sortAttrs: true # 属性順序を統一しGitのDiffをクリーンに保つ
- name: removeAttrs
params:
attrs: ‘(data-name|ns:.)’ # Penpotの内部メタデータを徹底削除
- inlineStyles:
params:
onlyMatchedOnce: false
—
4. エンジニアとの引き渡し（Hand-off）を爆速にするワークフロー
従来のワークフローでは、「デザイン修正が発生する ➔ デザイナーが修正する ➔ エクスポートする ➔ エンジニアがコードをコピペして調整する」という膨大な無駄があった。
PenpotのCode Editorを軸にしたモダン・ワークフローはこうだ：
1. コンポーネントの直接コード編集:
エンジニアがPenpotのプロジェクトにアクセスし、該当コンポーネントのCode Editorを開く。微細なパディングの調整や、SVGパスの微調整をエンジニア自身がコードで行い、即座にプレビューを確認する。
2. Gitワークフローとの直結:
Penpotのオープンなデータ構造とAPIを活用し、Code Editor内のSVGスニペットを直接コンポーネントライブラリ（React / Vue / Svelte）の `.tsx` / `.vue` ファイルへCI/CD経由で同期するパイプラインを構築する。
—
5. 終わりに：ツールに縛られるな、コードを支配せよ
多くのデザイナーはコードを恐れ、多くのエンジニアはデザインツールを嫌う。しかし、PenpotのSVG Code Editorはその境界線を溶かす「特異点」だ。
GUIの快適さと、コードの絶対的な制御力。その両方を手に入れたチームだけが、圧倒的なスピードと美しいプロダクトの品質を両立できる。
今日から、Penpotを開き、`Ctrl + Alt + C` を押せ。そこにあるコードこそが、君たちのプロダクトの未来を形作る原石だ。遠慮せずに、直接ハックしろ。