こんにちは！プロダクトデザイナーの先輩として、今日は君に「Penpot」を使ったチーム開発の極意を伝授しよう。
「Figmaは知っているけれど、Penpotはまだ触ったことがない」
「オープンソースのプロトタイピングツールって、実際のチーム開発でどこまで使えるの？」
そんな疑問を持っているなら、安心してほしい。これをマスターすれば、デザイナーとエンジニアの壁が消え去り、毎日のUI構築・変更作業が劇的に楽になる。今日は、複数メンバーでデザインシステムを構築・運用するためのコンポーネント設計とライブラリ管理のベストプラクティスを、基礎から徹底的に解説していくよ。
—
1. Penpotとは何か？（ツールの本質を知る）
Penpotは、世界初のオープンソース（OSS）によるデザイン・プロトタイピングツールだ。
最大の特徴は、SVGをネイティブフォーマットとして採用し、CSSのFlexboxやGridといったレイアウト概念をそのままデザインツール上に持ち込んでいる点にある。
Figmaが「デザイナーの共通言語」だとすれば、Penpotは「デザイナーとエンジニアを繋ぐ共通言語」だ。コードの概念（コンポーネント、プロパティ、レイアウト）がそのままUIに反映されているため、チーム開発において「作ったデザインが実装で再現できない」という悲劇を根本から防いでくれる。
—
2. 3分で完了！Penpotのセットアップと最初のプロジェクト作成
まずは触ってみよう。Penpotを始めるには、大きく分けて2つの方法がある。
1. Penpot Cloud（公式SaaS）: ブラウザですぐに使い始められる（個人利用やテストならこれ一択）。
2. Self-hosted（Docker環境）: セキュリティ要件が厳しいチーム向け。`docker-compose up` 一発で社内サーバーに立てられる。
最初のプロジェクト構築（Hello World的アプローチ）
Penpotにおける「Hello World」とは、「CSSの概念を正しく理解した最初の再利用可能なコンポーネント（ボタン）を作る」ことだ。
1. ワークスペースの作成: ダッシュボードから「Create Team」を行い、チーム名（例: `Acme Product Team`）を決定。
2. 新規ファイルの作成: チーム内に新しいファイル（例: `Design System v1`）を作成する。
3. アートボード（Frame）の配置: ショートカット `F` で画面を作成する。
—
3. 【核心】コンポーネント設計とバリアントの極意
ここからが本題だ。チーム開発で最も崩壊しやすいのが「野良コンポーネントの乱立」である。これを防ぐためのルールを構築しよう。
命名規則の黄金律（Atomic Designの適用）
Penpotのライブラリパネルで綺麗に整理整頓されるよう、コンポーネントの命名にはスラッシュ（ `/` ）を用いた階層構造を徹底する。
- `atom/button/primary`
- `atom/button/secondary`
- `molecule/card/user-profile`
- `organism/navigation/header`
これだけで、ライブラリを開いたときに迷子になるメンバーがゼロになる。
バリアント（Variants）を使いこなせ
ボタン一つをとっても、「通常」「ホバー」「押下」「無効」などの状態（State）がある。これをバラバラに作ってはいけない。Penpotでは、プロパティとバリアントを活用してコンポーネントをカプセル化する。
【実践：スマートなボタンの作り方】
1. ベースとなるボタンのオートレイアウト（Flexbox）コンポーネントを作る。
2. それをメインコンポーネント（Component）化する。
3. プロパティ（Property）パネルから、`State`（値: `Default`, `Hover`, `Disabled`）や `Size`（値: `Sm`, `Md`, `Lg`）といったバリアント軸を追加する。
これで、開発者がサイドバーからプルダウンを選ぶだけで、あらゆる状態のボタンを安全に呼び出せるようになる。
—
4. チーム間アセット共有のコツ（ライブラリ管理）
作ったコンポーネント資産は、チーム全体（あるいは複数チーム）で共有してこそ意味がある。Penpotの「Shared Libraries」機能の真価を発揮させよう。
1. 「デザインシステム用ファイル」を独立させる
プロダクトのファイルとは別に、`[Core] Design System` という専用のファイルをチームのルートディレクトリに一つだけ作成する。ここにトークン（カラー、タイポグラフィ）とアトム・モジュールを閉じ込める。
2. ライブラリの公開（Publish）と同期
作成したコンポーネントは、右上のライブラリメニューから「Publish」を行うことで、同じチーム内の他のファイルからインポート可能になる。
[Core] Design System (親ファイル: カラー, フォント, ボタン等)
└─ 🔓 Publish!
└─ [App] Dashboard Feature (子ファイル: 実際に画面を作る場所)
└─ 📥 Import (常に最新のコンポーネントが同期される)
もしボタンの角丸やパディングを変更したくなったら、親ファイルを修正して再パブリックするだけ。子ファイル側には「アップデートがあります」と通知が飛ぶため、デザインシステムの仕様変更がチーム全体に一瞬で波及する。
—
5. 現場で役立つ！デザイナー＆エンジニア連携のチェックリスト
最後に、明日からチームで実践できる「Penpot運用チェックリスト」を置いておくね。
- [ ] カラーとタイポグラフィは必ず「Style」として登録しているか？（直値の色やフォントサイズを使わない）
- [ ] 全てのフレームとコンポーネントで「Flexbox（CSS Layout）」を意識したレイアウト組みをしているか？（リサイズ時に破綻しないか確認する）
- [ ] コンポーネントのルート要素に適切なパディングと制約（Constraints）が設定されているか？
- [ ] エンジニアが「Inspect（開発モード）」でCSSコード（flex-direction, gap等）を迷わず読み取れる構造になっているか？
—
おわりに
Penpotを使ったコンポーネント設計とライブラリ管理は、最初は少しルール作りが必要に感じるかもしれない。けれど、一度この基盤（デザインシステム）をチームで共有してしまえば、「あの画面のデザイン、どこが最新だっけ？」という無駄なコミュニケーションは消え去り、プロダクトの品質と開発スピードは劇的に向上する。
オープンソースの未来を切り拓くこのツール、ぜひ君のチームでも導入してみてほしい。毎日の作業が、きっと驚くほど軽やかになるはずだよ。