こんにちは！デザインシステムとプロトタイピングの限界を日々模索している先輩エンジニアです。
今日は、オープンソースの最強デザインツール「Penpot」を使って、プラグインを一切使わずに、息を飲むほど美しいアイソメトリック（等角投影法）デザインを爆速で構築する裏技を伝授します。
「プラグインのインストール権限がない」「有料プランにアップグレードできない」「そもそも外部プラグインの挙動が不安定で嫌だ」――そんな現場の悩みをすべて解決しつつ、コンポーネント指向の美しさを保ったまま立体的なUIモックアップを作る手法を解説します。これをマスターすれば、毎日のLP制作やプレゼン用のモックアップ作成が劇的に楽しく、そして速くなりますよ。
—
1. アイソメトリックデザインの概要とUI/UXにおける活用シーン
そもそも、なぜフラットなUIをあえて「斜め（アイソメトリック）」にするのでしょうか？
UI/UXの現場において、アイソメトリック表現は単なる「お洒落な装飾」ではありません。
- 多層構造の視覚化: モバイルアプリ、デスクトップ、スマートウォッチ、さらにはクラウドアーキテクチャが連携するエコシステムを1枚の画面で俯瞰させたいとき。
- ランディングページ（LP）のヒーローセクション: ユーザーのスクロールの手を止め、プロダクトの近未来感や立体的なリッチさを直感的に伝えるとき。
従来のツール（Figmaなど）では、外部の「Isometricプラグイン」に頼りがちでした。しかし、プラグインはツールのバージョンアップで動かなくなったり、レイヤー構造がバラバラのグループに分解されてしまったりというメンテナンス上の負債を生みがちです。
Penpotが持つネイティブの強力なグリッドシステムとマトリックス変形（Skew/Matrix Transformation）を理解すれば、プラグインなしで、しかも「後から中身のテキストやUIを自由に変更できる（コンポーネント連動）」状態を完全に維持したまま、立体モックアップが作れるのです。
—
2. Penpotのグリッドと変形機能を駆使した立体表現の手順
まずは、Penpotでアイソメトリックの土台となる「角度」の数学的ルールを体に叩き込みましょう。
等角投影法の基本は、「水平方向から30度傾け、Y軸方向に特定の比率で圧縮する」ことです。Penpotのカンバス上でこれを完璧に再現する手順をステップ・バイ・ステップで解説します。
ステップ1: ベースとなるフラットUIの準備
まずは、立体化したい普通のUIフレーム（例: 1440×900のデスクトップ画面、または390×844のスマートフォン画面）を用意します。このとき、中身の要素は必ずAuto Layout（PenpotではFlexレイアウト）やグループで綺麗に整理しておいてください。
ステップ2: アイソメトリック・トランスフォームの魔法
Penpotのプロパティインスペクターにある「回転（Rotation）」と、比率の調整を使います。完全なアイソメトリックを構築するための黄金比率は以下の通りです。
1. 対象のフレームを選択し、回転（Rotation）を `-30度` に設定します。
2. 次に、高さを圧縮します。アイソメトリックの厳密な数学的スケールでは、垂直方向を `57.735%`（$\sin(30^\circ)$）に縮小しますが、UIデザインの視認性を考慮すると、`60%` または `50%` にして少しパースを効かせた方が「それっぽく」見栄えが良くなります。
> 先輩の知恵袋:
> Penpotで直接「縦横比を固定したままY軸だけ縮小する」には、一度フレームをコンポーネント化するか、SVGとして一時的に扱う、あるいはグループのプロパティで高さを直接 ` 0.6` のように計算式で入力するのがコツです。
—
3. 効率的に斜め投影を適用するためのカスタムコンポーネントの作り方
ここからが本題です。ただ斜めにするだけなら誰でもできますが、「中身のテキストを変えたら、自動で立体的なモックアップも更新される」という生きたコンポーネントを作るのがプロの仕事です。
アーキテクチャの設計
1. マスターコンポーネント（Flat UI）を作る:
通常の平らなUIを `Main Component` として定義します。これを例えば `UI/Base-Screen` と名付けます。
2. ラッパーフレーム（Isometric Wrapper）を作る:
新しいフレーム（例: `ISO-Wrapper`）を作り、その中に先ほどのマスターコンポーネントのインスタンスを配置します。
3. インスタンスを立体化する:
この `ISO-Wrapper` ごと回転・変形（Skew）させます。
[ 📁 ISO-Wrapper (回転・変形済み) ]
└── 🧩 [Component] UI/Base-Screen (フラットな状態を維持)
この構造の何が素晴らしいか分かりますか？
もしUIのデザインを変更したくなったら、元の `UI/Base-Screen` を編集するだけです。ラッパーの中身は自動的に同期され、かつアイソメトリックの角度を保ったまま一瞬で最新のUIにアップデートされます。もう二度と、文字を変えるたびに角度を調整し直す地獄作業に戻る必要はありません。
—
4. 実際のランディングページやモックアップに組み込む際のコツ
最後に、作ったアイソメトリックUIを実際のLPやプレゼンボードに美しく馴染ませるための実務的なテクニックを3つ授けます。
① ドロップシャドウで「浮遊感」を演出する
平面をただ傾けただけでは、地面にペタッと張り付いたように見えてしまいます。立体感を出すためのシャドウは、2段階に分けて重ねるのが鉄則です。
- シャドウA（大・ぼかし強）: 画面から離れた場所にある浮遊感を出すため、黒の不透明度（Opacity）10%、ブラー（Blur）を `64px` 程度にして真下に配置。
- シャドウB（小・輪郭強調）: 接地面のリアルな影を出すため、不透明度20%、ブラー `8px` で少しオフセットして配置。
② ライティング（光源）を意識したグラデーション
アイソメトリックの世界では、光が「左上から右下へ」流れていると仮定すると統一感が出ます。UIの最背面（または半透明のオーバーレイレイヤー）に、白から黒へのごく薄いリニアグラデーション（Linear Gradient）を乗算（Multiply）モードで重ねてみてください。これだけで、画面全体がグッとリッチな質感になります。
③ 奥行き（レイヤーの押し出し）の表現
スマホのモックアップなどで厚み（側面）を表現したい場合は、斜めにしたUIの背面に、同じ比率の図形を少しだけ下方向にコピー＆ペーストして配置し、側面の色（少し暗めのグレーやブランドカラー）で塗りつぶします。これだけで、2.5Dの立派なベクターモックアップが完成します。
—
まとめ
いかがでしたか？ Penpotの持つ柔軟なオブジェクト操作とコンポーネント機能を組み合わせれば、外部のプラグインに依存せずとも、メンテナンス性が高く美しいアイソメトリック・モックアップが自由自在に作れるようになります。
「ツールに合わせるのではなく、ツールの構造をハックして自分の武器にする」――これが、私たちエンジニアリングとデザインを愛する者のスタイルです。
明日からのあなたのモックアップ制作が、この知見によって少しでも軽やかで楽しいものになりますように。それではまた、次の現場でお会いしましょう！