こんにちは！プロダクトデザインの現場を最前線で渡り歩いてきた先輩エンジニアの私です。
今日は、現在のデザインツール界隈で最も熱い議論の的となっているテーマについて、徹底的に深掘りしていこうと思う。
そう、「Figma vs Penpot」だ。
「え、デザインツールといえばFigma一択じゃないの？」
そう思ったそこのあなた。確かに現在の商業デザインのデファクトスタンダードはFigmaだ。しかし、オープンソースの猛威、データの主権、そしてコスト構造のパラダイムシフトが起きている今、Penpotという選択肢を無視することは、プロのエンジニアやデザイナーとして大きな機会損失になる可能性がある。
今回は、単なる機能比較に終わらず、「これからこの新しいツールに触れる」という君に向けて、Penpotのセットアップから、コンポーネント指向の真髄に触れる「Hello World」的な動作確認まで、魂を込めてガイドしよう。これを読めば、明日からのチームのワークフローが劇的に変わるはずだ。
—
1. なぜ今、Penpotなのか？（4つの視点による徹底比較）
まずは、FigmaとPenpotを「機能性」「コスト」「セキュリティ」「コミュニティ」の4つの軸でドライに、かつ愛を持って比較してみよう。
| 比較軸 | Figma（巨人の王者） | Penpot（新時代の挑戦者） |
| :— | :— | :— |
| 機能性 | 圧倒的なエコシステム。Auto LayoutやVariantsなど成熟した設計。 | CSS Grid / Flexboxをネイティブ採用。開発者のメンタルモデルに完全一致。 |
| コスト | チーム規模が大きくなると、シート課金が重い負担に。 | 完全に無料（オープンソース/Self-host可能）。ライセンス料の呪縛からの解放。 |
| セキュリティ | クラウド（SaaS）依存。企業の厳格なデータ主権ポリシーに抵触することも。 | オンプレミス（Docker）で完全自己管理が可能。金融・医療等の厳格な現場に最適。 |
| コミュニティ | 商業的・巨大・プラグイン豊富。 | オープンソース的で開発者とデザイナーの距離が異常に近い。 |
デザイナーとエンジニアの「共通言語」としてのPenpot
Figmaが優れているのは間違いない。しかし、Figmaの「Auto Layout」は、実際のWebフロントエンドの「CSS Flexbox」とは微妙に挙動が異なり、デザイナーの意図をコードに落とし込む際に翻訳のコストが生じていた。
一方、Penpotは最初からSVGとCSS（GridやFlexbox）をベースに設計されている。つまり、デザイナーがPenpot上でレイアウトを組むことは、実質的に「CSSを書いている」のと同じ意味を持つ。ここに、デザインシステム構築のパラダイムシフトがあるんだ。
—
2. インストールと環境構築：自分の手でサーバーを立ち上げよう
オープンソースの最大の魅力は、「自分のコントロール下で動かせる」ことだ。今回は、Dockerを使ってローカル環境（あるいは社内サーバー）にPenpotを爆速で立ち上げる手順を解説する。
プロトタイピングツールを自分でホストするなんて難しそう？ いや、Docker一発だから安心してほしい。
step 1: Docker Composeファイルの準備
適当なディレクトリ（例: `penpot-local`）を作成し、その中に `docker-compose.yml` を配置する。
docker-compose.yml
Penpotをローカル環境で動かすための設定ファイルです。
DockerとDocker Composeがインストールされた環境で実行してください。
version: ‘3.8’
services:
penpot-frontend:
image: penpotapp/frontend:latest
ports:
- “8080:80”
restart: always
depends_on:
- penpot-backend
- penpot-exporter
penpot-backend:
image: penpotapp/backend:latest
restart: always
environment:
- PENPOT_PUBLIC_URI=http://localhost:8080
- PENPOT_DATABASE_URI=postgresql://penpot:penpot@penpot-postgres/penpot
- PENPOT_REDIS_URI=redis://penpot-redis:6379
- PENPOT_SECRET_KEY=change-me-with-a-very-secure-random-string
depends_on:
- penpot-postgres
- penpot-redis
penpot-exporter:
image: penpotapp/exporter:latest
restart: always
environment:
- PENPOT_PUBLIC_URI=http://penpot-frontend
- PENPOT_REDIS_URI=redis://penpot-redis:6379
penpot-postgres:
image: postgres:15-alpine
restart: always
environment:
- POSTGRES_DB=penpot
- POSTGRES_USER=penpot
- POSTGRES_PASSWORD=penpot
volumes:
- penpot_postgres_data:/var/lib/postgresql/data
penpot-redis:
image: redis:7-alpine
restart: always
volumes:
penpot_postgres_data:
step 2: 起動コマンドの実行
ターミナルを開き、ファイルがある場所で以下のコマンドを叩くだけだ。
docker compose up -d
たったこれだけ。コンテナの起動が完了したら、ブラウザで `http://localhost:8080` にアクセスしてみてほしい。見慣れた、しかしどこか新しい洗練されたサインアップ画面が君を迎え入れてくれるはずだ。
—
3. 精度高い「Hello World」：最初のコンポーネントを作る
環境が整ったら、Penpotの思想に触れるための「Hello World」を作ってみよう。
ここでは、ただの四角形を配置するのではなく、「CSS Flexboxを意識したレスポンシブなボタンコンポーネント」を作成する。これがPenpotの真骨頂だ。
1. ワークスペースの作成
- Penpotにログインし、新しいチーム、そして新しいプロジェクトを作成する。
- 「New File」をクリックし、カンバスを開く。
2. アートボード（Frame）の配置
- ショートカット `F` を押して、適当なサイズ（例: Desktop / 1440×900）のフレームを切る。
3. ボタンの造形とFlexbox（Layout）の適用
1. ショートカット `R` で長方形を描く。これがボタンのベースになる。
2. その長方形の中に、テキストツール（`T`）で `Click Me` と入力する。
3. ここが重要！ 長方形とテキストを選択し、右サイドバーにある 「Layout」 セクションのグローバルな切り替えで 「Flex Layout」 を有効にする。
4. パディング（上下左右の余白）を `12px 24px` に設定し、中央揃え（Align Center）にする。
> 💡 先輩エンジニアからのアドバイス
> この瞬間、君が操作しているのは単なるグラフィックのグループ化ではない。本物のCSS Flexboxのルールそのものだ。親要素のサイズが変わっても、中のテキストは美しく中央に追従する。開発者に「これ、どういうレイアウトですか？」と聞かれる必要はもうない。ここに生成される仕様は、そのままCSSのコードになるのだから。
4. コンポーネント化（Component）
- 作成したボタンを選択し、ショートカット `Cmd + Alt + K` （Windowsは `Ctrl + Alt + K`）を押す。
- これで、このボタンは「コンポーネント」としてマスター登録された。
- 左サイドバーの「Assets」タブを覗いてみてほしい。君が作ったコンポーネントが綺麗に登録されているはずだ。これを複製（インスタンス化）して配置していけば、大規模なデザインシステムへの第一歩が完了する。
—
4. どのようなチーム・プロジェクトにPenpotを選ぶべきか？
さて、ここまでPenpotのセットアップと基本操作を見てきたが、最後に「どのような現場にこのツールを導入すべきか」を総括しよう。
🎯 Penpotを導入すべきチーム
1. 社内セキュリティ基準が厳しく、クラウド上のデザインデータ管理に制限がある企業
（金融、ヘルスケア、官公庁、厳格な受託開発など。オンプレミスで完全に閉じられた環境を作れるのは最強の武器になる）
2. デザイナーとフロントエンドエンジニアの距離を極限まで縮めたいチーム
（CSS Grid / Flexboxをそのままデザインツールに持ち込めるため、デザインレビューの会話が「マージンが〜」から「このコンポーネントの挙動は…」とコードベースにシフトする）
3. ツールコストを最適化し、スケーラブルに開発を行いたいスタートアップやオープンソースプロジェクト
⚠️ まだFigmaを選ぶべきチーム
1. 既存の膨大なアセットやコミュニティ製プラグイン（複雑なアニメーションやデータビジュアライゼーション等）に完全に依存しているチーム。
2. チームメンバー全員がFigmaの細かいショートカットやエコシステムに慣れきっており、移行コストが一時的にリターンを上回るフェーズのチーム。
—
おわりに：道具に縛られるな、本質をデザインせよ
デザインツールは、あくまでビジョンを具現化するための「筆」に過ぎない。しかし、その筆がオープンで、開発者の言語と完全に同期しているとしたら？
Penpotは、単なる「Figmaの無料代替品」ではない。「デザインとコードの壁を溶かす」という、エンジニアリングとデザインの未来を体現した素晴らしいプロダクトだ。
ぜひ今日の夜、Dockerを使って君のローカル環境にPenpotを立ち上げ、その滑らかな挙動とCSSネイティブな心地よさに触れてみてほしい。「これをマスターすれば、毎日の作業が劇的に楽になる」——その感覚を、きっと実感できるはずだ。
それでは、良きプロダクト開発ライフを！