Penpotとは？Web標準で“デザイン=コード”を実現するオープンソースのFigma代替

こんにちは、LEXIAの齋藤です。

本記事は一次情報（Penpot公式リポジトリおよびREADME）に基づき構成しています。Penpotは活発に開発が進んでおり、機能や仕様は今後変更される可能性があります。

この記事でわかること

• Penpotとは何か／Figmaとの違い
• 最大の特徴：Web標準による“デザイン=コード”
• 主な機能（レイアウト・トークン・Inspect・プラグイン・MCP）
• 技術スタック
• 始め方（SaaS／セルフホスト）
• ライセンス・成熟度・対象

Penpotとは？Figmaとの違い

Penpotは「大規模にプロダクトを作るチームのためのオープンソース・デザインプラットフォーム」を掲げるデザインツールです。

Figmaのようなプロプライエタリなツールと最も異なるのは、セルフホストによってデザイン基盤を“自分たちで完全に所有”できる点です。ベンダーロックインや、厳しいガバナンス要件を持つ組織のコンプライアンス課題に応えます。ブラウザ版のSaaSと、自社サーバーでのホスティングを選べます。

GitHubスター53.1k超のメジャーなプロジェクトで、ライセンスはMPL-2.0。Kaleidos社が支える商用バックアップ付きのオープンソースです。

最大の特徴：Web標準で“デザイン=コード”

Penpotは SVG・CSS・HTML・JSON といったWeb標準の上に作られています。これにより、デザイナーの成果物が独自エクスポート形式や変換レイヤーを介さず、そのままコードへ橋渡しされます。

公式は「デザインがコードとして表現されるため、開発者がPenpotを“自宅のように”使える」と述べています。さらにMCP（Model Context Protocol）サーバーと公開APIによってワークスペースがプログラム可能になり、デザインと開発の距離を縮めます。

主な機能

技術スタック

Penpotはデザインツールとしては珍しい関数型中心の構成です。

バックエンド：Clojure（コードベースの約74%）

フロントエンド：ClojureScript

描画など性能が要る部分：Rust

スタイル：SCSS、ほかTypeScript／HTML

複雑な状態管理を関数型で扱いつつ、レンダリングのような性能クリティカルな処理にRustを使う設計です。

始め方（SaaS / セルフホスト）

導入は2通りあります。

1. SaaS（最速）：ホスティング版 design.penpot.app にアクセスするだけ

2. セルフホスト：penpot.app/self-host にDocker・Kubernetes・Elestio向けの手順あり

公式の技術ガイド（help.penpot.app）にセットアップやコントリビュート手順がまとまっています。デザイン基盤を内製・監査したい組織はセルフホストが選択肢になります。

ライセンス・成熟度・対象

ライセンスはMPL-2.0（権利者はKaleidos INC）。最新版はv2.16.0（2026年6月11日）で、リリース数81・developブランチのコミットは2.2万超と、成熟して活発に開発が続いています。

対象は「大規模にプロダクトを作るチーム」やコンプライアンス要件の厳しい組織を中心に、中小チームやスタートアップまで。ベンダー非依存のデザイン基盤を求める場合に有力です。

デザインとコードを直結させるという思想は、ビジュアル編集が即コードに反映されるツールとも通じます。

{{RELATED_ARTICLE:what-is-onlook}}

まとめ

Penpotは、Web標準（SVG/CSS/HTML/JSON）を土台に“デザイン=コード”を実現し、セルフホストでデザイン基盤を完全に所有できるオープンソースのFigma代替です。

デザイントークン・コンポーネント・Inspect・MCPなど、デザインと開発を一気通貫でつなぐ機能が揃っており、ベンダーロックインを避けたいチームにとって現実的な選択肢になっています。

参考リンク

• GitHub: penpot/penpot
• https://github.com/penpot/penpot
• 公式サイト
• https://penpot.app/
• セルフホスト手順
• https://penpot.app/self-host