---
version: alpha
name: Warm Apricot Gradient Hair Color Treatment LP
description: PCでは中央に約300pxの縦長カラムを置き、外側は杏色の地でフレームにする。白髪染めトリートメントのLP。上から下へ杏色→淡いピーチ→生成りと色が移っていく。間に黒茶の暗いセクションとグレージュの帯をはさんでメリハリを出す。見出しは明朝、強調はオレンジのゴシック。円形バッジ、ピル型ラベル、オレンジ線の手順枠で成分と使い方を丁寧に伝える。
colors:
  primary: '#F07A1E'
  background: '#FCBA7E'
  background-alt: '#FEEBD2'
  surface: '#FEFEFC'
  tint-1: '#F9F6F3'
  dark-section: '#45423C'
  on-dark: '#DBDBD7'
  secondary: '#5A3214'
  accent-1: '#A49583'
  text: '#3C2814'
  text-body: '#4A4440'
  line: '#F2B176'
  accent-2: '#44ADDB'
  text-muted: '#8A8078'
  primary-accessible: '#99490A'
  text-muted-accessible: '#7D736C'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  label-pill-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 28px
  label-point:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 26px
  circle-badge:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 90px
  worry-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 80px
  step-box:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 32px
  ingredient-circle:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 100px
  free-badge:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  faq-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 200px
---

# DESIGN.md — 杏色グラデと黒茶の白髪ケア LP（Warm Apricot Gradient Hair Color Treatment LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
- **キーワード**: 杏色グラデーション・明朝見出し・円形バッジ・黒茶の悩みセクション・オレンジ強調・ラボ感
- **地の質感**: 柔らかい光のグラデーション地。ガラスの実験器具や水滴・分子の写真が透明感を出す
- **形**: 円形の吹き出しや成分写真、ピル型ラベル、細いオレンジ線の角ばった手順枠を組み合わせる
- **温度感**: 暖色寄り。杏色とオレンジの温かさを黒茶で引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F07A1E` | ブランドのオレンジ（ラベル・強調文字） | 4% | 推定 |
| `background` | `#FCBA7E` | 外側の杏色の地 | 30% | 画素の実測 |
| `background-alt` | `#FEEBD2` | 本文カラムの淡いピーチの地 | 18% | 画素の実測 |
| `surface` | `#FEFEFC` | カード・FAQの白い面 | 9% | 画素の実測 |
| `tint-1` | `#F9F6F3` | 生成りのポイントセクションの地 | 6% | 画素の実測 |
| `dark-section` | `#45423C` | 悩み提起の黒茶の地 | 7% | 画素の実測 |
| `on-dark` | `#DBDBD7` | 暗い地の上の白文字 | 1% | 画素の実測 |
| `secondary` | `#5A3214` | POINTラベルや放置時間ラベルの焦げ茶 | 1% | 推定 |
| `accent-1` | `#A49583` | 使い方セクションの帯のグレージュ | 5% | 画素の実測 |
| `text` | `#3C2814` | 見出しの濃い茶 | 2% | 画素の実測 |
| `text-body` | `#4A4440` | 本文のグレー | 3% | 推定 |
| `line` | `#F2B176` | 手順枠・FAQ区切りのオレンジ線 | 1% | 画素の主要色に補正 |
| `accent-2` | `#44ADDB` | 補修ケアを示す水色 | 0% | 画素の実測 |
| `text-muted` | `#8A8078` | 注釈の薄いグレー | 1% | 推定 |
| `primary-accessible` | `#99490A` | AA を満たす補正値（計算） |  | 計算 |
| `text-muted-accessible` | `#7D736C` | AA を満たす補正値（計算） |  | 計算 |

- 地は杏色→ピーチ→生成りと、下に行くほど明るくするグラデーションにする
- 悩みの提起と概念説明だけ黒茶の暗い地にして、空気を切り替える
- 強調語はオレンジのゴシック体にし、残りの文は茶色で書く
- ラベルは2色を使い分ける。主はオレンジのピル、補助は焦げ茶のピル
- ケアの種類は水色とオレンジの2色で区別する
- カードとFAQは白い面にし、オレンジの細線で区切る
- `label-pill-primary` は文字 `#DBDBD7` × 背景 `#F07A1E` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#99490A`、4.57:1）を使う。
- `free-badge` は文字 `#8A8078` × 背景 `#FEFEFC` のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7D736C`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 概念名などの大見出し | 明朝 | Shippori Mincho | 500 | 40px | 1.3 | 0.05em |
| `headline-lg` | セクションの見出し | 明朝 | Noto Serif JP | 500 | 26px | 1.4 | 0.05em |
| `headline-md` | オレンジで強調する見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.03em |
| `headline-sm` | オレンジ太字のリード文・FAQの質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em |
| `body-md` | 本文・回答 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em |
| `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `accent` | 英字のサブ見出し・FAQ見出し | 欧文サンセリフ | Montserrat | 500 | 16px | 1.2 | 0.08em |
| `label-button` | ピルラベル・手順枠の文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.3 | 0.03em |

