---
version: alpha
name: Soft Pink Pearl Beauty Supplement LP
description: 淡いピンクと白の水彩風の地に、濃いマゼンタで強調する40〜50代女性向けの美肌サプリLP。明朝の大見出しで上品さを出し、グラフ・データ・体験談で信頼を積み上げる。価格ボックスとピル型CTAを何度も繰り返す。
colors:
  primary: '#DC0B73'
  cta: '#ED6C8A'
  on-cta: '#FEFCFC'
  background: '#FFFFFF'
  background-alt: '#FEF0F6'
  tint-1: '#FEEAF3'
  tint-2: '#E7A4A5'
  text: '#44444B'
  text-muted: '#7A7A7F'
  secondary: '#2BA8B0'
  dark-section: '#0C367B'
  accent-1: '#E2B84A'
  accent-2: '#D56349'
  line: '#F9E7E5'
  cta-accessible: '#E31C4B'
  tint-2-accessible: '#CD4345'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  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.full}'
    height: 60px
  price-badge-cta:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 66px
  price-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.md}'
    height: 260px
  ribbon-heading:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 56px
  data-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 480px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 70px
  testimonial-card:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 200px
  yes-no-quiz:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 180px
  faq-accordion:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 64px
  gold-medal:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 100px
---

# DESIGN.md — 桃色パールと濃紅の美肌サプリLP（Soft Pink Pearl Beauty Supplement LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
- **キーワード**: 淡ピンク・パール光沢・明朝の大見出し・データ訴求・大人の女性・ピル型CTA
- **地の質感**: 水彩のようなピンクのグラデーションに、光の玉・泡・植物の線画を薄く重ねる。白カードには柔らかい影をつける。
- **形**: 角丸の白カード、大きいピル型ボタン、円形の数値バッジや顔写真、斜線つきリボン見出し
- **温度感**: 暖色寄り。ピンクを主に使い、ターコイズとネイビーを差し色として少量使う

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#DC0B73` | 強調文字・帯見出し・枠線の濃いマゼンタ | 5% | 画素の実測 |
| `cta` | `#ED6C8A` | 申込ボタンの塗り（コーラルピンク） | 2% | 画素の実測 |
| `on-cta` | `#FEFCFC` | ボタン上の白文字 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 23% | 画素の実測 |
| `background-alt` | `#FEF0F6` | 淡いピンクのセクション地 | 12% | 画素の実測 |
| `tint-1` | `#FEEAF3` | 注意書きボックス・回答欄の淡ピンク | 6% | 画素の実測 |
| `tint-2` | `#E7A4A5` | リボン見出し・円グラフの中間ピンク | 6% | 画素の主要色に補正 |
| `text` | `#44444B` | 見出し・本文の濃いチャコール | 5% | 画素の主要色に補正 |
| `text-muted` | `#7A7A7F` | 出典・注釈の灰色 | 1% | 推定 |
| `secondary` | `#2BA8B0` | うるおいを表すターコイズの強調文字 | 1% | 推定 |
| `dark-section` | `#0C367B` | データ章の見出し帯・機能カード枠のネイビー | 2% | 画素の実測 |
| `accent-1` | `#E2B84A` | Dataや機能番号のゴールドバッジ | 0% | 推定 |
| `accent-2` | `#D56349` | グラフ結論吹き出しの朱色 | 0% | 画素の実測 |
| `line` | `#F9E7E5` | カードの区切り点線・薄い罫線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#E31C4B` | AA を満たす補正値（計算） |  | 計算 |
| `tint-2-accessible` | `#CD4345` | AA を満たす補正値（計算） |  | 計算 |

