Style · アイソメトリック
アイソメトリックなWebデザインのAIプロンプト集
30度傾斜の擬似3DでUI要素を浮かせるアイソメトリック系AIプロンプト集。Stripe・Linearのような未来的SaaS表現に。
アイソメトリックについて
アイソメトリック投影は奥行き感を持ちながら平面的に処理できる作画技法。Webでは CSS transform: rotateX/rotateZ で要素を傾斜させて擬似3Dを作ります。Stripe、Linear、Vercel、Figmaなどのプロダクトサイトの一部、ゲームのプロモ、データ可視化で使われ、未来感と整理された情報密度を両立。SaaSの機能紹介セクションで特に効果的です。
よく使われる場面
- モダンなSaaSプロダクトのLP
- データ可視化・BIプロダクト
- ゲーム・メタバース系
- 技術ブログのカバー画像
- 開発者向けツールの機能紹介
成功のポイント
- 傾斜角は15-30度の範囲で固定
- 要素は重ね順を z-index で厳密管理
- 影はソフト・距離短めに
- グラデーションで奥行き感を補強
- 複数オブジェクトの基準面を揃える
