【実務・中級編】Figma vs Penpot徹底比較：無料・オープンソースの時代にデザイナーが選ぶべきツールとは – UI/UX・デザインツール活用バイブル

Figma vs Penpot 徹底比較：オープンソース時代のプロトタイピングと「真のデザイナー・開発者協働」の選択肢

テックリードやシニアUI/UXエンジニアとしてプロダクトの立ち上げやスケールを牽引する中で、常に頭を悩ませるのが「デザインとコードの乖離（デザイントークンの不整合）」と「ツールのコスト・ライセンス問題」だ。

業界標準であるFigmaは、その圧倒的なエコシステムとリアルタイムコラボレーションでデザインプロセスの覇権を握った。しかし、商用利用時のコスト高騰、クローズドソースであることによるベンダーロックイン、そして厳格なセキュリティ要件を持つエンタープライズ環境でのオンプレミス運用の難しさが、常にエンジニアリング組織の足枷となってきた。

そこで今、オープンソース（OSS）の寵児として急浮上しているのが Penpot だ。単なる「Figmaの無料クローン」ではない。SVGをネイティブのデータ構造とし、CSS GridやFlexboxといったWebの標準概念をそのままキャンバスに落とし込んだ、エンジニアのためのプロトタイピングツールである。

本稿では、機能性、コスト、セキュリティ、コミュニティの健全性の4つの軸からFigmaとPenpotを徹底比較し、明日からの開発スピードを劇的に高める実践的テクニックと設定のベストプラクティスを伝授する。

—

1. 4つの軸で比較する：Figma vs Penpot

① 機能性（Functionality）：Web標準 vs プロプライエタリな抽象化

Figma: オートレイアウト（Auto Layout）は非常に洗練されているが、CSS Flexboxとは独自の解釈のズレがあり、ハンドオフ（引き渡し）時にフロントエンドエンジニアが微妙な調整を強いられることが多い。
Penpot: レイアウトエンジンに CSS Grid と Flexbox をそのまま採用している。デザイナーが作った構造が、そのままプロダクションコードのCSS構造に直結する。この「メンタルモデルの完全な一致」は、UI/UXエンジニアにとって革命的だ。

② コスト（Cost）：SaaS課金の限界 vs 完全無料・セルフホスト

Figma: 組織が拡大するにつれて、エディターライセンスのコストが exponencial（指数関数的）に増加する。ゲストやビューアーの権限管理も複雑だ。
Penpot: AGPLv3に基づく完全オープンソースであり、商用利用も含めて無料。Dockerで自社サーバーにセルフホストすれば、データガバナンスも完全に掌握できる。

③ セキュリティ（Security）：クラウドの利便性 vs 完全なデータ主権

Figma: エンタープライズプラン（高額）でなければ、SSOや高度な監査ログ、IP制限などの要件を満たせない。金融や医療など、厳格なデータ保護法規（GDPR, HIPAA等）がある環境ではクラウドの壁にぶつかる。
Penpot: 自社インフラ（AWS, GCP, Kubernetes等）上で稼働させられるため、機密性の高いデザインアセットや未公開のIPを外部のサードパーティクラウドに預ける必要がない。

④ コミュニティの健全性（Community）：エコシステムの成熟度 vs オープンガバナンス

Figma: コミュニティプラグインやリソースは圧倒的だが、Figma社の買収劇や価格改定、AI機能（Figma AI）の利用規約変更など、プラットフォームの「気まぐれ」にエコシステム全体が左右されるリスクがある。
Penpot: コミュニティ主導で透明性が高く、コントリビューションのハードルが低い。オープンWeb標準に準拠しているため、将来的なベンダーロックインのリスクがゼロである。

—

2. どちらを選ぶべきか？プロジェクト特性によるマトリクス

—

3. 生産性を極限まで高める：Penpot / Figma 実戦テクニック

ここからは、実務で開発・デザインスピードを最大化するための具体的なノウハウを公開する。

開発スピードを劇的に高める隠れたキーボードショートカット

マウス操作は生産性の敵だ。キーボードから手を離さずにデザインシステムを操れ。

