DESIGN.md — レモン黄×金茶の訴求型クレンジング LP（Bright Yellow Gold Cleansing Offer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、清潔・爽やか、ナチュラル、力強い・インパクト
• キーワード: レモンイエロー・金茶の帯見出し・泡と水の透明感・赤い割引価格・緑のCTA・沖縄の自然
• 地の質感: 写真と水しぶき・泡のテクスチャが多く、光沢のある透明感がある。単色ベタの帯や枠線もはっきり使う
• 形: 正円バッジ、角丸のカード、ピル型ボタン、斜めのセクション境界、黒い小さな見出しラベル
• 温度感: 暖色の黄・金に、水色の冷たさを加えた明るい中間の温度

Colors

• 白とグレーの地が基本。セクションごとに薄い黄・水色・薄い緑の地に切り替える
• 大見出しの数字や強い言葉は金茶色の明朝体で書く
• 価格・割引率・定期初回の帯は赤だけを使う
• CTA は緑のグラデーションのピル型に固定し、黄色の文字で強調語を入れる
• 悩み提起のセクションだけ濃いグレーの地にして、黄色の下線で強調する
• 本文の重要な文には薄い黄色のマーカーを引く
• button-primary は文字 #FFFFFF × 背景 #63AD2B のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4C8421、4.54:1）を使う。
• offer-header は文字 #FFFFFF × 背景 #A98701 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#907301、4.53:1）を使う。
• price-block は文字 #EB3D56 × 背景 #FFFFFF のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E71A38、4.56:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #92B2D5 のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4579B2、4.53:1）を使う。
• cycle-card は文字 #EB3D56 × 背景 #E5E5E5 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E71A38、4.59:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #A98701 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#907301、4.53:1）を使う。

Typography

• 感情に訴える大見出しは金茶色の明朝、説明はゴシックの太字で書き分ける
• 一つの見出しの中で、キーワードだけ大きくするか色を変える
• 縦書きのコピーを写真の横に置いて変化をつける
• サブ見出しは「＼ ／」で挟んだ小さな文字にする
• 価格の数字は特大にし、税込などの単位は小さく添える
• 注釈は※を付けて右寄せの小さな文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 3 列、素材写真も 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• オファーのブロックは左右に 14px ほど余白を取った白いカードにする
• 見出しは中央揃え、本文は左揃え
• ポイントは黒いラベルと番号の後に見出し・図・本文の順で並べる
• 比較用の要素は＋や×の記号でつなぐ
• CTA はオファーカードの一番下に置く

Elevation & Depth

• CTA ボタンに弱いドロップシャドウを付ける
• お届けサイクルのカードは影なしで細い線だけ
• 写真フレームに少し影を付けて浮かせる
• それ以外は基本的にフラット

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は四角い切り抜きか背景に溶け込ませる。素材写真は角丸の四角。商品は切り抜きで配置
• セクション境界: 基本は直線で切り替える。一部は斜めの境界や上向きのカーブを使い、下向きの三角で次へつなぐ
• 機能バッジは正円に白い文字を入れる
• フリー表示は細い線の円を 3×2 で並べる
• 強み要素は細い金色の枠の四角を＋でつなぐ
• 吹き出しは細い線の角丸に、しっぽの丸を付ける

Components

• 緑のピル型 CTA（button-primary）: 緑のグラデーションの全幅ピルに、右向きの三角を付ける。上に赤い割引ラベルの吹き出しを重ねる
• 金のオファー帯（offer-header）: 金のグラデーションの帯。上に白い角丸の限定ラベル、下に割引率を大きく書く
• 赤い価格表示（price-block）: 赤い帯の見出しの下に、赤い円の割引バッジ・特大の価格・枠付きの送料無料を横に並べる
• 条件タグ（benefit-tags）: 金色の細い枠の四角に、解約条件などを 2 段で並べる
• 機能の円バッジ（badge-circle）: くすんだ青の正円を 3 つ並べ、白い 2 行の文字を入れる
• ポイント番号ラベル（point-label）: 黒い長方形に小さな英字と金色の明朝の数字を入れる
• お客様の声カード（voice-card）: 水色の地に白いカード。左上に線画の顔アイコンと青いリボンの番号ラベルを付け、右下に注釈を入れる
• お届けサイクル（cycle-card）: グレーの角丸パネルに白いカードを 2 枚並べ、トラックのアイコンでつなぐ
• 金帯の見出し（band-heading）: 金茶色の全幅帯に白い見出しと英字のサブ見出しを入れ、左右に二重線を引く

