DESIGN.md — ローズ×ブラウンの上品な洗顔石けん LP（Elegant Rose-Brown Foam Cleanser LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 泡の質感・明朝の大見出し・ローズの帯・ゴールドの筆記体・特典カード・40代女性向け
• 地の質感: 白い泡、大理石、淡いベージュのグラデーション、白タイル壁。欧文の筆記体と薄い大文字欧文を透かしで敷く
• 形: 角の立った白カード、ローズの矩形帯、丸いバッジ、円で切り抜いた素材写真
• 温度感: 暖かみのある中間色。悩みのパートだけ寒色のグレーに切り替える

Colors

• 地は白とベージュを交互に使う。原色の面は使わない
• 強調したい語はローズの文字にするか、ローズの帯に白抜きで置く
• 見出しはこげ茶の明朝。数字と飾りの筆記体はゴールドにする
• 悩み・原因のパートだけグレーと紫系にして、不安な空気を出す
• 緑は申込 CTA だけに使う
• お客様の声は黄色マーカーで要点を強調する
• button-primary は文字 #F3FDF2 × 背景 #3AC254 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#278339、4.59:1）を使う。

Typography

• 大見出しは明朝。1 行の中で重要語だけ大きくし、助詞は小さくする
• 価格の数字は明朝のローズで特大にし、「円」「税込」は小さく添える
• 見出しの背後に、薄い大文字の欧文を透かしで敷く
• 見出しの左上にゴールドの筆記体英字を斜めに重ねる
• 本文はゴシック 14px 前後、行間は 1.8
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材アイコンや手順は 2〜5 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• キャンペーンブロックを FV 直後・中盤・終盤の 3 回置く
• 特長は POINT バッジ＋明朝見出し＋写真＋本文＋ローズ帯のまとめ、の順にくり返す
• 写真は画面幅いっぱいに置き、コピーを重ねる
• 白カードは左右に 5% ほど余白を残し、背景の質感を見せる

Elevation & Depth

• 白カードに薄い影（0 4px 16px rgba(0,0,0,.08)）をつける
• CTA ボタンの下に濃い緑の影を入れ、立体的に見せる
• 泡や素材の写真は切り抜いてカードの外へはみ出させる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: モデルと泡は角丸なしの矩形か切り抜き。素材は正円で切り抜く。悩み写真は少し傾けた矩形にする
• セクション境界: 直線で切り替える。背景のグラデーションや写真でなじませる
• CTA は角丸 8px の矩形で、右端に矢印をつける
• 特典番号はゴールド枠の正方形に斜体の数字を入れる
• 成分ラベルは小さな角丸のこげ茶バッジ
• 訴求ポイントは円形の淡いベージュバッジを 3 つ並べる

Components

• 申込 CTA（button-primary）: 緑の横長ボタン。白文字で、右に矢印をつける
• ローズの強調帯（band-highlight）: 結論の文を 1〜2 行、白抜きの帯で見せる
• 特典カード（benefit-card）: ゴールドの番号枠と特典説明を並べる。数字は特大のローズ
• 価格訴求（price-block）: 通常価格を打ち消し線で見せ、ローズのラベルと特大の価格を並べる
• 円形ポイントバッジ（badge-circle）: 淡いベージュの正円。上にこげ茶のラベルを載せ、明朝 2 行で要点を書く
• POINT 番号（point-number）: こげ茶の半円バッジ。POINT の小文字と大きな数字を入れる
• お客様の声（voice-card）: 顔写真と名前ラベル、ローズの明朝見出し、手書き風の本文に黄色マーカーを入れる
• 使い方ステップ（step-card）: 2 列のグリッド。写真の左上に黒い三角の Step 番号を置く
• 成分ラベル（label-tag）: こげ茶の小さな角丸バッジに白文字を入れる

Do's and Don'ts

Do - 明朝の大見出しを泡や肌の写真に重ね、上品に見せる - 強調はローズの帯とローズの文字にしぼる - 数値（満足度・累計販売数）は特大の明朝で見せる - キャンペーンと CTA を何度もくり返す - 注釈は小さいグレーの文字で添える

Don't - CTA 以外に緑を使わない - 丸ゴシックやポップな書体を使わない - 原色の背景面を使わない - 角丸を大きくしすぎない - 余白をとりすぎて情報量を減らさない

Page Structure

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

1. ファーストビュー（効果を一言で伝える）: 泡で洗顔するモデル写真に特大の明朝コピーを重ね、下に円形バッジを 3 つ並べる
2. キャンペーン・CTA（お試しへ誘導する）: 特典カード 3 枚、商品画像、価格、緑の CTA をベージュの地に置く
3. 実績（信頼を示す）: 月桂樹の飾りと、特大の累計数・満足度の円グラフ
4. お客様の声（共感を生む）: 評価のカードと、写真付きの声を 3 件
5. SNS の反響（話題性を見せる）: 枠の中に投稿写真を 3×2 のグリッドで並べる
6. 悩みの提起（悩みを自覚させる）: グレーの地に傾けた写真 4 枚。悩みを短い言葉で添える
7. 原因の解説（悩みの理由を理解させる）: 円形の要因を 3 つ。Cause 番号付きのカードと図解を並べる
8. 解決策の提示（商品の必然性を示す）: Before/After の顔写真に縦書きのコピーを重ねる
9. 特長（成分の価値を伝える）: POINT 番号を 4 つ。比較実験の画像と素材の円アイコンを並べる
10. 使い方（使い方の手順を示す）: Step 写真を 2 列×3 段。下に動画を埋め込む
11. スペシャルケア（使い方の提案）: 紺色の夜空の背景に金の明朝コピーを置く
12. ブランドの想い・品質（安心感を伝える）: 白タイルの背景にロゴ、中央揃えの文章、国内製造と無添加の表示

Imagery

• 40代前後の女性が目を閉じ、泡に包まれる柔らかな写真
• 白いホイップ泡とダークブラウンの石けんを、大理石の台に載せた商品写真
• 鉱石・植物・果実など素材を高精細に撮り、水しぶきを添える
• 背景に泡、分子の球体、白タイルを淡く入れる
• 毛穴の断面図など、ベージュとピンクのやさしい図解
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の画像はないため、以下は推奨。PC では本文の幅を 750px 前後に固定し、中央に置く
• PC の左右は淡いベージュの地か泡のテクスチャで埋める
• 特典カードや Step は PC で 3 列に広げてもよい
• 見出しの文字は SP の 1.3 倍程度にとどめる

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 行書くと起動時に読み込まれる。