DESIGN.md — 若草グリーン×白の清潔感ある薬用洗顔料 LP（Clean Green Medicated Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 清潔感・薬用・緑・解説図・円グラフ・特典訴求
• 地の質感: 白とミントのフラットな地。方眼の細い格子柄と淡い黄緑のグラデーション帯を使う
• 形: 細い緑の枠線カード、両端を尖らせた六角形のリボン見出し、円形の番号バッジ、ギザギザの円
• 温度感: やや涼しげで明るい。購入ボタンの赤だけが温かい

Colors

• 地は白とミントを交互に使い、セクションを区切る
• 見出し・枠線・番号バッジはすべて primary の緑に揃える
• cta の赤ピンクは購入ボタンだけに使う。少し縦グラデーションと影をつける
• accent-1 のサーモン赤は悩みの強調文と特典の吹き出しだけに使う
• 細菌はティール、真菌は紫と決めて、対比の図で使い続ける
• 特典ボックスは淡い黄緑の地に白いカードを重ねる
• button-primary は文字 #FFF2F4 × 背景 #E0405E のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D92345、4.5:1）を使う。
• ribbon-heading は文字 #FFFFFF × 背景 #05A43D のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#048933、4.53:1）を使う。
• point-badge は文字 #FFFFFF × 背景 #05A43D のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#048933、4.53:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #D54561 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D43F5C、4.5:1）を使う。
• efficacy-bar は文字 #FFFFFF × 背景 #05A43D のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#048933、4.53:1）を使う。
• pie-chart は文字 #FFFFFF × 背景 #3FB16B のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#308651、4.51:1）を使う。

Typography

• 見出しは緑の太いゴシックにし、字間を少し広げる
• 悩みを強調するところは、緑・赤・墨の 3 色で語ごとに色を変える
• 「（細菌）」のような補足は、本文より小さい文字で添える
• 見出しの下に、黄緑の斜線マーカーを敷くことがある
• 注釈は※番号つきで 10px 前後の灰色にする
• 価格の数字は特大の緑にし、「円」「（税込）」は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品比較と成分紹介だけ 2 列にする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長セクションは、ミント地の上に白い大きなカードを置き、ポイントごとに分ける
• ポイント見出しの下に、緑の太い横線を全幅で引く
• 購入特典ブロックはページ内で 4 回繰り返す
• 写真と文章は左右に並べ、写真を画面端まで出す
• 口コミカードは縦に積み、間を 12px 空ける

Elevation & Depth

• 基本はフラットにし、カードは枠線で区切る
• 購入ボタンだけに下向きの影（0 4px 8px rgba(0,0,0,.2)）をつける
• 白いカードは影なしで、淡い地との明度差で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角丸なしの矩形で端まで出す。泡や成分の写真は円形に切り抜く。菌の写真はギザギザの円にする
• セクション境界: 直線で地の色を切り替える。淡い黄緑のグラデーション帯や方眼の背景も使う
• 特典の見出しは、両端を尖らせた六角形のリボンにする
• 番号は緑の円に白い数字を入れ、上に小さな英字の弧形ラベルを載せる
• 口コミカードは緑の 2px 枠で、角丸 12px
• 吹き出しのラベルは、角丸 full のピル型
• 効能ラベルは、緑地と白地の 2 区画に分けた横長のボックスにする

Components

• 購入ボタン（button-primary）: 幅いっぱいの赤ピンクのグラデーションボタン。角丸 8px で影をつけ、右端に「>」を置く
• 六角リボン見出し（ribbon-heading）: 両端を尖らせた緑のリボン。白い二重線で縁取り、白文字を載せる
• ポイント番号（point-badge）: 緑の円に白い数字を入れ、上に小さな英字の弧形ラベル。右に大きな緑の見出しを置く
• 購入特典ボックス（offer-box）: 淡い黄緑の地に白いカードを 2 段重ねる。送料無料のカードとサンプル同梱のカードの下に、価格と商品画像を置く
• 口コミカード（review-card）: 白地に緑の枠。緑のタイトル、人物アイコンと名前、本文の順に並べる
• Q&A ブロック（qa-block）: 緑の大きな Q と点線の下線。回答は黄緑地のカードに、緑の円で囲んだ A をつける。カードの下には斜線の影を敷く
• 吹き出しラベル（pill-label）: サーモン赤または緑のピル型ラベル。白文字で、カテゴリ名や問いかけを入れる
• 効能表示（efficacy-bar）: 左が緑地に白文字のラベル、右が白地に本文。外側を細い枠で囲む
• 満足度の円グラフ（pie-chart）: 緑の濃淡と灰で塗り分けた円グラフ。中央に白い大きな％を置き、下に凡例を並べる

