非デザイナーのエンジニアでも迷わない！Penpotを使ったデザインレビューとコード抽出の実践
こんにちは。プロダクト開発の現場において、デザインとコードの乖離、いわゆる「デザイン負債」に頭を悩ませていないだろうか。
「デザイナーが意図したマージンやパディングが正確に実装されていない」
「Figmaからコードを起こす際に、推測でCSSを書く羽目になる」
「そもそもクローズドなデザインツールにライセンスコストを払い続けるのが辛い」
こうした課題に対して、オープンソースのフラッグシップとして急速にシェアを拡大しているPenpotは、エンジニアにとって最強の救世主となり得る。SVGをネイティブフォーマットとして採用し、CSS GridやFlexboxの概念をそのままデザインシステムに持ち込めるPenpotは、開発者とデザイナーの共通言語（Ubiquitous Language）を構築するのに最適なツールだ。
今回は、テックリードの視点から、Penpotを単なる「デザイン閲覧ツール」ではなく、「実装スピードを限界突破させるプロトタイピング＆コード抽出エンジン」として使い倒すための実践的知見を授けよう。
—
1. 開発スピードを劇的に高めるキーボードショートカット
インスペクト作業でマウスをカチカチ動かしているうちは、プログラミングでマウス中心の操作をしているようなものだ。Penpotのショートカットを指に叩き込み、視線の移動と手の動きを極限まで削ぎ落とせ。
| ショートカット（Mac / Win） | アクション | エンジニア的活用シーン |
| :— | :— | :— |
| `Shift` + `I` | インスペクトモード切り替え | デザインの数値を瞬時にコード用ビューに切り替える |
| `Option` / `Alt` + ホバー | 距離（スペーシング）の計測 | 要素間のマージン・パディングのピクセル値をノータイムで取得 |
| `Shift` + `2` | 選択要素へズーム | レビュー時に指摘のあったコンポーネントへ一瞬でフォーカス |
| `Ctrl/Cmd` + `Shift` + `C` | CSSコードの直接コピー | インスペクトパネルを開かずに、選択要素のCSSをクリップボードへ |
| `V` / `H` | 選択ツールの切り替え / ハンド | 巨大なボードをストレスフリーで縦横無尽に徘徊する |
特に `Option` / `Alt` を押しながら要素間をホバーした際の挙動は、CSSの Box Model を脳内で構築する上で最高の補助輪となる。要素の境界線から親コンポーネントまでの距離をミリ秒単位で把握せよ。
—
2. チーム開発で役立つ設定の共有化ルール
デザインシステムをコードに落とし込む際、デザイントークン（Color, Typography, Spacing）の定義がバラバラだと、エンジニア側でリファクタリング地獄に陥る。Penpotの「Shared Libraries（共有ライブラリ）」をハックし、フロントエンドのプリミティブと完全に同期させろ。
命名規則（Nomenclature）の厳格化
Penpot上でデザイナーと合意すべき命名規則のルールを以下に定義する。これがそのままTailwind CSSやDesign Tokens（JSON）のキー名になる。
- カラー: `surface/primary`, `text/muted`, `border/subtle` （階層構造を持たせる）
- タイポグラフィ: `heading/lg`, `body/md`, `mono/sm`
- スペーシング: `space/2`, `space/4`, `space/8` （8pxグリッドシステムに完全準拠）
デザイナーがこの命名規則を守るだけで、インスペクトパネルから抽出される変数名はそのままプロダクトのコードベースで使えるものに変貌する。
—
3. インスペクトパネルからの正確なコード抽出術
Penpotのインスペクトパネルは、CSS GridやFlexboxのレイアウト構造をそのままCSSに翻訳して出力してくれる。ここでの読み解き方のコツを伝授する。
Flexbox / Grid構造の正確なハック
インスペクトパネルに表示される `display: flex;` や `flex-direction` の値をそのまま信じるな。コンポーネントがレスポンシブにどう振る舞うべきか（ラップするのか、伸縮するのか）は、プロパティの数値の裏にあるデザイナーの意図を読み取る必要がある。
1. 幅（Width）と制約（Constraints）の確認: `fixed` なのか `hug contents` なのか `fill container` なのか。これがCSSの `width: 100%`, `max-width`, あるいは `flex: 1` に直結する。
2. SVGの直接抽出: アイコンなどのアセットは、無駄なラッパーを剥ぎ取ってSVGコードとして直接エクスポートする。PenpotはネイティブでSVGをレンダリングしているため、出力されるSVGのクリーンさはFigmaの比ではない。不要な `
—
4. 実用的な設定ファイル（JSON/YAML）のベストプラクティス構成例
Penpotのデザインシステムから抽出したトークンや、チームで共有すべき設定は、コードベース側で一元管理するべきだ。以下に、Penpotの構造と完全に同期するデザイントークンのJSON設定ファイルのベストプラクティスを示す。
このファイルを起点として、Style Dictionaryなどのビルドツールを噛ませることで、CSS変数、SCSS、TypeScriptの定数ファイルへ自動トランスパイルするパイプラインを構築せよ。
`design-tokens.json`
{
“version”: “1.0.0”,
“description”: “Penpot Design System Synchronized Tokens”,
“global”: {
“color”: {
“surface”: {
“primary”: { “value”: “#0F172A”, “type”: “color”, “comment”: “Slate 900: メインの背景や濃色テキスト” },
“subtle”: { “value”: “#F1F5F9”, “type”: “color”, “comment”: “Slate 100: カードやセクションの背景” }
},
“brand”: {
“main”: { “value”: “#6366F1”, “type”: “color”, “comment”: “Indigo 500: プライマリCTA、アクティブ状態” },
“hover”: { “value”: “#4F46E5”, “type”: “color”, “comment”: “Indigo 600: ホバー時のインタラクション” }
}
},
“spacing”: {
“xs”: { “value”: “4px”, “type”: “dimension”, “comment”: “space/1: 最小のパディング・ギャップ” },
“sm”: { “value”: “8px”, “type”: “dimension”, “comment”: “space/2: インライン要素間のマージン” },
“md”: { “value”: “16px”, “type”: “dimension”, “comment”: “space/4: 標準的なカードパディング” },
“lg”: { “value”: “24px”, “type”: “dimension”, “comment”: “space/6: セクション間の余白” },
“xl”: { “value”: “48px”, “type”: “dimension”, “comment”: “space/12: ページレイアウトのセクション区切り” }
},
“typography”: {
“fontFamily”: {
“sans”: { “value”: “Inter, system-ui, -apple-system, sans-serif”, “type”: “fontFamily” },
“mono”: { “value”: “Fira Code, monospace”, “type”: “fontFamily” }
},
“fontSize”: {
“headingLg”: { “value”: “2.25rem”, “type”: “fontSize”, “comment”: “H1クラス: 36px” },
“bodyMd”: { “value”: “1rem”, “type”: “fontSize”, “comment”: “本文標準: 16px” }
},
“fontWeight”: {
“regular”: { “value”: 400, “type”: “fontWeight” },
“bold”: { “value”: 700, “type”: “fontWeight” }
}
},
“borderRadius”: {
“sm”: { “value”: “4px”, “type”: “borderRadius” },
“md”: { “value”: “8px”, “type”: “borderRadius”, “comment”: “標準的なカードやボタンのR” },
“full”: { “value”: “9999px”, “type”: “borderRadius”, “comment”: “アバターやピル型バッジ用” }
}
}
}
—
5. テックリードからの提言：コードとデザインの境界を溶かせ
非デザイナーのエンジニアにとって、Penpotは「デザインの細かい粗を見つける検品ツール」ではない。「UIの仕様書がインタラクティブかつ美しくレンダリングされたライブドキュメント」である。
インスペクトパネルからCSSを抽出し、Shared Librariesを通じてデザイントークンをコードと直結させる。このワークフローをチームに定着させれば、「このマージン、何ピクセルですか？」というチャットでの不毛なラリーは二度と発生しなくなる。
オープンソースの自由度と、モダンなレイアウトエンジンを兼ね備えたPenpotを使いこなし、デザインからコードへのトランスレーションコストを極限までゼロに近づけよう。プロダクトの命運を握るのは、こうした細部のエンジニアリングの効率化の積み重ねなのだから。