こんにちは！プロダクトデザインの現場で、日々UIとコードの境界線を溶かしているエンジニアの先輩です。
今回は、オープンソースの本格的デザイン・プロトタイピングツールとして今世界中で爆発的なシェアを広げている「Penpot（ペンポト）」を取り上げます。
「Figmaから移行してきたけれど、キーバインドの微妙な違いで指がもたつく……」
「マウス操作が多くて、プロトタイピングの速度が上がらない……」
そんな悩みを抱えていませんか？今回は、Penpotのキーボードショートカットを極限までマスターし、あなたの左手を最強のデバイスに変えるためのチートシートをお届けします。Figmaユーザーがつまずきがちなポイントや、両手持ちを前提とした実践的な指使いまで、現場の知見をたっぷり詰め込んで優しく解説していきますね。
これをマスターすれば、毎日の作業が劇的に楽になりますよ。さあ、一緒にワークスペースのスピードを限界突破させましょう！
—
1. Penpotとは何か？（ツールの本質とエンジニアが選ぶ理由）
Penpotは、デザイナーと開発者（エンジニア）の共通言語（シームレスなコラボレーション）を作るために生まれた、オープンソースのWebベースのデザイン・プロトタイピングツールです。
FigmaなどのクローズドなSaaSとは異なり、CSSの概念（FlexboxやGridなど）がそのままデザインのレイアウトシステムに直結しているのが最大の特徴です。つまり、「デザイナーが作ったものが、そのままエンジニアのメンタルモデルと一致する」という、UI/UX・開発現場における究極のストレスフリーを実現しています。
なぜショートカットが重要なのか？
プロダクトのデザインやプロトタイピングにおいて、思考のスピードとツールの操作スピードが一致したとき、最高のUXが生まれます。マウスでメニューを探している数秒間は、デザイナーやエンジニアの大切な「フロー状態（没入感）」を断ち切ってしまいます。キーボードショートカットは、単なる時短テクニックではなく、頭の中のアイデアをダイレクトにキャンバスへ出力するための神経回路なのです。
—
2. インストール・セットアップ不要！ 5分ではじめる環境構築
Penpotの圧倒的な強みの一つが、「ローカル環境やブラウザですぐに使い始められる手軽さ」です。専用の重いデスクトップアプリをインストールする必要はありません。
01. アカウント作成またはセルフホスト
- クラウド版（SaaS）: [penpot.app](https://penpot.app/) にアクセスし、無料のアカウントを作成するだけ。数秒でブラウザ上にワークスペースが立ち上がります。
- ローカル環境（Docker）: オープンソースであるため、プライバシーやセキュリティを重視する開発チームなら、Docker Composeでローカルに立ち上げることも可能です。
開発現場でローカルホストする場合の docker-compose.yml の例
version: ‘3.8’
services:
penpot-frontend:
image: penpotapp/frontend:latest
ports:
- “9001:8080”
environment:
- PENPOT_PUBLIC_URI=http://localhost:9001
# Backend と Database の設定は省略しますが、これだけで立ち上がります
02. 最重要の基礎セットアップ：グリッドとスナップ
Penpotを立ち上げたら、まず最初にプロジェクトの設定を確認しましょう。
1. 右サイドバーの「Page」または「Board」を選択。
2. グリッド（Grid）やレイアウト（Layout）の初期値を、チームのデザイントークン（8pxグリッドなど）に合わせておきます。
3. 「Snapping（スナップ）」機能が有効になっていること（デフォルトでON）を確認してください。これが正確なプロトタイピングの土台となります。
—
3. 動作確認：5分で創る「Hello World」プロトタイプ
ショートカットを学ぶ前に、Penpotの基本操作と「動く感覚」を掴むために、最小限の「Hello World」的プロトタイプを作ってみましょう。
1. ボードの作成: ショートカット `F` を押し、キャンバスに適当なサイズ（例: Desktop / 1440×900）のボードを配置します。
2. 要素の配置: ショートカット `R` を押し、ボード内に四角形（Rectangle）を描画します。右サイドバーで背景色を鮮やかなインディゴブルーに変更してみましょう。
3. テキストの入力: ショートカット `T` を押し、画面中央に「Hello, Penpot!」と打ち込みます。
4. コンポーネント化: 作成した要素を選択し、`Ctrl + Alt + K` （Macの場合は `Cmd + Option + K`）を押してコンポーネント化します。
これで最初のプロトタイプパーツが完成しました！いよいよ本題の、作業効率を劇的に上げるキーボードショートカットの世界へ進みましょう。
—
4. 【Figmaユーザー必見】キーバインドの違いと落とし穴
FigmaからPenpotへ移行したエンジニアやデザイナーが、最初につまずくのが「キーバインドの微細な違い」です。ここを最初に脳内変換できるようにしておくと、フラストレーションがゼロになります。
| 操作・ツール | Figmaのキーバインド | Penpotのキーバインド | 備考・補足 |
| :— | :— | :— | :— |
| フレーム / ボード | `F` | `F` | ここは共通。安心してください。 |
| コンポーネント化 | `Cmd/Ctrl + Alt + K` | `Cmd/Ctrl + Alt + K` | ほぼ同等ですが、Penpot特有のレイアウト構造に注意。 |
| グループ化 | `Cmd/Ctrl + G` | `Cmd/Ctrl + G` | 基本的なグループ化は共通。 |
| グループ解除 | `Cmd/Ctrl + Shift + G` | `Cmd/Ctrl + Shift + G` | こちらも共通。 |
| ズームイン/アウト | `+` / `-` | `+` / `-` | 共通ですが、トラックパッド操作も快適。 |
> 💡 先輩エンジニアからのアドバイス
> PenpotはCSSの Flexbox / Grid の思想を強く引き継いでいるため、「オートレイアウト（Figma）」に相当する機能が、よりネイティブなCSSレイアウトとして実装されています。そのため、要素の整列やパディングのショートカット感覚は、ブラウザのDevToolsを操作している感覚に近いものがあります。
—
5. 現場で震えるほど役立つ！Penpot完全ショートカット・チートシート
ここからが本番です。両手持ち（左手でのキーボード操作 ＋ 右手でのマウス/トラックパッド操作）を極めるための、カテゴリ別チートシートを公開します。
1. ツール選択系（一瞬で道具を持ち替える）
左手の人差し指〜小指をホームポジションに置いたまま、瞬時にツールを切り替えます。
- `V` : 選択ツール（Move / 矢印） – すべての基本。迷ったらこれ。
- `F` : ボードツール（Frame） – 新しい画面領域の切り出し。
- `R` : 長方形（Rectangle） – UIの土台作り。
- `O` : 楕円（Oval） – アバターや円形要素に。
- `T` : テキスト（Text） – タイトルや本文の流し込み。
- `P` : ペンツール（Pen） – ベクターによる自由なシェイプ描画。
- `H` : ハンドツール（Hand） – キャンバスのパン（スペースキー長押しでも代用可能）。
2. ズーム・ナビゲーション系（キャンバスを自在に操る）
- `Shift + 1` : すべてのオブジェクトを画面全体に表示（Zoom to fit）
- `Shift + 2` : 選択中のオブジェクトにズーム（Zoom to selection）
- `Shift + 0` : 100%の等倍表示に戻す
- `Space + ドラッグ` : 一時的なハンドツール（キャンバスの移動）
3. 配置・整列系（美しさは細部に宿る）
デザインのピクセルパーフェクトな整列は、ショートカットで爆速化します。
(※選択しているオブジェクトに対して適用)
- `Alt + H` : 水平方向の中央揃え
- `Alt + V` : 垂直方向の中央揃え
- `Alt + L` : 左揃え
- `Alt + R` : 右揃え
- `Ctrl/Cmd + G` : グループ化
- `Ctrl/Cmd + Shift + G` : グループ解除
—
6. 実践：両手持ちで素早くモックアップを構築する指使いの極意
最高峰のスピードを生み出すのは、「右手でマウス（またはトラックパッド）、左手でキーボード」という両手分離のスタイルです。
黄金の指の配置
1. 左手の親指: スペースキー（キャンバス移動用）に常駐。
2. 左手の人差し指〜小指: `V` (選択), `F` (ボード), `R` (四角形), `T` (テキスト) のエリアをホームポジションから最小限の移動で叩けるようにスタンバイ。
3. 右手: マウスまたはトラックパッドで正確な位置を指し示す。
この体制を作ると、例えば「ボードを作る (`F`) ➔ 四角形を置く (`R`) ➔ テキストを入信する (`T`)」という一連のフローが、視線を一切ブラウザのメニューバーに動かすことなく、コンマ数秒で完了します。この「思考と操作の完全な同期」が手に入ると、プロトタイピングがもはやリズムゲームのように楽しくなりますよ。
—
まとめ：今日からあなたのワークスペースが変わる
今回は、Penpotの基本概念から、Figmaとの違い、そして現場で役立つ完全ショートカットチートシートまでを一気に解説しました。
- PenpotはオープンソースでCSSの概念に忠実な、エンジニアとデザイナーの架け橋となるツール。
- 初期セットアップはブラウザやDockerで一瞬。
- 左手でショートカット、右手でマウスを駆使する「両手持ち」のスタイルが爆速モックアップの秘訣。
最初は指が慣れないかもしれませんが、まずは `V` (選択), `F` (ボード), `R` (四角形) の3つだけでも今日から意識して使ってみてください。数日後には、マウスだけで作業していた頃には戻れなくなっているはずです。
あなたのプロダクト開発ライフが、よりクリエイティブで快適なものになりますように。それではまた、次の現場でお会いしましょう！