こんにちは！プロダクト開発の現場で、デザイナーとエンジニアのハンドオフ（引き継ぎ）の壁に頭を悩ませたことはありませんか？
「デザインの微調整がエンジニアに伝わっていない」
「コード側のコンポーネントとデザインのレイヤー構造がバラバラ」
そんな「デザインとコードの乖離」という永遠の課題を、オープンソースの力で美しく解決してくれる強力なタッグがあります。それが 「Penpot」 と 「Storybook」 です。
今回は、デザインツールであるPenpotと、フロントエンドのコンポーネント開発環境であるStorybookを連携させ、デザインシステムをコンポーネント単位で同期させる実践的なワークフローを解説します。これをマスターすれば、毎日の作業や仕様確認のストレスが劇的に軽くなりますよ。
—
なぜこの2つなのか？（ツールの本質を理解する）
まず、今回の主役である2つのツールの役割を整理しておきましょう。
1. Penpot（ペンポッド）
- 役割: 完全オープンソースのWebベース・デザイン/プロトタイピングツール。
- 本質: Figmaに似ていますが、大きな違いは「SVGベース」であり、レイアウトエンジンにCSS GridやFlexboxといったWebの標準技術をそのまま取り入れている点です。つまり、最初から「コードの概念」を持ったデザインが作れます。
2. Storybook（ストーリブック）
- 役割: UIコンポーネントをアプリ本体から切り離して孤立した環境で開発・ドキュメント化するツール。
- 本質: 開発者にとっての「コンポーネントのカタログ」。ここに本物のコード（React, Vue, Svelteなど）で書かれたUIが並びます。
この2つを繋ぐことで、「デザイン（Penpot）の変化が、そのままコードの仕様（Storybook）を正しく導く」という、理想的な双方向の同期に近づくことができます。
—
1. 開発環境の準備（インストールと基本セットアップ）
まずは土台作りから始めましょう。今回はすでに動いているモダンなフロントエンドプロジェクト（例：React + Vite）があると仮定し、そこにStorybookを導入しつつ、Penpotとの連携を見据えた環境を整えます。
Step 1: Storybookのセットアップ
ターミナルを開き、既存のプロジェクトのルートディレクトリで以下のコマンドを実行してください。
npx storybook@latest init
たったこれだけで、プロジェクトにStorybookが組み込まれます。自動で設定ファイル（`.storybook/main.js` など）が生成され、`npm run storybook` でローカルサーバーが立ち上がります。
Step 2: Penpotのプロジェクトの準備
Penpotはブラウザ（ [penpot.app](https://penpot.app/) またはセルフホスト環境）で動かします。
ここで重要なのは、「コンポーネント（Component）」の命名規則をエンジニアと完全に一致させることです。
- NG例: デザイン側で `Rectangle 42`、コード側で `Button`
- OK例: デザイン側で `Button/Primary`、コード側で ``
この「共通言語（命名規則）」の徹底こそが、連携の精度を爆発的に高める最大のコツです。
—
2. 精度を高める！HelloWorld的 連携ワークフロー
では実際に、Penpotで作ったボタンコンポーネントを、Storybook上のコードとリンクさせる最小限のステップ（HelloWorld）を体験してみましょう。
① Penpot側：トークンとコンポーネントの定義
Penpotの「デザインシステム」機能を使って、カラーパレットやタイポグラフィ、そして「Button」コンポーネントを作成します。
- ポイント: Penpotのレイアウトには、必ず Flexbox や Grid を使ってください。これにより、エンジニアがCSSを書くときの構造と完全に一致します。
② 連携の要：プラグインとAPIの活用
Penpotには強力な拡張機能（プラグイン）エコシステムがあります。また、オープンソースであるため、WebhooksやPenpot APIを利用してデザインデータの変更を検知することが可能です。
ここでは実務で最も手堅い、「デザイン変更を通知し、Storybook上のモックを更新する」スタンダードなフローを見てみましょう。
以下は、Penpotのデザイントークン（色や余白など）の変更をJSON形式でエクスポートし、それをフロントエンド側で自動的にCSS VariablesやTailwindのテーマに変換するスクリプトの例です。
// scripts/sync-penpot-tokens.js
// Penpotから書き出したデザイントークンをフロントエンド側に同期するスクリプトのイメージ
const fs = require(‘fs’);
const path = require(‘path’);
// Penpotから取得したJSONデータ（実際にはAPI経由やプラグイン経由で取得）
const penpotTokens = {
colors: {
primary: “#3B82F6”, // Penpotで定義されたプライマリーカラー
background: “#F8FAFC”
},
spacing: {
sm: “8px”,
md: “16px”
}
};
// CSS変数として出力するパス
const outputPath = path.resolve(__dirname, ‘../src/styles/penpot-tokens.css’);
const cssContent = `
/ ⚠️ このファイルはPenpotのデータを元に自動生成されています。手動で編集しないでください。 /
:root {
–color-primary: ${penpotTokens.colors.primary};
–color-bg: ${penpotTokens.colors.background};
–spacing-sm: ${penpotTokens.spacing.sm};
–spacing-md: ${penpotTokens.spacing.md};
}
`;
fs.writeFileSync(outputPath, cssContent);
console.log(‘✨ PenpotのデザイントークンをCSSに同期しました！’);
このスクリプトを `package.json` のスクリプトに登録しておきます。
“scripts”: {
“storybook”: “storybook dev -p 6006”,
“sync:tokens”: “node scripts/sync-penpot-tokens.js”
}
③ Storybook側での確認
同期されたトークン（CSS変数）を読み込んだ状態で、Storybookに `Button.stories.jsx` を作成します。
// src/components/Button.stories.jsx
import { Button } from ‘./Button’;
export default {
title: ‘Components/Button’,
component: Button,
tags: [‘autodocs’],
};
// Penpotのデザイン通りのプロパティを持つストーリー
export const Primary = {
args: {
variant: ‘primary’,
label: ‘Penpot Button’,
},
};
これで、Penpot側でボタンの色（Primary）を変更し、トークンを再同期（`npm run sync:tokens`）させれば、Storybook上のボタンの色も自動的に追従します！
—
現場で役立つ！さらなる効率化の知見
このベースができたら、さらに運用をスムーズにするための「プロの知見」をいくつか授けましょう。
1. デザインレビューは常にStorybookを画面共有する
デザイナーとの仕様確認の際、FigmaやPenpotの画面だけでなく、「実際のコードが動いているStorybook」をベースに話す癖をつけてください。「デザイン上では綺麗だけど、文字数が増えたらレイアウトが崩れる」といった実装上の問題が、その場でクリアになります。
2. オープンソースの強みを活かした自社拡張
PenpotもStorybookもオープンソースです。もし社内のワークフローをさらに自動化したい場合、PenpotのプラグインAPIを叩いて、「Penpot上でコンポーネントが更新されたら、GitHubのIssueやPRを自動作成する」といった夢のある連携も自前で構築可能です。
—
まとめ
今回は、PenpotとStorybookを連携させ、デザインシステムをコンポーネント単位で同期させる実践的なワークフローを解説しました。
- PenpotのWeb標準に忠実なレイアウト構造を活用する。
- 命名規則をデザインとコードで完全に統一する。
- トークンや変更をスクリプトで自動同期し、Storybookで常に最新のUI状態を保つ。
このサイクルが回り始めると、デザイナーとエンジニアの間の「言った・言わない」「古いデザインを参照していた」という無駄な摩擦が嘘のように消え去ります。
オープンソースの自由度の高さを最大限に活かして、あなたとチームの開発体験を最高のものにアップデートしてくださいね。それでは、次のプロダクト開発でお会いしましょう！