Penpotを「コードの源泉」へ変える：SVGパス制御とCSSカスタムプロパティの完全同期
多くのデザイナーが「PenpotはFigmaのOSS代替品」と誤解している。それは浅すぎる。Penpotの真の価値は、そのエンジンがWeb標準であるSVGとCSS Grid/Flexboxをそのままデータ構造として保持している点にある。
我々エンジニアにとって、Penpotは単なる描画ツールではない。「コードの仕様書そのもの」であり、適切に設計すれば、プロトタイプからプロダクトへのハンドオフをゼロコストにまで圧縮できる。本稿では、PenpotのSVG構造を極限までハックし、フロントエンドのパフォーマンスを最適化する「究極の連携フロー」を伝授する。
—
1. SVGパス構造の「最適化設計」：コード化を前提としたレイヤー戦略
デザイナーが適当に描いたベクターデータは、フロントエンドでは単なる「肥大化したDOMの塊」に過ぎない。エンジニアが介入すべきは、Penpot上のレイヤー命名規則と、パスの構造定義だ。
命名と階層の厳格化
Penpotで命名したIDはそのままSVGの`id`として出力される。これを利用し、CSSセレクタから直接操作可能な「コンポーネント指向命名」を強制せよ。
- ルール: `Icon_User_Active` のように、`要素名_機能_状態` で構成する。
- 利点: SVG内のパスを `document.getElementById(‘Icon_User_Active’).style.fill` で直叩きできるため、不必要なラッパーDOMを排除できる。
SVG最適化ハック
Penpotからエクスポートする際、何も考えずに書き出してはならない。我々はCLIツールを用いて、CI/CDパイプラインで自動的に最適化する。
svgoを用いた自動最適化スクリプト (ci-optimize.sh)
不要なメタデータ、隠し要素、高精度すぎる座標を削ぎ落とす
svgo ./assets/.svg –config='{
“plugins”: [
“removeDoctype”,
“removeXMLProcInst”,
“removeComments”,
“minifyStyles”,
{
“name”: “cleanupIDs”,
“params”: { “minify”: true }
},
“removeViewBox”
]
}’
—
2. CSSカスタムプロパティ（変数）による「デザイン・データ・バインディング」
Penpotの最大の強みは、CSS変数への対応だ。ここを突き詰めると、UIの状態管理をJSではなくCSSだけで完結させることができる。
プロトタイプと実装の同期
Penpot内で「Design Token」として定義した変数を、フロントエンドの `:root` で再定義する。これにより、Penpot上の微調整がそのままCSSの調整に直結する。
JSによる状態制御の排除（パフォーマンス最適化）:
Penpot上のSVGパスにクラスを付与し、親コンテナのデータ属性でCSSを切り替える手法を推奨する。
/ フロントエンド側のCSS実装例 /
[data-state=”active”] .icon-path {
fill: var(–color-primary);
transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
—
3. Penpot APIをハックする：デザインシステムの完全自動パイプライン
Penpotには強力なREST APIが存在する。これを使えば、Figmaの「手動エクスポート」という非効率な儀式から解放される。
自動取得スクリプトの断片
Penpotのワークスペースから最新のSVGアセットを自動でプルし、プロジェクトの `public/assets` に同期するNode.jsスクリプトのプロトタイプだ。
// sync-penpot.js
const axios = require(‘axios’);
const fs = require(‘fs’);
async function syncAssets(fileId, apiKey) {
// Penpot APIからSVGパスを取得
const response = await axios.get(`https://penpot.app/api/v1/files/${fileId}/svg`, {
headers: { ‘Authorization’: `Token ${apiKey}` }
});
// レスポンスのJSON構造からSVGコンテンツを抽出しファイル化
response.data.forEach(item => {
fs.writeFileSync(`./src/assets/${item.name}.svg`, item.svgContent);
});
}
これをGitHub Actionsに組み込めば、デザイナーがPenpotで保存した瞬間に、開発環境のアセットが自動更新されるCI環境が完成する。
—
4. メモリ消費とレンダリングの最適化：低レイヤ視点
複雑なプロトタイプをWeb上で動かす際、最も致命的なのは「SVGの複雑度による描画負荷（Layout Thrashing）」だ。
1. パスの簡略化: Penpot上で「Simplify Path」を行い、不要なアンカーポイントを削除する。複雑なパスはレンダリングのCPU負荷を増大させる。
2. CSS Animation vs SMIL: SVG内のSMILアニメーションは使用禁止とせよ。ブラウザのレンダリングエンジンと競合し、パフォーマンスを著しく低下させる。常に「CSSの `transform`」または「GSAP」によるハードウェアアクセラレーションを活用すること。
3. Will-changeの活用: 頻繁に動くSVG要素には `will-change: transform;` を付与し、GPUレイヤーを分離せよ。これにより、メインスレッドの負荷を劇的に低減できる。
—
結びに：デザインを「コードの副産物」にするために
我々エンジニアがPenpotを使いこなす目的は、綺麗なデザイン画を描くことではない。「デザインをデータとして定義し、それをコードの構築パイプラインに直結させること」にある。
PenpotのSVG構造を深く理解し、APIを叩き、CSS変数で制御する。このフローを構築した瞬間、あなたは「デザイナーの指示を待つエンジニア」から「デザインと実装を同時に設計するアーキテクト」へと進化するはずだ。
さあ、GUI上の箱を並べる作業は卒業しよう。君たちが触っているのは、一つのシステムなのだから。