ラグジュアリーファッション設計ガイド -- "Haute Couture Digital"
ラグジュアリーファッションのデジタルデザインに求められるのは「余白の贅沢」。Gucci、Chanel、LVMHといったメゾンブランドのサイトに共通するのは、圧倒的に少ない要素数と、それを支える広大な余白空間。製品はアートとして提示され、UIは美術館のギャラリーとして機能する。
本テンプレートは haute couture のデジタル表現を追求する「Haute Couture Digital」設計システムを定義する。漆黒の背景、ゴールドのアクセント、セリフ体の気品あるタイポグラフィが、デジタル空間にメゾンの世界観を構築する。
核心となる設計思想
全ての見出しは uppercase + wide letter-spacing (4-8px)。角丸は 0px。影は使わない。フォントウェイトは 300-400。この4つの原則がラグジュアリーの基盤となる。アクセントカラーはゴールド (#c9a96e) のみ。明るい色は一切使わない。
1. デザイン哲学 -- 「余白は贅沢」
メゾンブランドの共通言語
Gucci のサイトを開くと、最初に目に入るのは巨大な余白の中に浮かぶ1枚の写真。Chanel は白い空間の中にブランド名が佇む。LVMH は漆黒の背景に金色の文字が光る。共通するのは「何も置かない勇気」。
ヒーロープレビュー
2. カラーパレット
ダーク系
Primary
#0a0a0a
Deep
#050505
Gold
#c9a96e
ライト系
Cream
#f5f0eb
Text
#1a1a1a
Muted
#6b6b6b
3. タイポグラフィ
フォントスケール
HERO DISPLAY
SECTION TITLE
SUBTITLE
本文テキスト -- セリフ体の見出しとサンセリフの本文が織りなすコントラスト。weight 300 の軽やかさがエレガンスを表現する。
CAPTION -- 11PX UPPERCASE
4. コンポーネント
CTAボタン
製品グリッド（2カラム）
Silk Evening Dress
¥485,000
Cashmere Coat
¥720,000
非対称エディトリアルレイアウト
5. レイアウトパターン
余白の設計
ラグジュアリーサイトの余白は通常のWebサイトの2-3倍。以下を目安にする:
- ヒーロー上下: 160px
- セクション間: 120px
- 要素間: 40-60px
- テキスト最大幅: 480px
- 製品グリッドギャップ: 40px
レイアウト構成
| セクション | 背景 | コンテンツ |
|---|---|---|
| ヒーロー | #0a0a0a | ブランドステートメント |
| コレクション | #0a0a0a | 2カラム非対称 |
| エディトリアル | #f5f0eb | テキスト + 画像 |
| 製品グリッド | #0a0a0a | 2カラム製品カード |
| ストーリー | #f5f0eb | 長文エディトリアル |
6. アニメーション
ラグジュアリーのアニメーションは「遅くて上品」が鉄則。
- ホバー: 400ms cubic-bezier(0.25, 0, 0, 1)
- ページ遷移: 600ms
- 画像ズーム: scale(1.03), 800ms
- テキストフェード: opacity, 500ms
- 全てのイージング: cubic-bezier(0.25, 0, 0, 1) -- 加速が緩やかで減速が速い
7. 実装上の注意点
Do
- 角丸 0px を厳守
- uppercase + letter-spacing 4-8px を見出しに適用
- 画像は高解像度のみ
- ホバーは 400ms 以上でゆっくり
- ゴールドは控えめに
- weight 300-400 を基本に
Don't
- 角丸を使わない
- 影を使わない
- 明るいアクセントカラーを使わない
- weight 700 を本文に使わない
- 要素を詰め込まない
- アニメーションを派手にしない
8. レスポンシブ対応
| ブレークポイント | ヒーロー文字 | グリッド | 余白 |
|---|---|---|---|
| Mobile (<768px) | 36px | 1カラム | 60px |
| Tablet (768-1200px) | 48px | 2カラム維持 | 80px |
| Desktop (1200px+) | 72px | 非対称 | 120-160px |
9. Agent プロンプト例
ヒーロー:
背景 #0a0a0a, 100vh。見出し #ffffff, 72px, Playfair Display, uppercase, letter-spacing 6px。
サブタイトル rgba(255,255,255,0.60), 16px, Inter, weight 300, uppercase, letter-spacing 4px。
CTA: transparent + 1px solid rgba(255,255,255,0.40), 角丸 0px。製品グリッド:
2カラム、ギャップ 40px。画像 3:4。
製品名 #ffffff, 13px, uppercase, letter-spacing 2px。
価格 rgba(255,255,255,0.50), 16px, weight 300。エディトリアル:
左60% 画像、右40% #f5f0eb。テキスト中央寄せ。
タイトル #1a1a1a, 28px, Playfair Display, uppercase, letter-spacing 3px。
本文 #6b6b6b, 14px, Inter, weight 300, line-height 1.80。