【脱Figma？】オープンソースのPenpotを自社サーバー（Docker）にセルフホストする方法
プロダクト開発の現場において、デザインツールの選定は単なる「見た目の好み」ではなく、セキュリティ、コスト、そしてエンジニアとデザイナーのワークフローの統合を左右する戦略的な意思決定だ。
近年、Figmaの価格改定やエンタープライズ向けの厳格なデータガバナンス（特に金融、ヘルスケア、官公庁関連）の壁にぶつかり、「完全なデータ主権（Data Sovereignty）」を担保できるオープンソースのUI/UXデザインツール Penpot へ視線を向けるチームが急増している。
Penpotは、SVGをネイティブフォーマットとして採用し、CSS GridやFlexboxといったWeb標準の概念をそのままデザインシステムに持ち込める、まさに「開発者のためのデザインツール」だ。さらに、これを完全なオンプレミス（自社サーバー）環境にDockerでセルフホストできれば、外部SaaS依存のリスクを完全に排除できる。
本記事では、テックリードの視点から、DockerとDocker Composeを用いたPenpotのプロダクション・グレードの構築手順と、チームの生産性を限界突破させる実践的ノウハウを余すことなく伝授する。
—
1. なぜ今、Penpotをセルフホストするのか？
多くのチームが「Figmaで十分ではないか」と考える。しかし、プロダクトがスケールし、組織が大きくなるにつれて以下の課題が顕在化する。
- コンプライアンスとデータ主権: 機密性の高いユーザーデータや未発表のプロダクトデザインが、サードパーティのクラウドに常駐することへのセキュリティ監査上のリスク。
- オフライン/イントラネット環境: 完全閉域網（エアギャップ環境）でのセキュアなデザイン・プロトタイピング環境の必要性。
- コードとの完全な親和性: 「デザイナーが引いたレイアウト」と「エンジニアが書くコード（CSS）」の概念的乖離の解消。
Penpotはこれらをすべてオープンソース（MPL 2.0）かつ自社インフラ上で解決する。
—
2. Docker Composeによるプロダクション・グレードの構築
開発用ではなく、チームメンバー全員が日常的にアクセスする「実用に耐えうる」セルフホスト環境を構築する。ここではリバースプロキシ（Nginx Proxy ManagerやCaddyなど）の前段に配置することを想定した、堅牢な `docker-compose.yml` を提示する。
実用的な `docker-compose.yml` のベストプラクティス
version: ‘3.8’
services:
# —————————————————————————
# Penpot Frontend (Nginx + Static assets)
# —————————————————————————
penpot-frontend:
image: penpotapp/frontend:latest
restart: always
ports:
- “8080:80”
depends_on:
- penpot-backend
networks:
- penpot-net
environment:
- PENPOT_PUBLIC_URI=https://design.internal.company.com
# —————————————————————————
# Penpot Backend (Clojure-based API server)
# —————————————————————————
penpot-backend:
image: penpotapp/backend:latest
restart: always
networks:
- penpot-net
depends_on:
- penpot-postgres
- penpot-redis
volumes:
- penpot-data:/opt/data
environment:
- PENPOT_FLAGS=disable-registration enable-telemetry=false
- PENPOT_DATABASE_URI=postgresql://penpot:penpot_secure_password@penpot-postgres/penpot
- PENPOT_DATABASE_USERNAME=penpot
- PENPOT_DATABASE_PASSWORD=penpot_secure_password
- PENPOT_REDIS_URI=redis://penpot-redis:6379
- PENPOT_SECRET_KEY=generate_a_very_long_random_string_here_for_production
- PENPOT_PUBLIC_URI=https://design.internal.company.com
# SMTP設定（チーム招待メール用）
- PENPOT_SMTP_DEFAULT_FROM=no-reply@company.com
- PENPOT_SMTP_DEFAULT_NAME=Penpot Internal
- PENPOT_SMTP_HOST=smtp.internal.company.com
- PENPOT_SMTP_PORT=587
- PENPOT_SMTP_USERNAME=smtp_user
- PENPOT_SMTP_PASSWORD=smtp_password
- PENPOT_SMTP_TLS=true
# —————————————————————————
# Penpot Exporter (Puppeteer based SVG/PDF export service)
# —————————————————————————
penpot-exporter:
image: penpotapp/exporter:latest
restart: always
networks:
- penpot-net
environment:
- PENPOT_PUBLIC_URI=http://penpot-frontend
# —————————————————————————
# PostgreSQL (Data Persistence)
# —————————————————————————
penpot-postgres:
image: postgres:15-alpine
restart: always
networks:
- penpot-net
volumes:
- postgres-data:/var/lib/postgresql/data
environment:
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot_secure_password
# —————————————————————————
# Redis (Session & Caching)
# —————————————————————————
penpot-redis:
image: redis:7-alpine
restart: always
networks:
- penpot-net
volumes:
- redis-data:/data
volumes:
penpot-data:
postgres-data:
redis-data:
networks:
penpot-net:
driver: bridge
デプロイメントのステップ
1. 環境変数の堅牢化: 上記の `penpot_secure_password` や `PENPOT_SECRET_KEY` は、必ず本番環境用の強固なランダム文字列に置換すること。
2. 起動コマンドの実行:
docker compose up -d
3. 初期管理者アカウントの作成:
コンテナが起動したら、初回アクセス時にサインアップ画面が表示される。セルフホスト環境では `disable-registration` フラグを有効にしておき、管理者がCLI経由でユーザーを招待する運用がセキュリティ上望ましい。
—
3. 開発スピードを劇的に高めるPenpotの神ショートカット
UI/UXエンジニアがPenpotを触る際、マウス操作に頼っていてはFigma時代からのスピード感が落ちてしまう。Web標準のメンタルモデルを持つPenpotで、開発効率を最大化するキーボードショートカットをマスターせよ。
- `Shift + F`: フレーム（Frame）の作成。レイアウトのコンテナを瞬時に配置。
- `Ctrl + Alt + G` / `Cmd + Option + G`: グループ化（Figmaの `Cmd + G` とは異なり、レイアウトグループとしてCSS Flexbox的挙動を付与する）。
- `Alt` 長押し + ホバー: 要素間の精密なマージン・パディングの計測（WebのBox Modelそのもの）。
- `V`: 選択ツールへの切り替え。
- `R`: レクタングル（矩形）ツール。
—
4. チーム開発で役立つ設計共有化ルール
デザインツールを「お絵描きツール」から「コードの源泉」へと昇華させるための、チーム運用ルール。
1. CSS Flexbox / Gridの強制適用
Penpotの真骨頂は、レイアウトにFlexboxやCSS Gridの概念をそのまま適用できる点だ。
- ルール: 「絶対配置（Absolute）」を極力禁止し、親要素には必ずFlexレイアウトを適用すること。これにより、デザイナーが作ったレイアウト構造が、そのままフロントエンドエンジニアのCSS設計（Tailwind CSSやCSS Modules）へダイレクトに翻訳される。
2. デザインシステムのトークン化
カラーパレット、タイポグラフィ、スペーシングは、必ずPenpotの「Libraries（ライブラリ）」機能で一元管理する。
- 運用: デザイントークンをJSON形式でエクスポートし、CI/CDパイプラインを通じて自動的にフロントエンドのリポジトリ（`tokens.json`）と同期する仕組みを構築せよ。
—
5. プロフェッショナルのための知見：トラブルシューティング
セルフホスト運用において遭遇しがちな罠と、その解決策。
- Q. チームメンバーに招待メールが飛ばない
- A. 多くの場合、SMTPの設定ミスまたは社内リレーサーバーのセキュリティポリシーに起因する。`penpot-backend` のログ（`docker compose logs penpot-backend`）を監視し、TLSハンドシェックのエラーが出ていないか確認すること。必要に応じて `PENPOT_SMTP_TLS=false` やポート番号（25, 465, 587）を見直す。
- Q. 大容量画像のアップロードで504 Gateway Time-outが発生する
- A. Penpotの前段に配置しているリバースプロキシ（NginxやTraefik等）の `client_max_body_size` がデフォルト（通常1MB〜10MB）に制限されていることが原因。プロキシ側の設定で `client_max_body_size 100M;` のように拡張する必要がある。
—
結びにかえて
Penpotのセルフホストは、単なるコスト削減の手段ではない。それは、「デザインとコードの距離をゼロにする」ためのエンジニアリング的アプローチだ。Dockerによる堅牢なインフラ基盤の上に構築されたこの環境は、あなたのチームのワークフローを次のステージへと引き上げるだろう。
さあ、今すぐ `docker compose up` を叩き、真のデータ主権とアジリティを手に入れろ。