Penpot (Kaleidos・2021・OSS Figma代替)（ペンポット）
SVGをネイティブ形式として採用した、世界初のオープンソース・デザイン＆プロトタイピングツール。デザイナーとエンジニアの協調作業に特化し、ベンダーロックインを防ぐ設計が特徴です。
概要
Penpotは、Web標準技術であるSVG（Scalable Vector Graphics）を基盤とした、オープンソースの設計・プロトタイピングプラットフォームです。従来の商用ツールが独自のバイナリ形式を採用し、特定のベンダーへの依存（ベンダーロックイン）を強いる構造であったのに対し、Penpotは「デザインデータの民主化」と「エンジニアとのシームレスな連携」を掲げています。
最大の特徴は、デザイン要素がブラウザ標準のSVGとして管理されている点です。これにより、デザイナーが作成したレイアウトやコンポーネントは、そのままWeb開発におけるCSSやHTMLの構造に近い形でエンジニアに受け渡されます。2025年以降のフロントエンド開発において重要視される「Design-to-Code」のワークフローを、極めて低い摩擦で実現するツールとして位置づけられています。
また、AGPL v3ライセンスを採用しているため、企業は自社サーバーへのセルフホスティングが可能です。これは、機密性の高いデザイン資産を外部クラウドに預けたくない組織や、厳格なコンプライアンス要件を持つプロジェクトにとって決定的なメリットとなります。近年ではPlugin APIの公開により、独自の自動化ツールやアセット管理機能との統合が進み、単なる描画ツールを超えた、開発エコシステムのハブへと進化を遂げています。
スペック表
| 機能・特性 | 詳細内容 | 開発への影響 |
|---|---|---|
| ファイル形式 | SVG Native (Web標準準拠) | コード化の際の解釈誤差を最小化 |
| ライセンス | AGPL v3 (Open Source) | 透明性の確保とベンダーロックイン回避 |
| デプロイ形態 | SaaS / Self-Hosting (Docker等) | データ主権の保持とセキュリティ管理 |
| 主要機能 | Auto Layout, Design Tokens, Components | 開発コンポーネントとの高い親和性 |
| 拡張性 | Plugin API (2025年以降拡充) | ワークフローの自動化・カスタマイズ可能 |
比較表
| 比較項目 | Penpot (OSS型) | 従来型商用ツール (Proprietary) | | :---とする | :--- | :--- | | データ形式 | SVG準拠（標準的） | 独自フォーマット（閉鎖的） | | エンジニア連携 | 高い（CSS/HTMLに近い構造） | 中程度（エクスポート作業が必要） | | コスト構造 | 基本無料 / インフラ管理費 | ユーザー数に応じたサブスクリプション制 | | インフラ制御 | 自社サーバー運用が可能 | ベンダー提供のクラウドに限定 | | エコシステム | オープンなプラグイン開発 | 限定的な公式・サードパーティ製 |
関連用語との違い
従来の商用デザインツールとの違い
最も大きな違いは「データの所有権」と「互換性」です。従来のツールは、独自のファイル形式を用いることでユーザーをプラットフォーム内に囲い込む戦略をとりますが、PenpotはWeb標準であるSVGを利用するため、特定のツールに依存せず、ブラウザや他の標準準拠ツールとの親和性が極めて高いのが特徴です。
Sketch / Figma との比較
SketchはmacOS環境に限定される制約があり、Figmaは強力なクラウド機能を持つ一方で、データの管理権限がベンダー側にあります。Penpotはこれらに対し、プラットフォームを選ばないマルチデバイス対応と、自社運用によるデータ統制権を両立させています。
FAQ
Q1. セルフホスティングを行う最大のメリットは何ですか？
データの機密保持とセキュリティです。デザインデータには製品の未発表仕様やブランド戦略が含まれるため、外部クラウドへのアップロードを制限したい企業にとって、自社管理下のサーバー（Docker等）で運用できる点は極めて強力な導入動機となります。
Q2. エンジニアにとって、従来のツールより使いやすい理由は？
デザインの構造がWeb標準に準拠しているためです。Auto Layout機能などがCSSのFlexboxに近い概念で動作するため、デザイナーが作成したレイアウトをそのまま実装コードへ変換する際の思考プロセスが一致し、ハンドオフ（受け渡し）の工数を大幅に削減できます。
Q3. プラグイン開発の現状はどうなっていますか？
2025年以降、Plugin APIの整備が進んだことで、デザインアセットの自動生成や、デザイントークンからCSS変数への一括変換など、開発プロセスを自動化するカスタムプラグインの開発が活発化しています。これにより、単なる描画ツールではなく、CI/CDパイプラインの一部として組み込むことも視野に入っています。