- 地は白と淡いピンクを交互に使い、セクションの切り替えをグラデーションで柔らかくする
- 強調する語句はマゼンタの文字にし、1文につき1か所までにする
- うるおい系の語はターコイズ、弾力系の語はマゼンタで色分けする
- 科学データの章だけネイビーの帯と枠を使い、信頼感を出す
- CTAは必ずコーラルピンクのピル型ボタンに白文字で入れる
- 番号や実績のバッジにはゴールドのメダル調を使う
- `button-primary` は文字 `#FEFCFC` × 背景 `#ED6C8A` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31C4B`、4.53:1）を使う。
- `ribbon-heading` は文字 `#FEFCFC` × 背景 `#E7A4A5` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#CD4345`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャッチ・章の大見出し | 明朝 | Shippori Mincho | 700 | 44px | 1.3 | 0.02em |
| `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 30px | 1.4 | 0.05em |
| `headline-md` | 帯見出し・訴求コピー | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.04em |
| `headline-sm` | カード見出し・設問 | ゴシック | Noto Sans JP | 500 | 17px | 1.6 | 0.05em |
| `body-md` | 本文・体験談 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 価格の数字・ブランドの英字 | 欧文サンセリフ | Montserrat | 700 | 30px | 1.1 | 0em |
| `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.3 | 0.08em |

- 大見出しは明朝で書き、上品さを出す
- 説明文やUIの文字はゴシックにし、字間を少し広げる
- 強調語は色を変え、上に傍点を付ける
- 見出しは左揃えと右揃えを段ごとに交互にして動きを出す
- 価格は数字だけを大きくし、「円（税込）」は小さく添える
- 注釈は小さい灰色の文字にし、※番号で本文と結ぶ
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。価格ブロックだけ商品画像と価格の左右 2 分割
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- 白カードは左右に約15pxの余白を残して置く
- 写真は全幅で、テキストを重ねて配置する
- 価格とCTAのセットを約3画面ごとに繰り返す
- グラフは白カードの中に置き、下に結論ボックスを付ける
- 体験談は丸い顔写真を左、本文を右に並べる

## Elevation & Depth

- 白カードには薄いピンクがかった広めの影を付ける（例: 0 4px 16px rgba(200,120,130,.15)）
- CTAボタンには白の外枠と下向きの影を付けて立体的に見せる
- Yes/Noボタンはグラデーションと内側の影でパールのような質感にする
- ゴールドのバッジにはメタリックなグラデーションを付ける

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 人物は角版か全幅の写真で背景に溶け込ませる。顔写真と数値は円形で切り抜く
- **セクション境界**: 直線では区切らず、グラデーションでぼかしてつなぐ。一部に斜めのピンクの帯を入れる
- CTA・Yes/No・タグはすべてピル型にする
- リボン見出しは左右に斜線を付けた台形の帯にする
- グラフの結論は角丸の吹き出しボックスにする
- Q&AのQは淡ピンクの円の中に明朝で書く

## Components

- **申込ピル型CTA**（`button-primary`）: コーラルピンクのグラデーションに白い外枠を付けた全幅ボタン。右端に＞を付ける
- **価格円バッジ付きFV CTA**（`price-badge-cta`）: ボタン左端に白い円形バッジを重ね、1日あたりの価格を表示する
- **価格カード**（`price-box`）: 左に商品画像、右に白カード。英字の商品名・通常価格・マゼンタ枠の条件タグを入れる
- **斜線リボン見出し**（`ribbon-heading`）: ピンクの帯に白文字を入れ、両側に＼／の斜線を付けた導入ラベル
- **データグラフカード**（`data-card`）: ゴールドの番号バッジと色帯の見出しを付けた白カード。中にグラフを置き、下に結論ボックスを入れる
- **悩みチェックリスト**（`check-list`）: 白カードにマゼンタのチェックアイコンと悩みの文を並べ、行の間を点線で区切る
- **体験談カード**（`testimonial-card`）: 円形の顔イラストと引用符付きの本文。強調部分はマゼンタにし、年代を右下に書く
- **セルフチェック設問**（`yes-no-quiz`）: 番号の円と設問を書いた白カードに、パール調のYes/Noピルを2つ並べる
- **FAQアコーディオン**（`faq-accordion`）: Qを淡ピンクの円で囲んだ白い行。開くと淡ピンクの地にA.を表示する
- **ゴールドメダルバッジ**（`gold-medal`）: 月桂樹付きの金色の円。購入条件の安心ポイントを示す

## Do's and Don'ts

**Do**
- 淡ピンクの水彩調の地と白いカードを基調にする
- 大見出しは明朝にし、改行を多くして余韻を作る
- 主張には必ずグラフ・出典・注釈を添える
- 価格カードとCTAのセットを複数回繰り返す
- 強調はマゼンタの文字と傍点に限る

