こんにちは！デザインシステムの構築や、デザイナーとエンジニアの境界線を溶かすシームレスなワークフローに日夜頭を悩ませている熱い仲間たちへ。
今日もFigmaを開いて、「素晴らしいツールだけど、エンタープライズの厳格なセキュリティ要件や、万が一のベンダーロックインに冷や汗をかいたこと」はないだろうか？
「自社のソースコードやデザインアセットを、一歩も社外のクラウドに出したくない」
「オープンソースの精神に則り、自分たちのインフラストラクチャの上でデザインツールを完全コントロールしたい」
そんなシビアな要求を持つプロダクトチームの救世主となるのが、今回紹介するオープンソースの本格デザイン・プロトタイピングツール 「Penpot（ペンポト）」 だ。
SVGをネイティブフォーマットとして採用し、CSSのFlexboxやGridの概念をそのままデザインツールに持ち込んだPenpotは、フロントエンドエンジニアにとっても「言葉の通じる」最高の相棒だ。今回は、このPenpotをDockerを使って自社サーバー（またはローカル環境）に完全セルフホストし、明日からすぐにチームで使い倒すための手順を、現場の知見をたっぷり込めてレクチャーしよう。
これをマスターすれば、あなたたちのチームのセキュリティガバナンスと開発スピードは劇的に向上する。さあ、深呼吸して、最高の環境構築の旅に出発しよう。
—
1. なぜ「Penpot」なのか？ 現代のエンジニアリング視点における存在価値
まず前提として、なぜ今Penpotなのかに触れておこう。
Figmaが業界標準であることは揺るぎない事実だ。しかし、金融、医療、政府系、あるいは厳格な知財管理が求められるR&Dチームにおいて、「クラウドSaaSであること」自体が最大の障壁になるケースは後を絶たない。
Penpotの何が優れているか？
1. 完全オープンソース（MPL 2.0）: ライセンス費用を気にせず、社内ポリシーに合わせて自由に改変・運用できる。
2. SVGネイティブ: 保存されるデータが純粋なSVG。つまり、Gitなどのバージョン管理システムと極めて相性が良い。
3. CSSグリッド＆フレックスボックス: 「ピクセルを配置する」のではなく、「レイアウトのルールをデザインする」。エンジニアのメンタルモデルと完全に一致する。
これを「自社サーバーに立てる」ということは、デザインの主権を完全に取り戻すことに他ならない。
—
2. 環境要件とアーキテクチャの理解
Penpotのセルフホストは、公式が提供する `Docker Compose` を使用するのが最も美しく、確実だ。
内部的には、以下のコンポーネントが協調して動作する。
- Penpot Frontend: ユーザーが目にするSPA（Single Page Application）。
- Penpot Backend: Clojure製のエレガントで堅牢なバックエンドAPIサーバー。
- Penpot Exporter: 画像やPDFなどのエクスポート処理を担うヘッドレスブラウザ（Chromium）ベースのサービス。
- PostgreSQL: デザインメタデータやユーザー情報を保持するリレーショナルデータベース。
- Redis: セッション管理やジョブキューのためのインメモリデータストア。
これらをたった一つのコマンドでオーケストレーションできるのがDockerの醍醐味だ。
—
3. ステップ・バイ・ステップ：Docker Composeによる構築手順
それでは、実際にサーバー（今回はUbuntuなどのLinux環境、またはローカルのDocker Desktop）にPenpotをデプロイしていこう。
Step 1: 作業ディレクトリの作成と環境ファイルの取得
まずはサーバーにSSHでログインし、Penpot用のディレクトリを作成する。
mkdir penpot-self-hosted
cd penpot-self-hosted
次に、公式が提供している最新の `docker-compose.yaml` をダウンロードする。ここでは安定稼働実績のあるバージョンを想定して解説を進めよう。
curl -O https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
Step 2: 環境変数（.env）のチューニング
Penpotは多くの設定を環境変数でコントロールできる。本番運用やセキュアな検証環境を作るためには、デフォルトのままではなく、いくつかのパラメータを必ず書き換える必要がある。
同階層に `.env` ファイルを作成し、以下のように設定しよう（※ `docker-compose.yaml` が自動で読み込む）。
==========================================
Penpot Environment Configuration
==========================================
外部からアクセスする際のベースURL（HTTPS化することを強く推奨）
PENPOT_PUBLIC_URI=http://localhost:9001
データベース接続設定（デフォルトのままでも動くが本番ではパスワード等を変更すること）
PENPOT_DATABASE_URI=postgresql://penpot:penpot@penpot-postgres/penpot
PENPOT_REDIS_URI=redis://penpot-redis:6379
セキュリティのための秘密鍵（本番環境では必ずランダムな強固な文字列に変更してください）
PENPOT_SECRET_KEY=super-secret-change-me-in-production-environment
新規ユーザー登録の制限（社内限定にする場合は false にして管理者が招待する運用が安全）
PENPOT_FLAGS=is-registration-enabled=true
> 先輩からのアドバイス: `PENPOT_SECRET_KEY` は、JWTの署名などに使われる極めて重要なキーだ。必ず `openssl rand -hex 32` などで生成した強固なランダム文字列を設定してほしい。ここをサボるとセキュリティインシデントの元になる。
Step 3: コンテナの起動（起立、気付け、デプロイ！）
準備は整った。いよいよDocker Composeを使ってコンポーネントを一網打尽に立ち上げる。
docker compose up -d
`-d` オプションを付与することで、バックグラウンド（デタッチドモード）でコンテナが静かに、しかし力強く起動し始める。
コンテナの起動状態は、以下のコマンドでリアルタイムに確認できる。
docker compose ps
すべてのサービス（frontend, backend, exporter, postgres, redis）の状態が `Up` または `healthy` になっていれば、構築の第一関門は華麗に突破だ！
—
4. 精度高い「Hello World」的動作確認
コンテナが無事に立ち上がったら、ブラウザを通じてPenpotの心臓部にアクセスし、正しく動作しているかを自分の目で確かめよう。
1. ブラウザを開き、`.env` で指定したURL（例: `http://localhost:9001`）にアクセスする。
2. Penpotの洗練されたログイン画面（またはオンボーディング画面）が表示されることを確認する。
3. 「Registration」 から初期管理者アカウント（Admin User）を新規作成する。
- ※ここで入力したメールアドレスとパスワードが、あなたの自社サーバーにおける最初の神（管理者）となる。
4. ログイン後、ダッシュボードから 「Create Team」 を選択し、適当な名前（例: `Tokyo-Lab`）でチームを作成する。
5. 続いて、新しい 「File」 を作成し、キャンバスに飛び込もう。
さあ、ここからがPenpotの真骨頂だ。
キャンバス上に「Frame」を置き、その中に「Rectangle」を配置してみる。右側のプロパティパネルを見てほしい。そこにあるのは、まさに私たちが日頃CSSを書くときに使う Flexbox や Grid のパラメータそのものだ。
適当な図形を描画し、テキストを打ち込み、プレビューモードで正しくレンダリングされることを確認できたら、今回の「Hello World（初期動作確認）」は120点満点で大成功だ！お疲れ様！
—
5. 本番運用に向けたプロの知見（Nginx / Reverse Proxy & SSL）
ローカルや検証環境での動作確認ができたら、次は「実戦（社内LAN公開やインターネット公開）」に向けたラストピースだ。
セルフホスト環境において、HTTPのまま運用することは絶対に避けてほしい。必ずNginx、Caddy、あるいはTraefikなどのリバースプロキシを前段に挟み、Let’s Encrypt等でSSL/TLS化（HTTPS）を施すこと。
Caddyをリバースプロキシとして使う場合の極上の設定例を置いておく。
your-penpot.internal.domain {
reverse_proxy localhost:9001 {
header_up X-Forwarded-Proto {scheme}
header_up X-Real-IP {remote_host}
}
}
また、PostgreSQLのデータ永続化（Docker Volumes）についても、`docker-compose.yaml` 内で正しくホスト側のディレクトリにマウントされていることを確認し、定期的な `pg_dump` によるバックアップ戦略を必ず自動化しておこう。インフラエンジニアとしての腕の見所だ。
—
おわりに：デザインの主権を取り戻した、新しい開発の幕開け
おめでとう！これであなたの手元には、誰にも依存しない、完全にコントロールされたプロトタイピング環境が手に入った。
Penpotを自社サーバーにセルフホストすることは、単に「お金がかからないツールを入れた」という話ではない。デザインデータという最も知的財産が詰まったアセットを、自分たちの要塞の内部にしっかりと守り、エンジニアとデザイナーが同じレイヤー（CSSとコードの思想）で対話できる基盤を手に入れたということだ。
これをマスターしたあなたなら、明日からチームメンバーにこう誇らしく言えるはずだ。
「もうクラウドの制限やセキュリティの心配はいらない。僕たちのデザインは、僕たちのサーバーで完璧に動いているよ」と。
さあ、この強力な環境をベースに、最高にシームレスで創造的なプロダクト開発を始めてほしい。あなたの毎日のワークフローが、劇的に楽しく、軽やかになることを心から応援している。