- 大見出しは明朝。キーワードだけ文字を大きくしてジャンプ率をつける
- 文中の強調はオレンジの太字ゴシックにする
- 注釈は※番号を付けて小さく添える
- 見出しは中央揃え、本文やFAQは左揃え
- 日本語の見出しの下に英字のサブ見出しを小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分は 2 列、髪の長さ別の使用量は 3 列のグリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションごとに地の色を変え、余白でつなぐ
- 見出しは中央揃えにし、その下にビジュアルを大きく置く
- 手順は全幅の枠を縦に積む
- 背景に下向きの大きな矢印を薄く敷き、手順の流れを見せる
- FAQは白いカードを縦に並べる

## Elevation & Depth

- 白カードには薄い影（0 2px 8px rgba(0,0,0,0.08)）を付ける
- 円形バッジは白地に細い縁取りと柔らかな影
- 写真カードは角丸にして軽く浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 成分やビフォーアフターは円形に切り抜く。髪の写真は角丸の長方形
- **セクション境界**: 直線で地の色を切り替える。手順セクションの末尾は三角の矢印
- 悩みや特長は円形の吹き出しに入れる
- ラベルはすべてピル型
- 手順枠は角丸なしでオレンジの細線
- 配合していない成分は、円の上にオレンジの斜線を引いて示す

## Components

- **オレンジのピルラベル**（`label-pill-primary`）: 商品名や放置時間を書く、白文字の帯
- **POINT番号ラベル**（`label-point`）: 焦げ茶のピルに英字で番号を入れる
- **円形訴求バッジ**（`circle-badge`）: 白い円に数字や利点を明朝で入れる
- **悩みの円吹き出し**（`worry-bubble`）: 白い円にチェックアイコンと短い悩みを入れ、暗い写真の上に散らす
- **手順枠**（`step-box`）: オレンジ線の長方形に手順を1行ずつ書き、縦に積む
- **成分の円写真**（`ingredient-circle`）: 成分の写真を円形に切り抜き、下に成分名を添える
- **無添加の斜線バッジ**（`free-badge`）: 細い線の円に成分名を入れ、オレンジの斜線を重ねる
- **FAQカード**（`faq-card`）: 白いカードの上段にオレンジでQ、線で区切って下段にA

## Do's and Don'ts

**Do**
- 地は暖色の淡いグラデーションでつなぐ
- 強調語はオレンジに限る
- 見出しは明朝で上品に組む
- 根拠や成分は円形の写真とアイコンで見せる
- 注釈を※番号で丁寧に添える

**Don't**
- 寒色を地に使わない
- 見出しを太いゴシックだけで組まない
- ボタンや面に強い影を付けない
- オレンジをベタ面で大きく使いすぎない
- 暗いセクションを連続させない

## Page Structure

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

1. **ファーストビュー**（新しさと商品の価値を示す）: 杏色の地に実験器具と商品の写真。明朝のコピー、円形バッジ、オレンジのピル帯を重ねる
2. **カラーラインナップ**（色の選択肢を見せる）: ピーチの地に商品を3つ並べ、下に色見本の髪の写真と色名の帯
3. **悩みの提起**（既存品への不満に共感する）: 黒茶の地で、髪の写真の上に悩みの円吹き出しを5つ散らす
4. **概念説明**（髪の状態の原因を教える）: 暗い地に明朝の大見出しと、断面の拡大図を入れた吹き出し
5. **開発背景**（研究の裏付けを示す）: 白衣の研究者の写真と企業ロゴを置き、白い地で信頼感を出す
6. **効果訴求**（使用前後の違いを見せる）: 円形のビフォーアフター写真を中央の矢印でつなぎ、両側に丸ラベル
7. **特長まとめ**（3つの価値を要約する）: 円を3つ横に並べ、中央の円だけオレンジで塗る
8. **特長詳細**（作用の仕組みと成分を説明する）: POINTラベルの下に図解を置き、成分は2×2の円写真
9. **香り・付属品**（使い心地を伝える）: 花と商品のイメージ写真に、オレンジの線枠の説明を添える
10. **使用量・頻度**（使い方の目安を示す）: 髪の長さ別の線画イラストを3列に並べ、グレージュの帯にモデル写真を置く
11. **使い方の手順**（2通りの使い方を案内する）: アイコンと明朝の見出しの下に、手順枠を縦に積み、薄い矢印を背景に敷く
12. **無添加訴求**（安心感を与える）: 濃い緑の葉の写真の上に白いカードを置き、斜線バッジを6つ並べる
13. **よくある質問**（不安を解消する）: オレンジの英字見出しの下に、白いFAQカードを縦に並べる

## Imagery

- 商品は暖色の逆光のもとで、ガラスの実験器具と一緒に撮る
- 髪の写真は艶のある黒髪のクローズアップ
- 成分は素材や分子模型を真上から撮り、円形に切り抜く
- 背景に水滴や分子の球を淡くぼかして散らし、透明感を出す
- 髪型の使用量は細い線画のシンプルなイラストで描く
- 研究シーンは白衣の女性を明るいトーンで撮る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは約640px幅の中央カラムにSPの構成をそのまま入れる
- PCのカラムの外側は杏色系の単色で埋め、下に行くほど明るくする
- SPでは内容を全幅にし、グリッドの列数はPCと同じに保つ
- SPでは円吹き出しを小さくし、重なりを避ける

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