---
version: alpha
name: Sage and Amber Herbal Bath Product LP
description: くすんだセージグリーンと琥珀オレンジを2種の商品に割り当てた入浴剤LP。湯気・泡・生薬の写真を全面に敷き、白抜きの細い明朝体で静かに語りかける。効能は角丸ラベルとドットリストで整理し、穏やかなバスタイムの空気感を保つ。
colors:
  primary: '#83A585'
  secondary: '#F2B35C'
  background: '#A59787'
  background-alt: '#E4EADC'
  accent-1: '#3E8A86'
  accent-2: '#CD7B54'
  cta: '#D3833C'
  on-cta: '#FFFFFF'
  on-dark: '#FAFAF5'
  text: '#3A3632'
  accent-3: '#C1865C'
  surface: '#F4F1EA'
  tint-1: '#CCE3D3'
  tint-2: '#E4955C'
  background-accessible: '#AA9D8E'
  primary-accessible: '#4C694E'
  accent-1-accessible: '#387E7A'
  cta-accessible: '#AB6527'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.15em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 0px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  circle-badge:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  effect-label:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 24px
  effect-list-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 90px
  column-frame:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 420px
  check-list:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 100px
  ingredient-strip:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 70px
  step-card:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    height: 72px
  scent-pyramid:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 120px
---

# DESIGN.md — セージ緑×琥珀色の和漢ハーブ入浴剤LP（Sage and Amber Herbal Bath Product LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、和風
- **キーワード**: 和漢ハーブ・湯気と泡・2色の対比・白抜き明朝・生薬の静物写真・温浴ケア
- **地の質感**: 泡・水面・湯気のにじみがある写真をセクション背景に全面で使う。光が柔らかく、粒子感のあるしっとりした質感。
- **形**: 基本は直線で区切った全幅ブロック。丸い錠剤のモチーフ、円形バッジ、小さな角丸ラベルがアクセントになる。
- **温度感**: 緑は清涼、オレンジは温もり。全体はくすみ寄りの中間〜暖色。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#83A585` | 緑系商品のブランド色・セクション地 | 22% | 画素の主要色に補正 |
| `secondary` | `#F2B35C` | オレンジ系商品の地色・温かさの表現 | 20% | 画素の実測 |
| `background` | `#A59787` | PC時のコンテンツ外の背景 | 30% | 画素の主要色に補正 |
| `background-alt` | `#E4EADC` | 悩み選択・香り紹介の淡いクリーム地 | 6% | 画素の実測 |
| `accent-1` | `#3E8A86` | 緑商品の効能ラベル（くすんだティール） | 1% | 推定 |
| `accent-2` | `#CD7B54` | オレンジ商品のラベル（テラコッタ） | 2% | 画素の実測 |
| `cta` | `#D3833C` | 手順セクション帯・強調の焼きオレンジ | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | オレンジ帯上の白文字 | 0% | 推定 |
| `on-dark` | `#FAFAF5` | 写真上の白抜き見出し | 2% | 推定 |
| `text` | `#3A3632` | 淡い地の上の見出し・本文 | 2% | 推定 |
| `accent-3` | `#C1865C` | オレンジ系の大見出し文字 | 1% | 画素の実測 |
| `surface` | `#F4F1EA` | 効能リスト・成分帯の半透明白パネル | 3% | 推定 |
| `tint-1` | `#CCE3D3` | 円形バッジの淡いミント | 0% | 画素の実測 |
| `tint-2` | `#E4955C` | 円形バッジのサーモン | 0% | 画素の実測 |
| `background-accessible` | `#AA9D8E` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#4C694E` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#387E7A` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#AB6527` | AA を満たす補正値（計算） |  | 計算 |

- 緑系とオレンジ系を2商品に1対1で割り当て、セクションごとに交互に切り替える
- 背景は単色ではなく、その色味の写真やぼかしグラデーションで敷く
- 写真上の見出しは白抜き＋薄い影で可読性を確保する
- ラベルは緑商品＝くすんだティール、オレンジ商品＝テラコッタで色分けする
- 淡いクリーム地は比較・香り紹介など情報整理セクションのみに使う
- 彩度の高い原色や純黒は使わず、くすみトーンで統一する
- `page` は文字 `#3A3632` × 背景 `#A59787` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#AA9D8E`、4.52:1）を使う。
- `circle-badge` は文字 `#83A585` × 背景 `#CCE3D3` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.51:1）を使う。
- `effect-label` は文字 `#FAFAF5` × 背景 `#3E8A86` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#387E7A`、4.52:1）を使う。
- `column-frame` は文字 `#FAFAF5` × 背景 `#83A585` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.55:1）を使う。
- `step-card` は文字 `#FFFFFF` × 背景 `#D3833C` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB6527`、4.54:1）を使う。
- `scent-pyramid` は文字 `#FAFAF5` × 背景 `#83A585` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4C694E`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 写真上の大見出し（白抜き） | 明朝 | Shippori Mincho | 500 | 34px | 1.3 | 0.08em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 26px | 1.4 | 0.08em |
| `headline-md` | 商品別の効能見出し・比較見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.05em |
| `headline-sm` | 見出し上の小さなリード | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.5 | 0.1em |
| `body-md` | 説明文・手順本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em |
| `note` | 注釈・成分表記・イメージ注記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0em |
| `accent` | STEP表記・欧文の小ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.15em |
| `label-button` | 効能ラベル・商品名ラベル | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.3 | 0.05em |

