こんにちは！プロダクトデザインとフロントエンドの境界線を溶かし、チームの生産性を極限まで引き上げることに情熱を燃やしている先輩エンジニアです。
今日は、オープンソースの本格派デザインツール「Penpot」と、モダンWeb開発のデファクトスタンダードである「Tailwind CSS」を組み合わせた、「デザインシステムのユーティリティクラス直マッピング術」についてお話しします。
「デザインと実装のズレに毎回イライラする」「エンジニアにデザインの意図が伝わらない」「デザインシステムの同期に無駄な時間をかけている」——そんな悩みを抱えていませんか？
これをマスターすれば、デザイナーのキャンバスとエンジニアのコードベースが完全に同期し、毎日の作業が劇的に楽になりますよ。さあ、一緒にその扉を開けましょう！
—
1. なぜPenpotとTailwind CSSなのか？（デザイン変数の圧倒的な親和性）
そもそも、なぜこの2つが「最強のコンビ」と呼ばれるのでしょうか。その秘密は、データ構造の思想の近さにあります。
Penpotの「デザイン変数（Design Tokens）」の真価
Penpotは、Figmaなどのクローズドなツールとは異なり、完全なオープンソース（SVGやCSSの標準規格をベース）として作られています。Penpotの「デザイン変数（Color、Typography、Spacingなど）」は、そのままCSS変数の概念と1対1で結びつくように設計されています。
Tailwind CSSのユーティリティファースト
一方、Tailwind CSSは「再利用可能なコンポーネントクラス」を作るのではなく、「最小限のCSSプロパティ（ユーティリティ）」を組み合わせてUIを構築するフレームワークです。
この2つを組み合わせるとどうなるか？
「Penpotで定義したデザイン変数の名前＝Tailwind CSSのクラス名（または設定値）」という図式が成り立ちます。これにより、デザインの仕様書という「無駄な翻訳作業」が完全に消滅します。
—
2. 基礎セットアップ：PenpotとTailwindの共通言語を作る
それでは、実際に手を動かして環境を整えていきましょう。ここでは、初心者の方でも迷わないように、最もクリーンでスケーラブルなセットアップ手順を解説します。
ステップ1：Penpotでデザイン変数を定義する
まずはPenpotを開き、プロジェクト内にデザイン変数（Design Tokens）を設定します。ここでのポイントは、Tailwind CSSのデフォルト命名規則に寄せることです。
- カラーパレットの例:
- `primary-500` （ブランドカラーのメイン）
- `neutral-900` （テキスト用の濃いグレー）
- `surface-50` （背景用の薄いグレー）
- スペーシング（余白）の例:
- `space-1` (4px)
- `space-2` (8px)
- `space-4` (16px)
ステップ2：Tailwind CSSの設定ファイル（`tailwind.config.js`）へマッピング
Penpotで定義したトークンを、そのままエンジニア側のTailwind設定に落とし込みます。これが「共通言語」の土台となります。
// tailwind.config.js
module.exports = {
content: [
“./index.html”,
“./src//.{vue,js,ts,jsx,tsx}”,
],
theme: {
extend: {
// Penpotのデザイン変数をそのままカラーとして定義
colors: {
primary: {
500: ‘#3b82f6’, // Penpotのprimary-500と一致させる
},
neutral: {
900: ‘#111827’, // Penpotのneutral-900と一致させる
},
surface: {
50: ‘#f9fafb’, // Penpotのsurface-50と一致させる
},
},
// スペーシングもPenpotのグリッドシステムと完全同期
spacing: {
‘1’: ‘4px’,
‘2’: ‘8px’,
‘4’: ’16px’,
},
},
},
plugins: [],
}
—
3. 実践！HelloWorld的コンポーネントの構築と動作確認
理論が分かったところで、最小限の「HelloWorld」的なカードコンポーネントを作り、デザインからコードへの変換プロセスを体感してみましょう。
Penpotでの作業
1. フレームの作成: 幅 `320px`、高さ `auto` のカードコンポーネントを作成します。
2. スタイリング:
- 背景色に `surface-50` を適用。
- パディング（内側余白）に `space-4` (16px) を適用。
- テキストの色に `neutral-900` を適用。
コード（HTML / JSX）での表現
Penpotのインスペクターパネル（右側のプロパティ表示）を見ながら、エンジニアは迷うことなく以下のようにコードを書きます。
Hello, Penpot!
Tailwind CSSとの組み合わせで、デザインとコードの境界線が消えていきます。
【ここがポイント！】
Penpotで見た見た目（`surface-50` の背景、`p-4` の余白、`neutral-900` の文字色）が、Tailwindのクラス名と1対1で完璧に一致しているため、「あれ、この余白って何pxだっけ？」とデザイナーに確認する手間がゼロになります。
—
4. チームの生産性を爆発させる命名規則と運用ルール
このワークフローを現場に定着させ、実装スピードを爆発的に上げるための「黄金ルール」を3つ伝授します。
1. デザイントークンの名前を絶対に勝手に変えない
デザイナーが勝手に `my-favorite-blue` などと命名せず、必ず `primary-500` のようなセマンティック（意味的）な命名か、Tailwindのスケールに準拠した命名を使用してください。
2. コンポーネントの構造を揃える
Penpotの「コンポーネント（Component）」機能と、Tailwindを使うフロントエンドのコンポーネント（ReactのJSXやVueのSFCなど）の階層を一致させます。デザインのレイヤー構造がそのままコードのツリー構造になります。
3. 定期的なトークン同期のミーティング（または自動化）
小規模なプロジェクトであれば、デザイン変数の変更があった際にSlack等で共有するだけでも十分機能します。慣れてきたら、PenpotのAPIを活用して `tailwind.config.js` を自動生成するスクリプトを組むのもエンジニアリングのロマンですね！
—
まとめ：デザインとコードをシームレスに繋ぐ楽しさをあなたに
今回は、PenpotとTailwind CSSを組み合わせてデザインシステムのユーティリティクラスを直マッピングする実践術をご紹介しました。
- Penpotのオープンでクリーンなデザイン変数管理
- Tailwind CSSの直感的なユーティリティファーストの思想
この2つを掛け合わせることで、デザインと実装の間に存在していた「翻訳の壁」を取り払うことができます。最初は小さなコンポーネントからで構いません。ぜひ次のプロジェクトで試してみてください。
「あれ、今日の開発、めちゃくちゃスムーズに進むぞ……？」という感動を、ぜひあなたのチームでも味わってみてくださいね。それでは、また次回の技術でお会いしましょう！