コンポーネント化: `Ctrl + Alt + K` (Win) / `Cmd + Option + K` (Mac)
レイアウト方向の切り替え（Flexbox）: `Shift + A` でオートレイアウト化後、`Alt + V` (縦) / `Alt + H` (横) ※PenpotのCSS Grid直結モードではレイアウトマトリクスのダイレクト操作が最速。
バウンドボックスのトグル: `R` (矩形), `T` (テキスト), `V` (選択・移動ツール)
ズームのリセット: `Shift + 0` (100%表示) / `Shift + 2` (選択範囲にズーム)

チーム開発で絶対入れるべき神プラグイン（Figma / Penpotエコシステム）

1. Tokens Studio for Figma (旧Figma Tokens): デザイントークンをJSONで一元管理し、GitHubと同期するためのマストツール。
2. Accessibility Color Contruller: WCAG 2.1のコントラスト比をリアルタイムで検証し、アクセシビリティ負債を未然に防ぐ。
3. Content Reel: ダミーテキストやアバター画像を爆速で生成し、モックアップのリアリティを高める。

チーム開発で役立つ設定の共有化ルール

レイヤー命名規則の厳格化: `[Component] / [State] / [Variant]`（例: `Button / Primary / Hover`）のルールをLintツールやデザインレビューで強制する。
マージリクエスト（PR）運用の導入: デザイン変更もコードと同様に、ブランチを切って変更し、レビューを経てmainブランチ（マスターデザインファイル）にマージするフローを確立する。

—

4. デザイントークンの実用的なベストプラクティス構成例

デザインシステムをコード（React / Vue / Tailwind CSSなど）とシームレスに同期させるためには、JSON形式の単一の真実の源（Single Source of Truth）をリポジトリで管理し、CI/CDパイプラインで自動変換するのがモダンフロントエンドの常道だ。

以下に、実務で即座に使える `design-tokens.json` のベストプラクティス構成を示す。

{
“$schema”: “https://raw.githubusercontent.com/design-tokens/community-group/main/format/schema.json”,
“color”: {
“brand”: {
“primary”: {
“value”: “#0F172A”,
“type”: “color”,
“description”: “ブランドのコアカラー。主にダークモードの背景や主要なCTAに使用。”
},
“accent”: {
“value”: “#38BDF8”,
“type”: “color”,
“description”: “アクセントカラー。フォーカスリングやインタラクティブな要素に適用。”
}
},
“feedback”: {
“success”: { “value”: “#22C55E”, “type”: “color” },
“error”: { “value”: “#EF4444”, “type”: “color” }
}
},
“spacing”: {
“scale”: {
“xs”: { “value”: “4px”, “type”: “dimension” },
“sm”: { “value”: “8px”, “type”: “dimension” },
“md”: { “value”: “16px”, “type”: “dimension” },
“lg”: { “value”: “24px”, “type”: “dimension” },
“xl”: { “value”: “32px”, “type”: “dimension” }
}
},
“typography”: {
“fontFamily”: {
“sans”: {
“value”: “Inter, system-ui, -apple-system, sans-serif”,
“type”: “fontFamily”
}
},
“fontSize”: {
“body”: { “value”: “1rem”, “type”: “dimension” },
“heading”: { “value”: “1.5rem”, “type”: “dimension” }
}
}
}

このJSONファイルを、Style Dictionaryなどのトランスフォーマーを用いて、以下のように各プラットフォーム向けのコードへと自動ビルドする。

`tokens.css` (CSS Custom Properties)
`tokens.ts` (TypeScriptの定数オブジェクト)
`tailwind.config.js` (Tailwindのテーマ拡張)

—

5. 結び：エンジニア主導のプロトタイピングの未来

Figmaは依然としてデザイン業界の巨塔であり、その表現力とエコシステムの広範さは素晴らしい。しかし、「デザインはデザイナーのもの、コードはエンジニアのもの」というサイロ化された時代は終わりを告げようとしている。

Penpotが提示する「Web標準（CSS Grid/Flexbox）をベースにしたオープンソースのプロトタイピング」というアプローチは、デザイナビリティとエンジニアリングの境界線を溶かし、真のクロスファンクショナルなチームビルディングを可能にする。

自社のセキュリティ要件、コスト構造、そして何より「コードとデザインをどう同期させたいか」という思想に基づき、次のプロダクト開発ではぜひ Penpotのセルフホスト という選択肢をテーブルに乗せてみてほしい。チームの生産性は、確実に次のステージへと引き上げられるはずだ。