【実務・中級編】PenpotでSVGアイコンやベクターグラフィックスを自在に操る！パス編集の裏技 – UI/UX・デザインツール活用バイブル

PenpotでSVGアイコンを極限まで効率化する：ベクターネットワークとパス編集の現場チートシート

テックリードの君なら、デザインツールの選定において「オープンソースであること」「Gitとの親和性」「エンジニアのメンタルモデルに直結するかどうか」がいかに重要か痛感しているはずだ。Figmaの商業的ロックインから脱却し、真のオープンエコシステムを手に入れようとするチームにとって、Penpotは単なる代替ツールではない。SVGをファーストクラスの市民として扱う、エンジニアにとって最も「ハックしがいのある」次世代デザインプラットフォームだ。

本稿では、Penpotの真骨頂である「ベクターグラフィックスの直接制御」に焦点を当てる。開発スピードを劇的に落とす非効率なアイコン修正からチームを解放し、デザインシステムとコードベースをシームレスに繋ぐためのプロの極意を伝授しよう。

—

1. ベクターネットワークの衝撃：従来の「パス」の概念を捨てよ

Adobe Illustratorや従来のツールで培った「アンカーハンドルとベジエ曲線の格闘技」は、Penpotのベクターネットワーク（Vector Networks）の前では過去のものとなる。

なぜベクターネットワークなのか？

通常のパスは「一本の連続した線（あるいは閉じられたループ）」だが、ベクターネットワークは「複数のポイントとセグメントが蜘蛛の巣状に交差するグラフ構造」だ。これにより、以下のメリットが生まれる。

方向の呪縛からの解放: 1つのポイントから3本以上のセグメントを伸ばすことが可能。
非破壊的な交差: パスを切断することなく、後からラインを追加・削除できる。
SVG出力の最適化: 無駄な複合パス（Compound Path）のネストを防ぎ、クリーンなDOM構造を維持できる。

【実戦テクニック】複雑なUIアイコンを一筆書きで構築する

例えば、データビジュアライゼーション用の「折れ線とノードが入り交じる複雑なアイコン」を作る場合を想像してほしい。

1. ベースの網目を作る: ペンツール（`P`）で、トポロジーを意識せずに点を打っていく。必要に応じて既存のセグメントの途中から新しいラインを引き出す（`Alt/Option`を押しながらドラッグ）。
2. 交点ハンドリング: セグメント同士が交差する部分で自動的にスナップが効く。余計なパスファインダー演算（合体・型抜き）を行う必要はない。
3. 厚みの付与: セグメントごとにストローク幅や端点（Cap/Join）を個別に調整可能。CSSの `stroke` プロパティの挙動と完全に一致するため、フロントエンドに実装した際の「見た目の乖離」がゼロになる。

—

2. 開発スピードを加速させる！隠れたキーボードショートカット

マウス操作でメニューを行き来しているようでは、テックリードの名が廃る。Penpotのベクター編集効率を限界突破させるショートカットを体に叩き込め。

> Pro Tip: パス編集モード（`Enter`）に入った状態で、特定のノードを選択して `Option/Alt` を押しながらドラッグすると、元の形状を保持したまま新しいベクターセグメントが「生えてくる」。この直感性は、SVGの `` 要素の `d` 属性のメンタルモデルと完全に一致する。

—

3. チーム開発の品質を担保する：設定共有化とデザインシステムルール

デザイナーとエンジニアが混在するチームにおいて、「勝手に生み出された汚いSVG」は技術的負債の温床だ。Penpot上でクリーンなアセット運用を実現するためのガバナンスルールを定義する。

共有コンポーネントの命名規則と構造化ルール

SVGアイコンをチームの共通資産（Library）として配布・同期する際は、以下の構造を強制すること。

1. フレームの厳格化: 全てのアイコンは必ず `24x24px`（または `16x16px`）のベースフレーム内に配置する。
2. 単一レイヤー原則: アイコン内部のベクターは、可能な限り単一のパス、あるいは論理的に意味のあるグループにまとめる。
3. カラーの変数化（Design Tokens）: ハードコーディングされた色は禁止。必ずPenpotの「Colors（Theme Tokens）」に紐付けること。これにより、ダークモード対応時のSVG色反転が自動化される。

