Perspective は空間の奥行きを扱うデザインです。アイソメトリックビューと多層の「浮遊する」平面が UI を奥行きのある場に変え、緑(#00BD7D)などの要素が異なる深度の層にずれながら配置されます。シャドウとスケールが前後の関係を示唆し、スクロールは空間を進むかのような体験になります。SaaS のプロダクト解説、データナラティブ、「階層」を核概念とするページに適しています。
Perspectiveレイアウトと構造
プロンプトテンプレート
基本テンプレート
Design a Perspective-inspired interface. Colors: #00BD7D, #16A34A, #D97706, #DC2626 with #00BD7D accent. Typography: #00BD7D.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Perspective aesthetics. Use Perspective color identity with #00BD7D accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Perspective style. Use Perspective color identity with #00BD7D accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Perspective design language. Use Perspective color identity with #00BD7D accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Perspective visual identity. Use Perspective color identity with #00BD7D accents. Compelling, conversion-focused.
使用例
Perspective アプリ
WebBuild a web app with Perspective design language and #00BD7D color system.
Perspective ダッシュボード
ダッシュボードCreate a dashboard using Perspective style with data visualization and #00BD7D typography.
✅ 適した用途
- レイアウトのデモ
- プロダクト機能の紹介ページ
- クリエイティブビジュアルプロジェクト
❌ 適さない用途
- テキストのみの読書サイト
- 従来型のテーブル管理画面
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。