- 情緒的な大見出しは細めの明朝、機能説明はゴシックで役割を分ける
- 大見出しは2行に分けて中央揃えにする
- 注釈記号（※）を見出し右肩に小さく付ける
- 写真上の白文字は細いウェイトでも影を付けて沈ませない
- 字間はやや広めにとり、静かな印象を保つ
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。比較・悩み選択は 2 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションは隙間なく全幅写真ブロックを縦に積む
- 各ブロックは上部に見出し、中央に主役写真、下部に情報パネルの順
- 2商品の比較は左右に緑／オレンジを並べる
- 効能リストは半透明パネル内に3列のドットリストで詰める
- 注釈は各ブロック最下部に小さく入れる

## Elevation & Depth

- 影はほぼ使わず、写真の奥行きで立体感を出す
- 情報パネルは白の半透明（不透明度80%前後）で背景写真を透かす
- 白抜き文字に柔らかなドロップシャドウを付ける

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: 全幅の矩形で切り抜き、錠剤や容器は切り抜き合成で配置する
- **セクション境界**: 直線で切り替え。水面ラインや泡で上下をつなぐ場合もある
- 特長のバッジは正円で3つ横並びにする
- ラベルは角ほぼ直角の小さな帯にする
- 香りのノートは三角形（ピラミッド）図で表す
- 手順番号は白い正円に入れる

## Components

- **円形特長バッジ**（`circle-badge`）: 半透明の正円に特長を2行で入れ、3つ横並びにする
- **効能ラベル帯**（`effect-label`）: 商品色の帯に悩み・効能をスラッシュ区切りで白文字表示
- **効能ドットリストパネル**（`effect-list-panel`）: 半透明白パネルの左に丸い見出し、右に丸ドット付きの効能を3列で並べる
- **コラム枠**（`column-frame`）: 緑写真の上に細い白枠のボックスを置き、線画イラストと本文を入れる
- **悩みチェックリスト**（`check-list`）: チェックボックス記号付きの悩みを2列で並べ、左右で商品色を変える
- **成分アイコン帯**（`ingredient-strip`）: 色帯の見出しの下に、生薬の小さな切り抜き写真と名称を7つ並べる
- **手順カード**（`step-card`）: オレンジ地に白い丸のSTEP番号、線画アイコン、説明文を横並びにする
- **香りピラミッド**（`scent-pyramid`）: 三角形をTOP/MIDDLE/LASTで3段に分けて香調を示す

## Do's and Don'ts

**Do**
- 緑とオレンジを2商品に固定して割り当て、セクションごとに使い分ける
- 背景は泡・湯気・水面の写真で全面を埋める
- 見出しは細めの明朝で2行に分け、中央揃えで余白を広くとる
- 効能や成分は半透明パネルで整理して読みやすくする
- 生薬・花・果物を錠剤の周りに置いた静物写真を使う

**Don't**
- 原色や蛍光色は使わない
- 太いゴシックの大見出しで押し出しすぎない
- 白い無地の背景を長く続けない
- ボタンや装飾に強い影を付けない
- 2商品の色を混ぜて同じパネルに使わない

## Page Structure

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

1. **ファーストビュー**（商品カテゴリと2種の商品を一目で示す）: 緑からオレンジへ移るグラデ写真に2つの箱を斜めに重ね、生薬を周りに置く。短い効能ラベルを添える
2. **商品の基本特長**（入浴剤の種類と特長を示す）: 泡立つ錠剤の写真に明朝の見出しと、3つの円形バッジを並べる
3. **コラム**（入浴の正しい方法で信頼を得る）: 緑地に白枠のボックスを置き、湯温・時間の丸アイコンと線画イラストを入れる
4. **2商品の比較**（悩み別に違いを示す）: 2箱を並べ、下を左右2列に分ける。商品色のラベルと香りの説明を置く
5. **成分訴求**（和漢素材のこだわりを伝える）: 生薬の接写を4分割で並べ、中央に白抜き明朝の大見出しを重ねる
6. **効果の訴求**（温浴効果と効能を示す）: 琥珀色の写真に錠剤を置き、円形の成分バッジと効能リストを添える
7. **湯色・香りのイメージ**（使うときの心地よさを想像させる）: 湯をすくう手の写真に白抜き見出しを入れる
8. **悩みから選ぶ**（自分に合う商品へ誘導する）: クリーム地に2列のチェックリスト。下に緑とオレンジの写真を並べ、商品名の帯を付ける
9. **商品詳細（緑）**（1つ目の商品の効能・成分・香りを示す）: 緑地に箱写真、成分アイコン帯、香りピラミッド、効能パネルを縦に積む
10. **商品詳細（オレンジ）**（2つ目の商品の効能・成分・香りを示す）: 緑と同じ構成をオレンジ地で作る
11. **無添加の訴求**（安心感を示す）: 生薬を散らした写真の中央に白抜き見出しと、配合しない成分のパネルを置く
12. **おすすめの入浴方法**（使い方を3手順で示す）: オレンジ地に番号付きの手順カードを3つ縦に並べる
13. **エンディング**（ブランドの印象を残す）: 水面の上に生薬、下に沈む錠剤の写真を置き、中央にロゴを入れる

## Imagery

- 生薬・ハーブ・花・果物を錠剤の周りに置いた、柔らかい光の静物写真
- 泡が立ち上る錠剤や水中の気泡を写した写真を背景に使う
- 水面を境に上下を見せる構図で、入浴のイメージを出す
- 生薬は接写して質感を見せ、分割配置で並べる
- 人物は手や肩までに絞る。入浴姿勢は細い線画で描く
- 写真全体を緑またはオレンジの色調に寄せて揃える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 版は約 480px 相当の縦長カラムを中央に置き、左右はくすんだトープ色のグラデで埋める
- SP では同じカラムを画面幅いっぱいに広げる
- 2列の比較・チェックリストは SP でも2列のまま使う
- 効能リストは SP では2〜3列にし、文字は 11px 以上を保つ
- PC に広げる場合も、本文の幅は 480〜560px までに抑える

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