DESIGN.md — 紫×ピンクの艶めく薬用化粧水 LP（Purple Glow Medicated Skincare Offer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 紫グラデーション・艶とスポットライト・ピンクの価格強調・明朝×ゴシック・繰り返しオファー
• 地の質感: FVと価格枠は光沢のある紫グラデーション。悩み・成分減少パートはグレーのひび割れ質感。それ以外は白と淡いピンク・ラベンダーのフラット地。
• 形: 角丸の白カード、ピル型タグ、円形の年齢バッジ、V字の下向き区切り、リボン型バッジ
• 温度感: やや暖かい。紫の高級感をピンクとイエローの柔らかさで中和する。

Colors

• 紫はFV・オファー帯・番号数字・強調太字に限定し、ブランドの格を示す。
• 価格・割引率・年齢バッジ・キーワード強調はピンクで統一する。
• 主CTAだけは紫系から外した鮮やかな緑グラデーションで目立たせる。
• 悩み・減少データはグレーのひび割れ地で暗く、解決パートは白・淡ピンクで明るく切り替える。
• 黄色はマーカーとオファー見出し、成分の色見せに使う差し色。
• 白カードを淡色地に浮かせ、本文は濃グレーで読ませる。
• button-primary は文字 #FFFFFF × 背景 #33D559 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C8836、4.54:1）を使う。
• badge-ribbon は文字 #FFFFFF × 背景 #E0587A のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9335D、4.58:1）を使う。
• discount-circle は文字 #FFFFFF × 背景 #E0587A のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D9335D、4.58:1）を使う。
• limit-band は文字 #FFFFFF × 背景 #F33343 のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#EA0E20、4.58:1）を使う。

Typography

• 大見出しは明朝で上品に、訴求ラベルや価格周りはゴシック太字で強く。
• 見出し内の助詞は小さく、キーワードは大きく・色付きにするジャンプ率を使う。
• 価格数字は明朝系の大きなピンク数字（約80px）で、円・税込は小さく添える。
• 強調語はピンクまたは紫の太字、または黄色マーカーで示す。
• 注釈は※や*番号で本文の後に小さくまとめる。
• 番号は明朝イタリック風の大きな紫数字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。効能タグや比較画像のみ 2〜3 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• オファーブロックを数セクションおきに同一デザインで繰り返す。
• オファー直下に注釈ブロックを必ず置く。
• 口コミカードは左右交互に寄せ、年齢バッジを交互の角に重ねる。
• 特長パートはラベンダー地の上に白い大カードを置き、点線で番号ごとに区切る。
• セクション見出しは中央揃え、本文はブロック内で左揃え。

Elevation & Depth

• オファーの白カードと口コミカードに柔らかい影（0 4px 16px 薄グレー）。
• CTAボタンは下方向の影でぷっくりさせる。
• ボトル写真はスポットライトと反射で浮かせる。
• それ以外の面はフラットにする。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形か円形。成分写真は円形の泡やしずく形で見せる。
• セクション境界: V字の下向き三角や矢印で次のセクションへつなぐ。基本は直線の切り替え。
• 年齢バッジは円形にし、吹き出しの尻尾を付ける。
• 効能タグは淡紫のピル型を2×2で並べる。
• 割引率は円形のピンクバッジで価格に重ねる。
• 限定条件はリボン型・赤帯で示す。
• チェックリストは角丸の白カードに点線区切り。

Components

• 緑の主CTA（button-primary）: 横幅ほぼいっぱいのピル型。緑グラデーションに白太字、右端に「>」。
• 初回オファーカード（offer-card）: 紫帯の上に白カード。黄色の見出し、商品写真、ピンクの大価格、割引率の円、効能タグを一枚にまとめる。
• リボン型バッジ（badge-ribbon）: オファー右上に垂れるピンクのリボン。縛りなし等の安心訴求を白文字で入れる。
• 割引率の円（discount-circle）: ピンクの円に白い明朝数字で割引率。吹き出しの尻尾付き。
• 数量限定の赤帯（limit-band）: 赤い横帯に白文字、数字だけ黄色で大きく。下に尻尾。
• 口コミカード（voice-card）: 白カードにピンクの太字見出しと本文。円形のピンク年齢バッジを角に重ね、人物イラストか使用写真を添える。
• 悩みチェックリスト（check-list）: グレー質感地の白カードに紫のチェックボックスと紫下線の強調語を4行、点線で区切る。
• 番号付き特長（feature-number）: 大きな紫の明朝数字の下に見出し、本文、写真。点線で次の番号と区切る。
• 効能タグ（pill-tag）: 淡紫のピルに濃グレー文字で効能を2×2で並べる。
• マーカー見出し（label-marker）: 黄色の帯の上にスラッシュ記号で挟んだ短いラベルを置く。

