Claymorphism は UI の要素を柔らかな粘土のおもちゃのように仕立てます。大きな角丸、厚みのある内側の影と外側のハイライトが立体感を生み、色は淡く形はふっくらと、ボタンは思わずつまみたくなるような見た目です。立体感は写実的なマテリアルではなく、二色の影による「隆起と凹み」のコントラストで表現します。子ども向け製品、カジュアルアプリ、そして親しみやすさと楽しさが求められる UI に適しています。
Claymorphism擬態とエフェクト
プロンプトテンプレート
基本テンプレート
Design a Claymorphism-inspired interface. Colors: #FFFFFF, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #3B82F6.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Claymorphism aesthetics. Use Claymorphism color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Claymorphism style. Use Claymorphism color identity with #16A34A accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Claymorphism design language. Use Claymorphism color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Claymorphism visual identity. Use Claymorphism color identity with #16A34A accents. Compelling, conversion-focused.
使用例
Claymorphism アプリ
WebBuild a web app with Claymorphism design language and #16A34A color system.
Claymorphism ダッシュボード
ダッシュボードCreate a dashboard using Claymorphism style with data visualization and #3B82F6 typography.
✅ 適した用途
- ビジュアル効果のシーン
- 遊び心のあるアプリと子ども向け製品
- 気軽なブランドマスコットページ
❌ 適さない用途
- 厳粛な企業公式サイト
- 高密度なデータ UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。