こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。
日々、デザインツールとコードベースの往復で「なぜUIデザインのレイアウトとCSSの挙動がこうもズレるんだ…」と頭を抱えたことはありませんか？
今回は、オープンソース（OSS）界隈でいま最も熱い視線を浴びているプロトタイピングツール「Penpot」の初期設定から、実務で即戦力となるコンポーネント設計、そして開発者への引き渡し（ハンドオフ）までのロードマップを完全解説します。
特にPenpotの最大の武器である「CSS Gridとフレックスボックスのネイティブ実装」に焦点を当てます。これさえマスターすれば、Figmaの制約にイライラしていた日々が嘘のように消え去り、デザインとコードの境界線が美しく溶け合いますよ。さあ、一緒にその扉を開けましょう。
—
1. なぜ今、Penpotなのか？（ツールの本質を見極める）
これまでのデザインツールは、独自の閉じたレイアウト概念（Auto Layoutなど）を採用しており、いざ実装する段階でフロントエンドエンジニアがCSSに翻訳し直すという無駄なコストが発生していました。
しかし、Penpotは最初からCSSの仕様（FlexboxとCSS Grid）をそのままデザインのキャンバスに持ち込んだ世界初のデザインツールです。
つまり、「デザインした瞬間から、それはもうコードに近い論理構造を持っている」ということ。デザイナーはエンジニアの思考回路でレイアウトを組み、エンジニアはPenpotから出力されるCSSプロパティをそのままプロダクトに落とし込めます。この圧倒的なシンクロ率が、チームの生産性を劇的に引き上げるのです。
—
2. 0から始めるセットアップ：アカウント作成とワークスペース
まずはPenpotの世界へ飛び込みましょう。
アカウント作成と環境選択
Penpotには、主に2つのアプローチがあります。
1. Penpot Cloud（SaaS版）: 公式がホストしている環境。登録すれば数秒でブラウザ上（`app.penpot.app`）で使い始められます（まずはここからがおすすめ）。
2. セルフホスト（Docker版）: DockerとDocker Composeを使い、自社サーバーやローカル環境で完全にデータをコントロールして動かす方法。プライバシーやセキュリティ要件が厳しい現場ではこちらが選ばれます。
セルフホスト用の docker-compose.yml のサンプル
チーム固有の環境で動かす場合、環境変数を適切に設定してください。
version: “3.8”
services:
penpot-frontend:
image: penpot/frontend:latest
ports:
- “8080:80”
environment:
- PENPOT_PUBLIC_URI=http://localhost:8080
# バックエンドやDBのコンテナが続きます…
ブラウザを開き、ワークスペースにログインしたら、最初の「チーム」と「プロジェクト」を作りましょう。フォルダ構造はシンプルに保つのが、スケールするデザインシステムの鉄則です。
—
3. 基礎のキホン：フレーム、描画ツール、そして「真のレイアウト」
キャンバスを開いたら、まずは画面の土台となる「フレーム（Frame / ショートカット: `F`）」を配置します。Figmaなどのツールに慣れている方なら、操作感はすぐに掴めるはずです。
ここで、Penpotの真骨頂であるレイアウトエンジンに触れましょう。
フレックスボックス（Flexbox）とCSS Gridの直感的操作
Penpotの右サイドバー（インスペクター）には、CSSそのもののプロパティが並んでいます。
- Flexboxの適用:
- 複数の要素を選択し、レイアウトモードを「Flex」に切り替えます。
- 主軸（Direction: Row / Column）、配置（Justify）、交差軸の整列（Align）をいじるだけで、WebのCSS Flexboxそのものの挙動がキャンバス上で再現されます。
- CSS Gridの適用:
- さらに複雑な2次元レイアウトが必要ですか？「Grid」を選択すれば、行（Rows）と列（Columns）のトラックを視覚的に定義できます。
- 「あ、ここはCSS Gridの `grid-template-columns: 1fr 2fr;` だな」と直感的に理解しながらデザインを進められます。
> 💡 プロからのアドバイス
> 初心者のうちは、とりあえずすべてを絶対配置（Absolute）で並べがちですが、これではレスポンシブに対応できません。「必ず親要素にFlexboxかGridをかけ、子要素を流し込む」というWeb標準のメンタルモデルを最初から意識してください。これだけで、後からの修正地獄から解放されます。
—
4. 精度高い「Hello World」：最初のコンポーネント作成から配置まで
では、ここまでの知識を使って、ボタンコンポーネントを作りながら「コンポーネント指向」の基本を体感しましょう。
Step 1: ボタンのベースを作る
1. キャンバスにテキストツール（`T`）で「Click Me」と入力します。
2. そのテキストを選択した状態で、`Shift + A`（または右クリックから「Create Frame」）を押し、フレーム化します（これがボタンのパディング領域になります）。
3. インスペクターで以下を設定します。
- Layout: Flex (Center alignment)
- Padding: 上下 12px, 左右 24px
- Background: お好みのブランドカラー（例: `#3B82F6`）
- Border Radius: 8px
Step 2: コンポーネント化（Component）
このフレームを選択し、上部メニューの「Create Component（`Ctrl + Alt + K` / `Cmd + Option + K`）」をクリックします。
これで、これが「マスターコンポーネント」になりました。
Step 3: インスタンスの配置と検証
左側のサイドバー（Assetsタブ）から、先ほど作ったボタンをキャンバスにドラッグ＆ドロップしてみましょう。これが「インスタンス」です。
マスターの色を変更すると、インスタンスにも即座に反映されることを確認してください。
[Master Component (Button)] ──(変更を伝播)──> [Instance A]
└──(変更を伝播)──> [Instance B]
この構造こそが、UIデザインの保守性を保つ唯一の道です。これを徹底するだけで、画面改修時の手戻りが9割削減されます。
—
5. チームへ渡す：デザインからコードへのシームレスなハンドオフ
Penpotの素晴らしさは、デザインが完成したあとの「ハンドオフ（開発者への引き渡し）」の美しさにあります。
右上の「Inspect」モードに切り替えてみてください。
開発者が知りたい情報（CSSのプロパティ、マージン、パディング、カラーコード、そしてFlex/Gridの構造）が、そのままコードスニペットとして右側に表示されます。
- 「あ、この余白はちゃんと `gap: 16px` で組まれているな」
- 「このレイアウトは `display: flex` だから、実装もそのまま行こう」
エンジニアはデザイナーの意図を「忖度」する必要がなくなります。仕様の行き違いによる無駄なコミュニケーションコストが消え去り、プロダクトを形にすることだけに集中できるようになるのです。
—
おわりに：毎日の作業が劇的に楽になる未来へ
今回は、Penpotの初期設定から、CSSレイアウトの概念、そしてコンポーネントの基本設計までのロードマップを駆け足で解説しました。
最初はFigmaなどの既存ツールとの細かな操作の違いに戸惑うかもしれませんが、「Webの標準技術（CSS）と完全に同期している」というPenpotの設計思想の美しさに気づいた瞬間から、あなたのデザインとプロトタイピングのスピードは次元が変わります。
これをマスターすれば、毎日のレイアウト調整作業が劇的に楽になりますよ。
さあ、今すぐブラウザを開いて、あなただけの最初のプロジェクトを立ち上げてみてください。最高のデザインとコードの旅を！