Penpot

Penpotとは？デザインとコードをつなぐオープンソース基盤

Penpotは、UIデザイン、インタラクティブなプロトタイプ、デザインシステムをブラウザーで共同編集できるオープンソースのデザイン基盤です。SVG、CSS Grid、Flex LayoutなどWeb標準を重視し、デザイナーが作った画面を開発者が構造やコードとして確認しやすい点が特徴です。クラウド版に加えてセルフホストも選べます。

AI専用の画像生成ツールではありませんが、公式MCP Serverを通じてClaudeなどのAIエージェントがPenpotのファイル構造を読み取り、デザインを変更するワークフローを提供しています。料金表でも全プランの共同編集機能として「AI Workflows with any Agent/LLM」が案内されており、人とAIが同じ設計データを扱う用途が中心です。

Penpotの主な機能

画面設計、部品管理、プロトタイプ、開発者への受け渡しを一つのデータで進められます。

UIデザインをWeb標準で組み立てる

ベクター編集、Flex Layout、Grid Layout、パス編集、フォント、テンプレートなどを利用できます。レイアウトがCSSの考え方に近いため、見た目だけの自由配置よりも、画面幅や要素数が変わったときの振る舞いを設計しやすくなります。自動的に実装品質が保証されるわけではなく、アクセシビリティとレスポンシブ動作は別途確認が必要です。

コンポーネントとデザイントークンを共有する

コンポーネント、バリアント、スタイル、デザイントークン、ライブラリを使ってデザインシステムを管理できます。複数画面で同じ部品を再利用し、色や余白などの変更を反映できます。既存の実装と一致させる場合は、名称、状態、トークン値をコード側の正本と照合してください。

プロトタイプと開発者向け情報を渡す

画面間の遷移、インタラクション、フローを設定し、リンクでプロトタイプを共有できます。開発者はInspect mode、Code inspector、距離やプロパティの確認、アセット書き出しを利用できます。生成される情報は実装の出発点であり、フレームワーク固有の状態管理やテストまで完成するものではありません。

MCPでAIエージェントと接続する

Penpot MCP Serverは、AIエージェントがデザイン構造を読み、自然言語の指示をもとに変更するための接続口です。デザインからコード、コードからデザインといった反復に使えます。接続するAIクライアントによって送信データ、権限、保持条件が異なるため、Penpot側の安全性だけでなく外部AI側の契約も確認してください。

Penpotのクラウド料金は無料から

2026年8月14日に公式料金画面で確認したProfessionalは1人月0ドルで、最大8人のチーム、10GBのストレージ、7日分の自動保存バージョンと削除ファイル復旧を含みます。ファイル数とチーム数は無制限で、主要な設計・共同編集機能に機能制限を設けない構成です。

Unlimitedは1人月7ドルで、チーム全体の月額上限が175ドルです。ストレージ25GB、履歴と復旧30日、今後の機能への早期アクセスが追加されます。Enterpriseは1人月25ドルで、中央管理、組織管理、詳細権限、SSO、監査ログ、無制限ストレージ、履歴90日を提供します。専用インフラのPrivate Serverは年5万ドルで、年払い時の月額換算は約4,166.67ドルです。

日本語対応は利用環境で確認したい

Penpotはコミュニティ主導のオープンソース製品で複数言語に展開できますが、2026年8月14日の公式料金・ヘルプ確認では、日本語UIの現行範囲を確定できませんでした。MCPへ日本語で指示できるかも、接続するAIモデルの能力と設定に左右されます。本ページでは日本語対応を不明としています。

日本語の画面名やデザイントークンをAIに扱わせる場合は、少数の複製ファイルで名称の保持、文字化け、意図しない翻訳がないか確認してください。チームの共通言語と命名規則を決め、AIが変更してよいページやライブラリを限定するとレビューしやすくなります。

Penpotが向くチームと導入方法

デザイナーと開発者が同じWeb標準を基準に話したいチーム、オープンソースを重視する組織、クラウドとセルフホストを選びたい組織に向きます。小規模チームは無料クラウドで機能を試し、履歴、ストレージ、統制が必要になった段階でUnlimitedやEnterpriseへ移行できます。

写真編集や画像生成だけを求める人、AIが完成アプリを自動生成することを期待する人、デザインデータの運用責任を持てない組織には合わない可能性があります。セルフホストは契約費を抑えられても、更新、バックアップ、監視、メール、認証を自社で運用する必要があります。

商用利用とAI連携の権限を管理する

Penpotの主要なオープンソース部分はMPL 2.0などのライセンスで提供され、利用規約は顧客がアップロードしたコンテンツの所有者であり続けるとしています。企業や専門家による利用も契約上想定されています。ただし、フォント、画像、テンプレート、プラグインなど第三者素材のライセンスは別に確認してください。

MCPやプラグインへ接続すると、デザイン内の未公開情報、顧客名、画面文言、構造が外部処理へ渡る可能性があります。最小権限、複製ファイル、変更履歴、レビュー担当を用意し、本番ライブラリをAIへ直接更新させない運用から始めると安全です。Enterpriseのプラグイン許可リストや監査ログが必要かも、データ分類に基づいて判断してください。