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によってワークスペースがプログラム可能になり、デザインと開発の距離を縮めます。
主な機能
| 機能 | 概要 |
|---|---|
| リアルタイム協業 | 複数人で同時編集 |
| 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
最後までお読みいただきありがとうございます
この記事が参考になりましたら、ぜひシェアや他の記事もご覧ください。
AI・開発作業を快適にするデスク環境
比較ガイドを見る →購入前に比較しやすいよう、用途別の選び方をまとめています。
ブラウザで完結する無料ツール
ツール一覧を見る →LEXIA が制作現場向けに開発した無料ツールです。登録不要・ブラウザ上で処理が完結します。
フロントエンドの関連記事
もっと見る →
shadcn/uiがなぜ今、Web制作の現場で選ばれているのか？従来のライブラリとの違いや、実務で触ってみて感じたメリット・デメリットをわかりやすく解説します。
5分
ターミナルでMarkdownを快適に読むCLI「glow」の導入手順と基本操作、TUIの活用、他ツール比較、効率化のコツを解説します。実務で役立つ使いどころや注意点も網羅し、READMEや手順書をブラウザなしで素早く確認できる開発環境づくりを支援します。
4分新着記事
一覧を見る →
Open NotebookへPDFや資料を追加できない場合に、対応形式、ファイル容量、処理状態、API接続、Dockerリソースを確認する方法を解説します。
4分
Mac miniでOllamaなどのローカルLLMを運用する際に役立つSSDドック、外付けSSD、UPSの選び方を解説します。
4分LEXIA BLOG のすべての記事
ブログトップ →- 紙資料をAIノート化する手順｜スキャン・OCR・保存の実践構成
- 非破壊ブックスキャナー3選｜本を裁断せずOpen Notebookへ
- OCR精度を上げる8つの方法｜傾き・解像度・文字化けを減らすコツ
- Open Notebook向けドキュメントスキャナー3選｜紙資料をAIノートへ
- Open NotebookでPDFを読み込めないときの確認項目｜形式・容量・処理状態
- Mac miniでローカルLLMを使う周辺機器3選｜SSD・ドック・UPS
- Open Notebookの使い方｜Dockerで起動して最初の資料を追加するまで
- Ollama用外付けSSD 3選｜モデル保存と速度の考え方
- Ollamaに接続できないときの直し方｜localhost:11434の確認手順
- Ollama用ミニPCの選び方｜メモリ・SSD・冷却から考える3候補
- Ollamaの容量不足を解消する方法｜モデル削除・保存先変更の確認手順
- Macの音声入力用マイク4選｜USB-C接続と設定の確認点
- Ollamaが遅い原因は？モデル・メモリ・GPUを順番に確認する方法
- 音声入力ヘッドセット3選｜長時間でも距離が変わりにくい選び方
- 音声入力で句読点・改行を入れる方法｜Mac・Windowsの話し方一覧
- 生活音に強い音声入力マイク3選｜空調・タイピング対策
- Windows 11で音声入力が使えないときの直し方｜Win＋Hが反応しない原因
- 音声入力用USBマイク4選｜精度を上げる選び方と置き方
- Macで音声入力が使えない・反応しないときの確認手順
- 音声入力の誤変換を減らす7つの対策｜原因を30秒で切り分ける方法
- Amicalの音声入力用マイク4選｜環境別の選び方と設定のコツ
- NotebookLMの代替5選｜無料・セルフホストのオープンソース版まとめ【2026年最新】
- Ollamaの使い方｜ローカルLLMをMac・Windowsで無料で動かす手順【2026年最新・初心者向け】
- Valkeyとは？Redisから分かれたOSSの正体｜ライセンス・互換性・移行の判断材料
- Claude Codeの料金は結局いくら？Pro・Max・API課金とコスト最適化【2026年版】
- Mac mini複数台でClaude Codeを並列運用する方法｜構成・費用・セキュリティ
- Tursoとは？SQLiteをRustで書き直す“次世代の組み込みDB”の全貌
- OpenMontageとは？AIエージェントが“制作チーム”になる次世代の動画生成システム
- Firecrawlとは？Webを“LLMが使えるデータ”に変えるAI時代のスクレイピングAPI
- Web制作の現場で話題の「shadcn/ui」シャドシーエヌユーアイとは？メリット・デメリットをわかりやすく解説
- 最近よく聞く「Godot Engine」って何？初心者が調べてわかったこと
- 完全無料で独自ドメインが取れる「DigitalPlat FreeDomain」って怪しい？メリットと注意点を解説
- パソコンの操作、AIが代わりにやってくれる時代が来た…？話題の「UI-TARS」について調べてみた
- Claude-MemでAIに「記憶」を持たせる：使い方と他AIとの比較
- Sipeed PicoClaw 完全ガイド：10ドルのハードウェアで動く、超軽量AIエージェントの世界へようこそ
- superpowers フレームワークによる「ジュニアエンジニア」からの脱却
- Rorkとは？文章だけでアプリが作れるって本当？
- Supermemoryとは？AIが忘れる理由や記憶を補う仕組み
- Amical（アミカル）とは？無料AI音声入力の使い方・日本語精度を徹底解説【2026年最新】
- Moltbot（モルトボット）とは？できることと安全に使うための注意点
- LobeHubとは？LobeChatから進化したAIエージェントワークスペースを紹介
- YOLOとは何か？物体検出をリアルタイムかつ高速に行う近未来AIについて
- MiroThinkerとは？検索しながら考えるAIを実際に触ってみた感想
- Dyadとは？ローカルでWebアプリを作れる次世代ビルダー徹底解説
- Bun v1.3なにが変わった？公式動画から読み解く最新アップデート
- OpenAIの新モデル「GPT-5.2」とは？
- exoとは？余ってる端末が“ひとつのAIクラスター”になるOSSを解説
- SAM Audio（サム・オーディオ）とは？｜音を自由に切り取る次世代AIをわかりやすく解説
- A2UIは実際にどう使われる？想定ユースケースを具体例で解説
- A2UIとは？AIエージェント向けUI標準化プロジェクトを徹底解説
- Sim.aiって何？視覚的にAIエージェントを設計できるOSSワークフロー基盤
- adk-go とは？Goで始める実務向けAIエージェント開発
- GensparkのAI Developerとは？GensparkのAI Developerを使って安全な便利ツールを作ってみた
- v0ってどこまで実用的なアプリ作れる？
- ローカルファーストは良いぞって話
- コマンドラインでMarkdownを美しく読む：glowの使い方と魅力
- Onlookとは？：Subframe・Tempo・v0・Boltなど、デザイナーと開発者のための次世代UIツール徹底比較
- Open Notebookとは？セルフホストでNotebookLMを自前運用する方法【2026年最新】
- もう.envを手動で共有しない！Infisicalが変えるシークレット管理の新常識
- LanceDBとは？クラウドに頼らない次世代ベクトルデータベースを調べてみた
- Lobe Chatとは？OpenAI・Claude・Geminiを一括管理できる最強AIフレームワーク
- Bunとは？：もうnpmには戻れないかも。かわいい顔した爆速JS
- Firebase Studioとは？Googleが描くAI時代の新しい開発環境
- Stremioの運営元・収益構造を含む「危険性」のリアルな見方：使う前に知っておきたいポイント
- AIでWebアプリを自動生成！Lovableとは？
- Generative AI for Beginners 最新版（21 レッスン版）を徹底解説
- OpenHands（旧OpenDevin）とは？AIが自動で開発を進める時代の幕開け
- Bolt.newとは？ブラウザで動くAI開発エージェントの使い方と特徴を解説
- Stremio / stremio-web とは？危険性と合法性を調査 — 将来性も含めて
- Firebase Studioの始め方｜登録からAIプロトタイプ作成・デプロイまで完全ガイド
- Claude Code入門：ターミナルで動く“エージェント型”コーディングアシスタント
- Stagehandとは？E2Eテストが超楽になる！？“AIブラウザ自動化”の衝撃
- STUDIOアップデート総点検：あと「STUDIO AI」どこ行った？