---
version: alpha
name: Botanical Green and Gold Serif Haircare LP
description: 深い森の緑と受賞を示す金色を軸にした、植物由来のヘアケア商品の縦長 LP。見出しは明朝体で上品に組む。受賞実績・ランキング・クーポンといった訴求ブロックを何度も入れつつ、成分のこだわりを番号付きで説明する。最後はイラストで正しい使い方を解説して締める。
colors:
  primary: '#146C56'
  secondary: '#B8902F'
  tint-1: '#EDD9B5'
  background: '#FFFFFF'
  background-alt: '#EAEAEA'
  surface: '#F2EADF'
  dark-section: '#524E4B'
  on-dark: '#FFFFFF'
  cta: '#563624'
  on-cta: '#FFFFFF'
  text: '#2B2522'
  accent-1: '#769E93'
  accent-2: '#D34C6A'
  tint-2: '#FFFFFF'
  secondary-accessible: '#917225'
  accent-1-accessible: '#597E74'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Playfair Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.15em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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.sm}'
    height: 44px
  award-medal:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  ranking-band:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.display}'
    height: 200px
  point-label:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 24px
  worry-cloud:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 320px
  coupon-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 260px
  notice-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 220px
  howto-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 480px
  ingredient-circle:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 90px
---

# DESIGN.md — 深緑×金の明朝体で組む植物系ヘアケア LP（Botanical Green and Gold Serif Haircare LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: ナチュラル、上品・高級、情報量多め・訴求型
- **キーワード**: 森の緑・金の受賞メダル・明朝体見出し・植物と成分・ボトル写真・実績訴求
- **地の質感**: 森・木目・草原の写真を全幅に敷き、その上に白文字を重ねる。無地の面は白・薄グレー・生成りで落ち着かせる。
- **形**: 角はほぼ直角。四角い帯ラベルと円形の素材写真、円形の金メダルを組み合わせる。
- **温度感**: 緑の自然光によるやや涼しげな印象。金と木目茶で温かみを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#146C56` | こだわりセクションの深緑の地 | 15% | 画素の実測 |
| `secondary` | `#B8902F` | 受賞数字・No.1 の金文字 | 2% | 推定 |
| `tint-1` | `#EDD9B5` | 受賞の帯に使う淡い金ベージュ | 2% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 23% | 画素の実測 |
| `background-alt` | `#EAEAEA` | 使い方セクションの薄グレー地 | 10% | 画素の実測 |
| `surface` | `#F2EADF` | 悩み提起セクションの生成りベージュ地 | 5% | 画素の実測 |
| `dark-section` | `#524E4B` | まとめ帯のこげ茶グレー地 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 写真・暗い地の上の白文字 | 2% | 画素の主要色に補正 |
| `cta` | `#563624` | 購入ボタンの木目ブラウン | 0% | 画素の主要色に補正 |
| `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 |
| `text` | `#2B2522` | 見出し・本文の墨色 | 3% | 推定 |
| `accent-1` | `#769E93` | 悩み中心円のくすみグリーン | 0% | 画素の実測 |
| `accent-2` | `#D34C6A` | 使い方解説のピンク見出しとラベル | 0% | 画素の実測 |
| `tint-2` | `#FFFFFF` | 注意書きボックスの淡いピンク | 0% | 画素の実測 |
| `secondary-accessible` | `#917225` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#597E74` | AA を満たす補正値（計算） |  | 計算 |

