こんにちは！デザインとコードの境界線を溶かし、プロダクトづくりのスピードを限界突破させるのが大好きな先輩エンジニアです。
今日は、オープンソースの次世代デザインツール「Penpot」の真髄、そしてプロトタイピングの常識をひっくり返す隠し武器「SVGコード直接編集（Code Editor）機能」についてお話しします。
「デザインツールはビジュアルをいじるだけで、コードはエンジニアの領域」――そんな固定観念、今日ここで捨ててしまいましょう。PenpotのSVG直編集をマスターすれば、デザイナーは意図通りの完璧なベクター構造を自分で制御でき、エンジニアは「そのままプロダクションに放り込める美しいコード」を受け取れるようになります。
これをマスターすれば、毎日のデザイン・実装フェーズのストレスが劇的に軽くなりますよ。さあ、一緒に扉を開けましょう！
—
1. Penpotとは何か？ なぜ今、SVGコード直編集なのか？
Figmaをはじめとする多くのデザインツールは、キャンバス上のマウス操作を優先するあまり、背後で生成されるSVGコード（マークアップ）が「冗長で汚い」という問題を長年抱えていました。無駄なメタデータ、意味不明なID、ネストの深すぎるグループ……。これでは、アニメーションを仕込む時やWebフロントエンドに組み込む時に、エンジニアが手動でクリーンアップする手間が発生します。
しかし、Penpotは「Webの標準技術（SVG/CSS）」をネイティブ言語として設計されたツールです。
その証拠に、Penpotにはキャンバスの裏側の生（き）のSVGコードを直接覗き、書き換え、即座にキャンバスへ反映できる「Code Editor」が備わっています。
デザインとコードが完全同期するこの体験は、プロトタイピングの精度を別次元へと引き上げてくれます。
—
2. 3分で完了！ PenpotのセットアップとCode Editorの起動
まずは、Penpotを動かしてコードエディタにたどり着くまでの基礎をサクッとセットアップしましょう。
手順1：Penpotの環境準備
Penpotは完全なオープンソースです。ローカルでDockerを使って立ち上げることも、公式のクラウド版（[penpot.app](https://penpot.app/)）をブラウザで開くだけで使い始めることもできます。今回は最も手軽なクラウド版、あるいはローカル環境を想定します。ブラウザを開いたらアカウントを作成し、新しいチームとプロジェクトを作ってください。
手順2：キャンバスに「Hello World」の図形を置く
1. 新規デザインファイルを開きます。
2. 左側のツールバーから「Rectangle（矩形）」または「Vector（ベクター）」を選択し、キャンバスに適当な図形（例: 100x100pxの正方形）を配置します。
3. その図形を選択した状態で、右側のサイドバー（インスペクター）に注目してください。
手順3：Code Editorの召喚
Penpotの右パネル、あるいはショートカットを駆使して「Code（コード）」タブまたはSVGインスペクターを開きます。
バージョンやUIレイアウトによって異なりますが、要素を選択した状態でコードビューをアクティブにすると、その要素の「生（き）のSVGコード」が目の前に現れます。
—
3. 実践！ SVGコード直接編集（Code Editor）の活用術
ここからが本番です。UI/UXエンジニアが思わず唸る、3つの実践的な活用テクニックをコードと共にお見せします。
活用術①：生コードをハックして微調整する（直感から論理へのシフト）
例えば、キャンバス上でパスをマウスでカチカチいじるよりも、コードを直接叩いた方が圧倒的に早いケースがあります。
ここに、適当なパスを描いたとしましょう。Code Editorを開くと、以下のようなSVGの `
ここで、Code Editor上で直接 `d` 属性（パスの座標データ）や `fill` のカラーコード、さらにはCSSプロパティを直接書き換えてみてください。エディタの外（キャンバス）をクリックしてフォーカスを外すと……一瞬でキャンバス側のビジュアルが書き換わります。
「角丸の数値をコードで精密に揃えたい」「不要な属性を一括で削除したい」といったとき、この直編集は強力な武器になります。
—
活用術②：アニメーション用パス（`path`）の最適化
マイクロインタラクションやローディングスピナーなどのプロトタイピングにおいて、SVGアニメーション（CSS AnimationやSMIL、あるいはLottie連携）の仕込みは避けて通れません。
アニメーションを美しく滑らかにするためには、SVGコードの構造が極限までシンプルである必要があります。PenpotのCode Editorを使えば、デザイン段階でアニメーションを意識した「名付け（ID付与）」や「グループ化の整理」が可能です。
- エンジニアへのメリット: デザイナーがすでにセマンティックな `id` や `class` を振った状態でSVGを出力（あるいは共有）できるため、フロントエンド実装時に「どのパスを回せばいいんだっけ？」と迷う時間がゼロになります。
—
活用術③：エンジニアとの引き渡し（Handoff）を爆速にするコードクリーンアップ
デザインツールの多くは、書き出したSVGに `sketch:` や `figma:` といった独自の名前空間や、不要なメタデータ、絶対座標指定のゴミを残しがちです。
PenpotのCode Editorで不要な記述をあらかじめ削ぎ落としておくことで、「そのままプロダクションのReactやVueのコンポーネントに貼り付けられるSVG」を精製できます。
これをPenpot上で整えてコピーするだけで、デザイナーとエンジニアの間の「SVGの修正・再書き出し地獄」から完全に解放されます。
—
4. 先輩エンジニアからのアドバイス：デザインとコードを往還する楽しさ
最初は「デザインツールの中でコードを書くなんて面倒くさそう」と感じるかもしれません。しかし、PenpotのCode Editorは、「デザインは感覚的なもの、コードは論理的なもの」という壁を取り払い、両者をシームレスにつなぐ架け橋です。
- 複雑な図形はキャンバスの直感的なベクターツールでサクッと作り、
- 細部の構造やアニメーションの仕込み、クリーンアップはCode Editorでシャープに仕上げる。
このハイブリッドなワークフローを身につければ、あなたのプロダクト開発のクオリティとスピードは間違いなく一段階上のステージへと引き上げられます。
さあ、今すぐPenpotを開いて、キャンバスの裏側に隠されたコードの世界をハックしてみてください。毎日の作業が、きっともっと楽しく、クリエイティブになりますよ！