こんにちは！プロダクトデザインとフロントエンドの境界線をなくすことに情熱を燃やしている先輩エンジニアです。
今日は、デザイナードリヴンな開発現場のあり方を根底から変える可能性を秘めた、今最もアツいオープンソースのUI/UXデザインツール「Penpot（ペンポット）」について話をさせてください。
「デザインツールといえばFigma一択でしょ？」
そう思っていませんか？もちろんFigmaは素晴らしいツールですが、データがベンダーのクラウドに完全にロックインされることや、エンジニアとの密な連携（コードとの乖離）にモヤモヤを感じたことはありませんか？
この記事を読めば、Penpotの正体とその圧倒的な強みが理解でき、今日からすぐにFigmaから移行してチームのワークフローを劇的に効率化できるようになります。これをマスターすれば、毎日のデザイン・実装作業が驚くほどスムーズになりますよ。一緒にその扉を開いてみましょう！
—
1. Penpotとは何か？オープンソースがもたらす真の自由
Penpotは、世界初の「Webオープンソース・デザイン・プロトタイピングツール」です。
これまで、プロフェッショナルなUI/UXデザインツールは、Adobe XD、Sketch、そしてFigmaといったプロプライエタリ（独自仕様の商用）ソフトウェアが市場を独占していました。これらは非常に便利ですが、「ソースコードがブラックボックスである」「自社サーバー（オンプレミス）で完全にデータをコントロールできない」という、セキュリティやオープンネスを重視する開発チームにとってのジレンマがありました。
Penpotの何がすごいのか、その本質を3つのポイントで紐解きます。
① フルオープンソース（AGPL-3.0）である安心感
Penpotはオープンソースです。つまり、誰でもコードを監査でき、自社のインフラストラクチャにホスト（セルフホスト）できます。「機密データを外部のクラウドに絶対に置けない」という金融、医療、厳格なセキュリティ基準を持つSaaS企業にとって、これ以上の選択肢はありません。ベンダーロックインからの完全な解放です。
② Web標準（SVGとCSS）をそのままデザインの土台に
ここがエンジニアとして最もシビれるポイントです。Penpotのネイティブなデータ構造はSVG（Scalable Vector Graphics）であり、レイアウトエンジンにはCSS FlexboxとCSS Gridがそのまま採用されています。
「デザインツール上の配置ルール」を学ぶ必要はありません。私たちが普段書いているCSSの概念が、そのままデザインツール側のレイアウト規則になっているのです。
③ デザインとコードの「共通言語」化
デザイナーが作ったグループやコンポーネントが、そのままHTML/CSSの構造と直結します。「これ、実際のコードではどう組むの？」というデザイナーとエンジニアの永遠のすれ違いが、Penpotの構造によって根底から解決されます。
—
2. Figmaとの決定的な違い：なぜ今、Penpotなのか？
「Figmaと何が違うの？」という疑問に、アーキテクチャの観点から答えておきましょう。
| 比較項目 | Figma | Penpot |
| :— | :— | :— |
| ライセンス | プロプライエタリ（商用クローズド） | オープンソース (AGPL-3.0) |
| データ保存形式 | 独自バイナリ形式 (Cloud内) | SVG / 標準フォーマット |
| レイアウトエンジン | 独自制約 (Auto Layout) | CSS Flexbox / CSS Grid |
| ホスティング | Figma公式クラウドのみ | 公式クラウド ＋ 完全なセルフホスト可能 |
| 価格 | チームプランは有料化が進む | 基本機能は完全無料（OSS） |
特に注目してほしいのは「レイアウトエンジン」です。
FigmaのAuto Layoutは非常に強力ですが、CSSのFlexboxやGridとは少し異なるFigma独自のメンタルモデルを覚える必要があります。一方、Penpotは最初からCSS FlexboxとGridそのものをUIに落とし込んでいます。
つまり、デザイナーがPenpotでレイアウトを組む行為は、実質的にフロントエンドのCSS設計を行っているのと同義になります。これが、エンジニアとデザインチームの距離を縮める最大の武器なのです。
—
3. 5分で完了！Penpotを使い始めるステップ
Penpotを体験する方法は主に2つあります。手軽に試したいなら公式クラウド（Penpot Cloud）、完全にデータを支配したいならDockerを使ったセルフホストです。
ここでは、最も簡単な公式クラウドの利用開始手順と、ローカルで動かすDocker環境のセットアップをサクッと紹介します。
パターンA：今すぐ試す（Penpot Cloud）
1. [Penpotの公式サイト](https://penpot.app/)にアクセス。
2. アカウントを無料作成（メールアドレスまたはGitHub等で即座に連携可能）。
3. ダッシュボードから「Create workspace」をクリックするだけ。これで準備完了です！
パターンB：Dockerでローカル環境に爆誕させる（エンジニア向け）
ローカルマシンや社内サーバーで完全に動かしたい場合は、Docker Compose一発です。以下の `docker-compose.yml` を用意してください。
version: “3.8”
services:
penpot-frontend:
image: penpotapp/frontend:latest
ports:
- “9001:8080”
environment:
- PENPOT_PUBLIC_URI=http://localhost:9001
depends_on:
- penpot-backend
penpot-backend:
image: penpotapp/backend:latest
environment:
- PENPOT_DATABASE_URI=postgresql://penpot:penpot@penpot-postgres/penpot
- PENPOT_REDIS_URI=redis://penpot-redis:6379
depends_on:
- penpot-postgres
- penpot-redis
penpot-postgres:
image: postgres:15-alpine
environment:
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot
volumes:
- penpot_postgres_data:/var/lib/postgresql/data
penpot-redis:
image: redis:7-alpine
volumes:
- penpot_redis_data:/data
volumes:
penpot_postgres_data:
penpot_redis_data:
起動コマンド:
docker compose up -d
ブラウザで `http://localhost:9001` にアクセスすれば、あなただけの完全プライベートなPenpot環境が立ち上がります。最高ですね！
—
4. 精度高い「Hello World」！最初のコンポーネントを作ってみよう
新しいツールに触れたら、まずは動かして感覚を掴むのがエンジニアの流儀です。Penpotで、モダンなWebコンポーネントの基本（ボタンとカード）をサクッと作ってみましょう。
Step 1: フレーム（アートボード）の作成
1. Penpotで新規ファイルを開きます。
2. 左上のツールバーから Frame ツール（ショートカット: `F`）を選択します。
3. キャンバス上でドラッグし、適当なサイズ（例: Desktop / 1440×900）のフレームを配置します。これが私たちのキャンバスです。
Step 2: Flexboxを使ったボタンコンポーネントの作成
ここがPenpotの真骨頂です。
1. 四角形ツール（`R`）で適当な長方形を描きます。
2. その長方形の中にテキストツール（`T`）で「Click Me」と入力します。
3. テキストと長方形を囲んで、右側のサイドバーにある 「Create Flex Layout」 を有効にします（CSS Flexboxが適用されます！）。
4. パディング（Padding）やギャップ（Gap）をサイドバーから直感的に数値で指定します。
- Padding-top/bottom: 12px
- Padding-left/right: 24px
- Alignment: 中央揃え（Center）
これで、中身の文字が増減しても綺麗に追従する、本物のCSS Flexboxの概念を持ったレスポンシブ・ボタンが完成しました。
Step 3: コンポーネント化（Component）
1. 今作ったボタンを選択します。
2. 右クリック、またはショートカット（`Ctrl + Alt + K` または `Cmd + Option + K`）で 「Create Component」 を実行します。
3. 左側のレイヤーパネルに紫色のアイコンでコンポーネントが登録されました。これを複製（インスタンス化）すれば、一括変更可能な再利用パーツの出来上がりです。
—
5. FigmaからPenpotへの移行：スムーズに進めるための心得
「移行したいけど、既存のFigmaアセットはどうなるの？」という不安があるはずです。現在のPenpotは、Figmaファイル（.fig）のインポート機能を着実に進化させています。
移行をスムーズに進めるための実践的なステップを伝授します。
1. まずは小さく始める（PoC）
いきなり全社移行する必要はありません。まずは新規のサイドプロジェクトや、社内のハッカソン、小さな機能改善のプロトタイピングからPenpotを取り入れてみてください。
2. SVG/デザイン資産の棚卸し
既存のアイコンやロゴなどのベクター素材は、SVGとしてエクスポートすればPenpotへ完璧に移行できます。
3. エンジニアを巻き込んだデザインシステム作り
Penpotの真価は、エンジニアとの共通言語（Flexbox/Grid）にあります。デザイナーだけでなく、フロントエンドエンジニアも一緒に「Penpot上でデザインシステム（ボタン、インプット、カード等）のトークンをどう定義するか」を話し合ってみてください。驚くほどスムーズに話が進むはずです。
—
まとめ：オープンな未来のデザインツールを手に入れよう
Penpotは、単なる「Figmaの無料代替品」ではありません。
「デザインをコードに、コードをデザインに近づける」という、開発・デザインプロセスの本質的なオープン化を実現するための強力なエコシステムです。
オープンソースの自由度、Web標準に準拠したクリーンな設計、そしてチームの垣根を越えるコラボレーション。これをマスターすれば、毎日の作業が劇的に楽になり、開発スピードも品質も一段上のステージに引き上げられます。
さあ、今すぐブラウザを開いて、あなただけのPenpot環境に飛び込んでみましょう。新しいデザインと開発のフロンティアが、あなたを待っています！