こんにちは！プロダクトデザイナー、そしてUI/UXエンジニアのあなたへ。
日々のデザイン作業で、「あ、ここの角のRをやっぱり少し緩やかにしたい」「このアイコンのパーツ、後から微調整したくなったら最初から作り直しだな…」なんて絶望した経験、ありませんか？
特にベクター形状をいじっているとき、パスを結合した瞬間にピクセルが固まってしまい、破壊的な（Destructiveな）編集の罠にハマる。デザインシステムをスケールさせようとしたとき、これが一番のボトルネックになりますよね。
今回は、オープンソースの最強デザインツール「Penpot」が持つ、SVGパスとブーリアン演算の深層に迫ります。これをマスターすれば、あなたの作るアイコンやイラストアセットは完全に非破壊（ノンデストラクティブ）になり、チームメンバーや未来の自分が泣いて喜ぶクリーンな資産フリートに生まれ変わります。
初心者の方でも迷わないよう、ツールのセットアップから「おぉ、すごい！」と声が出る基本の“Hello World”まで、優しく丁寧に手をとってガイドしていきますね。これをマスターすれば、毎日の作業が劇的に楽になりますよ。
—
1. Penpotとは何か？ 为什么我们需要它？
Penpotは、デザイナーと開発者の境界線を溶かす、完全オープンソース（Web標準ベース）のUI/UXデザイン・プロトタイピングツールです。
Figmaなどのクローズドなツールとは異なり、PenpotのネイティブフォーマットはなんとSVGです。つまり、あなたがPenpot上で描いたデザインは、そのままプロダクションコードとして通用する極めてクリーンなSVG構造を持っています。この「コードとデザインの親和性の高さ」こそが、私たちエンジニアリング寄りのデザイナーにとって最強の武器になります。
インストールと初期セットアップ
Penpotを始めるのは驚くほど簡単です。
1. 公式サイト（[penpot.app](https://penpot.app/)）にアクセスして無料のアカウントを作成する（または、Dockerを使ってローカル環境に数秒で立ち上げることも可能です）。
2. ダッシュボードから「New Project」を作成し、空白のキャンバスを開きます。
これだけで準備完了です。特別なプラグインのインストールも不要。ブラウザを開いた瞬間から、最高峰のベクターエンジンがあなたを待っています。
—
2. 精度高い「Hello World」：まずは非破壊ブーリアン演算を体感しよう
百聞は一見にしかず。まずはPenpotのブーリアン演算がどれほどスマートか、簡単なアイコン（チャット吹出し＋通知ドット）を作りながら体験してみましょう。
Step 1: プリミティブ形状の配置
キャンバス上に以下の2つのシェイプを配置します。
- ベース（長方形）： 幅 40px、高さ 40px、角丸（Border Radius）8px
- アクセント（円）： 直径 16px（通知バッジをイメージ）
Step 2: グループ化とブーリアン（和：Union）の適用
ここで、ただ重ねるのではなく、非破壊のブーリアン演算を使います。
1. 長方形と円の両方を選択します。
2. ツールバー（または右サイドバー）にある「ブーリアン演算」のアイコンをクリックし、「Union（和集合）」を選択します。
> 💡 先輩エンジニアからの知見：
> Penpotのブーリアンは、親となるグループの中に元のパスが「保持」されるノンデストラクティブ仕様です。レイヤーパネルを展開してみてください。Unionグループの中に、元の長方形と円が独立して生きているのが分かりますか？
Step 3: 後からの「ノンデストラクティブ」な修正
ここからがPenpotの真骨頂です。
- レイヤーパネルから「円」のレイヤーを選択し、キャンバス上でドラッグして位置を微調整してみてください。
- パスが結合された状態を保ったまま、バッジの位置がリアルタイムに再計算されますよね。
これが、破壊的編集（Pathファインダーなどでパスを完全に合体させてしまう手法）との決定的な違いです。「やっぱり少し位置をずらしたい」「サイズを変えたい」という要件変更が来ても、元の形状を失わずにいつでもやり直せる。これがデザインシステムのメンテナンス性を爆発的に高める秘訣です。
—
3. 4つのブーリアン演算を完全理解する
Penpotが提供する4つのブーリアン演算（和・差・積・排他的論理和）の挙動を、プロの現場でのユースケースと共におさらいしましょう。
| 演算タイプ | アイコンでの主な用途 | 挙動の本質 |
| :— | :— | :— |
| Union (和) | 複数のパーツを合体させる（例：雲のアイコン） | 重なりを無視して一つの外形にする |
| Subtract (差) | 穴を開ける、切り抜く（例：ドーナツ、C字型） | 下層のシェイプから上層のシェイプを「型抜き」する |
| Intersect (積) | 重なり合う部分だけ抽出（例：ベン図、複雑な幾何学模様） | 両者が重なっている領域のみを残す |
| Difference (除外/XOR) | 複雑な重なりを相殺する（例：特殊なフレームワークアイコン） | 重なっている部分を「くり抜く」 |
実践：Subtract（差）を使った洗練された「設定（歯車）」アイコンの作り方
初心者から一歩抜け出すために、`Subtract`を駆使したクリーンなアイコンの作り方を見てみましょう。
1. 外側の正円（例: 32px）を配置します。
2. その中心に、一回り小さな正円（例: 16px）を重ねます。
3. この2つを選択し、Subtract（差）を適用します。これだけで、一瞬で「きれいなリング（ドーナツ型）」が作れます。
4. さらに、このリングの階層構造を維持したまま、周囲に歯車の歯となる長方形を配置し、それらをまとめてUnion（和）に組み込む……といったアプローチを取ることで、後から中心の穴の大きさを自由に変更できる柔軟な歯車アイコンが完成します。
—
4. プロの現場で役立つ裏技：SVGクリーンlinessとパスの最適化
最後に、私たちが実務でPenpotを使う際に意識している、ワンランク上のTipsをシェアします。
パス方向（Winding Order）の意識
SVGは、パスが「時計回り」に描かれているか「反時計回り」に描かれているかで、重なった部分の塗りつぶし判定（Fill Rule: nonzero / evenodd）が変わります。
Penpotで複雑なアイコンを作るとき、意図しないところが透明になってしまったら、レイヤーパネルでパスの順序（上下関係）を確認してください。非破壊ブーリアンの中にあるレイヤーの順番を変えるだけで、描画結果が嘘のように綺麗に整います。
コードへのシームレスな移行
Penpotの右パネルからは、いつでもクリーンなSVGコードをインスペクト＆エクスポートできます。ノンデストラクティブに構築されたアセットは、無駄なパスのゴミ（Redundant points）が非常に少ないため、そのままプロダクションの``タグやアイコンコンポーネント（React / Vueなど）のインラインSVGとしてコピペして即座に動きます。
—
まとめ：あなたのデザインを「可変」にしよう
いかがでしたか？ PenpotのSVGパスとノンデストラクティブなブーリアン演算は、単なるお絵描きツールを超えた、「変更に強いデザインシステム構築のための強力なエンジン」です。
- 破壊的な結合を避け、レイヤー構造で論理を保つ。
- 4つのブーリアン演算を意図通りに使い分ける。
- Web標準（SVG）を意識したクリーンなアセット設計を行う。
このアプローチを習慣化すれば、毎日の細かな修正地獄から解放され、より本質的なクリエイティブやUXの検証に時間を使えるようになります。
さあ、今すぐPenpotを開いて、あなたの手で最初の非破壊アイコンを組み立ててみてください。その軽快さと美しさに、きっと感動するはずです。Happy Designing!