厳選・オープン・無料
Bugatti
シネマティックな画像と控えめなエレガンスによる、超プレミアムな自動車ブランド体験
EditorialPremiumCleanRestraintReference
01
デザイン DNA
高級遺産精密自動車排他性
ハイエンドの自動車雑誌とラグジュアリーファッションハウスの融合
02
カラー
#FFFFFFInk
#000000BG
#999999Muted
rgba(255,255,255,0.2)Line
写真画像が全ての色彩を提供する、鮮明な白と黒の対比
03
タイポグラフィ
humanist-sans · monospace
- display
60px · 400 - headline
36px · 400 - body
16px · 400 - caption
14px · 400 - micro
12px · 400
全テキストは黒背景に白文字 · ナビゲーションとラベルに大文字を控えめに使用 · 大文字テキスト要素に適度な文字間隔を設定
04
余白
4px
8px
12px
16px
24px
36px
48px
64px
96px
一定の4pxベース単位と、高級感を演出する広めの余白
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
インタラクティブ要素には1px solid rgba(255,255,255,0.2)、それ以外はボーダーレス
rgba(0,0,0,0) 0px 0px 0px 0px · rgba(0,0,0,0.1) 0px 10px 15px -3px · rgba(0,0,0,0.1) 0px 4px 6px -4px
06
レイアウト
1440container
2columns
36pxgutter
768 / 1024breakpoints
フルブリードヒーローセクションと、車両カード用の2カラムグリッド
07
モーションとインタラクション
150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
状態変化のためのフェードトランジション · トランスフォームベースのホバーエフェクト · ページ遷移のための延長タイミング
微細な不透明度または色の遷移 · 不透明度を下げた即座のフィードバック
08
コンポーネント
- button 1pxの白いボーダーを持つミニマルなゴーストボタン。ピル型または6pxの角丸を持つ長方形
- card テキストオーバーレイを持つフルブリード画像カード。目に見えるコンテナボーダーなし
- chip 目立った使用なし
- input 目立った使用なし
- hero 中央揃えの白文字を持つ、フルビューポートのシネマティックな画像と垂直リズム
09
文体と禁止事項
- トーン 威厳があり、高名で、控えめ
- 見出し 混合ケースまたは大文字による直接的で宣言的なスタイル
- CTA 「Witness」や「Explore」のような命令形動詞を使った行動指向
- 複数のフォントウェイトを使用しない — スクリーンショットでは一貫してウェイト400が使用されている
- 装飾的なボーダーまたはシャドウを追加しない — スクリーンショットでは最小限からなしのエレベーション
- カラーアクセントを使用しない — スクリーンショットは黒、白、写真の色のみに依存
- コンテンツを詰め込まない — スクリーンショットでは全要素間に広めの余白が設けられている
- ナビゲーションに小文字を使用しない — スクリーンショットではMENU、STORE、WITNESS THE LEGENDが全て大文字
- 雑然としたレイアウトを作成しない — スクリーンショットではクリーンな単一カラムまたは2カラムグリッド構造
- 避ける: 非公式な言語
- 避ける: 過度な感嘆符
- 避ける: 雑然としたレイアウト
- 避ける: 明るいカラーアクセント
- 避ける: 装飾的なタイポグラフィ
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Bugatti.comは超プレミアムポジショニングを持つラグジュアリー自動車ブランドのウェブサイト。デザインは鮮明な白と黒のパレット（#000000背景、#FFFFFFテキスト）と、全ての視覚的興味を提供するシネマティックな自動車写真を採用。タイポグラフィはhumanist-sans-serifで、一貫してウェイト400。ヒーローヘッドラインには最大60pxの表示サイズを使用。レイアウトはミニマルで、フルブリードセクションと広めの余白。インタラクティブ要素は白いボーダーを持つ微細なゴーストボタンを使用。サイトは控えめさと遺産を体現。重要な禁止事項：明るいカラーアクセントを使用しない、装飾的なシャドウやボーダーを追加しない、雑然としたレイアウトでコンテンツを詰め込まない、複数のフォントウェイトを使用しない、小文字のナビゲーションラベルを使用しない、広めの余白を損なわない。
en · zh-CN · zh-TW · ja · ko