💡 ツール概要

Penpot(ペンポット)は、スペインのKaleidos社が開発する完全オープンソースのデザイン&コードコラボレーションプラットフォームです。2021年に初公開され、2024年にバージョン2.0が正式リリースされました。Figmaの代替ツールとして急速に注目を集めており、AIデザインコパイロット、UX2Docドキュメント生成、MCPサーバーによるAIエージェント連携など先進的なAI機能を積極的に開発中です。完全無料のクラウド版に加え、セルフホスティングにも対応しており、データ主権を重視する企業にとって唯一無二の選択肢となっています。Web標準(CSS Grid、Flexbox)に準拠した設計思想により、デザイナーと開発者の間のギャップを根本から解消することを目指しています。
⚙️ 主要機能の詳細解説
📌 AIデザインコパイロット
Penpotが開発中のAIデザインコパイロットは、テキストプロンプトを入力するだけでデザインの変更を指示できる革新的な機能です。Neurons Labとの提携により開発が進められており、拡散モデルとLLMを統合することで、アイコンの修正から複雑なSVGオブジェクトの操作まで、幅広いデザイン作業をAIが自動化します。これにより、デザイナーは反復的な作業から解放され、より創造的な業務に集中できるようになります。将来的には、デザインの自動補完やスタイルの提案機能なども計画されています。
📌 UX2Docドキュメント自動生成
UX2Doc機能は、デザインアイデアやUI画面を生成AIが分析し、包括的なドキュメントに自動変換する機能です。デザインの意図、コンポーネントの仕様、インタラクションの説明などを体系的に文書化するため、開発チームへの引き継ぎが格段に効率化されます。手動でドキュメントを作成する工数を大幅に削減でき、デザインと仕様書の乖離を防止できます。
🔗 MCPサーバー連携
2025年12月にリリースされたMCPサーバーは、外部のAIエージェントやツールがPenpotのデザインデータとプログラム的にやり取りできるインターフェースです。AIエージェントがデザインシステムの分析、スタイルルールの抽出、命名規則のリファクタリング、セマンティックHTML/CSSの生成、Storybookセットアップの構築、ラフスケッチからのコンポーネント構造化などを自動実行できます。AIエージェントとの統合により、デザインワークフロー全体の自動化が飛躍的に進みます。
📌 リアルタイムコラボレーション
複数のデザイナーや開発者が同じファイルを同時に編集できるリアルタイムマルチプレイヤー機能を搭載しています。カーソルの位置がリアルタイムで共有され、コメント機能を使ったフィードバックもデザイン上に直接書き込めます。バージョン履歴管理も充実しており、過去の状態への復元も容易です。プロジェクト単位でのファイル整理やチーム管理機能も備わっています。
🌏 CSS Grid&Flexboxネイティブ対応
Penpot 2.0で導入されたCSS GridレイアウトとFlexboxレイアウトは、Web標準のCSSプロパティと完全に対応しています。デザイナーが作成したレイアウトがそのままCSSコードとして出力されるため、「デザイン通りに実装できない」という従来の課題を根本的に解決します。Inspectパネルからは各要素のCSSコードスニペットをそのままコピーできます。レスポンシブデザインにも対応し、ブレークポイントごとのレイアウト調整が直感的に行えます。
📌 コンポーネント&デザイントークン
業界で唯一、ネイティブのデザイントークン機能を搭載しています。コンポーネントとバリアント管理に加え、色、タイポグラフィ、スペーシングなどのデザイントークンを一元管理でき、大規模なデザインシステムの構築と運用を効率化します。W3Cのデザイントークン仕様にも対応しており、業界標準との互換性も確保されています。
📌 SVGネイティブ設計
すべてのデザイン要素がSVG形式で保存されるため、Web標準に完全準拠しています。独自フォーマットによるベンダーロックインの懸念がなく、データのポータビリティが確保されます。エクスポートしたSVGファイルはそのままWebサイトやアプリケーションで使用可能です。
🌏 セルフホスティング対応
DockerやDocker Composeを使って自社サーバーにPenpotをインストールでき、データの完全な管理が可能です。機密性の高いプロジェクトでも社外にデータが出ることがなく、GDPRなどのデータ規制への対応も容易になります。オープンソースのため、独自のカスタマイズや機能拡張も自由に行えます。UbuntuやCentOSなど主要なLinuxディストリビューションで動作確認されています。
📌 プラグインエコシステム
プラグイン機能により、Penpotの機能を自由に拡張できます。サードパーティ製プラグインの導入や、自社独自のプラグイン開発も可能で、ワークフローに合わせた柔軟なカスタマイズが実現します。プラグインAPIのドキュメントも整備されており、開発者が独自のプラグインを作成しやすい環境が整っています。
💰 料金プラン完全ガイド

