こんにちは！プロダクトデザイナー、そしてフロントエンドエンジニアのあなたへ。
デザインツールを触っていて、こんなモヤモヤを感じたことはありませんか？
「なんでデザインツール独自のレイアウト概念を覚え直さなきゃいけないんだ……。これ、そのままCSSのFlexboxやGridにしてエンジニアに渡せたら、どれだけ楽か」
そのフラストレーション、今日で完全に終わらせましょう。
今回取り上げるのは、オープンソースの次世代デザイン＆プロトタイピングツール「Penpot（ペンポト）」です。
Penpotの最大の武器は、Web標準のCSS（FlexboxとCSS Grid）をそのままデザインのキャンバスに直輸入している点にあります。つまり、デザイナーがレイアウトを組む行為そのものが、エンジニアが書くコードの構造と完全に一致するのです。
これをマスターすれば、デザインの意図が伝わらない「伝言ゲーム」は消え去り、エンジニアとのハンドオフ（引き継ぎ）が驚くほどスムーズになります。さあ、一緒にその極意を見ていきましょう！
—
1. なぜ「PenpotのCSSレイアウト」がエンジニアを救うのか？
従来の主要なデザインツールでは、オートレイアウトのような「独自概念」を学ぶ必要がありました。それらは非常に便利ですが、いざコードに落とし込むとき、エンジニアは「これをどうCSSの`display: flex;`や`grid`に脳内変換すべきか」を考えるワンクッション挟む必要がありました。
しかし、Penpotは違います。
Penpotのレイアウトエンジンは、本物のCSSそのもので動いています。
- デザイナーがやること： FlexboxやCSS Gridのプロパティを直感的にポチポチと設定する。
- エンジニアが受け取るもの： そのままプロダクションで使える正確なCSSの数値と構造。
この「共通言語の獲得」は、チームの生産性を劇的に跳ね上げます。これを使いこなせば、毎日のレイアウト修正地獄から解放されますよ。
—
2. 環境構築：Penpotを今すぐ始める
Penpotは完全オープンソースであり、ブラウザさえあれば今すぐ無料で始められます。ローカル環境でサクッと動かすもよし、公式のSaaS版を使うもよし、モダンなエンジニアにとって最高に心地よい環境が整っています。
方法A：公式SaaS（最も手軽）
1. [Penpotの公式サイト](https://penpot.app/)にアクセス。
2. アカウントを作成（GitHubやGoogleアカウントで一瞬で終わります）。
3. ブラウザ上でそのままワークスペースへ！
方法B：Dockerでローカル立ち上げ（開発者向け）
エンジニアならDocker Composeで手元に立てるのも一興です。`docker-compose.yml`を用意して、自分のマシン上で完全にコントロールできます。
開発環境やプライベートサーバーでPenpotを動かすための設定
version: “3.8”
services:
penpot-frontend:
image: penpotapp/frontend:latest
ports:
- “8080:8080”
environment:
- PENPOT_BACKEND_URI=http://localhost:6060
penpot-backend:
image: penpotapp/backend:latest
ports:
- “6060:6060”
# データベースやRedisの接続設定がここに続きます…
（※サクッと試すなら、まずは公式SaaS版で十分です！）
—
3. 「Hello World」：Flexboxでカードコンポーネントを作ってみよう
それでは、Penpotのレイアウト機能の基本を、「Hello World」的に体感してみましょう。定番の「プロフィールカード」を作ります。
ステップ1：フレームを作る
適当なサイズ（例: 300x400px）のボード（フレーム）を作成し、名前を `ProfileCard` とします。これがCSSにおけるコンテナ（親要素）になります。
ステップ2：Flexboxを適用する
1. 作成したフレームを選択します。
2. 右サイドバーにあるレイアウトセクションで、「Flex layout」を有効にします。
- これで、親要素に `display: flex;` が適用された状態になります。
3. 方向（Direction）を 「Column（縦方向）」 に設定し、子要素同士の隙間（Gap）を `16px` に指定します。
ステップ3：子要素を配置して振る舞いを確認する
中にアバター画像、名前（見出し）、自己紹介文（テキスト）を配置してみましょう。
驚くべきことに、子要素のサイズ変更や並び替えが、完全にCSSのFlexboxのルールに従って流し込まれます。
/ Penpot上でデザインを組むと、裏側でこういうCSSの思考がそのまま再現されます /
.profile-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background: #ffffff;
border-radius: 12px;
}
どうですか？デザインツールを操作している感覚なのに、頭の中では完全にCSSのコードが組み上がっているはずです。
—
4. 応用編：CSS Gridでモダンなダッシュボードレイアウトを制覇する
Flexboxが「一方向の並び」が得意なら、CSS Gridは「二方向（行と列）の複雑なレイアウト」をいとも簡単に構築するための最強の武器です。PenpotはこのCSS Gridを、ビジュアルかつ完全にサポートしています。
ダッシュボードのグリッドを組む手順
1. メインキャンバスにグリッド用のコンテナフレームを作成します。
2. 右サイドバーでレイアウトを 「Grid layout」 に切り替えます。
3. 列（Columns）と行（Rows）のトラックサイズを直感的に設定します。
- 例えば、サイドバーを固定幅（`240px`）、メインエリアを可変（`1fr`）にする2カラムレイアウトなら、Columnsに `240px 1fr` と設定するだけ。
ここで重要なのは、エンジニアに対して「ここは Grid で組んでいます」と口頭で説明する必要すらないという点です。エンジニアがPenpotのインスペクター（開発モード）を開けば、以下のようなコードがそのままそこにあります。
/ エンジニアがインスペクターからそのままコピーできるCSS /
.dashboard-layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr;
gap: 24px;
}
デザイナーが意図した「余白の取り方」「レスポンシブ時の挙動」が、そのままコードの構造と一致するため、「実装したらレイアウトが崩れた」というデザインレビュー時の絶望が劇的に減ります。
—
5. エンジニアとのハンドオフを劇的にスムーズにする極意
最後に、Penpotを使ったワークフローで、チーム全体のパフォーマンスを最大化するための極意を3つ伝授します。
1. 「オートレイアウト」ではなく「Flex/Grid」という言葉で会話する
チーム内の共通言語をCSSの仕様に合わせましょう。「ここ、Flexのspace-betweenにして」「ここはGridで2カラムにして」と会話することで、仕様の解釈違いがゼロになります。
2. コンポーネント化（Components）とレイアウトの組み合わせを徹底する
ボタンやカードといった最小単位のコンポーネント内部でもFlexboxを使い、レイアウトがコンテンツ量に応じて可変（Hug contents / Fill）するように設計します。これにより、実際のWebブラウザ上でのリキッドな挙動を完全に再現できます。
3. インスペクターを信じる
デザインを渡すときは、細かなマージンを数値で指定するのではなく、Flex/Gridの親子関係が正しく組まれていることを確認してください。それだけで、エンジニアは迷うことなくクリーンなCSSを書き起こせます。
—
まとめ
PenpotのCSS GridとFlexbox機能は、単なる「便利なデザイン機能」ではありません。「デザインとコードの境界線を溶かす、パラダイムシフト」です。
これをマスターすれば、毎日のレイアウト作業が驚くほど論理的でストレスフリーになり、エンジニアからの「これ、どう実装すればいいですか？」という質問が「最高に綺麗なデザインですね、すぐに実装できます！」という称賛に変わります。
さあ、今すぐPenpotを開いて、あなたのデザインを「本物のWeb標準」にアップデートしてみませんか？
あなたのプロダクト作りが、もっと楽しく、もっと自由になりますように！