Meta Store は Meta が Quest ヘッドセットとスマートグラスを販売するテック小売店で、プロダクトそのものが視覚の主役です。UI は純白の情報エリアとダークな没入エリアの間で二分して切り替わり、彩度の高い青のピル型 CTA がすべての行動点をマークします。Optimistic VF の可変フォントが幾何学的な温もりをもたらし、ふんだんな余白がギャラリーのようにプロダクトを引き立てます。ハードウェア、小売、プロダクト展示系のページに適しています。
Meta (Store)EC と小売
プロンプトテンプレート
基本テンプレート
Design a Meta Store-inspired interface. - Photography-first retail design where products are the visual heroes, not UI; - Binary surface strategy: pure white for information, deep dark for immersive product moments; - Pill-shaped CTAs in saturated blue create unmistakable action points; - Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth; - Generous whitespace frames products like gallery exhibits. Colors: #0064E0, #0143B5, #004BB9, #47A5FA with #0064E0 accent. Typography: (.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Meta Store aesthetics. Use Meta Store color identity with #0064E0 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Meta Store style. Use Meta Store color identity with #0064E0 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Meta Store design language. Use Meta Store color identity with #0064E0 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Meta Store visual identity. Use Meta Store color identity with #0064E0 accents. Compelling, conversion-focused.
使用例
Meta（Store）アプリ
WebBuild a web app with Meta Store design language and #0064E0 color system.
Meta（Store）ダッシュボード
ダッシュボードCreate a dashboard using Meta Store style with data visualization and ( typography.
✅ 適した用途
- EC のシーン
- テック小売とハードウェア展示
- 写真主体のプロダクトページ
❌ 適さない用途
- 密集したデータ管理画面
- 紙の読書系プロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。