---
version: alpha
name: Gold Accent Premium Haircare LP
description: 明朝体と金グラデーションを軸に、白〜生成りの地へ深紅の価格訴求とピンクの特典帯を差し込む高級感重視の通販型ヘアケア LP。権威付けやランキング、ビフォーアフターを積み重ねる情報量の多い構成。
colors:
  primary: '#B58A69'
  secondary: '#C4AC90'
  cta: '#1E9A4A'
  on-cta: '#FBFBFB'
  accent-1: '#CF2D46'
  accent-2: '#8B1112'
  background: '#F8F8F8'
  background-alt: '#ECECEE'
  surface: '#F3EEE2'
  tint-1: '#F6DFE5'
  text: '#2E271F'
  text-body: '#463A38'
  dark-section: '#110A08'
  marker: '#EBEB73'
  cta-accessible: '#1A8540'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Playfair Display
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  benefit-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 400px
  price-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 120px
  tag-chip:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 28px
  gold-ribbon:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 48px
  laurel-badge:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    rounded: '{rounded.full}'
    height: 120px
  cycle-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 210px
  worry-brush:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 110px
---

# DESIGN.md — 金箔と濃紺ボトルの高級ヘアケア LP（Gold Accent Premium Haircare LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、情報量多め・訴求型、ラグジュアリー・ダーク
- **キーワード**: 金グラデーション・明朝体・月桂樹・艶髪写真・深紅の価格・権威訴求
- **地の質感**: シルク布・泡・オイル滴・大理石・コンクリートなど質感のある写真背景を多用。金はメタリックグラデーション。
- **形**: 角丸小さめのカード、円形バッジ、リボン帯、泡や布のふわっとした境界。
- **温度感**: 暖色寄り。金とベージュで温かく、悩みパートのみ灰色で冷たく落とす。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#B58A69` | 金（見出し・帯・バッジ） | 9% | 画素の主要色に補正 |
| `secondary` | `#C4AC90` | ベージュ茶（ブランドメッセージ地） | 8% | 画素の主要色に補正 |
| `cta` | `#1E9A4A` | 購入ボタン緑 | 1% | 推定 |
| `on-cta` | `#FBFBFB` | ボタン文字白／黄 | 0% | 画素の主要色に補正 |
| `accent-1` | `#CF2D46` | 深紅（価格・強調語） | 3% | 画素の実測 |
| `accent-2` | `#8B1112` | ワインレッド（限定バッジ・受賞地） | 5% | 画素の実測 |
| `background` | `#F8F8F8` | 白地 | 12% | 画素の実測 |
| `background-alt` | `#ECECEE` | ライトグレー地 | 11% | 画素の実測 |
| `surface` | `#F3EEE2` | 生成りカード | 6% | 画素の実測 |
| `tint-1` | `#F6DFE5` | ピンク特典帯 | 8% | 画素の実測 |
| `text` | `#2E271F` | 見出し黒 | 3% | 画素の実測 |
| `text-body` | `#463A38` | 本文こげ茶 | 2% | 画素の主要色に補正 |
| `dark-section` | `#110A08` | 暗色木目・悩み地 | 6% | 画素の主要色に補正 |
| `marker` | `#EBEB73` | 黄色マーカー | 0% | 画素の実測 |
| `cta-accessible` | `#1A8540` | AA を満たす補正値（計算） |  | 計算 |

