Glassmorphism は磨りガラスで UI を形づくります。半透明のパネルの背後に下地の色と光の粒が透け、1px の発光ボーダーが輪郭を描きます。濃紫の下地（#3A344E）と緑・オレンジ・赤のデータの波長がテクノロジーの夜景を生み、階層はあるのに軽やかで、奥行きはシャドウではなくぼかしと透明度で表現します。音楽、フィンテック、雰囲気が求められるモダンアプリに適しています。
Glassmorphism擬態とエフェクト
プロンプトテンプレート
基本テンプレート
Design a Glassmorphism-inspired interface. Colors: #3A344E, #07CA6B, #E89558, #EA2143 with #3A344E accent. Typography: #1856FF.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Glassmorphism aesthetics. Use Glassmorphism color identity with #3A344E accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Glassmorphism style. Use Glassmorphism color identity with #3A344E accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Glassmorphism design language. Use Glassmorphism color identity with #3A344E accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Glassmorphism visual identity. Use Glassmorphism color identity with #3A344E accents. Compelling, conversion-focused.
使用例
Glassmorphism アプリ
WebBuild a web app with Glassmorphism design language and #3A344E color system.
Glassmorphism ダッシュボード
ダッシュボードCreate a dashboard using Glassmorphism style with data visualization and #1856FF typography.
✅ 適した用途
- ビジュアル効果のシーン
- ハイエンドテック製品のページ
- ダークなブランド展示
❌ 適さない用途
- 紙と印刷の質感のサイト
- 密集したデータテーブル
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。