Neumorphism は要素が UI から「生えてくる」ように見せます。同系色の下地（#F1F2F5）の上で、左上のハイライトと右下のシャドウによる双方向の投影が柔らかな隆起と凹みを形づくり、コントロールにはボーダーがなく、光と影だけでクリック可能であることを暗示します。手触りは穏やかで UI は静かです。スマートホーム、オーディオ機器、触覚のメタファーが必要なハードウェアコンパニオンアプリに適しています。
Neumorphism擬態とエフェクト
プロンプトテンプレート
基本テンプレート
Design a Neumorphism-inspired interface. Colors: #F1F2F5, #00A63D, #FE9900, #FF2157 with #00A63D accent. Typography: #006666.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Neumorphism aesthetics. Use Neumorphism color identity with #00A63D accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Neumorphism style. Use Neumorphism color identity with #00A63D accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Neumorphism design language. Use Neumorphism color identity with #00A63D accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Neumorphism visual identity. Use Neumorphism color identity with #00A63D accents. Compelling, conversion-focused.
使用例
Neumorphism アプリ
WebBuild a web app with Neumorphism design language and #00A63D color system.
Neumorphism ダッシュボード
ダッシュボードCreate a dashboard using Neumorphism style with data visualization and #006666 typography.
✅ 適した用途
- ビジュアル効果のシーン
- 遊び心のある小さなツールの UI
- スマートホームのコントロールパネル
❌ 適さない用途
- 情報密度の高い管理画面
- フラットでミニマルな製品
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。