---
version: alpha
name: Classic Gentleman Fragrance Body Care LP
description: 濃紺の FV、幾何学柄のグレー地、チャコールとオリーブのパネルを重ねたクラシックな男性向けボディケア LP。金色の額縁装飾と欧文セリフ見出しで、英国紳士風の格調を出している。
colors:
  primary: '#091135'
  dark-section: '#33404A'
  secondary: '#4D4A3D'
  cta: '#9D9163'
  on-cta: '#F6F4F3'
  background: '#DAD5D9'
  background-alt: '#A29DA2'
  tint-1: '#CBC4AB'
  surface: '#DED9DD'
  accent-1: '#B09A62'
  text: '#272729'
  on-dark: '#EEF3F7'
  accent-2: '#06C755'
  cta-accessible: '#79704C'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  accent:
    fontFamily: Playfair Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 28px
  section: 50px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-cart:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 38px
  link-detail:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 22px
  button-soldout:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 38px
  panel-framed:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 1200px
  card-mini-chain:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 180px
  heading-step:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 90px
  accordion-fragrance:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 50px
  carousel-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 560px
  banner-line:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 250px
---

# DESIGN.md — 紺×チャコール×金の紳士向け香りコスメ LP（Classic Gentleman Fragrance Body Care LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、レトロ
- **キーワード**: 英国紳士・クラシック・額縁装飾・幾何学パターン・金アクセント・欧文セリフ
- **地の質感**: 菱形・格子の幾何学柄を薄く敷いた地に、マットな単色パネルを重ねる。チェーン柄の細い帯で区切る。
- **形**: 角丸なしの長方形パネル。四隅に金の唐草飾り。V 字の切り込みでステップを区切る。
- **温度感**: 寒色寄りのニュートラル。紺・チャコールに金とベージュで少し温かみを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#091135` | FV の濃紺地 | 7% | 画素の実測 |
| `dark-section` | `#33404A` | ボディ商品パネル地のチャコール | 16% | 画素の実測 |
| `secondary` | `#4D4A3D` | フェイス商品パネルのオリーブブラウン | 9% | 画素の実測 |
| `cta` | `#9D9163` | カートボタンのくすみ金 | 2% | 画素の実測 |
| `on-cta` | `#F6F4F3` | カートボタン文字 | 0% | 画素の主要色に補正 |
| `background` | `#DAD5D9` | 香り説明セクションの薄グレー柄地 | 12% | 画素の実測 |
| `background-alt` | `#A29DA2` | ボディ枠外の幾何学グレー地 | 12% | 画素の実測 |
| `tint-1` | `#CBC4AB` | フェイスセクションのベージュ柄地 | 8% | 画素の実測 |
| `surface` | `#DED9DD` | その他ラインナップの淡ラベンダーグレーカード | 6% | 画素の実測 |
| `accent-1` | `#B09A62` | 額縁の四隅装飾・境界線の金 | 0% | 推定 |
| `text` | `#272729` | 明るい地の見出し・本文 | 2% | 画素の実測 |
| `on-dark` | `#EEF3F7` | 暗いパネル上の白文字 | 2% | 画素の実測 |
| `accent-2` | `#06C755` | LINE 友だち追加ボタン | 1% | 推定 |
| `cta-accessible` | `#79704C` | AA を満たす補正値（計算） |  | 計算 |

- 明るいセクション（グレー・ベージュ）と暗いパネル（チャコール・オリーブ）を交互に重ね、奥行きを出す。
- セクション地には同系色の幾何学柄を薄く敷く。単色ベタ地にしない。
- 購入ボタンだけをくすみ金で塗る。鮮やかな黄色やオレンジは使わない。
- 金は額縁の四隅飾りと細い線に限って使う。
- 暗いパネル上の文字は白、明るい地の文字は墨色 #2F2F2F にする。
- 在庫切れボタンは白地＋黒文字にして、購入ボタンと区別する。
- `button-cart` は文字 `#F6F4F3` × 背景 `#9D9163` のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#79704C`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の欧文タイトル（装飾セリフ） | 欧文セリフ | Playfair Display | 700 | 48px | 1.1 | 0.04em |
| `headline-lg` | セクションの欧文大見出し | 欧文セリフ | Playfair Display | 700 | 28px | 1.2 | 0.0em |
| `headline-md` | ステップの和文見出し（明朝の大きな動詞） | 明朝 | Noto Serif JP | 700 | 30px | 1.3 | 0.05em |
| `headline-sm` | 商品キャッチ 2〜3 行と FV のサブコピー | 明朝 | Noto Serif JP | 700 | 17px | 1.5 | 0.02em |
| `body-md` | 香りの説明文・商品名・価格 | ゴシック | Noto Sans JP | 400 | 14px | 1.6 | 0.04em |
| `accent` | Step 番号ラベル・背景の大きな斜体数字 | 欧文セリフ | Playfair Display | 400 | 14px | 1.2 | 0.02em |
| `label-button` | カートボタン・詳細リンク | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.08em |
| `note` | 注釈・画像イメージ表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |

- 大見出しは欧文セリフの大文字で書き、下に小さな和文の補足を添える。
- 和文の見出しとキャッチは明朝の太字にして格調を出す。
- 商品名・価格・ボタンはゴシックで中央揃えにする。
- ステップ番号は背景に大きく薄い斜体数字で置き、見出しと重ねる。
- 本文は中央揃えで 1 行を短くし、改行して整える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、中央揃え
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 50px、基本単位 8px、カード内 28px（375px 幅換算）
- セクション内に幅 88% の暗いパネルを置き、左右に柄地をのぞかせる。
- パネル内は見出し→写真→商品名・価格→ボタン→詳細リンクの順に縦に並べる。
- ミニサイズ商品はチェーン柄の額縁内に、画像左・情報右の横並びで置く。
- セクションの境目には細いチェーン柄の帯を入れる。
- その他ラインナップは円形写真のカルーセルにし、左右に矢印を置く。

