Penpot 2.17完全ガイド：MCPサーバー連携でAI駆動デザインを実現するFigma代替OSSツール

GitHubスター数59,000超を誇るオープンソースデザインプラットフォーム「Penpot」が、2026年最新バージョン2.17でMCPサーバーをネイティブサポートしました。Figmaの有料サブスクリプションに代わる選択肢として注目を集めています。本記事では、最新機能であるMCPサーバー連携・Design Tokens・セルフホスト構成を中心に解説します。

Penpotとは — オープンスタンダード準拠のデザインプラットフォーム

PenpotはSVG・CSS・HTML・JSONといったオープンスタンダードに基づいて構築されたデザインプラットフォームです。ブラウザ上でそのまま利用できるほか、Dockerを使って自社サーバーにセルフホストすることも可能です。

GitHubリポジトリ（penpot/penpot）は59,443スターを獲得し、コントリビューター数は299名に上ります。Mozilla Public License 2.0（MPL-2.0）のもとオープンソースで提供されており、商用利用も条件付きで可能です。

Clojure製のバックエンドとClojureScript製のフロントエンドで構成されており、リアルタイムコラボレーション機能を内蔵。複数人が同時に同一デザインファイルを編集できます。

Figmaとの違い・なぜ今Penpotか

Figmaはクラウド専用で、利用者数・ファイル数に応じた有料プランが必要です。一方Penpotは完全セルフホスト可能で、ユーザー数・プロジェクト数に制限がありません。

最大の差別化ポイントは3点です。

データ所有権：Figmaはアドビのクラウドにデータが保存されますが、Penpotはオンプレミス運用が可能。セキュリティポリシーが厳しい企業でも導入できます。
コードとの親和性：デザインがSVG/CSSとして直接エクスポートされるため、デザインとコードの間の翻訳コストが最小化されます。FigmaのInspect機能相当の機能が無料で使えます。
MCPサーバー連携：2026年の最新版ではAIツール（Claude等）からMCP経由でデザインを直接操作できる機能が追加。AIを使ったUI生成・修正ワークフローが実現します。

Figmaも2024年にDev Modeを強化しましたが、ベンダーロックインなしでAIワークフローを実現できるのはPenpotならではの強みです。

Penpotの主な機能・特徴

MCPサーバーでAI連携を実現

v2.17で正式サポートされたMCPサーバーにより、Claude・Codex等のAIエージェントがPenpotのデザインファイルを直接読み書きできます。

# penpot MCP サーバーの起動例
npx @penpot/mcp-server --token YOUR_ACCESS_TOKEN

AIに「ボタンの色を変えて」「新しいカードコンポーネントを追加して」と指示するだけで、デザインが自動更新されます。

Design Tokens — デザインシステムの単一真実源

Design Tokensを使うと、色・フォント・スペーシング等のデザイン変数をコードとデザインで共有できます。Figmaの変数機能に相当しますが、JSON形式で外部管理できる点がエンジニアにとって扱いやすい設計です。

CSS Grid / Flex Layout

レスポンシブなUIコンポーネントをデザイン上で定義でき、実装時にCSS GridやFlexboxとして直接活用できます。デザインと実装のギャップを最小化する設計思想が反映されています。

プラグインシステム

公式プラグインハブ（Penpothub）から各種プラグインをワンクリックでインストールできます。アイコンライブラリの読み込み・コンポーネントの自動生成・外部サービスとの統合など、ワークフローを拡張できます。

こんな人に向いている

フロントエンドエンジニアがデザイン作業も担当するチームでは、PenpotのSVG/CSS直接エクスポート機能が特に有用です。デザインからコードへの翻訳が不要になり、実装速度が向上します。

UI/UXデザイナーがFigmaコストを削減したいチームや、セキュリティ要件でクラウドツール使用が制限されている企業にとっても有力な選択肢です。

DevOpsエンジニア・インフラ担当者は、DockerまたはKubernetes環境にPenpotをデプロイし、社内デザインインフラとして運用できます。アクセス制御・バックアップ戦略を自社で完全管理できます。

AIエンジニア・プロンプトエンジニアにとっては、MCPサーバーを活用したAI駆動デザイン自動化パイプラインの構築に最適なツールです。

Penpotの使い方・始め方

ブラウザで今すぐ試す

SaaSバージョンは design.penpot.app から無料で即時利用可能です。Googleアカウントでサインアップしてすぐに使い始められます。

Dockerでセルフホスト

# 公式のDockerデプロイメント
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
docker compose -p penpot -f docker-compose.yaml up -d

デフォルトでポート9001にPenpotが起動します。本番環境ではNginxをリバースプロキシとして設定し、HTTPSを有効化することを推奨します。

MCPサーバーのQuick Start

# PenpotアカウントでAPIアクセストークンを生成後
npm install -g @penpot/mcp-server
penpot-mcp --token YOUR_ACCESS_TOKEN --host https://design.penpot.app

Claude Desktopの設定ファイルにMCPサーバーを追加するだけで、AIからPenpotを操作できるようになります。

使う前に知っておきたいこと

ライセンス：MPL-2.0ライセンスです。ソースコードの変更を行った場合は変更部分を同じライセンスで公開する義務があります。商用利用自体は可能ですが、改変して製品化する場合は法務確認を推奨します。

パフォーマンス要件：Dockerでのセルフホスト時、最低4GB RAM・2コアCPUを推奨します。大規模チームでの同時接続が多い場合はより多くのリソースが必要です。

Figmaからの移行：Figmaファイルの直接インポート機能は限定的です。複雑なデザインシステムを移行する場合、コンポーネントの再作成が必要になるケースがあります。

既知の課題：v2.17.2のリリースノートによると、PDFエクスポート時の大型アートボードで画像が劣化する問題（GitHub Issue #報告あり）が残存しています。

この技術を学ぶ

クリエイティブ系ツールに興味を持った方には、UdemyのUI/UXデザインコースもおすすめです。

🎓 関連するクリエイティブ・UIデザインコース一覧 — セール時（最大90%OFF）を狙うとお得です

GitHubリポジトリ: penpot/penpot — ⭐ 59,443 | Language: Clojure | License: MPL-2.0