【チーム開発の現場から】Penpotでスケールするデザインシステム：コンポーネントとライブラリ管理の極意
テックリードやシニアUI/UXエンジニアとして、多くのプロダクトを立ち上げてきた私たちが直面する最大のボトルネックは、コードベースの複雑性ではない。「デザインと実装の乖離」、そして「マルチチーム体制におけるUI資産の散逸」だ。
Figmaが長らく市場を独占してきたが、オープンソースであり、コード（SVG/CSS）との親和性が極めて高い「Penpot」の台頭により、デザインツールの選択肢は新しいフェーズに入った。SVGネイティブ、CSS Grid/Flexbox概念の標準実装など、Penpotはエンジニアにとって「最も脳内モデルを直結させやすいツール」である。
本記事では、複数チームが関与する大規模開発において、Penpotのコンポーネントとライブラリ管理を極限まで最適化し、開発スピードを爆発的に高めるベストプラクティスを叩き込む。
—
1. チーム開発を崩壊させないコンポーネント設計ルール
デザインシステムが破綻する原因の80%は、「命名規則の欠如」と「アトミックデザインの誤用」にある。Penpotでコンポーネントを構築する際、以下の3層構造（Atomic Designの変形）をチームの絶対的共通認識とする。
1. Primitives（原子）: ボタン、インプット、アイコンなど、これ以上分解できない最小単位。
2. Molecules（分子）: Primitivesを組み合わせた検索バー、カードヘッダーなどの機能単位。
3. Organisms & Templates（生体・テンプレート）: 実際の画面を構成するセクション単位。
命名規則：スラッシュ（`/`）を活用したネームスペース戦略
Penpotのライブラリパネルでアセットがカオス化するのを防ぐため、コンポーネント名は以下の形式で統一する。
> `[カテゴリ] / [状態・バリエーション] / [コンポーネント名]`
- Bad: `Button Primary`, `red-button`, `input_active`
- Good: `Component / Button / Primary / Default`, `Component / Input / Text / Focus`
この命名規則を守ることで、Penpotのレイヤーパネルおよびインスタンス選択モーダルで自動的にグループ化され、検索性が劇的に向上する。
—
2. バリアントとオーバーライドの境界線を見極める
Penpotのバリアント（Variants）機能は強力だが、何でもかんでもバリアント化すると、コンポーネントのメンテナンスコストが跳ね上がる。
バリアント化すべきもの（構造的な違い）
- ボタンのサイズ（Small, Medium, Large）
- スタイルのバリエーション（Primary, Secondary, Ghost, Danger）
- アイコンの有無や位置（Left Icon, Right Icon, Icon Only）
オーバーライドに任せるべきもの（コンテンツ・テキスト・局所的な見た目の違い）
- ボタンやラベルのテキスト内容
- プレースホルダーの有無
- 親コンポーネントに配置されるインスタンスの差し替え
鉄則: 「レイアウトの構造（Auto-layoutの方向やパディング）」が変わる場合はバリアントを分け、「中身のデータ」が変わるだけならインスタンスのオーバーライドを使用する。これを誤ると、デザインシステム改修時に無限のデバッグ地獄が待っている。
—
3. アセット共有のコツ：チーム間連携とパーミッション設計
大規模開発では、誰でも彼でもライブラリを編集できてはならない。「デザインシステムのメンテナンスチーム」と「それを消費するプロダクトチーム」を明確に分離する必要がある。
1. Core Library Workspace（中央集権）:
UI/UXデザイナーとデザインシステムエンジニアのみが編集権限を持つ。ここでPrimitivesとMoleculesを管理し、定期的にマイナー/メジャーバージョンをリリースする。
2. Product Workspaces（分散）:
各プロダクトチームがCore Libraryを「Shared Libraries」としてインポートし、Organismsやテンプレートを組み立てる。
プロダクトチーム側でコンポーネントの修正が必要になった場合は、勝手にCoreコンポーネントを分解するのではなく、Coreチームへプルリクエスト（のようなプロセス）を投げる文化をコードレビュー同様に確立することが成功の鍵だ。
—
4. 生産性を極限まで高める：開発スピードを加速するテクニック
ここからは、日々のプロトタイピングとデザインレビューのスピードを2倍にするプロの隠し技を公開する。
隠れたキーボードショートカット（Penpot Power Shortcuts）
マウス操作を排除し、キーボードだけで完結させることが高速化の極意だ。
- `Shift + A`: 選択中の要素にオートレイアウト（Flexbox）を適用 / 解除
- `Alt + 矢印キー`: 親要素のコンテキストを維持したまま要素を微調整（パディング・マージンの調整に最適）
- `Ctrl / Cmd + G`: グループ化（エンジニア視点では `
` のラッパー生成に近い感覚で使う）
- `Alt + ホバー`: 開発者モード（Inspect）を瞬時に呼び出し、CSSプロパティをコピー
絶対入れるべき神プラグイン
Penpotのプラグインエコシステムは日々進化している。チームで強制インストールすべき必須プラグインを厳選した。
1. Token Manager:
デザイントークン（カラー、タイポグラフィ、スペーシング）をJSON形式でインポート/エクスポートし、のちほど紹介する設定ファイルと同期させる。
2. Accessibility (A11y) Checker:
コントラスト比（WCAG 2.1基準）をリアルタイムで検証。アクセシビリティの負債をデザイン段階でゼロにする。
3. Lorem Ipsum / Data Faker:
モックデータ（ダミーテキスト、実名、アバター画像）をワンクリックで流し込み、エッジケース（文字あふれなど）を素早く検証。—
5. 【実践】デザインシステムをコードと同期させる設定ファイル構成例
Penpotの真骨頂は、デザインデータをコードベース（Tailwind CSSやCSS Variables）とシームレスに連携できる点にある。ここでは、CI/CDパイプラインやビルドプロセスで利用できる、実用的なデザイントークンのJSON/YAML構成例を示す。
以下の設定ファイルは、Token Managerなどを経由してPenpotとリポジトリ間で同期させるためのベストプラクティス構造だ。
`design-tokens.json`（デザイントークンのマスター定義）
{
“$schema”: “https://json.schemastore.org/design-tokens.json”,
“version”: “1.0.0”,
“description”: “Penpotとフロントエンドコード（Tailwind/CSS Modules）のシングル・ソース・オブ・トゥルース”,“color”: {
“brand”: {
“primary”: { “value”: “#0D9488”, “type”: “color”, “comment”: “メインアクション、主要なCTAボタン用” },
“hover”: { “value”: “#0F766E”, “type”: “color”, “comment”: “プライマリボタンのホバー状態” }
},
“surface”: {
“default”: { “value”: “#FFFFFF”, “type”: “color”, “comment”: “ベースの背景色” },
“subtle”: { “value”: “#F3F4F6”, “type”: “color”, “comment”: “カードやセカンダリ背景” }
},
“text”: {
“main”: { “value”: “#1F2937”, “type”: “color”, “comment”: “本文・主要な見出し用” },
“muted”: { “value”: “#4B5563”, “type”: “color”, “comment”: “サブテキスト・補助情報” }
}
},“spacing”: {
“scale-1”: { “value”: “4px”, “type”: “dimension”, “comment”: “最小のスペーシング単位 (0.25rem)” },
“scale-2”: { “value”: “8px”, “type”: “dimension”, “comment”: “ベースの余白 (0.5rem)” },
“scale-4”: { “value”: “16px”, “type”: “dimension”, “comment”: “標準的なパディング・ギャップ (1rem)” },
“scale-8”: { “value”: “32px”, “type”: “dimension”, “comment”: “セクション間の大きなマージン (2rem)” }
},“typography”: {
“font-family”: {
“value”: “Inter, ‘Hiragino Sans’, sans-serif”,
“type”: “fontFamily”,
“comment”: “システム全体の標準フォントスタック”
},
“size”: {
“sm”: { “value”: “14px”, “type”: “fontSize” },
“base”: { “value”: “16px”, “type”: “fontSize” },
“lg”: { “value”: “18px”, “type”: “fontSize” },
“xl”: { “value”: “24px”, “type”: “fontSize” }
},
“weight”: {
“regular”: { “value”: 400, “type”: “fontWeight” },
“medium”: { “value”: 500, “type”: “fontWeight” },
“bold”: { “value”: 700, “type”: “fontWeight” }
}
}
}チーム開発における同期ルール運用フロー
1. Design Update:
デザインチームがPenpot上でトークン（カラーやスペーシング）を更新、またはプラグイン経由で `design-tokens.json` をアップデートし、リポジトリへPull Requestを作成する。
2. Review:
テックリードまたはフロントエンドエンジニアがPRをレビュー。CSS変数やTailwindのコンフィグ（`tailwind.config.js`）への影響範囲を確認する。
3. Build / Codegen:
CI上でトランスパイラ（Style Dictionary等）が走り、各プラットフォーム向け（Web用CSS変数、iOS/Android用ネイティブ変数）に自動生成される。—
結び：ツールに縛られず、システムをハックせよ
Penpotは単なる「無料のFigma代替」ではない。オープンソースであり、開発者ファーストの思想で作られた、次世代のエンジニアリング・デザインプラットフォームだ。
コンポーネントの命名規則を統一し、適切なバリアントとオーバーライドを設計し、デザインとコードをJSONなどのトークンで完全に同期させる。この基盤さえ構築できれば、デザイン修正のたびに発生する「これ、どのコードを直せばいいんだっけ？」という不毛なコミュニケーションコストは劇的に消滅する。
さあ、今すぐチームのPenpotワークスペースを開き、命名規則の整理とトークンの共通化から始めよう。君たちのプロダクトのスケールスピードは、ここから加速する。