Penpotのアイソメトリック（等角投影法）デザイン作成術：プラグインなしで立体的なUIモックアップを素早く構築する裏技
テックリードの君なら、クライアントやステークホルダーに「おっ」と言わせるモックアップの必要性を痛感しているはずだ。フラットなUIデザインは汎用的だが、ランディングページ（LP）のヒーローセクションやSaaSのプロダクト紹介において、「立体感（アイソメトリック）」がもたらす情報の奥行きとリッチさは、コンバージョンレートに直結する強力な武器となる。
多くのデザイナーやエンジニアは、外部の3Dツール（BlenderやSpline）を立ち上げたり、重いプラグインを探したりする。だが、待ってほしい。オープンソースのオープンWebベース・デザインツール「Penpot」の本質を理解していれば、外部依存なしで、かつSVGの軽量さを保ったまま、極めて高速にアイソメトリックUIを構築できる。
今回は、Penpotの数学的変形機能とコンポーネント指向を極限までハックし、チーム全体の生産性を爆発させるプロのテクニックを伝授しよう。
—
1. アイソメトリックデザインの概要とUI/UXにおける活用シーン
アイソメトリック（等角投影法）とは、3次元のオブジェクトを2次元平面上に、歪み（パースペクティブ）をつけずに表現する手法だ。UI/UXデザインにおいて、これは単なる「お飾り」ではない。
- 複雑なダッシュボードの構造化: 複数レイヤーのウィジェットやモーダルを立体的に配置することで、情報の階層構造（Z軸の概念）を直感的に伝える。
- LPのコンバージョンブースター: SaaSのサービス画面を斜めに配置し、背景に溶け込ませることで、洗練されたテック企業感を演出しながら、CTA（Call to Action）へ視線を誘導する。
- マルチデバイス間の一貫性: モバイル、タブレット、デスクトップのモックアップを同一空間上にアイソメトリック配置し、エコシステムのシームレスさをアピールする。
PenpotのSVGネイティブな描画エンジンは、CSSの `transform: matrix()` や `rotateX/Y` と完全に思想が一致している。つまり、Penpot上で美しく立体化できたアセットは、そのままフロントエンドの実装（CSS/Tailwind）へとシームレスにトランスレーション可能なのだ。
—
2. Penpotのグリッドと変形機能を駆使した立体表現の手順
アイソメトリックの基本原則は、「30度の傾き」と「特定の垂直・水平比率」にある。真のアイソメトリック（数学的等角投影）を作るための黄金比は以下の通りだ。
1. X軸回転（傾斜）： `-30度`
2. Y軸回転（またはスキュー）： `30度`
3. 全体の縮小（高さの圧縮）： `cos(30°) ≈ 86.6%` または特定の変形マトリックス。
PenpotにはPhotoshopのような自由変形メッシュはないが、「カスタムグリッド」と「高度なプロパティパネルの数値入力」を組み合わせることで、ピクセルパーフェクトなアイソメトリック空間を作り出せる。
匠の手順：アイソメトリック・コンテナの作成
1. ベースフレームの作成:
UIモックアップを含むフレーム（例: 1440×900）を用意する。
2. グループ化（Group）の鉄則:
対象のフレーム（またはコンポーネント）を必ず `Ctrl + G` （Macは `Cmd + G`）で単一のグループにする。フレームのまま変形させると内部要素のレイアウトが崩れる場合があるため、グループ化が必須。
3. マトリックス変形の適用:
Penpotのプロパティインスペクターで、以下の数値を適用する（またはSVGコード側を直接ハックする）。
- Rotation（回転）: `30°`
- Skew（スキュー/歪み）: X軸方向に `-30°` （※Penpotのバージョンや操作パネルの仕様によるが、正確には「縦横比の縮小と回転の組み合わせ」が最も美しく決まる）。
- 黄金のショートカット＆裏技: 一度、「幅を 86.6% に縮小」し、「回転を -30°」、さらに「Y軸方向に縦横比を調整（または傾きを与える）」。
—
3. 効率的に斜め投影を適用するためのカスタムコンポーネントの作り方
毎回手動で変形値を入れるのは、エンジニアの美学に反する。DRY原則（Don’t Repeat Yourself）をデザインシステムにも適用しよう。
「フラットなマスター」と「アイソメトリックなインスタンス」の分離
チーム開発において、デザインのメンテナンス性を担保するため、以下の構成でコンポーネントツリーを構築する。
[Design System]
┗ 📂 components/
┣ 📄 ui-screen-flat (マスター：通常の平面的UI)
┗ 📄 ui-isometric-wrapper (ラッパー：アイソメトリック変形を適用したコンポーネント)
1. マスターの作成: 編集しやすいように、UIは完全にフラットな状態で維持する（テキストの打ち換えやレイアウト変更はすべてここで行う）。
2. ラッパーコンポーネントのネスト: フラットなマスターを別のフレームに配置し、そのラッパーに対してアイソメトリック変形を適用して「シンボル（コンポーネント）」化する。
3. メリット: 中身のUI（テキストやボタン）を修正した際、フラットマスターを更新すれば、すべてのアイソメトリックモックアップが一瞬で同期・更新される。
開発スピードを加速する隠れたキーボードショートカット
Penpotでの作業効率を極限まで引き上げる、プロが愛用するショートカット：
- `Ctrl + D` (重複): アイソメトリックなカードを等間隔でZ軸方向に並べる際、複製と同時に矢印キーで微調整。
- `Shift + 矢印`: 10px単位での移動（アイソメトリック空間での軸合わせに必須）。
- `Alt + ドラッグ`: プロパティの数値フィールドで使うと、値を微小に連続変更可能（角度の微調整に神がかっている）。
—
4. 実際のランディングページやモックアップに組み込む際のコツ
立体化したUIを実際のLPデザインに組み込む際、アマチュアとプロの差が最も出るのは「影（Shadow）とライティング」の演出だ。
影のレイヤー構造（リアルな浮遊感の演出）
アイソメトリックなUIは、地面（背景）から浮いているように見せることで初めてリアリティが生まれる。単一のドロップシャドウでは不十分だ。
1. ハード・コンタクト・シャドウ（接触面の影）:
UIの底面直下に、不透明度の高い、ぼかしの少ない濃い影を配置する。
2. アンビエント・ソフト・シャドウ（空間の広がりを示す影）:
大きくぼかした（Blur: 60px以上）、不透明度15%程度の黒（またはブランドカラー）の楕円を斜め下方に配置し、Z軸の浮遊感を演出する。
チーム開発で役立つ設定の共有化ルール
複数のデザイナー・エンジニアがPenpotで協業する際、アイソメトリックの「角度」や「変形率」が人によってバラバラになると、プロダクト全体の一貫性が死ぬ。
チームのDesign Tokens（デザイントークン）として、以下の規格を共通言語化せよ。
- Isometric Angle (等角角度): 常に `30deg` に固定。
- Scale Y Ratio (Y軸圧縮率): 常に `0.866` （または `86.6%`）。
—
附録：実用的な設定ファイル（JSON）のベストプラクティス
Penpotは内部的にSVGやJSONベースでデータをハンドリングしている。チームでアイソメトリックのスタイルガイドや、Figma/Penpot間のトークン同期を行うための、デザイントークン（JSON）のベストプラクティス構成例を共有する。これをプロジェクトのベースとしてリポジトリに配置せよ。
{
“$schema”: “https://design-tokens.github.io/community-group/format/”,
“project”: {
“name”: “SaaS-Landing-Page-Design-System”,
“version”: “1.0.0”
},
“isometric”: {
“transform”: {
“comment”: “プラグインなしでPenpot/CSSで完全再現するための数学的定義”,
“rotateX”: {
“value”: “30deg”,
“type”: “dimension”
},
“rotateZ”: {
“value”: “-30deg”,
“type”: “dimension”
},
“scaleY”: {
“value”: 0.866,
“type”: “number”
},
“matrixCSS”: {
“value”: “matrix(0.866, 0.5, -0.5, 0.866, 0, 0)”,
“type”: “string”,
“description”: “フロントエンド実装時にそのまま流用できるCSS 2D/3Dトランスフォームマトリックス”
}
},
“shadows”: {
“contactShadow”: {
“offsetX”: “0px”,
“offsetY”: “20px”,
“blur”: “10px”,
“spread”: “-5px”,
“color”: “rgba(0, 0, 0, 0.3)”
},
“ambientShadow”: {
“offsetX”: “0px”,
“offsetY”: “50px”,
“blur”: “80px”,
“spread”: “0px”,
“color”: “rgba(15, 23, 42, 0.15)”
}
}
}
}
—
結び
ツールに振り回されるな。ツールをハックしろ。
Penpotの持つオープンでプリミティブな変形機能の本質を理解すれば、重いプラグインや外部の3Dソフトなど不要だ。軽量で、美しく、スケーラブルなアイソメトリックUIを爆速で組み上げ、チームのワークフローを次の次元（3次元だ）へと引き上げてほしい。