Do's and Don'ts

Do - 価格とオファーのブロックを 3 回ほど同じ形でくり返す - 泡・水しぶき・自然素材の写真で清潔さと自然派らしさを出す - 大きな数字や決めの言葉は金茶色の明朝にする - 重要な文には黄色のマーカーを引く - 注釈は必ず※を付けて小さく添える

Don't - 赤を価格以外の装飾に使わない - CTA の色を緑以外にしない - 黒っぽい地をページ全体に広げない（悩み提起だけにする） - 明朝を本文に使わない - 余白を詰めすぎて写真の透明感を損なわない

Page Structure

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

1. ファーストビュー（新しさと効果を一目で伝える）: 黄色の背景に特大の白い文字。女性の写真、商品の切り抜き、太い黒いゴシックのコピーを重ねる
2. 実績と特長バッジ（信頼と手軽さを示す）: 月桂樹の実績表示、青い円バッジ 3 つ、グレーのピル型の悩みタグを並べる
3. ファースト CTA（すぐ申し込めるようにする）: 緑の帯ボタンに、赤い円の割引バッジを左に重ねる
4. 常識の否定と新発想（商品の考え方を伝える）: 2 つの球体の写真、吹き出し、金の明朝の大見出し、ポジショニング図を置く
5. 技術・成分の解説（仕組みに説得力を持たせる）: 円の大きさで比べる図、肌の断面イラスト、縦書きのコピーを使う
6. 3つの強みのまとめ（要点を整理する）: 金色の枠の四角を＋でつなぎ、縦に 3 つ並べる
7. 実績・クラウドファンディング（社会的な証明を示す）: 商品ボトルを並べた写真と金の数字、金の枠で囲んだ達成報告のカード
8. オファー（割引価格を提示する）: 金のオファー帯、赤い価格表示、条件タグ、お届けサイクル、CTA を入れた白いカード
9. 悩みの提起（今のケアへの不安を呼び起こす）: 濃いグレーの地、手書き風の吹き出し、黒い円の「実は」、黄色の下線を使う
10. 商品の誕生（解決策として商品を出す）: 黄色の水しぶきの地に金の明朝の大見出しと商品写真を置く
11. 選ばれる4つのポイント（特長を詳しく説明する）: 黒い番号ラベル、見出し、図や写真、マーカー付きの本文を、地の色を変えながら 4 回くり返す
12. お客様の声（使った人の実感を伝える）: 上がカーブした水色の地に、アイコンと番号リボン付きの白いカードを 4 枚並べる
13. 使用方法（使い方の不安をなくす）: 金の帯見出し、金の丸数字、線画のイラストと説明文を点線で区切って 3 ステップ並べる
14. ブランドの世界観と最終オファー（共感を生んで購入を締めくくる）: 海と空の写真に白い文字。その後にオファーカードと CTA をもう一度置く

Imagery

• 人物は 30〜40 代の女性。白い背景で、コットンで拭き取る動作や目を閉じて頬を包む表情
• 商品はボトルとコットンを白い背景の切り抜きにして、影を薄く付ける
• 黄色のオイルの泡、水しぶき、透明な球体の写真で素材感を出す
• 南国の葉、パパイヤ、海、サンゴなどの自然写真で産地らしさを表す
• 使用方法やお客様の声のアイコンは、金色や青の細い線画イラスト
• 肌の断面図はピンクとベージュのやわらかいイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の 1 カラムを中央に最大幅 750px 程度で置き、外側はグレーの地にする
• 円バッジや素材写真の 3 列は PC でもそのままにする
• 大見出しは 1.3 倍くらいまで大きくし、写真は横幅いっぱいにしない
• オファーカードは幅を固定して中央に置き、CTA の幅は 480px までにする

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。