—

4. 実用設定ファイル：デザインからコードへのブリッジ

Penpotで作成したSVGやデザインシステムの設定は、APIやプラグイン、あるいはCI/CDパイプラインを通じてコードに変換できる。ここでは、チームのビルドプロセスに組み込める実用的な設定ファイルのベストプラクティスを公開する。

① アイコン最適化・ビルド用設定 (`svgo.config.js`)

PenpotからエクスポートしたSVGは非常にクリーンだが、チームで自動ビルドに組み込む際は `SVGO` を用いて完全に機械的なフォーマットに正規化する。

// svgo.config.js
// PenpotからエクスポートされたSVGをプロダクションコード用に最適化する設定
module.exports = {
multipass: true, // 圧縮効果を高めるために複数回パスを最適化
plugins: [
{
name: ‘preset-default’,
params: {
overrides: {
// viewBoxはレスポンシブ対応に必須なので絶対に削除しない
removeViewBox: false,
// Penpot上のレイヤー名をIDとして残したい場合はfalseに
cleanupIds: true,
},
},
},
// デザイナーが指定した特定の色をCSS変数に置換するカスタムプラグイン的役割
‘removeDimensions’, // width/height属性を削除し、CSSで制御できるようにする
{
name: ‘addAttributesToSVGElement’,
params: {
attributes: [
{ focusable: ‘false’ },
{ ‘aria-hidden’: ‘true’ },
{ class: ‘penpot-icon’ }
]
}
}
],
};

② デザイントークン定義 (`tokens.json`)

PenpotのVariables機能や、将来的なAPI連携を見据えたデザイントークンのJSON構造。これを元に、Style Dictionary等を用いてCSS変数やTailwindのテーマへトランスパイルする。

{
“$schema”: “https://raw.githubusercontent.com/amazon-faber/style-dictionary/main/schemas/config.schema.json”,
“color”: {
“icon”: {
“default”: { “value”: “#0F172A”, “comment”: “Slate 900: 通常時のアイコンカラー” },
“muted”: { “value”: “#64748B”, “comment”: “Slate 500: 非アクティブ・サブ用” },
“brand”: { “value”: “#3B82F6”, “comment”: “Blue 500: アクセント・プライマリ用” }
}
},
“dimension”: {
“icon”: {
“sm”: { “value”: “16px”, “comment”: “インラインテキスト用” },
“md”: { “value”: “24px”, “comment”: “標準ボタン・ナビゲーション用” },
“lg”: { “value”: “32px”, “comment”: “フィーチャーアイコン用” }
}
}
}

—

5. 現場の生産性を爆上げする「神プラグイン・拡張アプローチ」

Penpotはクローズドなエコシステムではなく、Webベースのオープンなアーキテクチャを持っている。エンジニアであれば、その拡張性をフルに活用すべきだ。

1. Penpot Exporter / API Client:
公式のREST/GraphQL APIを叩き、CI/CD上で「デザインが更新されたら自動でGitHubのリポジトリにSVGのPRが飛ぶ」仕組みを構築せよ。手動でのダウンロード・アップロード作業は、エンジニアのタイムを無駄に消費する最大悪である。
2. SVG Code Inspector:
選択したベクターの生DOM（SVGタグ）をリアルタイムでプレビュー・コピーできる拡張機能。デザイナーが意図したパスの構造（`d` 属性の中身）を即座にコードとして確認できるため、フロントエンド実装時のメンタルモデルのズレが完全に消失する。

—

結びに代えて：ツールの限界を超えるのはエンジニアの構造理解だ

Penpotにおけるベクターネットワークの駆使と、SVGのプリミティブな構造の理解は、単に「きれいな絵が描ける」というレベルの話ではない。「デザインとコードの間の認知の壁をゼロにする」ための極めて高度なエンジニアリングだ。

ツールに振り回されるな。ツールをハックし、チームのワークフロー全体のレイテンシを削ぎ落とせ。今日から君のチームのPenpotの使い方を、この知見をもとにアップデートしてほしい。開発の現場が、もっとクールでエキサイティングな場所になるはずだ。