DESIGN.md — 白×ローズピンクと金ボタンの化粧下地 LP（Soft Pink Mincho Cosmetic Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 白基調・ローズピンク・明朝体・金ボタン・黄色マーカー・余白多め
• 地の質感: 白い面と淡いピンク〜ラベンダーのぼかしグラデーション。光の玉のようなボケを薄く重ねる
• 形: 角を立てた四角い枠、角括弧の見出し、正円のアイコン、ピル型の金ボタン
• 温度感: やや暖色寄りで柔らかい

Colors

• 地は白を基本にする。区切りは淡いピンク・グレー・ブルーグレーの面で入れる
• 見出しで強調したい語だけをローズピンクにし、残りは濃いグレーで書く
• 購入ボタンは金グラデーションだけにし、ほかの色を使わない
• 黄色は文字下のマーカーと悩みラベルに限って使う
• CTA ブロックはピンクの太枠で囲む。中の地は白
• 注釈はグレーの小さい文字で、各ブロックのすぐ下に置く

Typography

• 見出しは明朝体で、字間を広めにとる
• 強調語だけ文字を大きくし、ピンクにする
• 価格の数字は太いイタリックセリフを特大にし、ピンクにする
• 英字の筆記体ラベルは見出しの上に小さく添える
• 本文はゴシック体で行間を広くとる
• 注釈には※印を付け、極小のグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えの見出しの下に、左揃えの本文を置く
• 悩みの写真は左右交互にずらす
• CTA ブロックはおよそ 3 セクションごとに繰り返す
• 写真は画面幅いっぱいに近い横長で置く
• 無添加のアイコンは正円を横一列に並べる

Elevation & Depth

• 影はほぼ使わず、平面でまとめる
• 金ボタンだけ光沢グラデーションと淡い影で立体感を出す
• 正円アイコンにはふんわりした白いグロウを付ける

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形が基本。成分写真は正円、ブランド写真は片側を大きな角丸にする
• セクション境界: 直線で切り替える。淡い色の面かグラデーションの帯で区切る
• CTA ブロックの外枠は角丸の太いピンク線にする
• 小見出しは角括弧で挟み、下に黄色マーカーを引く
• ピンクの小見出し帯の下辺に吹き出しの三角を付ける

Components

• 金のピル型ボタン（button-primary）: 金色グラデーションで縁を濃くし、明朝体の文字の後ろに右向き三角を付ける
• 価格オファー枠（offer-box）: ピンクの太枠の中に商品画像・通常価格・特別価格・条件ボックス・ボタンをまとめる
• リボン見出し（ribbon-label）: 両端が燕尾になったピンクのリボン帯に、限定であることを白文字で入れる
• 吹き出し帯（speech-band）: 下に三角が付いたピンクの帯。効果を一言で白文字にして入れる
• 角括弧見出し（bracket-heading）: 細い角括弧で明朝の見出しを挟む。上に筆記体の番号を置き、下に黄色マーカーを引く
• 悩みカード（trouble-card）: 横長の人物写真に、黄色い面の悩みラベルを左右交互に重ねる
• 条件ボックス（condition-tag）: 細い黒枠の長方形に、販売条件を太めの文字で入れる
• 無添加の正円アイコン（circle-free）: 淡いピンクか白の正円に、斜線と成分名を入れる
• 手順の番号（step-number）: 細い線の円に斜体の数字を入れ、円の上に小さな英字を弧状に添える
• ビフォーラベル（before-after-tag）: 黒い角丸のタグに、白文字で状態を入れる

Do's and Don'ts

Do - 見出しは明朝体にし、字間を広くとる - 強調語は一部だけピンクにする - CTA は毎回同じ金ボタンと価格枠で繰り返す - 効果をうたう表現には※注釈を添える - 白い余白を多めにとって上品さを保つ

Don't - 濃い原色の面を広く使わない - ボタンを金以外の色にしない - 太いゴシックで見出しを埋め尽くさない - 影を強くしない - ピンクを本文全体に使わない

Page Structure

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

1. ファーストビュー（効果を一言で印象づける）: 左に商品チューブ、右に大きな明朝コピーを置き、金リボンでサブコピーを入れる
2. ビフォーアフター（効果を目で見せる）: 淡いピンクの地に肌のアップ写真を 2 枚並べ、間を矢印でつなぐ。悩みのタグとピンクの結果文を添える
3. 使用感の紹介（質感を伝える）: グレーの帯にテクスチャ写真を置き、マーカー付きの一文を添える
4. CTA（初回お試しへ誘導する）: ピンク枠のオファーボックスにリボン・特価・条件・金ボタンを入れる
5. 悩みの提起（共感を得る）: 人物写真に黄色ラベルを左右交互に重ねて 3 つ並べる
6. 解決の提示（商品を解決策として示す）: 上下の太線で挟んだ枠に、筆記体ラベル・文章・商品写真を入れる
7. 3 つの理由（仕組みを説明する）: グラデーションの帯見出しの後、角括弧見出し・図解・吹き出し帯・本文を 3 回繰り返す
8. 無添加の訴求（安心感を伝える）: 正円アイコンを 5 つ並べ、淡いグラデーションの地に中央揃えの文章を置く
9. 特長（使う利点を伝える）: 線で挟んだ番号・マーカー見出し・写真・本文を 3 回繰り返す
10. お客様の声（第三者の評価を見せる）: 見出しと星評価の下に写真 2 枚と感想を置き、注釈を添える
11. 使い方（手順を示す）: 円の番号で手順を縦に並べ、該当ステップだけ枠で囲んで詳しく説明する
12. ブランド紹介（信頼を補強する）: ブルーグレーの面に工場写真・本文・正円アイコンを置く
13. 最終 CTA とフッター（最後のひと押し）: オファーボックスを再掲し、小さなリンクとコピーライトで締める

Imagery

• 白背景で撮った、淡いベージュのチューブの商品写真
• クリームを塗り伸ばした跡やパウダーの粒を添える
• 明るく白飛び気味の自然光で撮った、20〜40 代女性の肌のアップ
• 成分は水滴や透明なテクスチャを円形にトリミングする
• 淡いピンクの肌断面図に、光の矢印をブルーで描く
• 背景に光のボケを薄く散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の固定幅カラムを置き、SP と同じ縦並びにする
• 左右の余白には淡いグレーの地を敷く
• 悩みカードや写真は横幅を広げず、カラム内に収める
• CTA ボタンは最大 400px 程度にとどめる
• 文字サイズは SP の 1.2 倍程度にする

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