【実務・中級編】Penpotの「CSS Grid」と「Flexbox」機能を徹底活用！エンジニアに伝わりやすいデザインの作り方 – UI/UX・デザインツール活用バイブル

デザインとコードの断絶を終わらせる：PenpotのCSS Grid & Flexboxで実現する「エンジニアに愛される」デザインシステム構築術

プロダクト開発の現場で、こんな不毛なやり取りに消耗していないだろうか。

> 「デザイナーさん、このマージン、ビューポートが変わったときにどう可変するんですか？」
> 「あ、それはフィーリングでいい感じに……（デザインデータには絶対値のピクセル指定）」
> 「いや、実装できないんでCSS Gridの挙動を定義してください」

この「デザインとコードの言語の壁」は、多くのチームでベロシティを殺し続けている。Figmaなどの静的なオートレイアウトも進化してはいるが、あれはあくまで「デザインツール側の独自概念」の模倣に過ぎない。

しかし、Penpotの登場によって状況は一変した。
Penpotは、Web標準のCSS GridとFlexboxを、そのままキャンバスのレイアウトエンジンとして実装している。つまり、デザイナーがレイアウトを組む行為そのものが、そのままCSSのコード設計と直結しているのだ。

今回は、テックリードの視点から、PenpotのCSS GridとFlexboxを極限まで使い倒し、エンジニアとのハンドオフを「ゼロ・フリクション」にするための実践的知見を余すところなく共有する。

—

1. なぜ「CSS Grid / Flexbox」をデザインツールで使うべきなのか？

従来のプロトタイピングツールでは、レイアウトは「絶対座標」や「独自の制約ルール」で管理されていた。これらは実装時にエンジニアの頭の中でCSSプロパティ（`display: flex;` や `grid-template-columns` 等）へと脳内変換される必要があり、ここに必ず「解釈のズレ」が生じる。

Penpotのレイアウトエンジンは、DOMの挙動と完全に一致している。

Flexbox: 1次元のフロー（主軸と交差軸、wrap、flex-grow/shrink）をそのまま視覚的に操作できる。
CSS Grid: 2次元のグリッドエリア、トラックサイズ（fr, px, auto）、minmaxの概念をそのままキャンバスに落とし込める。

デザイナーがPenpot上で正しく構造化されたコンポーネントを作っていれば、エンジニアはインスペクターパネルからそのまま本番用のCSSのメンタルモデルを抽出し、コピペに近い感覚で実装に落とし込める。この強烈なメリットをチームの共通言語にする。

—

2. 開発スピードを劇的に高めるキーボードショートカット

プロトタイピングの速度は、思考を止めずにレイアウトを組み替えるスピードに比例する。PenpotでCSS GridとFlexboxを自在に操るための、指に叩き込むべきショートカット群だ。

—

3. チーム開発の生産性を底上げする「神プラグイン」＆拡張

Penpotはオープンソースであり、コミュニティによるエコシステムも強力に成長している。特にエンジニアとの連携において、以下の拡張は導入必須だ。

1. Token Manager (デザイントークン同期)

CSS変数（Custom Properties）とPenpotのカラー・タイポグラフィ・スペーシングを双方向で同期するプラグイン。

実務での活用法: デザインシステム側のスペーシング（`spacing-xs` から `spacing-xxl`）を、開発側のデザインシステム（Tailwind CSSやVanilla Extract等）のトークン名と完全に一致させることで、インスペクター上の数値がそのままコードの変数名になる環境を作る。

2. Accessibility Inspector

GridやFlexで組まれたレイアウトのDOMツリーの順序（Tab順や読み上げ順）が論理的かチェックする。デザインの見た目だけでなく、セマンティックなHTML構造とビジュアルの整合性を担保する。

—

4. チームで共有すべき「レイアウト設計ルール」

どれだけツールが強力でも、メンバーが好き勝手にレイアウトを組んでいては意味がない。チーム全体で共通化すべき3つの鉄則を定義する。

1. 「絶対配置（Absolute）」の原則禁止

画面全体のレイアウトやカードコンポーネント内部で、`position: absolute` 相当の絶対配置を使うのは、レスポンシブ崩壊の元凶。例外はフローティングバッジやツールチップのみとする。すべてをFlexboxかGridの階層構造で組み上げる。