- 地は白・薄グレー・生成りの 3 種で区切り、自然を見せる区間は全幅の写真か深緑のグラデーションにする。
- 金は受賞・ランキング・No.1 の数字と罫線だけに使い、本文には使わない。
- 深緑は成分のこだわりなど、商品の中核を語るセクションの地に使う。
- 購入ボタンは木目ブラウンにして、緑の地や写真から浮かせる。
- ピンクは使い方の解説パートだけで使い、ラベルや注意書きボックスに限る。
- 写真の上に置く文字は白にし、写真を暗めに落として読みやすくする。
- `award-medal` は文字 `#FFFFFF` × 背景 `#B8902F` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#917225`、4.53:1）を使う。
- `ranking-band` は文字 `#B8902F` × 背景 `#FFFFFF` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#917225`、4.53:1）を使う。
- `point-label` は文字 `#FFFFFF` × 背景 `#769E93` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#597E74`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 受賞の数字・大見出しの数字 | 明朝 | Shippori Mincho | 800 | 44px | 1.1 | 0em |
| `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.5 | 0.05em |
| `headline-md` | 番号付き特長などの小見出し | 明朝 | Noto Serif JP | 700 | 19px | 1.5 | 0.03em |
| `headline-sm` | 黄色やピンクで強調するサブコピー | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0em |
| `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em |
| `note` | ※ 注釈・調べ・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0em |
| `accent` | 英字のセクションラベル・受賞名 | 欧文セリフ | Playfair Display | 400 | 14px | 1.3 | 0.15em |
| `label-button` | 購入ボタンの文字 | 明朝 | Noto Serif JP | 700 | 15px | 1 | 0.05em |

- 見出しはすべて明朝体の太字で組み、本文はゴシック体にする。
- 受賞回数などの数字だけを 2〜3 倍に大きくし、金色で目立たせる。
- キーワードは引用符で囲むか、色を変えて強調する。
- 注釈は ※ と番号を付け、見出しのすぐ下に小さく添える。
- 英字ラベルはセリフ体にし、字間を広く空ける。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品紹介と成分説明では、写真とテキストを上下に積む。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションごとに地の色または写真を切り替え、区切りを明確にする。
- 受賞ブロックとクーポンブロックはページ内で 2 回繰り返す。
- 番号付きのこだわりは、番号・見出し・強調サブコピー・本文・図解の順に並べる。
- 素材写真は円形の写真を 3 つずつ横に並べ、下に名前を添える。
- 使い方解説は白いカードにし、線画イラストを左右交互に置く。

## Elevation & Depth

- 使い方解説の白カードは、薄い影で薄グレーの地から浮かせる。
- ボトルの写真には床に落ちる柔らかい影を付ける。
- 購入ボタンは木目の質感と軽い立体感を持たせる。
- それ以外はフラットにして、影を使わない。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 背景写真は全幅の長方形にする。素材写真は正円、商品は白背景の切り抜きにする。
- **セクション境界**: 基本は直線で区切る。ポイント一覧の間には、下向き三角の切り欠きが付いた細線を入れる。
- ラベルは角丸なしの長方形の帯にする。
- 受賞マークは円形の金メダルと月桂樹の組み合わせにする。
- 悩みの中心には大きな円を置き、その周りに悩みの言葉を散らす。

## Components

- **購入ボタン**（`button-primary`）: 木目ブラウンの長方形ボタン。右端に矢印を付け、商品価格の下に置く。
- **受賞メダル**（`award-medal`）: 金の円形メダルに順位と国名を入れ、複数をまとめて並べる。
- **ランキング実績ブロック**（`ranking-band`）: 金の罫線で上下を囲む。大きな金数字と、小さな縦長の金バッジで回数を示す。
- **POINT 番号ラベル**（`point-label`）: くすみ緑の長方形に英字で POINT と番号を入れ、右にアイコンと見出しを置く。
- **悩み散布図**（`worry-cloud`）: 中央の円に問いかけを入れる。周囲に悩みの短文を散らし、本音部分だけを太字にする。
- **クーポン告知バナー**（`coupon-banner`）: 木目写真の上に、緑の帯見出し・大きな割引額・白いクーポン券を重ねる。
- **お知らせ枠**（`notice-box`）: 黒い細線で囲む白枠。見出しは明朝体にし、重要な一文に黄色マーカーを引く。
- **使い方解説カード**（`howto-card`）: 白いカードにピンクのラベル、線画イラスト、淡いピンクの注意書きボックスを入れる。
- **素材の円形写真**（`ingredient-circle`）: 直径 70px ほどの円形写真の下に、素材名を小さく添える。

