こんにちは！プロダクトデザイナーの先輩として、今日は君にとてもエキサイティングな話をしよう。
デザインツールといえば、これまでは特定のクローズドな有料ソフトが業界標準を牛耳ってきたよね。でも、開発者とデザイナーの共通言語として「オープンソース」「Webファースト」「SVGネイティブ」を掲げ、今世界中のプロダクトチームから猛烈な勢いで支持を集めているツールがある。それが 「Penpot」 だ。
今回は、そのPenpotの真骨頂である「ベクターネットワークとパス編集の裏技」を徹底的に解説するよ。
「SVGアイコンや複雑なイラストを、コードを書くように、かつ直感的に自在に操りたい」——そんな願いを叶える極限のテクニックを授けよう。これをマスターすれば、毎日のアイコン制作やUIアセットの調整作業が、劇的に、そして信じられないほど楽しくなるはずだ。
—
1. Penpotとは何か？（ツールの役割と選ぶべき理由）
まず前提として、Penpotがなぜこれほどエンジニアやデザイナーに愛されているのかを知ろう。
最大の特徴は、データ構造の根本が「SVG（Scalable Vector Graphics）」そのものである点だ。
従来のツールは、独自のブラックボックスなフォーマットでデータを保持しがちだった。そのため、SVGとして書き出したときに不要なパス（
しかし、Penpotはブラウザ上で動く純粋なベクターエディタでありながら、CSSのFlexboxやGridの概念をレイアウトに取り入れ、さらにSVGの仕様に完全準拠している。つまり、「Penpotで作った画面やアイコンは、そのままクリーンなコードとしてWebに直結する」という思想で作られているんだ。
2. 5分で完了！Penpotのセットアップと最初のキャンバス
さあ、実際に手を動かそう。面倒なローカル環境構築は不要だ。
1. アカウント作成: 公式サイト（[penpot.app](https://penpot.app/)）にアクセスし、無料のアカウントを作成する。オープンソースだから、自分のサーバーにセルフホストすることも簡単（Docker一発で立ち上がるよ）だけど、まずはクラウド版で十分だ。
2. チームとプロジェクトの作成: ダッシュボードに入ったら、「New Project」をクリック。これが君の最初の実験場になる。
3. ワークスペースの立ち上げ: 新規ファイルを開くと、見慣れたモダンなキャンバスが現れる。これが、これからSVGの魔法をかけるステージだ。
—
3. 「HelloWorld」の代わりに：最初のカスタムアイコンを作ろう
エンジニアらしく、まずは「精度の高いHelloWorld」として、シンプルな「チェックマーク（Checkmark）アイコン」をPenpotの流儀で作ってみよう。これがすべての基本になる。
1. アートボードの準備: ショートカット `F` を押して、適当なサイズ（例えば `24×24`px）のフレームを作る。SVGアイコンの基本キャンバスだ。
2. ペンの召喚: ショートカット `P`（Penツール）を押す。
3. パスの配置:
- キャンバスの左側（`x: 6, y: 13`）あたりをクリック。
- 中央下（`x: 10, y: 17`）をクリック。
- 右上（`x: 18, y: 7`）に引っぱり上げてクリック。
4. ストロークの調整: 右側のプロパティパネルで、Stroke（線）の太さを `2`px にし、先端（Cap）を「丸（Round）」に設定する。
これで、最初のベクターアイコンが完成した。どうだい？非常に軽快で、SVGのパスが美しく生成されているのが感覚として伝わるはずだ。
—
4. 【本題】Penpotの真髄：ベクターネットワークとパス編集の裏技
ここからが本番だ。複雑なアイコンやイラストを効率的に作成するための、プロの裏技を伝授しよう。
裏技その1：従来の概念を破壊する「ベクターネットワーク」の魔法
Adobe Illustratorの「パスファインダー」や、一般的なベクターツールの「アンカーポイントとセグメント」に苦しめられた経験はないかい？「線を交差させたいのに、一本のパスにまとめられない」「丸と四角を合成するとパスが汚くなる」といった悩みだ。
Penpotには、従来の「階層的なパス」の概念を超えたベクターネットワーク（Vector Networks）に近い柔軟な接続機能がある。
- 実践テクニック（交差する矢印アイコンの作成）:
1. 2本の線を交差させて配置する。
2. パス編集モード（ダブルクリック）に入る。
3. なんと、1つのノード（頂点）から3本以上の線（セグメント）を伸ばすことができる。
4. これにより、従来のパス構造では不可能だった「枝分かれした複雑な形状」を、1つのSVGパス要素としてシームレスに描画できるんだ。DOMツリーが汚れない＝軽量なSVGを保てる、というエンジニアにとって最高のメリットにつながる。
裏技その2：ブーリアン演算（パスファインダー）をショートカットで爆速化する
複数のアイコン（例えば、歯車と人型など）を組み合わせて新しいカスタムアイコンを作る際、上部メニューのブーリアン演算（Union, Subtract, Intersect, Exclude）をちまちまマウスで選んでいないかい？
- プロの時短術:
複数のシェイプを選択した状態で、以下のキー操作を指に覚え込ませてほしい。
- 結合 (Union): 形をひとつにする
- 前面を型抜き (Subtract): 重なった上の図形で下の図形をくり抜く
- 交差 (Intersect): 重なった部分だけを残す
これらを瞬時に使い分けることで、複雑なアプリアイコンのシルエットも、基本図形（丸や四角）の引き算・足し算だけで数秒で構築できるようになる。
裏技その3：ノードの「スマートスナップ」と「カーベチャー（曲線）調整」
有機的なイラストや、滑らかな曲線を持つアイコンを作るとき、ベジェ曲線のハンドル（方向線）の調整にイライラしたことはないかな？
- 裏技:
Penpotのパス編集モードでノードを選択し、`Alt`（または `Option` キー）を押しながらハンドルをドラッグしてみてほしい。
片側のハンドルだけが独立して動き、鋭い角（コーナー）と滑らかな曲線（スムース）を自由自在に切り替えられる。さらに、グリッドスナップ（デフォルトで有効）と組み合わせることで、ピクセルパーフェクトな美しい幾何学アイコンが驚くほど正確に組み上がる。
—
5. 現場で役立つ！クリーンなSVG書き出しの極意
最後に、Penpotで作ったベクターグラフィックスを、開発現場（ReactやVue、あるいは生のHTML）へ最高の手のひら返しで引き渡すコツを教えよう。
1. グループ化と命名規則:
SVGとして書き出すレイヤーは、必ず意味のある名前（例: `icon-settings-duotone`）にリネームしておく。Penpotはレイヤー名をそのままSVGの `id` やクラス名、あるいはタグ構造に反映させやすい。
2. 不要なグループの排除:
「Ctrl/Cmd + G」で無駄なグループ階層を作ってしまうと、書き出したSVGの中に不要な `
3. コードインスペクトの活用:
右パネルの「Code」タブを覗いてごらん。そこには、今自分が描いたデザインの生きたCSSとSVGコードがリアルタイムで表示されている。デザイナーが作ったものが、そのままエンジニアの視覚情報と一致する瞬間だ。
—
おわりに
どうだっただろうか？
Penpotは単なる「デザインのお絵描きツール」ではない。「Webの構造を理解したベクターエンジン」であり、デザイナーとエンジニアの壁を綺麗に取り払ってくれる最高の相棒だ。
今回紹介したパス編集の裏技やベクターネットワークの考え方を自分のものにすれば、毎日のアイコン作成やUIアセットの調整作業が、退屈なルーティンから「クリエイティブなパズル」へと変わるはずだ。
明日からの君のデザイン・開発フローに、ぜひPenpotのSVG魔法を取り入れてみてほしい。驚くほど軽快なワークフローが、君を待っているよ！