Spacious は「余白」を主役に据えます。十分な空間、統一された内側余白、厳密なグリッドがページをゆったりと広げ、コンテンツ同士が互いを邪魔しません。色彩は背景へと退き（紫 #8B5CF6 がワンポイント）、呼吸感と秩序感が共存します。ハイエンドブランド、ギャラリー風の展示、読書体験を重視するプロダクトに適しています。
Spaciousレイアウトと構造
プロンプトテンプレート
基本テンプレート
Design a Spacious-inspired interface. Colors: #8B5CF6, #16A34A, #D97706, #DC2626 with #8B5CF6 accent. Typography: #3B82F6.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Spacious aesthetics. Use Spacious color identity with #8B5CF6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Spacious style. Use Spacious color identity with #8B5CF6 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Spacious design language. Use Spacious color identity with #8B5CF6 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Spacious visual identity. Use Spacious color identity with #8B5CF6 accents. Compelling, conversion-focused.
使用例
Spacious アプリ
WebBuild a web app with Spacious design language and #8B5CF6 color system.
Spacious ダッシュボード
ダッシュボードCreate a dashboard using Spacious style with data visualization and #3B82F6 typography.
✅ 適した用途
- レイアウトのデモ
- コンテンツ型の公式サイト
- ブランド展示ページ
❌ 適さない用途
- 高密度なデータ UI
- 情報がコンパクトなツール
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。