2. ネストの深さは「最大3階層」まで

FlexboxやGridの過剰な入れ子は、そのまま複雑なHTML構造（`
` 地獄）に直結する。コンポーネントの粒度を適切に切り、親コンポーネント（Grid）→ 子コンポーネント（Flex）というクリーンな構造を維持する。

3. スペーシングは「8ptグリッドシステム」を厳守

ギャップやパディングの値は、必ず8の倍数（または4の倍数）に固定する。Penpotのグリッド設定でスナップ機能をこの数値に固定することで、偶発的な「pxのズレ」を根絶する。

—

5. 実用的な設定ファイル（デザインシステム定義）ベストプラクティス

Penpotで構築したデザインシステムの哲学を、コード側（特にフロントエンドのビルド環境やデザイントークン）に正確にブリッジするための、実用的な設定ファイルの構成例を公開する。

以下のJSONは、Penpotのレイアウト規則と完全に同期させるための、デザイントークンおよびCSS Grid/Flexboxのベース定義のベストプラクティスだ。

`design-tokens.json` (デザイントークン & スペーシング定義)

このファイルを基点に、Style Dictionaryなどのツールを使ってCSS VariablesやTailwind configへ自動変換する。

{
“version”: “1.0.0”,
“metadata”: {
“description”: “Penpot CSS Grid & Flexbox architecture synchronization tokens”,
“author”: “Tech Lead”
},
“spacing”: {
“2xs”: { “value”: “4px”, “comment”: “微調整用・インライン要素の間隔” },
“xs”: { “value”: “8px”, “comment”: “標準的な最小ギャップ (Grid/Flex)” },
“sm”: { “value”: “16px”, “comment”: “カード内のパディング基準” },
“md”: { “value”: “24px”, “comment”: “セクション内の要素間隔” },
“lg”: { “value”: “32px”, “comment”: “コンポーネント間のマージン” },
“xl”: { “value”: “48px”, “comment”: “大セクションのパディング” },
“2xl”: { “value”: “64px”, “comment”: “ページレイアウトのセクション間隔” }
},
“layout”: {
“grid”: {
“columns”: {
“mobile”: 4,
“tablet”: 8,
“desktop”: 12
},
“maxContentWidth”: {
“value”: “1280px”,
“comment”: “メインコンテナの最大幅 (CSS Grid max-width)”
}
},
“flex”: {
“directions”: [“row”, “column”],
“wrap”: [“nowrap”, “wrap”]
}
}
}

`tailwind.config.js` へのブリッジ例

Penpot上で定義されたGrid/Flexのルールを、プロジェクトのTailwind CSS設定に直結させることで、デザイナーの意図が即座にユーティリティクラスとしてコーディングされる。

/ @type {import(‘tailwindcss’).Config} /
const tokens = require(‘./design-tokens.json’);

// tokens.json から動的にスペーシングを生成し、Penpotのデザインと完全同期させる
const spacingToTailwind = (spacingObj) => {
return Object.fromEntries(
Object.entries(spacingObj).map(([key, data]) => [key, data.value])
);
};

module.exports = {
content: [“./src//.{js,ts,jsx,tsx,html}”],
theme: {
extend: {
spacing: spacingToTailwind(tokens.spacing),
// PenpotのCSS Grid構造をそのまま再現するためのカスタムグリッド
gridTemplateColumns: {
‘app-layout’: ‘240px minmax(0, 1fr)’, // サイドバー + メインコンテンツ
‘dashboard-card’: ‘repeat(12, minmax(0, 1fr))’,
},
},
},
plugins: [],
};

—

結び：ツールを変えるな、パラダイムを変えろ

Penpotの真の価値は、「無料のFigma代替」ということではない。「デザインとコードのメンタルモデルを完全に一致させること」にある。

デザイナーがCSS GridやFlexboxの挙動を理解し、Penpot上でレイアウトを組む。エンジニアはその構造を受け取り、迷うことなくコードに落とし込む。このシームレスな体験を手に入れたとき、チームの開発スピードは文字通り次元が変わる。

今日からあなたのチームでも、絶対座標の呪縛を捨て、Web標準のレイアウトをキャンバスに描こう。プロダクトの品質とエンジニアの笑顔が、確実に増えるはずだ。