こんにちは！フロントエンド開発の現場で、デザインとコードのギャップに頭を悩ませた経験はありませんか？
「デザインカンプのこの余白、正確には何ピクセルなんだ……？」
「Figmaは高機能だけど、エンジニアにとってはオーバースペックだし、ライセンス費用もバカにならない」
そんなモヤモヤを抱えているエンジニアの皆さんに、今回は救世主となるオープンソースの強力なデザインツール「Penpot（ペンポッド）」をご紹介します。
これをマスターすれば、デザイナーとのハンドオフ（引き継ぎ）のストレスが嘘のように消え、毎日の実装作業が劇的に楽になりますよ。さあ、一緒にPenpotの世界へ飛び込みましょう！
—
1. なぜ「Penpot」なのか？ エンジニア視点のメリット
多くのデザインツールはデザイナーのために作られていますが、Penpotは「Web標準の概念」をそのままデザインの土台にしているという、極めてエンジニアフレンドリーなツールです。
- CSS FlexboxやGridがそのまま使える：デザイナーが組んだレイアウト構造が、そのままCSSの概念（Flexboxなど）と一致しているため、インスペクトしたときに「なぜこのレイアウトになっているのか」が直感的に理解できます。
- 完全なオープンソース（Self-host可能）：データがクローズドなクラウドに縛られません。
- SVGとCSSの抽出精度が異常に高い：コードファーストで作られているため、ブラウザ（SVG/CSS）に翻訳される際のロスが少ないのが特徴です。
「デザインツールを覚えるのは面倒だな」と思うかもしれませんが、安心してください。エンジニアであるあなたなら、15分触れば「あ、これWebの仕組みそのものだ」と気づくはずです。
—
2. 3分で完了！Penpotのセットアップとプロジェクトへの参加
まずはPenpotに触れてみましょう。今回は手軽に始められる公式のクラウド版（SaaS）を使用します（慣れてきたらDockerでローカルに立てることも可能です）。
Step 1: アカウント作成
1. [Penpot公式サイト](https://penpot.app/)にアクセスし、無料でアカウントを作成します。
2. ワークスペース（Workspace）に入ったら準備完了です。
Step 2: チームメンバーからの招待リンクを開く
実務では、デザイナーから共有されたプロジェクトリンク（またはチームへの招待メール）をクリックします。これで、レビュー対象のデザインボードにアクセスできます。
—
3. 実践！インスペクトパネルを使い倒して実装スピードを最大化する
ここからが本番です。デザイナーが作った「Hello World」的なサンプルカードコンポーネントを題材に、コードを正確に抽出する手順を解説します。
画面の見方：エンジニアが見るべきは「右側」
Penpotの画面を開いたら、視線を右側に向けてください。ここがエンジニアの聖地「インスペクト（Inspect）パネル」です。
1. キャンバス上の要素（例えば、ボタンやカードのラッパー）をマウスでクリックします。
2. 右メニューのタブから [Inspect] を選択します。
すると、どうでしょう！選択した要素のCSSプロパティがズラリと表示されます。
/ Penpotのインスペクトパネルから得られるCSSの例 /
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 16px;
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
Figmaなどの他ツールでありがちな「絶対配置（position: absolute）の嵐」ではなく、モダンなWeb開発で私たちが普段書くようなクリーンなFlexboxの構造としてコードが生成されているのが分かりますか？これがPenpotの真骨頂です。
—
4. デザイントークン（変数）を読み解く
プロフェッショナルなプロジェクトでは、色は「単なる#000000」ではなく、変数（Design Tokens）として管理されています。
Penpotのインスペクトパネルでは、その要素に適用されているカラーやフォントの「トークン名」も確認できます。
- `background: var(–color-surface-primary);`
- `color: var(–color-text-main);`
もしコード側にすでにTailwind CSSやCSS Modulesのデザインシステムを構築しているなら、このトークン名を対応付けるだけで、デザインの変更漏れや「色の微妙な違い」といったヒューマンエラーをゼロにできます。
—
5. アイコンやアセットをSVGとして美しく抽出する
UI実装で一番イライラするのが、アイコンや画像の書き出しですよね。「PNGしかなかった」「SVGのパスが汚い」……そんな悩みとは今日でお別れです。
正確なSVGコードの取得手順
1. 抽出したいアイコン（グループまたはベクターシェイプ）を選択します。
2. 右側パネルの下部にある [Export] セクションに目を向けます。
3. フォーマットとして [SVG] を選択します。
4. [Copy as SVG]（またはExport）をクリックします。
これだけで、不要なメタデータ（Illustrator特有のゴミタグなど）が綺麗に削ぎ落とされた、軽量で美しいSVGコードがクリップボードにコピーされます。
あとは、ReactやVueなどのコンポーネントにそのまま貼り付けるだけです！
// 抽出したSVGを使ったコンポーネントの例（React）
export const CheckIcon = () => (
);
—
6. デザインレビューを円滑にするコメント機能
コードを書き始める前、あるいは実装途中で「これ、ホバリング時のインタラクションどうだっけ？」「レスポンシブのとき折り返し幅は？」と疑問に思うことがありますよね。
そんなときは、Penpotのコメント機能（`C`キーを押すか、上部メニューの吹き出しアイコンを選択）を使いましょう。
- 疑問のあるUI要素の上に直接ピンを刺す。
- 「@デザイナー名 モバイル表示の時のパディングは16pxで合っていますか？」と書き込む。
SlackやJiraを行き来する必要はありません。デザインと議論が文脈（Context）を持ったまま1箇所に集約されるため、認識のズレが劇的に減ります。
—
まとめ：今日から始めるモダンな協業
非デザイナーのエンジニアにとって、デザインツールは「仕様書代わりの黒箱」になりがちです。しかし、Web標準に寄り添ったPenpotを使えば、デザインツールは「最高にリッチなコードのインスピレーション源」に変わります。
- FlexboxをベースにしたクリーンなCSSインスペクトを活用する
- デザイン変数（トークン）を意識して実装に落とし込む
- 高品質なSVGをワンクリックで取得する
- コメント機能でコミュニケーションコストを最小化する
これらを意識するだけで、あなたのコーディングスピードは見違えるほど向上し、デザイナーとの関係性もよりスムーズになります。
「これをマスターすれば、毎日の作業が劇的に楽になりますよ」。
ぜひ、次のタスクからPenpotでのインスペクトを試してみてくださいね！