**Don't**
- 原色の赤や黒ベタの面を広く使わない
- 角の立った四角いボタンにしない
- 強調色を1文に何色も混ぜない
- ネイビーをデータの章以外で多用しない
- 注釈や出典を省かない

## Page Structure

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

1. **ファーストビュー**（ターゲットの憧れと商品を一目で伝える）: 笑顔の女性の写真の上に明朝の大キャッチを置く。円形の機能バッジ、商品パッケージ、価格バッジ付きCTAを配置する
2. **悩みの提起**（年齢による肌の悩みに共感させる）: 暗めの人物写真に縦書きの独白を重ねる。その下に白カードのチェックリストで悩みを3〜4つ並べる
3. **原因の解説**（悩みの本当の原因を示す）: ピンク枠で囲んだキーワード、肌断面の比較図、くの字矢印で順に説明する
4. **データ根拠**（年齢による減少を数値で示す）: マゼンタの帯見出しの下に、ゴールドのData番号を付けたグラフカードを2枚並べる。最後に出典ボックスを置く
5. **商品紹介**（解決策として商品を提示する）: 商品パッケージと素材写真の横に縦書きの大コピーを置く。ターコイズとマゼンタで2つの機能を色分けする
6. **価格CTA**（購入へ誘導する）: リボン見出し、人物写真、価格カード、ピル型CTAの順に並べる
7. **開発ストーリー**（素材と研究による信頼を伝える）: 畑や研究者の写真に円形の実績バッジを重ね、中央揃えの明朝で物語を書く
8. **臨床データ**（機能性を科学的に裏付ける）: ネイビーの帯見出しにゴールドの機能番号を付ける。折れ線グラフの下に朱色の結論吹き出しを置く
9. **お客様の声**（実感の声で後押しする）: 大きな%のドーナツグラフ、手書き風の吹き出し、顔イラスト付きの体験談カードを並べる
10. **セルフチェック**（自分ごと化させる）: 3問のYes/Noカードの後に、チェックアイコン付きの解答ボックスを置く
11. **コスパ訴求**（1日あたりの安さを伝える）: マゼンタの帯の後に、いつものスキンケアと商品を＋で並べた図を置く。2分割の価格比較ボックスも入れる
12. **よくある質問**（購入前の不安を解消する）: 明朝の見出しの下に、白いアコーディオンを8項目ほど並べる
13. **最終CTA**（購入条件の安心感を伝えて申込させる）: ゴールドメダルで縛りなしを示し、価格・箇条書きの説明・ピル型CTAで締める

## Imagery

- 40〜50代女性の写真。自然光でハイキーにし、頬に手を添える笑顔のポーズにする
- 悩みの場面は夕景で彩度を落とした物憂げな写真にする
- 背景はピンクの水彩グラデーションに、光の玉・水滴・シャボン玉を散らす
- 植物の細い線画を角にうっすら添える
- 原料の畑や研究室は明るく清潔なトーンで撮る
- グラフは白地で、マゼンタの点と線のシンプルな作りにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央に幅480px前後のSPカラムを置き、左右を淡ピンクの背景で埋める
- PCに広げる場合は、FVを人物写真とコピーの2カラムにするとよい
- データカードや体験談はPCで2列に並べてもよい
- CTAの幅はPCでは最大420px程度に抑える

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

:root {
  --color-primary: #dc0b73;
  --color-cta: #ed6c8a;
  --color-on-cta: #fefcfc;
  --color-background: #ffffff;
  --color-background-alt: #fef0f6;
  --color-tint-1: #feeaf3;
  --color-tint-2: #e7a4a5;
  --color-text: #44444b;
  --color-text-muted: #7a7a7f;
  --color-secondary: #2ba8b0;
  --color-dark-section: #0c367b;
  --color-accent-1: #e2b84a;
  --color-accent-2: #d56349;
  --color-line: #f9e7e5;
  --color-cta-accessible: #e31c4b;
  --color-tint-2-accessible: #cd4345;
  --spacing-unit: 8px;
  --spacing-card: 20px;
  --spacing-section: 56px;
  --rounded-sm: 6px;
  --rounded-md: 12px;
  --rounded-lg: 20px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。