BMW M は BMW のモータースポーツ子ブランドで、UI は「コックピット視点」です。ほぼ純黒のキャンバスに白い文字を配し、M の三色ストライプ（ライトブルー／ダークブルー／レッド）は 4px のブランドアクセント、M エンブレム、モータースポーツのクロームパーツとしてのみ登場し、ボタンや塗りには決して使いません。写真はフルブリードで敷かれ、車両が常に視覚の主役。UI は写真上の小さな白いラベルへと退きます。ボタンはフラット、角丸ゼロ、大文字に広いトラッキング——長方形の輪郭そのものがブランドです。パフォーマンスブランドとモータースポーツのナラティブ UI に適しています。
BMW M自動車
プロンプトテンプレート
基本テンプレート
Design a BMW M-inspired interface. - Near-pure black canvas ({colors.canvas} — #000) with white type across the analyzed editorial and marketing pages. Configurator, account, checkout, and order-management flows are unresolved and may introduce light surfaces.; - Display headlines use UPPERCASE BMW Type Next Latin Light when following the BMW family system. Heavier uppercase settings are reserved for labels, buttons, card titles, and observed M-specific emphasis.; - M tricolor ({colors.m-blue-light} / {colors.m-blue-dark} / {colors.m-red}) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.; - Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.; - Buttons are flat with 0px corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand.. Typography: (#ffffff):.バリエーションプロンプト
📱 モバイル
Design a mobile app with BMW M aesthetics. Clean, touch-friendly, native feel.
💻 Web
Design a web application with BMW M style. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with BMW M design language. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with BMW M visual identity. Compelling, conversion-focused.
使用例
BMW M アプリ
WebBuild a web app with BMW M design language and brand color system.
BMW M ダッシュボード
ダッシュボードCreate a dashboard using BMW M style with data visualization and (#ffffff): typography.
✅ 適した用途
- 自動車業界
- モータースポーツとパフォーマンスのテーマページ
- ダークなスポーティ UI
❌ 適さない用途
- 穏やかな家庭向け製品
- 明るい教育系 UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。