Penpotは無料プランから企業向けプランまで4つの料金体系を提供しています。
💰 Freeプラン($0/月)
個人やスタートアップに最適な完全無料プランです。無制限のプロジェクト作成、無制限のチームメンバー、リアルタイムコラボレーション、コンポーネント&デザイントークン、プラグイン機能など主要機能がすべて利用可能です。ストレージ容量には制限がありますが、基本的な利用には十分です。
💰 Professionalプラン(月額上限$175)
チーム向けのプロフェッショナルプランは、チームサイズに応じた従量課金制ですが、月額$175を上限とするキャップ制を採用しています。最大25GBのストレージ、優先サポート、高度な管理機能が含まれます。チーム規模が大きくなっても月額が青天井にならないため、予算管理がしやすい設計です。
💰 Unlimitedプラン
中規模チーム向けのプランで、Professionalプランの全機能に加え、さらに大容量のストレージとプレミアムサポートが提供されます。年間契約のオプションも用意されており、長期利用でのコスト最適化が可能です。
💰 Enterpriseプラン(月額上限$950)
大規模組織向けのエンタープライズプランは、月額$950を上限としたキャップ制です。SSO(シングルサインオン)、二要素認証、チームアクセス制御、アクティビティログ、分析機能、認定ビルドなどの高度なセキュリティ・管理機能が含まれます。カスタマイズ可能なアドオンも用意されており、組織の要件に応じた柔軟な構成が可能です。
なお、セルフホスティング版は引き続き完全無料で利用可能であり、ライセンス料は一切発生しません。これはFigmaやSketchなどの競合ツールにはない大きなアドバンテージです。
🌏 日本語対応の実態
PenpotのUIは多言語対応しており、日本語インターフェースも提供されています。メニュー、ツールバー、設定画面など主要な画面要素が日本語化されているため、英語が苦手なユーザーでも基本的な操作に困ることはありません。ただし、公式ドキュメントやヘルプセンターは主に英語で提供されており、日本語の公式ドキュメントは限定的です。コミュニティフォーラムも英語が中心ですが、日本国内でもQiitaやZennなどの技術ブログで日本語の解説記事が増えてきています。gihyo.jpなどの技術メディアでも定期的に取り上げられており、日本語での情報収集は比較的容易になってきています。デザイン上で日本語テキストを使用する際も、Google FontsやAdobe Fontsの日本語フォントの読み込みに対応しており、表示に大きな問題はありません。日本語プロジェクトでの実用性は十分に確保されています。
✅ メリット5つ
💰 1. 完全無料で使える圧倒的コストパフォーマンス
Penpotの最大の魅力は、プロフェッショナルレベルのデザインツールが完全無料で利用できる点です。Figmaのように無料版の制限に悩まされることなく、無制限のプロジェクト、無制限のチームメンバーでの共同編集が可能です。スタートアップや教育機関、個人開発者にとって、コスト面での障壁がゼロになります。
📌 2. オープンソースによる透明性とデータ主権
MPL 2.0ライセンスのオープンソースソフトウェアであるため、ソースコードが公開されており、セキュリティや機能面での透明性が確保されています。セルフホスティングにより自社サーバーでの運用が可能なため、データが第三者のクラウドに保存されることを避けたい企業にとって最適です。コードの監査や独自改変も自由に行えます。
🔗 3. Web標準準拠によるデザイン・開発連携の効率化
CSS GridやFlexboxなどWeb標準のレイアウト技術をネイティブサポートしているため、デザイナーが作成したレイアウトが開発者にそのまま伝わります。InspectパネルからCSSコードを直接コピーでき、デザインと実装の乖離を最小限に抑えられます。
📌 4. ベンダーロックインからの解放
SVGネイティブ設計とオープンスタンダードの採用により、特定のツールに縛られることがありません。将来的に別のツールに移行する際もデータの可搬性が確保されており、Figmaの価格改定やAdobe XDのサービス終了のようなリスクに対する保険にもなります。
📌 5. 活発なコミュニティと急速な進化
オープンソースプロジェクトとして活発なコミュニティに支えられており、機能追加や改善のペースが非常に速いです。AI機能の統合やプラグインエコシステムの拡充など、最新技術のトレンドにも積極的に対応しており、GitHubでのスター数も順調に増加しています。
✅ デメリット3つ
⚙️ 1. Figmaと比較した機能の成熟度
Figmaが10年以上かけて洗練してきた機能や操作感と比較すると、Penpotはまだ発展途上の部分があります。プロトタイピング機能の表現力や、プラグインエコシステムの充実度ではFigmaに及ばない場面があり、高度なインタラクションデザインやアニメーション制作には制約を感じることがあります。
📌 2. 大規模ファイルでのパフォーマンス
数百ページに及ぶ大規模なデザインファイルを扱う際、ブラウザ版ではパフォーマンスが低下する場合があります。特に多数のコンポーネントやアセットを含むプロジェクトでは、読み込み時間や操作のレスポンスに影響が出ることがあり、最適化が今後の課題です。セルフホスティング環境ではサーバーのスペックにも依存するため、適切なリソース配分が必要です。
⚙️ 3. エンタープライズ向け機能の発展途上
大企業で求められるSSO統合、高度な権限管理、監査ログなどの機能は有料プランで提供されていますが、FigmaやSketchなどの競合と比較するとまだ発展途上の領域があります。組織全体での大規模導入を検討する場合は、自社の要件との適合性を慎重に評価する必要があります。
💡 具体的な活用事例・ユースケース5つ
📌 1. スタートアップのプロダクトデザイン
創業期のスタートアップが、予算をかけずにプロダクトのUIデザインとプロトタイプを作成するケースです。Freeプランで全機能が使えるため、デザインツールのコストをゼロに抑えながら、投資家向けのデモやユーザーテスト用のプロトタイプを効率的に制作できます。チーム全員がリアルタイムで共同編集できるため、少人数チームの機動力を最大限に活かせます。
📌 2. 教育機関でのデザイン教育
大学やデザインスクールで、UIデザインやプロトタイピングの授業に活用するケースです。ライセンス費用が不要なため学生全員に配布可能で、セルフホスティングにより学内サーバーでの運用も実現できます。Web標準に準拠した設計思想は、CSSやHTMLの学習とも親和性が高く、デザインとコーディングを同時に学べる教材としても優れています。
🔒 3. セキュリティ重視の金融機関
銀行や保険会社などの金融機関が、社内システムのUI設計に活用するケースです。セルフホスティングによりデザインデータが外部クラウドに保存されないため、厳格なセキュリティポリシーやGDPRなどのデータ規制に対応できます。オープンソースによるソースコード監査も可能で、セキュリティチームによる検証が行えます。
📌 4. デザインシステムの構築と管理
中規模以上の企業が、全社統一のデザインシステムを構築・管理するケースです。ネイティブのデザイントークン機能を活用して、色、タイポグラフィ、スペーシングなどの基本要素を一元管理できます。コンポーネントとバリアントを体系的に整理し、複数プロダクト間での一貫性を確保します。CSSコードとの直接的な対応関係により、デザインシステムの実装コストも削減できます。
📌 5. オープンソースプロジェクトのUIデザイン
GitHubで公開されているオープンソースプロジェクトのUIデザインに活用するケースです。PenpotはFigmaと異なりライセンス費用がかからないため、世界中のオープンソースコミュニティのコントリビューターが自由に参加できます。デザインファイル自体もオープンな形式で保存されるため、デザインへのコントリビューションの敷居が大幅に下がり、プロジェクト全体の品質向上に貢献します。
🚀 始め方ステップバイステップ
🚀 ステップ1:アカウント作成
Penpotの公式サイト(penpot.app)にアクセスし、「Get Started」ボタンをクリックします。メールアドレスとパスワードを入力するか、Googleアカウントでのサインアップが可能です。登録は完全無料で、クレジットカード情報は不要です。
🚀 ステップ2:最初のプロジェクト作成
ダッシュボードが表示されたら、「New Project」をクリックして新しいプロジェクトを作成します。プロジェクト名を入力し、必要に応じてチームメンバーを招待します。
🚀 ステップ3:デザインファイルの作成
プロジェクト内で「New File」を選択し、デザインファイルを作成します。エディタが開いたら、左側のツールバーからシェイプ、テキスト、画像などの基本要素を配置していきます。テンプレートも用意されているので、それをベースに始めることもできます。
🚀 ステップ4:コンポーネントの活用
繰り返し使用するUI要素はコンポーネントとして登録しましょう。要素を選択して右クリックから「Create Component」を選ぶと、再利用可能なコンポーネントとして管理できます。
🚀 ステップ5:共有とフィードバック
デザインが完成したら、共有リンクを生成してチームメンバーやステークホルダーにレビューを依頼します。コメント機能を使って、デザイン上の特定箇所にフィードバックを書き込めます。
💡 活用のコツ・裏技
Penpotを最大限に活用するためのヒントをご紹介します。まず、Figmaからの移行には公式のインポート機能を活用しましょう。Figmaファイルを.fig形式でエクスポートし、Penpotにインポートすることで、既存のデザイン資産をスムーズに移行できます。次に、CSS Grid機能を積極的に活用することをおすすめします。従来のフレーム配置ではなくCSS Gridでレイアウトを組むことで、レスポンシブデザインの意図が開発者に正確に伝わります。また、デザイントークンを早い段階で定義しておくと、後からの一括変更が容易になり、デザインの一貫性維持が格段に楽になります。セルフホスティングを検討している場合は、Docker Composeを使った構築が最も簡単です。公式リポジトリのdocker-compose.yamlをベースに、環境変数を調整するだけで起動できます。キーボードショートカットの習得も効率化の鍵で、FigmaやSketchと共通のショートカットも多いため、他ツールからの移行者は直感的に操作できるでしょう。プラグインの導入も忘れずに検討してください。公式プラグインマーケットプレイスから便利な拡張機能を簡単にインストールできます。
🎯 向いている人・向いていない人
🎯 向いている人
コストを抑えてプロフェッショナルなデザインツールを使いたいスタートアップや個人開発者に最適です。データ主権やプライバシーを重視し、セルフホスティングで運用したい企業にも強くおすすめします。Web標準に基づいたデザインワークフローを構築したいチーム、オープンソースの理念に共感しコミュニティに貢献したい開発者、Figmaの料金改定やAdobe XDの終了を受けて代替ツールを探している方にもぴったりです。教育機関でデザインツールを導入したい場合にも、ライセンスコストの心配なく全学的に展開できます。
📌 向いていない人
Figmaの高度なプロトタイピング機能やプラグインエコシステムに強く依存している方には、現時点では物足りない場面があるかもしれません。大規模なエンタープライズ環境で、成熟した管理機能やSLA保証が必須の組織には、慎重な検討が必要です。また、Figmaとの完全な互換性を期待している方には、インポート時の差異に対応するコストが発生する可能性があります。
📊 総合評価とまとめ
Penpotは、オープンソースのデザインツールとして類を見ない存在感を発揮しています。完全無料で使える点、セルフホスティングによるデータ主権の確保、Web標準への準拠という3つの柱は、商用ツールでは得られない独自の価値を提供しています。2024年のバージョン2.0リリースでCSS GridやFlexbox、デザイントークンなどの重要機能が実装され、プロフェッショナルな利用にも十分耐えうるレベルに到達しました。AIデザインコパイロットやMCPサーバーなど、AI時代に対応した先進機能の開発も精力的に進められており、今後のさらなる進化が期待できます。G2での評価は4.6/5と高く、ユーザーからの満足度も上々です。Figmaの完全な代替としてはまだ発展途上の面もありますが、コスト、データ主権、オープンスタンダードを重視するチームにとっては、すでに十分に実用的な選択肢です。総合評価として、特にスタートアップ、教育機関、セキュリティ重視の組織には強くおすすめできるツールです。デザインツール市場において、Penpotはオープンソースという独自のポジションを確立しており、今後もFigmaやAdobe XDに対する有力なオルタナティブとして成長していくことが見込まれます。デザインの民主化を推進するツールとして、その動向から目が離せません。