- 地は白・ライトグレー・生成りを交互にし、特典セクションのみピンク地にする。
- 見出しや帯、月桂樹など装飾は金のメタリックグラデーションでまとめる。
- 価格・割引率・強調語は深紅に統一し、価格下に黄色マーカーを敷く。
- 悩みパートは灰色系の質感背景と黒い筆ブラシで暗く落とす。
- 受賞・店舗実績は赤カーテンや暗色木目の地で特別感を出す。
- 購入ボタンだけ鮮やかな緑にし、他の要素とはっきり区別する。
- `button-primary` は文字 `#FBFBFB` × 背景 `#1E9A4A` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1A8540`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 大数字・キャッチ（5大特典・累計数） | 明朝 | Shippori Mincho | 800 | 56px | 1.2 | 0.02em |
| `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 30px | 1.4 | 0.05em |
| `headline-md` | 特典項目・カード見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.02em |
| `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `accent` | 英字サブタイトル・手書き添え | 欧文セリフ | Playfair Display | 400 | 12px | 1.4 | 0.1em |
| `label-button` | CTA文字 | ゴシック | Noto Sans JP | 900 | 26px | 1.2 | 0.03em |

- 見出しは明朝体。重要語だけを大きくし、助詞は小さくして抑揚を付ける。
- 金文字はグラデーションにして、細い影で立体感を出す。
- 価格数字は明朝で大きく深紅にし、円・税込は小さく添える。
- 英字の小見出しを和文見出しの上下に小さく添える。
- 悩みパートは筆・手書き風書体で荒々しく見せる。
- ※注釈は小さなグレー文字で、該当ブロックの直下に置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。お届けサイクルなどは 3 列カード。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は全幅で、セクション間を背景写真でつなぐ。
- 特典・価格は白や生成りの浮いたカードにまとめる。
- 見出しは中央揃え。本文も基本は中央揃えにする。
- 実績や権威のブロックを連続させ、信頼を積み上げる。
- CTA の手前に価格の内訳・割引バッジを密に並べる。

## Elevation & Depth

- 価格カード・特典カードは柔らかいドロップシャドウで浮かせる。
- CTA ボタンは下方向の濃い影と光沢で立体的にする。
- 金バッジは影とハイライトでメダル風にする。
- ランキング画像は少しずつずらして重ね、影を付ける。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 商品・人物は切り抜き。悩み写真は円形切り抜き。ビフォーアフターは角形。
- **セクション境界**: 泡や布の波打つ境界、斜めの帯、上が丸いタブなど。
- CTA は角丸の大きなピル型にする。
- 特典番号は菱形の金バッジにする。
- 悩みワードは黒い筆ブラシの円形に載せる。
- 帯見出しは両端を切り込んだリボン形にする。

## Components

- **購入CTA**（`button-primary`）: 緑のグラデーションのピル型ボタン。白と黄の大文字に右矢印の円アイコンを付け、左上に金の丸バッジを重ねる。
- **特典リスト**（`benefit-list`）: 生成りのカードに金の菱形番号を並べ、点線で区切る。強調語は深紅にする。四隅に金の飾り罫を入れる。
- **価格ブロック**（`price-block`）: 取り消し線の通常価格から矢印でつなぎ、深紅の大きな価格を置く。下に黄色マーカー、横に赤い丸の割引バッジを付ける。
- **条件タグ**（`tag-chip`）: 深紅塗りと深紅枠のタグを 2 列で並べ、初回限定などの条件を示す。
- **金リボン見出し**（`gold-ribbon`）: 斜めにカットした金の帯に白い明朝文字を置く。
- **月桂樹メダル**（`laurel-badge`）: 左右を金の月桂樹で囲み、星と王冠を添えた受賞・実績の見出し。
- **お届けサイクルカード**（`cycle-card`）: 金のヘッダーに回数を入れ、商品写真・割引バッジ・価格・送料ラベルを縦に並べる。カード間は配送アイコンでつなぐ。
- **悩みブラシ円**（`worry-brush`）: 黒い筆ブラシの円に白い太字で悩みを書き、写真の周りに散らして配置する。

## Do's and Don'ts

**Do**
- 金はグラデーションで使い、フラットな黄色にはしない。
- 見出しは明朝体にして、重要語をサイズ差で強調する。
- 価格と割引率は深紅に統一する。
- 権威付け・ランキング・販売実績を写真付きで連続して見せる。
- 注釈は該当ブロックの直下に小さく置く。

**Don't**
- 丸ゴシックやポップな色で幼く見せない。
- 緑を CTA 以外に使わない。
- 白地だけの平板なセクションを続けない。
- 金と深紅以外の強調色を増やさない。
- 本文を左寄せの長文にしない。

## Page Structure

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

1. **キャンペーン帯**（期間限定のセット価格を告知する）: 若葉色の水彩地に明朝の見出し、商品の切り抜き、赤丸の限定バッジ、取り消し価格と深紅の価格を置く。
2. **ファーストビュー**（艶髪の世界観と実績を見せる）: 長い髪の後ろ姿を全幅で見せ、金の明朝キャッチを重ねる。受賞バッジ・プレゼント吹き出し・商品を下部に配置する。
3. **ベネフィット**（使用後の髪の状態を示す）: 大きな明朝見出しの下に、サロン施術の写真を枠付きで置く。
4. **ブランドメッセージ**（情緒的な共感をつくる）: ベージュのシルク布写真の上に、白文字の中央揃えで詩的な文章を置く。
5. **特典**（購入障壁を下げる）: 月桂樹の大見出しの下に、生成りカードで番号付きの特典を5つ並べる。
6. **プレゼント・価格・CTA**（オファーを提示して購入させる）: ピンク地に白カードを置き、セット内容・価格・条件タグ・お届けサイクル・緑の CTA を並べる。
7. **ビフォーアフター**（効果を実証する）: 手書き風の見出しと金リボンの下に、比較写真のスライダーと拡大の丸窓を置く。
8. **専門家推薦**（権威付けをする）: 金枠のカードに人物の切り抜きと経歴、コメント欄を入れる。
9. **受賞・店舗実績**（社会的な証明を示す）: 赤カーテン地にランキング画像を重ね、暗色木目の地に店舗写真を並べる。
10. **累計販売数**（人気を数字で示す）: 金の紙吹雪の背景に巨大な金の数字を置き、商品ボトルを並べる。
11. **悩みの提起**（髪の悩みを自分事にさせる）: 灰色コンクリート地に筆文字の見出しを置き、悩みワードを黒いブラシ円で散らす。
12. **原因解説**（ダメージの原因を理解させる）: 円形写真 4 枚で原因を示し、白いカードに髪の断面イラストを入れて図解する。
13. **理想と解決策**（独自処方を紹介する）: 黒髪写真の上に金文字を置き、金のオイル背景に商品と 2 つの丸い効果バッジを × でつなぐ。
14. **成分の秘密**（技術の根拠を詳しく示す）: 英字のラベルに番号を付けた見出しで、成分ごとに展開する。

## Imagery

- 艶のある黒髪のロングヘアを、後ろ姿の明るいスタジオ光で撮る。
- 濃紺に金の大理石模様のボトルを、タオルや布の上に置いて柔らかい光で撮る。
- シルク布・泡・金色のオイルの流体や滴を背景に使う。
- 悩みは灰色に寄せた写真で、パサついた髪を手で掴むカットにする。
- 月桂樹・王冠・星・紙吹雪の金装飾を添える。
- 髪の断面図は茶とクリーム色のシンプルなイラストで描く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央 750px 程度に SP のレイアウトをそのまま置き、左右に淡いグレーかベージュの地を敷く。
- 全幅写真は PC では左右に広げ、文字は中央の幅に収める。
- お届けサイクルや原因の写真は PC でも 3〜4 列を保つ。
- CTA は PC で最大幅 480px 程度に留める。

## 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-2049bd46`（元 LP の URL から採番）
- **元 LP**: https://cleosbeaute.com/lp?u=ST01C_IFFLFB4980_2403_001_sacchan00home
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。