オートモーティブ設計ガイド -- "Precision Drive"
Tesla、Porsche、BMWのWebサイトに共通するのは「パワーとプレシジョン」。全面ダーク配色の中でスペック数値が大きく輝き、シネマティックな車両画像がスクロールの度に新しい興奮を生む。
本テンプレートは「Precision Drive」設計システムを定義する。漆黒の3段階背景（#000000 / #111111 / #1a1a1a）、レーシングレッド (#ff0000) のアクセント、そして64px超のスペック数値が、デジタル空間にサーキットの興奮を再現する。
核心となる設計思想
全面ダーク。ライトモードは存在しない。角丸は0px。スペック数値は64pxで画面の主役になる。アクセントはレーシングレッド (#ff0000) のみ。影は使わず、背景色の3段階（#000 / #111 / #1a1a1a）で深度を表現する。
1. デザイン哲学 -- 「スピードを感じるUI」
Tesla のアプローチ
Tesla のサイトはフルスクリーンの車両画像から始まる。テキストは最小限で、数字が全てを語る。「0-100km/h: 2.1秒」という1行が、長い説明文より雄弁。
Porsche のプレミアム感
Porsche は漆黒の背景に車両のディテールを浮かび上がらせる。コンフィギュレーターは精密で、全てのオプションが美しく提示される。
ヒーロープレビュー
2. カラーパレット
背景3段階
Primary
#000000
Elevated
#111111
Surface
#1a1a1a
テキスト&アクセント
Text
#ffffff
Secondary
#b3b3b3
Muted
#666666
Racing Red
#ff0000
3. タイポグラフィ
HERO DISPLAY 72PX
SECTION TITLE 48PX
720HP
Spec Number 64px
SUBTITLE 18PX
Body -- パフォーマンスと効率性を両立した次世代パワートレインの詳細説明テキスト。
SPEC LABEL / NAV -- 13PX UPPERCASE
4. コンポーネント
CTAボタン
スペックカード
2.1s
0-100 km/h
720HP
Max Power
580km
Range
コンフィギュレーターオプション
Exterior Color
Obsidian
Pearl
Racing Red
Midnight
インテリア/エクステリア切り替え
5. レイアウトパターン
ページ構成
| セクション | 背景 | コンテンツ |
|---|---|---|
| ヒーロー | #000000 | 車名 + スペック + CTA |
| 画像 | #000000 | フルブリード車両画像（21:9） |
| スペック | #111111 | 3-4カラムスペックグリッド |
| ギャラリー | #000000 | インテリア/エクステリア切替 |
| コンフィグ | #1a1a1a | カラー・オプション選択 |
| 比較 | #111111 | モデル比較テーブル |
スペーシング
- ヒーロー上下: 120px
- セクション上下: 80px
- スペックカード間: 24px
- コンテンツ最大幅: 1440px
- サイドパディング: 48px
6. 深度とグロー効果
ダーク背景では影は見えにくい。代わりに:
| 手法 | 値 | 用途 |
|---|---|---|
| 背景色段階 | #000 / #111 / #1a1a1a | セクション・カードの深度 |
| ボーダー | rgba(255,255,255, 0.06-0.20) | 要素の境界 |
| レッドグロー | 0 0 20px rgba(255,0,0,0.15) | CTA強調（控えめに） |
7. 実装上の注意点
Do
- 全面ダーク配色を徹底する
- スペック数値は 48px 以上
- 車両画像は 21:9 シネマティック
- 角丸 0px で統一
- uppercase + letter-spacing
Don't
- ライト背景のセクションを入れない
- 丸みを持たせない
- レッド以外のアクセントを増やさない
- テキストを長く書かない
- セリフ体を使わない
8. レスポンシブ対応
| ブレークポイント | スペック数値 | 画像比率 | スペック列 |
|---|---|---|---|
| Mobile (<768px) | 36px | 4:3 | 1列 |
| Tablet (768-1200px) | 48px | 16:9 | 2列 |
| Desktop (1200px+) | 64px | 21:9 | 3-4列 |
9. Agent プロンプト例
ヒーロー:
背景 #000000, 100vh。車名 #ffffff, 72px, weight 700, uppercase, letter-spacing -2px。
サブタイトル #b3b3b3, 18px, uppercase。
CTA: #ff0000, 角丸 0px, 13px uppercase letter-spacing 2px。スペック:
3カラム、背景 #111111、ボーダー rgba(255,255,255,0.06)。
数値 #ffffff, 64px, weight 700。単位 #b3b3b3, 18px。
ラベル #666666, 13px, uppercase, letter-spacing 1px。コンフィグ:
背景 #1a1a1a。スウォッチ 48px 円形。
選択: border 2px solid #ffffff。
ラベル #b3b3b3, 11px。