PenpotのSVGコード直接編集を極める：デザインとコードの境界を消し去るメタ・プロトタイピングの真髄
多くのデザイナーやエンジニアは、Penpotを「ブラウザで動くFigmaの代替品」程度に捉えている。だが、それはあまりに浅い。Penpotの真の価値は、その内部アーキテクチャが「ネイティブなSVG構造」と密接に結合されている点にある。
我々のような、デザインと実装の溝に絶望し、それを自動化で埋めることに人生を捧げてきた人間にとって、Penpotの「Code Editor（SVGインスペクション）」は、単なるプレビュー機能ではない。これは「キャンバスをIDEとして扱うためのバックドア」だ。
本稿では、GUIの制約を脱ぎ捨て、SVGの数学的定義を直接ハックすることで、デザインの品質を極限まで高める技術を伝授する。
—
1. なぜ「GUI」だけでは不十分なのか
GUIツールは、複雑なパスを生成する際に冗長なメタデータや、描画エンジン特有の不要な属性を付与しがちだ。特に、CSSアニメーションやSVGフィルターと連動させる際、これらの「ノイズ」はパフォーマンスの劣化や、ブラウザごとのレンダリングの不一致を招く。
PenpotのCode Editorを叩くことは、いわば「SVGという抽象概念を、コンパイラを通さずに直接バイナリレベルで調整する」行為に近い。
2. 実践：SVGコード直打ちによる「パス最適化」の裏技
複雑なベクターシェイプをデザインした後、エンジニアがそのまま使うと、多くの場合`d`属性（パスデータ）が最適化されていない。
匠のテクニック：パスの正規化と圧縮
Penpotで書き出したSVGをCode Editorで開き、以下の処理を手動（あるいはスクリプト）で行うことで、ファイルサイズを劇的に削減できる。
- 絶対座標から相対座標への変換: `M 10 10 L 20 20` よりも `m 10 10 l 10 10` の方が、gzip圧縮効率が飛躍的に高まる。
- 不要な小数点以下の切り捨て: デザイン上、0.0001pxの差異は視覚的に無意味だ。`12.34567`を`12.3`に丸めるだけで、パス文字列は短縮される。
自動化スクリプト：Penpot API × SVGO パイプライン
PenpotのAPI経由でデータを取得し、CI/CDパイプラインで自動的に最適化をかけるためのノードスクリプトの断片を公開する。
/
- PenpotからエクスポートしたSVGを最適化するパイプライン
- 内部的にはSVGOのエンジンをラップして、コードの純度を高める
/
const { optimize } = require(‘svgo’);
const rawSvg = `…PenpotのCode Editorから取得した文字列…`;
const result = optimize(rawSvg, {
plugins: [
‘removeDoctype’,
‘removeXMLProcInst’,
‘minifyStyles’,
{
name: ‘preset-default’,
params: {
overrides: {
convertPathData: { floatPrecision: 1 }, // 精度を落として軽量化
cleanupNumericValues: { floatPrecision: 1 }
},
},
},
],
});
console.log(result.data); // これをそのままフロントエンドのコンポーネントとして配布する
3. アニメーションを加速させる「パス同期」の極意
SVGアニメーション（特に`stroke-dasharray`を利用した描画アニメーション）において、最も苦労するのは「パスの長さの計算」だ。
Penpot内でシェイプを描いた直後、Code Editorを開き、パスに `id` を付与してやる。このIDをReactやVueのコンポーネント内で参照すれば、デザイナーがPenpot上で形状を修正しても、コード側は自動的に追従する設計が可能だ。
エキスパートの思考法：
デザインを完成させるのではなく、「伸縮可能なパス（Elastic Path）」を定義すると考えよ。デザインシステムにおける「アイコン」は静的な画像ではない。コードとキャンバスの間を往来する、動的なデータ構造であるべきだ。
4. DevOpsの視点：デザイン・オブザーバビリティの構築
Penpotを単なるツールとして使うのではなく、WebフックやAPIを叩くCLIツールと組み合わせることで、「デザインの変更がGitのコミットをトリガーする」という理想的な環境を構築できる。
内部ハック：メモリ消費の最適化
Penpotのキャンバスに数千のノードを置くと、ブラウザのメモリ消費は跳ね上がる。これを防ぐには、「コンポーネントの再利用（Symbols）をコードベースと同期させる」ことだ。
1. PenpotのSymbol（コンポーネント）を、コード側のAtom（最小UIパーツ）としてマッピングする。
2. SVGコード内の `id` 属性を命名規則に従って自動生成し、ReactのPropsとハッシュ値で結合する。
3. これにより、不要なDOMノードのレンダリングを防ぎ、UIのレスポンス速度を限界まで高める。
—
結論：デザイナーとエンジニアの境界を破壊せよ
PenpotのCode Editorを使いこなすということは、「デザインとは、最終的な製品のプレビューである」という幻想を捨てることだ。
デザインは、コードという実体を持つための抽象的な準備段階に過ぎない。SVGコードを直接ハックし、最適化し、自動化パイプラインに組み込むことで、初めて「真のプロダクトデザイナー」としての仕事が始まる。
ツールに使われるな。ツールをハックし、その背後にある数式を支配せよ。
それが、我々が目指すべき次世代のUIエンジニアリングの姿だ。