Do's and Don'ts

Do - オファーブロックは毎回同じデザインで3〜5回繰り返す。 - 価格・割引は大きいピンク、CTAは緑と色の役割を固定する。 - 悩みは暗いグレー質感、解決は明るい白・ピンクとトーンを切り替える。 - 成分の色やとろみを接写して透明感を見せる。 - 注釈番号を見出しに付け、ブロック末に小さくまとめる。

Don't - CTAを紫やピンクにしてオファーに埋もれさせない。 - 明朝見出しを細すぎるウェイトで小さく使わない。 - 原色の紫ベタを広い本文背景に使わない。 - 口コミカードを一列に同じ向きで並べ単調にしない。 - 注釈を省いたり本文と同じ大きさにしない。

Page Structure

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

1. ファーストビュー（効能と商品の格を一目で伝える）: 濃紫のスポットライト背景にボトル写真を中央、左に縦組み明朝の大コピー、右に縦組みの補足コピー。下に金枠の成分ラベル。
2. 初回オファー（初回価格で即購入を促す）: 紫帯の上に黄色見出しとリボン、白カードに商品・大価格・割引円・タグ・赤帯・緑CTA。直下に注釈。
3. お客様の声（共感と信頼を得る）: 淡ピンク地に帯ラベル・明朝見出し・筆記体英字。白カードを左右交互に配置し年齢バッジを重ねる。
4. 悩みの提起（肌悩みを自分ごと化する）: グレーのひび割れ質感地に手書き風の吹き出し見出し、白カードのチェックリスト4項目。下はV字で切る。
5. 事実・成分の重要性（解決の鍵が成分だと示す）: 黄色マーカーのラベル、ゴシック見出し、白背景の女性ポートレート、ピンクの下向き三角。
6. 成分の解説（成分の価値を理解させる）: 金色の明朝見出し、オイル泡の接写写真、中央揃えの本文にピンク強調。金色ボケ背景の帯を挟む。
7. 課題データ（年齢とともに減ることを示す）: グレー質感地に黒ピルラベル、黄色強調の明朝見出し、白いグラフカードにピンク矢印と円の注目点。
8. 商品の登場（解決策として商品を提示）: 白いタオルとしずくの明るい写真に紫の明朝大見出し。続いて色の濃さ＝濃度の証として黄色の液滴写真。
9. 特長3つ（具体的な強みを順に説明）: ラベンダー地の白い大カードに紫の大番号1〜3、見出し、成分カード・実験写真・円形の成分ビジュアル。
10. 効果のまとめ（使用後の理想像を見せる）: 女性の目を閉じた笑顔写真の周りに黄色い球形バッジで効果を散らす。
11. 無添加・使用感（安心感と使い心地を補足）: 斜線入りの円で無添加3つ、接触角の比較写真2枚、肌になじむ手元写真。
12. クロージングCTA（最後の購入後押し）: 口コミ第二弾の後、同じオファーブロックで締める。

Imagery

• 商品ボトルは暗い背景にスポットライトと床の反射で光沢を強調する。
• モデルは30〜40代女性、白い服、白背景、頬に手を当てる柔らかい表情。
• 成分は黄色いオイルの泡やしずくを接写し、透明感と濃さを見せる。
• 口コミには線画の女性イラストか、家庭で撮った使用写真を添える。
• 背景に光のボケ・キラキラ・淡い煙状のグラデーションを使う。
• 悩み・データ部分はグレーのひび割れ大地テクスチャを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 幅カラムを置き、左右は淡色で埋める構成を推奨。
• FV は PC で横長にし、コピー左・ボトル右の 2 カラムにする。
• 口コミカードは PC で 2 列グリッドにしてもよい。
• オファーブロックは PC でも 1 枚のカードのまま最大幅 720px 程度。
• CTA は PC で幅 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 行書くと起動時に読み込まれる。