Penpotとは？Web標準で“デザイン=コード”を実現するオープンソースのFigma代替
本記事は一次情報（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によってワークスペースがプログラム可能になり、デザインと開発の距離を縮めます。
主な機能
| 機能 | 概要 |
|---|---|
| リアルタイム協業 | 複数人で同時編集 |
| CSS Grid / Flex レイアウト | “最初から実コードのように振る舞う”レスポンシブ設計 |
| コンポーネント & バリアント | 再利用可能で一貫したUIを構築 |
| デザイントークン | デザインと開発の単一の信頼できる情報源 |
| Inspectモード | SVG/CSS/HTMLのすぐ使えるコードを取得 |
| プラグイン / API / Webhook | カスタム連携・自動化、トークンによるAPIアクセス |
| MCPサーバー | デザインとコードの双方向ワークフロー |
技術スタック
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万超と、成熟して活発に開発が続いています。
対象は「大規模にプロダクトを作るチーム」やコンプライアンス要件の厳しい組織を中心に、中小チームやスタートアップまで。ベンダー非依存のデザイン基盤を求める場合に有力です。
デザインとコードを直結させるという思想は、ビジュアル編集が即コードに反映されるツールとも通じます。
まとめ
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
最後までお読みいただきありがとうございます
この記事が参考になりましたら、ぜひシェアや他の記事もご覧ください。
フロントエンドの関連記事
もっと見る →
shadcn/uiがなぜ今、Web制作の現場で選ばれているのか？従来のライブラリとの違いや、実務で触ってみて感じたメリット・デメリットをわかりやすく解説します。
5分
ターミナルでMarkdownを快適に読むCLI「glow」の導入手順と基本操作、TUIの活用、他ツール比較、効率化のコツを解説します。実務で役立つ使いどころや注意点も網羅し、READMEや手順書をブラウザなしで素早く確認できる開発環境づくりを支援します。
4分新着記事
一覧を見る →
TursoはSQLiteをRustで一から書き直した、SQLite互換のインプロセスSQLデータベース。BEGIN CONCURRENTによる並行書き込み、ネイティブなベクトル検索、io_uringによる非同期I/Oなど、SQLiteの制約を超える機能を備えています。本記事ではlibSQLとの関係、注目機能、導入方法、成熟度までを公式情報に基づいて解説します。
5分OpenMontageは、AIコーディングアシスタントを動画制作スタジオに変えるオープンソースのエージェント駆動システム。1クリップ生成で終わらず、リサーチ→脚本→素材生成→編集→合成という実際の制作工程を自動化します。12のパイプライン・52ツール・500以上のスキル、無料ローカル完結から有料API連携までを公式情報に基づいて解説します。
6分Firecrawlは、WebサイトをクリーンなMarkdownや構造化JSONに変換し、RAGやAIエージェントにそのまま渡せるWebデータAPI。Scrape・Search・Crawl・Map・Agentなどのエンドポイント、JS描画やプロキシの自動処理、スキーマによる構造化抽出、MCPサーバー連携までを公式情報に基づいて解説します。
4分