Penpotショートカット全制覇：Figmaネイティブの指を「オープンソースの高速モデラー」へ最適化する技術
テックリードの〇〇だ。
言おう。FigmaからPenpotへ移行した、あるいは並行して使っているチームの多くが、最初に直面するストレスは「デザインの表現力」ではない。「キーバインドの微妙なズレによる、脳内思考と手の移動のタイムラグ」だ。
オープンソースのオープンWebベクター＆UIデザインツールであるPenpotは、SVGをネイティブデータ構造とし、CSS Flexbox / Gridの概念をそのままレイアウトエンジンに落とし込んだ、エンジニアにとって極めて親和性の高いプロダクトだ。しかし、Figmaの筋肉記憶が染み付いた指のままでは、その真のポテンシャルを引き出すことはできない。
今回は、Penpotのショートカットを完全に手掌化し、マウスカーソルを画面の端から端まで大移動させる無駄な労力をゼロにする「両手持ち高速モデリングの極意」を授ける。
—
1. Figma脳をハックせよ：主要キーバインドの決定的な違い
まずは、Figmaユーザーが最も罠にハマりやすいキーバインドの差異を整理する。この違いを脳内でコンパイルし直すことが、高速化の第一歩だ。
| 操作目的 | Figmaのショートカット | Penpotのショートカット | 備考・エンジニア的解説 |
| :— | :— | :— | :— |
| フレーム（アートボード） | `F` | `F` | これは共通。すぐにフレームを量産せよ。 |
| コンポーネント化 | `Cmd/Ctrl + Alt + K` | `Cmd/Ctrl + K` | 重要。 Figmaよりも1キー少なく、指の移動が最小限で済む。 |
| グループ化 | `Cmd/Ctrl + G` | `Cmd/Ctrl + G` | 共通。 |
| レイアウトグリッド/フレックス切替 | `Shift + A` (Auto Layout) | CSS Flexbox直結のUI制御 | Penpotはショートカットというより、インスペクターパネルのFlexプロパティ（方向、パディング、ギャップ）を直叩きする方が早い。 |
| コード/インスペクトモード | `Shift + 2` | `Alt + 2` (またはタブ切替) | 開発者とのハンドオフで多用する。 |
特に `Cmd + K` によるコンポーネント化の軽快さは異常だ。Figmaの癖で `Alt` を押しにいってしまう無駄なモーションを今すぐ排除してほしい。
—
2. 両手持ちモデリング：ホームポジションと指使いの最適解
真にプロダクトを高速で組み上げるエンジニアは、マウス（あるいはトラックパッド）に依存しない。左手をキーボードの左側に固定し、右手はポインティングデバイスを握る、あるいはテンキーレスキーボードで完全に両手をホームポジションに置く。
左手で完結させるエリア別ショートカット
- ズーム＆ナビゲーション（左手親指＋人差し指）
- `Z`：ズームツール
- `Shift + 1`：キャンバス全体を表示（Zoom to fit）
- `Shift + 2`：選択中のオブジェクトにズーム（Zoom to selection）
- オブジェクトの整列・分布（左手薬指〜人差し指）
- Penpotは直感的なアライメントショートカットが強力だ。
- `Alt + H`：水平方向の中央揃え
- `Alt + V`：垂直方向の中央揃え
- （※カスタムショートカット設定でFigma風の `Alt + A/W/D` などにマッピングするのも手だ。後述する）
- レイヤー階層の制御
- `Cmd/Ctrl + [` / `]`：背面へ送る / 前面へ持って来る
- `Cmd/Ctrl + Shift + [` / `]`：最背面へ / 最前面へ
—
3. 生産性を限界突破させる「隠れた神ショートカット」
マニュアルの隅に小さく書かれているが、知っているかいないかでモックアップの構築スピードが3倍変わる隠しコマンドを紹介する。
① `Tab` キーによるレイヤーツリーの縦横無尽な走査
キャンバス上の複雑に入り組んだネスト構造に対し、マウスでクリックして子要素を選択しようとしてイライラした経験はないか？
- 解放のコマンド： 選択した状態で `Enter` を押すと子要素へ深く潜り、`Shift + Enter` で親要素へ浮上する。また、`Tab` キー単体で同一階層の次の要素へフォーカスを移動できる。この「キーボードだけでDOMツリーを旅する感覚」を体に叩き込め。
② 数値入力フィールドでの「インクリメント・マジック」
プロパティパネルの数値入力（幅、高さ、パディング、フォントサイズなど）で、マウスホイールをグリグリするのはアマチュアのやることだ。
- `Shift + 矢印キー（↑/↓）`：数値を 10単位 で増減。
- `Alt/Option + 矢印キー`：数値を 0.1単位 で微調整。
- さらに、フィールドにフォーカスした状態で `+ 20` や `- 10` と直接数式を入力して `Enter` を叩けば、Penpotが勝計算してくれる。これはCSS設計の発想そのものだ。
—
4. チーム開発の生産性を底上げする「設定共有化ルール」とエコシステム
個人がいくらショートカットを極めても、チーム全体の共通言語（キーバインドや命名規則）がバラバラであれば、ペアデザインやデザインレビュー時の認知負荷は下がらない。
テックリードとして、以下の「Penpot チーム標準化プロトコル」を導入することを強く推奨する。
A. カスタムショートカットの組織的統一
Penpotはオープンソース（Self-host版）であるため、フロントエンドのコードベースや拡張機能レイヤーで、チーム固有のキーバインドプリセットを強制・配布することが可能だ。
拡張機能やブラウザ拡張（Tampermonkey等を用いたスクリプト注入、あるいは将来的なPenpotプラグインAPIの活用）により、組織全体で統一されたショートカットJSONを読み込ませる。
以下に、チーム全体で共有すべき「カスタムキーバインド定義ファイル」のベストプラクティス構成例（JSON）を示す。これをチームの共通リポジトリ（`/.penpot/shortcuts.json`）として管理し、オンボーディング時に適用するのだ。
{
“$schema”: “https://penpot.app/schemas/shortcuts-v1.json”,
“team”: “core-product-engineering”,
“version”: “1.2.0”,
“description”: “Figmaからの移行者が最速で慣れるための最適化キーバインドプリセット”,
“keybindings”: {
“tools”: {
“frame”: “F”,
“rectangle”: “R”,
“ellipse”: “O”,
“text”: “T”,
“pen”: “P”,
“pencil”: “Shift+P”,
“hand”: “H”,
“comment”: “C”
},
“manipulation”: {
“component-create”: “CmdCtrl+K”,
“component-detach”: “CmdCtrl+Alt+B”,
“group”: “CmdCtrl+G”,
“ungroup”: “CmdCtrl+Shift+G”,
“flatten”: “CmdCtrl+E”
},
“alignment”: {
“align-left”: “Alt+A”,
“align-horizontal-center”: “Alt+H”,
“align-right”: “Alt+D”,
“align-top”: “Alt+W”,
“align-vertical-center”: “Alt+V”,
“align-bottom”: “Alt+S”
},
“view”: {
“toggle-ui”: “CmdCtrl+\\”,
“zoom-to-fit”: “Shift+1”,
“zoom-to-selection”: “Shift+2”,
“toggle-grid”: “Shift+G”
}
}
}
B. デザインシステムとコードの完全同期（神プラグイン＆連携フロー）
Penpotを真に活かすのは、デザインをデザインで終わらせず、コード（CSS / Tailwind CSS）へ直結させることだ。
以下のフローをチームの標準ワークフローに組み込め。
1. Design TokensのYAML一元管理
Colors, Typography, Spacingの定義を `tokens.yaml` としてリポジトリで管理し、CI/CDパイプラインを経由してPenpotのライブラリへ同期（またはその逆）させる。
2. 実用的な `tokens.yaml` のベストプラクティス構成例
チームのデザインシステムにおける真のソース・オブ・トゥルース
version: “2.0.0”
namespace: “enterprise-ds”
colors:
primary:
500: “#0066FF” # ブランドプライマリ
600: “#0052CC” # ホバー状態
neutral:
100: “#F4F5F7”
900: “#091E42” # テキスト基本色
typography:
font-families:
sans: “Inter, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif”
mono: “Fira Code, monospace”
scales:
h1:
size: “2.25rem” # 36px
line-height: “2.5rem”
weight: “700”
body:
size: “1rem” # 16px
line-height: “1.5rem”
weight: “400”
spacing:
unit: “4px” # 4pxグリッドシステムに基づくベース
scale:
xs: “4px” # spacing.1
sm: “8px” # spacing.2
md: “16px” # spacing.4
lg: “24px” # spacing.6
xl: “32px” # spacing.8
このYAMLから生成されたトークン群をPenpotにインポートし、ショートカットでサクサクとコンポーネントに適用していく。この構築スピードは、従来のデザインツールとは次元が違う。
—
5. 結び：ツールに使われるな、ツールを使い倒せ
ショートカットを覚えることは、単なる「作業の時短」ではない。
「アイデアの速度」と「画面上の出力速度」のギャップを極限までゼロに近づけること、それこそがエンジニアリングの本質だ。
マウスに手を伸ばすたびに、君の脳内のフロー状態（ゾーン）は寸断されている。
今日紹介したキーバインドと設定構成をチームに導入し、Penpotのオープンでパワフルなキャンバスを、自らの手の延長のように自在に操ってみせろ。
コードを書くようにデザインし、デザインをコードのように組み上げる。
その領域に到達したとき、開発チームの生産性は、かつてないほどの爆発的な加速を見せるはずだ。