DESCENTE（デサント） DESIGN.md

DESCENTE（https://www.descente.co.jp/）のデザイン仕様書。 日本発のスポーツウェアブランド。DESCENTE / DESCENTE ALLTERRAIN / Munsingwear 等を展開する企業のコーポレートサイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白背景 + ダークネイビー（#03062f）のテキストによる、ハイコントラストでエレガントなコーポレートデザイン。スポーツウェアブランドらしい力強さと、ファッション性の高い洗練を両立
• 密度: コンテンツ間の余白を十分に取り、ビジュアルを大きく見せるマガジン的レイアウト。テキストは控えめな密度
• キーワード: ダークネイビー、RivieraNights フォント、スポーツ × ファッション、ミニマル、ハイコントラスト
• 特徴:
  • 欧文に RivieraNights というカスタムフォントを使用。セリフ要素を持つエレガントな書体で、スポーツブランドに品格を与えている
  • 和文には Noto Sans JP をフォールバック。RivieraNights が和文をカバーしないため
  • ブランドカラーは #03062f（ダークネイビー）。純黒ではなく深い紺色でブランドの知性と品格を表現
  • セクション背景に #f5f5f5（ライトグレー）を使い、白との微細なコントラストで階層を作る
  • ナビゲーションの補助テキストに #888888 を使用
  • カルーセルのインジケーターは #e4e4e4（inactive）/ #000000（active）の丸ドット
  • ダークモードに対応したセクション（ブランド紹介）では #1c1b1f 背景 + 白テキスト

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Dark Navy (#03062f): メインのブランドカラー。見出し、ナビ、本文テキスト、ブランド紹介セクション背景に使用
• Dark Navy (85%) (rgba(3, 6, 47, 0.85)): オーバーレイ用の半透明バージョン

Neutral

CTA / Buttons

• サイト全体にフィル型ボタンは少ない。ナビゲーション中心のシンプルな構成
• メニューリンク: 背景 #f5f5f5 / テキスト #03062f / weight 700 / padding 7px 0px
• ニュースカテゴリバッジ: テキスト #000000 / border 1px solid #03062f / padding 5px 10px / 10px

Semantic（推奨値）

実サイトにはエラー／成功色は表面化していない。コーポレートサイト向けに推奨:

• Danger: #cf2e2e
• Success: #00d084
• Warning: #fcb900

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（RivieraNights のフォールバックとして）
• 明朝体: 使用しない

3.2 欧文フォント

• カスタム書体: RivieraNights — セリフ要素を持つエレガントなスポーツブランド書体
• フォールバック: Noto Sans JP 内の欧文グリフ → sans-serif

3.3 font-family 指定

css/* 全要素共通 */
font-family: RivieraNights, "Noto Sans JP", sans-serif;

フォールバックの考え方:

• RivieraNights は Web フォントとして配信されるカスタム書体
• 和文は Noto Sans JP のみ。シンプルな 2 フォント構成
• RivieraNights が読み込まれない場合、Noto Sans JP が欧文・和文の両方をカバー

代替フォント注記: RivieraNights はデサント専用のカスタムフォントのため外部では使用不可。代替として Cormorant Garamond（セリフ系の品格）または Inter（モダンサンセリフ）+ Noto Sans JP で雰囲気を再現可能（preview.html は Cormorant Garamond を使用）。

3.4 文字サイズ・ウェイト階層

実測値（トップ／ブランドページ、2026-05-09 取得）

3.5 行間・字間

• 本文の行間 (line-height): 1.5（24px / 16px）
• カード見出しの行間: 1.2（26.4px / 22px）— タイトにまとめる
• 字間 (letter-spacing): normal（全要素で letter-spacing の指定なし）

ガイドライン:

• letter-spacing を使わないクリーンなスタイル。フォント自体のメトリクスに依存
• カード見出しは行間 1.2 と狭めで、インパクトを出す

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

palt / kern の明示的な指定なし。

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Menu Link

• Background: #f5f5f5
• Text: #03062f
• Padding: 7px 0px
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 700

Category Badge

• Background: transparent
• Text: #000000
• Border: 1px solid #03062f
• Padding: 5px 10px
• Border Radius: 0px
• Font Size: 10px
• Font Weight: 400

Cards

• Background: image with overlay
• Border: none
• Border Radius: 0px（角丸なし）
• Text overlay: padding 0px 32px
• テキスト色: #ffffff（ダーク画像上）

Carousel Indicators

• Inactive: #e4e4e4 / border-radius: 100%
• Active: #000000 / border-radius: 100%

Navigation

• Background: #ffffff
• Height: 自動
• ロゴ: 画像 + h1（14px, 700）
• メニュー展開時: #f5f5f5 背景

5. Layout Principles

Spacing Scale

Container

• Max Width: フルスクリーン（ビジュアル重視）
• Content Padding: 16〜32px

Grid

• ブランドカード: 2〜3 カラム
• ニュースリスト: 1 カラム

6. Depth & Elevation

フラットデザインを徹底。ドロップシャドウは使用しない。

7. Do's and Don'ts

Do（推奨）

• テキスト色に #03062f（ダークネイビー）を使う。純黒 #000000 よりブランドに合う
• ビジュアルを大きく見せるフルブリード画像を活用する
• ダークセクションは #03062f または #1c1b1f を背景にし、白テキストで
• letter-spacing は normal のまま。フォントメトリクスに任せる
• 英語と日本語を併記するラベル（"BRANDSブランド"）はブランドのスタイル

Don't（禁止）

• 角丸を使わない（border-radius: 0px が基調。カルーセルドット以外）
• 派手なカラーアクセントを入れない（ダークネイビー + 白 + グレーの 3 色で構成）
• letter-spacing を広げない（RivieraNights の自然なスペーシングを活かす）
• ドロップシャドウを使わない（フラットデザイン）
• ゴシック体のみの font-family にしない（RivieraNights のセリフ要素がブランド資産）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• モバイルでは見出しサイズを 70〜80% に縮小
• カード H3 は 22px → 18px

9. Agent Prompt Guide

クイックリファレンス

Text Color: #03062f
Background: #ffffff
Surface: #f5f5f5
Dark Section BG: #1c1b1f
Gray Text: #888888
Font: RivieraNights, "Noto Sans JP", sans-serif
Body Size: 14px / Weight 400
Line Height: 1.5
Heading Weight: 700
Letter Spacing: normal
Border Radius: 0px

プロンプト例

DESCENTE のコーポレートサイトのデザインシステムに従って、ブランド紹介セクションを作成してください。
- テキスト色: #03062f（ダークネイビー）
- 背景: #ffffff（白）、セクション切り替えに #f5f5f5
- フォント: RivieraNights, "Noto Sans JP", sans-serif
- 見出しは 22px / weight 700 / line-height 1.2
- border-radius: 0px（角丸なし）
- ビジュアルを大きく見せるフルブリードレイアウト
- 英語と日本語のラベルを併記する