Style · アイソメトリック
アイソメトリックWebデザインの参考例とAIプロンプト
30度傾斜の擬似3DでUI要素を浮かせるアイソメトリック系AIプロンプト集。Stripe・Linearのような未来的SaaS表現に。
アイソメトリックについて
奥行き感を持ちながら平面的に処理できる作画技法。CSS transform の rotateX と rotateZ で要素を傾斜させて擬似3Dを作ります。Stripe、Linear、Vercel、Figma のプロダクトサイト、ゲームのプロモ、データ可視化で使われる表現です。遠近法と違い、奥のものが小さく歪みません。積み重ねてもどのカードも等しくくっきり見えるため、奥行きと情報密度を両立できます。傾き角度はページ全体で統一すること。カードごとにぶれると、立体感ではなく崩れに見えます。
アイソメトリックの視覚パラメータ
- #0F1222 地
- #E6E8F0 文字
- #6C5CE7 主色
- #00C2A8 副色
- 書体
- サンセリフ。図の中の文字は水平に保つ
- 形
- rotateX(56deg) rotateZ(-45deg) をページ全体で統一
- 動き
- hoverで浮上させる。角度は変えない
よく使われる場面
- モダンなSaaSプロダクトのLP
- データ可視化・BIプロダクト
- ゲーム・メタバース系
- 技術ブログのカバー画像
- 開発者向けツールの機能紹介
成功のポイント
- 傾斜角は15-30度の範囲で固定
- 要素は重ね順を z-index で厳密管理
- 影はソフト・距離短めに
- グラデーションで奥行き感を補強
- 複数オブジェクトの基準面を揃える
