---
version: alpha
name: Rose Pink Gold Anti-Aging Cosmetics LP
description: ローズピンクと金を軸に、明朝の大見出しと赤い価格表示で押す年齢肌向けファンデーションの訴求型 LP。写真とバッジを多く重ね、悩み提起→理由→声→オファーの流れを縦長に積み上げる。
colors:
  primary: '#CB8878'
  secondary: '#C9A96A'
  accent-1: '#C34262'
  accent-2: '#CC0F0E'
  cta: '#3FA83A'
  on-cta: '#FEFEFE'
  background: '#FDFCFD'
  background-alt: '#FDFAF2'
  tint-1: '#F2E3D3'
  surface: '#F3F3F3'
  text: '#2F2620'
  dark-section: '#4A4A4A'
  on-dark: '#FEFEFE'
  accent-3: '#6BA1D3'
  cta-accessible: '#32862E'
  primary-accessible: '#B25A45'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Yomogi
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Playfair Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.2
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
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.md}'
    height: 64px
  offer-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-2}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 520px
  gold-ribbon-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 90px
  bubble-badge:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  point-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 420px
  voice-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 320px
  privilege-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-2}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 360px
  check-grid:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    rounded: '{rounded.sm}'
    height: 200px
  vertical-worry:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 260px
---

# DESIGN.md — ローズピンク×金の年齢肌コスメ LP（Rose Pink Gold Anti-Aging Cosmetics LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
- **キーワード**: ローズピンク・金箔バッジ・明朝大見出し・ビフォーアフター・赤い価格訴求・花びら・光のきらめき
- **地の質感**: 淡いピンクのグラデーション地に光の玉・花びら・金のきらめきを散らす。グレー肌テクスチャ面で悩みを暗く見せる。
- **形**: 斜めカットのセクション境界、円形の機能バッジ、金のリボン帯、角丸カード。
- **温度感**: 暖かく華やか。悩みパートのみ寒色グレー。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CB8878` | ブランドのローズピンク（見出し・帯） | 8% | 画素の主要色に補正 |
| `secondary` | `#C9A96A` | 金色のバッジ・見出し帯 | 4% | 推定 |
| `accent-1` | `#C34262` | マゼンタ系の強調見出し文字 | 2% | 画素の実測 |
| `accent-2` | `#CC0F0E` | 価格・割引の赤 | 2% | 画素の実測 |
| `cta` | `#3FA83A` | 主 CTA ボタンの緑 | 1% | 推定 |
| `on-cta` | `#FEFEFE` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FDFCFD` | 基本の白地 | 25% | 画素の実測 |
| `background-alt` | `#FDFAF2` | 淡いピンク地（声・特典） | 12% | 画素の実測 |
| `tint-1` | `#F2E3D3` | ベージュゴールドの面 | 6% | 画素の主要色に補正 |
| `surface` | `#F3F3F3` | 薄グレーのカード地 | 9% | 画素の実測 |
| `text` | `#2F2620` | 本文の濃茶黒 | 2% | 画素の主要色に補正 |
| `dark-section` | `#4A4A4A` | 悩み・理由の暗色面 | 6% | 推定 |
| `on-dark` | `#FEFEFE` | 暗色面上の白文字 | 1% | 画素の主要色に補正 |
| `accent-3` | `#6BA1D3` | メーカー紹介の青帯 | 1% | 画素の実測 |
| `cta-accessible` | `#32862E` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#B25A45` | AA を満たす補正値（計算） |  | 計算 |

- 地は白と淡ピンクを交互にし、ピンクのグラデーションで華やかさを出す。
- 見出しはローズ〜マゼンタの明朝体で書き、要所に金帯を合わせる。
- 価格・割引・OFF 表記だけ赤を使う。
- CTA は緑の立体ボタンにして、ピンク系の中で目立たせる。
- 悩み提起パートはグレー／黒の面に白文字で暗く見せる。
- メーカー紹介だけ青を使い、信頼感を出す。
- `button-primary` は文字 `#FEFEFE` × 背景 `#3FA83A` のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#32862E`、4.54:1）を使う。
- `bubble-badge` は文字 `#CB8878` × 背景 `#FDFAF2` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B25A45`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV と章の大見出し | 明朝 | Shippori Mincho | 700 | 44px | 1.3 | 0.05em |
| `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 30px | 1.4 | 0.05em |
| `headline-md` | カード・理由の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em |
| `headline-sm` | 手書き風のポイント見出し | 手書き・筆 | Yomogi | 400 | 20px | 1.4 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `accent` | user voice などの欧文イタリック小見出し | 欧文セリフ | Playfair Display | 400 | 14px | 1.2 | 0.05em |
| `label-button` | CTA と価格の太字 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.0em |