Do's and Don'ts

Do - 見出し・枠・番号は緑一色で統一する - 購入特典ブロックは同じデザインで何度も繰り返す - 原因の説明は、色分けした図と番号つきのリストで見せる - 数値や効能の表示には※注釈と出典を必ず添える - 白い枠のカードで情報を細かく区切り、整理された印象にする

Don't - 購入ボタン以外に赤ピンクの大きな面を使わない - 暗い背景や黒い面を広く使わない（菌の写真の円だけは例外） - 明朝体や手書き書体を混ぜない - 強い影や立体的な装飾を多用しない - 緑を何色にも増やさない。濃・中・淡の 3 段階までにする

Page Structure

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

1. ファーストビュー（成分の特長と商品を一目で伝える）: 淡いラボ風の写真背景の中央に商品を置く。左右に白い枠の特長ボックスを置き、上に緑の大見出しを載せる
2. 購入特典 CTA（初回特典と価格を提示する）: 六角リボン見出し、送料無料、サンプル同梱、大きな価格、赤い購入ボタンの順に並べる
3. 原因の解説（悩みの原因を科学的に説明する）: 方眼の背景にする。ティールと紫のラベル 2 つと、ギザギザ円の菌写真を置く。その下に、緑の枠で囲んだ毛穴の断面図と番号リストを入れる
4. 悩みの提起（繰り返す悩みに共感する）: 人物写真の上に、白い帯で区切った問いかけの文字を重ねる
5. 解決の提示と商品紹介（商品で解決できることを示す）: 3 色で強調した文と、黄緑グラデーションの帯を置く。本体と詰め替えを並べて価格を表示する
6. 4 つのポイント（特長を順に説明する）: 緑の全幅の帯にタイトルを載せる。ミント地の上に白いカードを置き、番号バッジ、図、円グラフ、写真で 1 つずつ見せる
7. お客様の声（使用者の実感で信頼を高める）: 見出しの下に吹き出し形の線を引く。緑の枠の口コミカードを 3 枚並べ、最後に出典の注釈を添える
8. よくある疑問（疑問に答えて不安を消す）: 緑の大きな枠の中に、Q と黄緑の A カードを左右にずらして配置する
9. 開発者の推薦（専門家による裏付けを示す）: 白衣の線画イラストと緑の枠の見出しを置き、淡いミントの本文ボックスを続ける
10. シリーズ紹介（関連商品へ誘導する）: 水色地とピンク地のカードを 2 列に並べ、商品画像と効能表示を入れる
11. 問い合わせ・フッター（電話窓口と法的リンクを示す）: 灰色の地に白いカードを置き、フリーダイヤルを大きく表示する。下に小さな文字のリンクを並べる

Imagery

• 商品は白背景の切り抜きにし、やわらかい影をつける
• 人物は白いヘアバンドやタオルを使い、自然光で明るく撮った清潔な洗顔シーンにする
• 成分は植物を白背景で撮った写真にし、淡い緑の円の上に載せる
• 解説図は肌色・黄色・赤のフラットなイラストにし、緑の番号線を引く
• 研究室のガラス器具を淡く写した写真を、背景に薄く敷く
• 開発者は細い線画で、親しみのある人物イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後のカラムに SP と同じ構成を収め、左右は淡い地で埋める
• PC では写真と文章の 2 列を広げ、ポイントカードの余白を増やす
• 購入ボタンは PC で最大 600px 幅にとどめる
• 口コミカードは PC で 2〜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 行書くと起動時に読み込まれる。