## Elevation & Depth

- 影はほぼ使わない。面の明暗差と枠線で階層を表現する。
- 額縁は二重線か、銀のチェーン柄ボーダーで立体感を出す。
- カードは柄地の上にベタ色で重ねるだけにする。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品写真は正方形の角切り。カルーセルの写真だけ円形に抜く。
- **セクション境界**: チェーン柄の細い帯と、パネル内の V 字（シェブロン）の切り込み
- ボタンは角丸なしの長方形にする。
- パネルの四隅に金の唐草コーナー飾りを置く。
- カードの角は八角形風に斜めに落としてもよい。
- LINE ボタンだけは小さな角丸（約 6px）を許容する。

## Components

- **カートボタン**（`button-cart`）: くすみ金の長方形で白文字、右端に＞を付ける。幅は約 55%。
- **詳細リンク**（`link-detail`）: 下線付きの太字テキストに、丸い矢印アイコンを添える。
- **在庫なしボタン**（`button-soldout`）: 白地に黒文字の無効状態ボタン。
- **額縁パネル**（`panel-framed`）: 暗色の大パネル。四隅に金の装飾を置き、内側に商品ステップを並べる。
- **チェーン枠ミニ商品カード**（`card-mini-chain`）: 銀のチェーン柄で囲んだ黒カード。左に商品画像、右に価格とボタンを置く。
- **ステップ見出し**（`heading-step`）: 小さな「- Step n -」の上に大きな明朝の動詞を置き、背後に薄い斜体数字を重ねる。
- **香り詳細アコーディオン**（`accordion-fragrance`）: 上下を細線で区切った開閉行。開くと香りピラミッド図を表示する。
- **円形写真カルーセル**（`carousel-circle`）: 白い円に商品写真を載せ、左右に細い矢印、下にドットを置く。
- **LINE 登録バナー**（`banner-line`）: チェーン枠のグレー箱に、緑の LINE ボタンを置く。

## Do's and Don'ts

**Do**
- 地には幾何学柄を敷き、その上に無地パネルを重ねる。
- 見出しは欧文セリフ大文字＋和文の補足の 2 段にする。
- 金は CTA と装飾線だけに絞る。
- 商品ブロックは中央揃えの縦積みで統一する。
- セクションの境目にはチェーン柄帯や V 字の切り込みを入れる。

**Don't**
- ピル型や大きな角丸のボタンにしない。
- ビビッドな赤・黄色で値引きを強く訴求しない。
- 丸ゴシックや手書き書体を使わない。
- ドロップシャドウを強くかけない。
- LINE の緑以外に彩度の高い色を足さない。

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（シリーズの世界観と香りの方向性を伝える）: 濃紺のパネル壁を背景に、商品のギフトセットを写真で見せる。上部に装飾罫と欧文セリフのタイトル、明朝のサブコピーを置く。
2. **香りの紹介**（香りの特徴とノート構成を説明する）: 薄グレーの柄地に欧文見出し、アコーディオン、中央揃えの説明文を置く。素材写真とピラミッド図で香調を示す。
3. **ボディ商品ライン（ステップ）**（使う順番に沿って商品を提案する）: グレー柄地にチャコールの額縁パネルを置く。Step1・2 を V 字で区切り、各ステップに写真・価格・カートボタン・ミニサイズカードを並べる。
4. **フェイス商品ライン**（顔用アイテムを訴求する）: ベージュ柄地に、オリーブブラウンの額縁パネルを商品ごとに置く。明朝のキャッチ、写真、価格、ボタンを縦に並べる。
5. **その他ラインナップ**（同じ香りの雑貨商品へ回遊させる）: 黒の格子柄地に、角を落とした淡グレーカードを置く。中は円形写真のカルーセル。
6. **LINE 登録**（公式アカウントの友だちを獲得する）: チャコール地に、チェーン枠のグレー箱と緑の LINE ボタンを置く。
7. **シェア**（SNS での拡散を促す）: グレーの幾何学柄地に、二重線の枠の箱を置く。欧文見出しの下に小さなシェアボタンを並べる。
8. **フッター**（サイトナビと SNS 導線を示す）: 生成り地にアコーディオン型のメニューを並べ、白地に SNS アイコンとコピーライトを置く。

## Imagery

- 商品は白いタイル壁や大理石の上で、銀のトレイ・懐中時計・カフスなど紳士小物と一緒に撮る。
- 暗めのカットは黒い布と金具を背景にし、ローキーで光沢を出す。
- 香りの素材は白背景の切り抜き写真にし、小さく並べる。
- 飛び散る柑橘などの動きのある素材は、淡いグレーのグラデーション背景で撮る。
- 装飾は唐草のコーナー飾り、チェーン柄ボーダー、細い渦巻き罫を使う。
- 背景柄は菱形・四角の格子を重ねた、低コントラストの幾何学柄にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅約 60% のパネルを中央に置き、左右に柄地を広く見せる。
- PC の FV は横長の帯にし、左にタイトル、右に商品写真を置く。
- PC の商品ステップは写真左・テキスト右の 2 カラムにする。
- PC のカルーセルは 3 点を同時に表示する。
- PC のフッターは 5 列のリンク一覧と SNS 列にする。

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-4ba8fdfa`（元 LP の URL から採番）
- **元 LP**: https://www.sabon.co.jp/special_contents/Gentleman
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（10/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。