- 情緒的な大見出しは明朝、機能や価格は極太ゴシックで書く。
- 見出し内のキーワードは一回り大きくし、色を変える。
- 価格の数字は本文の 3 倍以上にして、単位と税込は小さく添える。
- 欧文イタリックを和文見出しの上に小さく添える。
- 悩みパートは縦書き明朝の白黒帯を使う。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ビフォーアフターと機能リストは 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は全幅で敷き、テキストやバッジを重ねる。
- カードは左右 6% 余白で中央に置く。
- オファーブロックは本文中盤と末尾の 2 回置く。
- 注釈は該当要素の直下に小さく右寄せで置く。

## Elevation & Depth

- カードには柔らかい影（0 4px 16px rgba(0,0,0,.08)）をつける。
- CTA は下側に濃い影とハイライトを入れた立体表現にする。
- 写真のポラロイド枠には白縁と軽い影をつける。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 全幅の矩形、円形の顔写真、傾けたポラロイド枠
- **セクション境界**: V 字・斜めカット、ピンクのグラデーションで溶かす境界
- 機能はシャボン玉風の円形バッジで並べる。
- 金リボン・ロゼット型のバッジで実績を示す。
- 効果は六角形の線枠で 3 つ並べる。

## Components

- **緑の立体 CTA**（`button-primary`）: 再生アイコン付き、上に小バッジを載せた大型ボタン
- **価格オファーカード**（`offer-card`）: 商品写真＋通常価格の取り消し＋赤い大きな価格＋OFF の円バッジ
- **金帯の理由見出し**（`gold-ribbon-heading`）: 番号と斜めの筆記体ロゴを添えた金グラデーションの帯
- **円形機能バッジ**（`bubble-badge`）: 白〜ピンクの光沢円に機能名を明朝で書く
- **ポイントカード**（`point-card`）: Point 番号タブ＋チェックボックスと手書き見出し＋本文＋写真
- **お客様の声**（`voice-card`）: 番号イタリック＋ピンク見出し＋ビフォーアフター写真＋年齢の丸バッジ
- **特典リスト**（`privilege-list`）: 金の月桂冠番号付きの行を罫線で区切る
- **チェック 2 列リスト**（`check-grid`）: 赤いチェックアイコンと短い機能語を 2 列で並べる
- **縦書き悩み帯**（`vertical-worry`）: 写真上の黒帯に白の縦書き明朝で悩みを書く

## Do's and Don'ts

**Do**
- 見出しのキーワードは色とサイズで強調する。
- 実績・効能のバッジは金色で統一する。
- 効果はビフォーアフターの左右比較で見せる。
- オファーは中盤と末尾で同じデザインを繰り返す。
- 効能表現には※注釈を必ず添える。

**Don't**
- ピンク以外の原色を見出しに使わない。
- CTA を地の色と同系色にしない。
- 余白を広げすぎてミニマルにしない。
- 悩みパート以外で暗い背景を多用しない。
- 明朝とゴシック以外の書体を増やしすぎない。

## Page Structure

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

1. **ファーストビュー**（効果と実績を一目で伝える）: 女性の顔写真に商品と大きな明朝コピーを重ね、上部に金の実績バッジを並べる
2. **動画**（使用感を見せる）: ピンクのグラデーション地に動画枠、金帯のキャプションを置く
3. **多機能紹介**（1 本で複数役を担うことを示す）: 手に持った商品の周りに円形バッジを配置する
4. **オファー**（初回価格で購入を促す）: 価格カードと緑 CTA、特典 5 項目のリストを置く
5. **SNS 反響**（社会的証明）: スマホ画面風の投稿写真を傾けて重ね、吹き出しと肩書きラベルを添える
6. **悩みの提起**（年齢肌の悩みに共感する）: V 字境界、鏡を見る写真、縦書きの黒帯、グレーの肌テクスチャ面
7. **選び方のポイント**（選ぶ基準を教える）: Point 番号付きのカード 3 枚とグラフ
8. **商品紹介**（解決策として提示する）: 光あふれる背景に商品と機能の丸バッジ、ビフォーアフター
9. **お客様の声**（実感を伝える）: 左右交互の写真配置とポラロイド風の比較写真
10. **メディア掲載**（権威付け）: 雑誌の表紙を傾けて重ね、きらめく背景に置く
11. **選ばれる理由**（機能を詳しく説明する）: 暗い背景に金帯の番号見出し、図解、成分写真
12. **無添加・メーカー**（安心と信頼）: 円形の無添加バッジ、青帯の見出し、研究室の写真
13. **CTA（再掲）**（最終的な購入を後押しする）: 冒頭と同じ価格カードと緑ボタン

## Imagery

- 40〜50 代女性が肌に触れる柔らかい光の顔アップ写真。
- ピンクメタリックのボトルを主役に、花びら・光の玉・クリームのストロークを添える。
- 悩み写真は彩度を落とし、グレー寄りにする。
- 成分はハーブ・果実・花の接写写真で見せる。
- ビフォーアフターは同じ構図の左右比較にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央 750px 幅で SP デザインをそのまま見せ、左右は淡ピンク地にする。
- 2 列リストは PC でも 2 列のままにする。
- 見出し文字は画像化を前提とし、PC で拡大しすぎない。
- CTA は PC 下部に追従バーを追加してもよい。

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