## Do's and Don'ts

**Do**
- 見出しは明朝体の太字にし、数字を大きく金色で見せる。
- 森や草原の写真を全幅に敷き、白文字の見出しを重ねる。
- 成分の説明は番号・強調サブコピー・図解のセットで構成する。
- 主張には ※ 注釈で根拠や出典を添える。
- 購入ボタンは商品写真と価格のすぐ隣に置く。

**Don't**
- ビビッドな原色やネオン色を使わない。
- ボタンをピル型や丸ゴシックにしない。ポップに寄りすぎるため。
- 金色を本文や広い面に使わない。
- ピンクを使い方解説以外に広げない。
- 写真の上に暗く落とさないまま黒文字を置かない。

## Page Structure

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

1. **ファーストビュー**（ブランドの世界観と実績を一目で伝える）: 森の写真の上に、明朝体のキャッチ、ボトル、成分率の大きな数字、受賞メダルを配置する。
2. **カテゴリ提示帯**（新しい種類の商品だと位置づける）: 淡い金の帯に明朝体の見出しと説明 2 行、注釈を入れる。
3. **受賞実績**（海外での受賞で信頼を得る）: 白地に大きな金数字を置き、劇場写真の上に受賞メダルを重ねる。
4. **ランキング実績**（国内の販売実績を示す）: 金の罫線で囲み、王冠付きの金メダルと大きな回数表示を並べる。
5. **クーポン・お知らせ**（購入を後押しし、在庫状況を知らせる）: 木目写真のバナーにクーポン券を重ね、その下に細線枠のお知らせを置く。
6. **商品紹介と購入**（価格を示して購入へ誘導する）: 白背景のボトル写真、商品名、価格を並べ、ブラウンの購入ボタンを置く。
7. **ブランドコンセプト・動画**（思想を伝える）: 森の写真に白文字の和英見出しを置き、その下に動画枠を入れる。
8. **悩みの提起**（読み手の不満を言語化する）: 生成りの地に明朝体の見出しを置き、中央の円の周りに悩みを散らす。
9. **特長と比較グラフ**（使用感の優位性を示す）: 夕景の写真の上に見出しと本文を置き、白枠の棒グラフでブランドを緑で示す。
10. **安さの理由**（価格への納得感をつくる）: 薄グレーの地に、POINT ラベルとアイコン付きの 4 項目を三角切り欠きの線で区切って並べる。
11. **4 つのこだわり**（成分と香りの価値を詳しく伝える）: 深緑のグラデーション地に、番号付き見出し、円形素材写真、図解、人物写真を入れる。
12. **正しい使い方**（使用方法を教えて満足度を高める）: 薄グレーの地に白カードを置き、線画イラスト、ピンクのラベル、注意書きボックスを組み合わせる。

## Imagery

- 森・葉・草原を逆光の自然光で撮り、深い緑のトーンにまとめる。
- ボトルは白とクリーム色のシンプルなデザインで、白背景または苔や木目の上に置いて撮る。
- 白いワンピースの女性を森の中に立たせ、柔らかい光で撮る。
- 素材（果実・植物・ナッツ）は寄りで撮り、円形に切り抜く。
- 使い方の解説は、黒い細線だけで描いた人物の線画にする。
- 受賞表現は金の月桂樹・王冠・メダルの装飾で統一する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は幅約 730px の固定幅で中央に置き、左右の余白は薄グレーで埋めている。
- SP では写真と文字を重ねたブロックを、写真の下に文字を置く形に分ける。
- 受賞メダルは SP では 2〜3 個ずつ折り返して並べる。
- 悩み散布図は SP では、中央の円の下に悩みを縦のリストで並べる。
- 比較グラフは SP では横スクロールにせず、項目数を絞って縦に長くする。
- 購入ボタンは 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-05e0eac3`（元 LP の URL から採番）
- **元 LP**: http://item.rakuten.co.jp/kobe-beauty-labo/bota-01/?s-id=top_beta04_rk_hashist
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-14、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。