Penpot をセルフホストするなら：オープンソース設計ツールの Docker、共同作業、開発ハンドオフ

penpot/penpot はオープンソースの設計ツールです。位置づけは Figma に近いですが、オープンソース、セルフホスト、設計とコードの共同作業をより重視しています。設計資産、コンポーネント、ハンドオフの流れを自分たちで管理したいチームに向いています。

プロジェクト：

https://github.com/penpot/penpot

公式サイト：

https://penpot.app

Penpot が向いている人

Penpot は次のような場面に向いています。

1. チームでオープンソースの設計ツールを使いたい。
2. 会社として設計ファイルを完全にサードパーティ SaaS に置きたくない。
3. デザイナーとフロントエンドの間で Inspect Mode、デザインシステム、コンポーネントのハンドオフが必要。
4. design tokens、components、variants をもとに長期的な設計規約を作りたい。

個人で一時的に図を描くだけなら、オンライン版を使うほうが手軽です。セルフホストはチームで長期利用する場合に向いています。

セルフホストの入口

README は完全な Docker Compose をトップページに貼っているのではなく、公式の self-host ドキュメントを案内しています。

1

https://penpot.app/self-host

実際にデプロイするときは、Web 上の古い compose をコピーするのではなく、公式ドキュメントに沿って Docker または Kubernetes を使うのがおすすめです。Penpot のような共同作業ツールは、通常 1 つのコンテナだけでは完結しません。データベース、オブジェクトストレージ、バックグラウンドタスク、メールサービスも関係します。

堅実なセルフホスト手順は次のようになります。

1
2
3
4
5

# 1. まず公式 self-host ドキュメントを読む
# 2. ドメイン、HTTPS、永続化ディレクトリ、データベースを準備する
# 3. 公式推奨の Docker / Kubernetes 方式で起動する
# 4. 管理者アカウントを作成する
# 5. チームスペースをインポートまたは作成する

開発ハンドオフでの使い方

開発者にとって Penpot で便利なのは Inspect Mode です。デザイナーが画面を完成させたあと、開発者は次の情報を確認できます。

1. サイズと余白。
2. 色とフォント。
3. コンポーネント構造。
4. デザイン token。
5. 再利用可能なコンポーネントと variants。

これはスクリーンショットへの注釈より安定しており、複数人での共同作業にも向いています。

チームでのおすすめフロー

次のように進められます。

1. デザイナーが Penpot で design system を作る。
2. コンポーネント名をフロントエンドのコンポーネントライブラリにできるだけ合わせる。
3. 色、フォントサイズ、余白を token で管理する。
4. 開発者は口頭説明ではなく Inspect Mode でスタイルを確認する。
5. 大きなバージョン変更の前に設計ファイルをエクスポートまたはバックアップする。

注意点

Penpot は共同作業システムであり、単一ファイルのツールではありません。セルフホストする場合は、アップグレード、バックアップ、権限、メール、HTTPS、ストレージを考える必要があります。チームの正式な設計資産を移行する前に、まずテスト環境で一通りの流れを試すのがおすすめです。