DESIGN.md — コーラル×若葉グリーンの敏感肌スキンケアLP（Coral and Leaf Green Sensitive Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: コーラル・若葉グリーン・方眼紙柄・丸ゴシック・皮膚断面図・特典カード
• 地の質感: 白地に薄い方眼グリッド。水面の波紋やシャボン玉の淡い写真背景。CTAには光沢グラデーション
• 形: 角丸カード、花形の吹き出し、円形の成分バッジ、ピル型のラベル
• 温度感: 暖かめ。コーラルとクリームで温もりを出し、グリーンとミントで清潔感を足す

Colors

• 商品ごとに色を固定する。化粧水はコーラル系、洗顔料は若葉グリーン系で、見出し帯・番号・枠線も同じ色にそろえる
• 本文と見出しは黒を使わず、こげ茶で統一する
• 特典・購入エリアはサーモンの地に白カードを置き、他のセクションより温度を上げる
• CTAは深紅の光沢グラデーションにする。洗顔料単品のCTAだけ濃い緑にする
• 強調語は文字色をコーラルにするか、黄色のマーカーを引く
• ポイント番号は化粧水がティール、洗顔料がコーラルレッドの大きな数字
• benefit-tab は文字 #FEFAF5 × 背景 #F36952 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC2D0F、4.57:1）を使う。
• effect-band は文字 #FEFAF5 × 背景 #72BB69 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#42813A、4.56:1）を使う。

Typography

• 見出しは丸ゴシックの太字にし、字間を広めにとる
• 見出しの中でキーワードだけを大きくし、コーラルにする
• 小見出しは「＼ ／」の斜線で挟む
• ポイント番号は太い欧文数字を約60pxで表示し、筆記体の「Point」を重ねる
• 価格は数字を約40pxの太字にし、「円」「(税込)」は小さく添える
• 注釈は※番号付きで、セクション末尾にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品比較・成分円・選択肢だけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約16pxの余白を残して中央に置く
• お客様の声は写真と文を左右交互に並べるジグザグ配置
• 各ポイントは番号→見出し→リード文→図解カードの順に縦へ積む
• 特典カードはヘッダー帯→商品と価格→特典1・2→CTAの順で、ページ内で3回くり返す
• FVは画面を左右に2分割し、商品を1つずつ配置する

Elevation & Depth

• 白カードには、ふんわりした薄い影をつける
• CTAボタンには下方向に濃い影と上部のハイライトをつけ、押せる立体感を出す
• 商品写真は背景を切り抜き、床に落ちる影を残す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き。使用シーンの写真は角丸の長方形。成分は円形にクロップ
• セクション境界: 下向き三角の切り欠き、またはゆるい山形の境界でセクションを区切る
• 悩みはギザギザの花形バッジに入れる
• Stepや商品ラベルはピル型にする
• 特典番号は半円のタブにつける
• ポイント見出しのカードは上の角を大きく丸める

Components

• 購入CTA（button-primary）: 深紅の光沢グラデーションに白太字。右端に三角アイコン
• 初回特典カード（offer-card）: こげ茶のヘッダー帯（ゴールドの強調文字）＋白地に商品・価格・特典を載せる
• 特典番号ボックス（benefit-tab）: コーラルの角丸箱。上部の半円タブに番号を入れ、筆記体のpointを添える
• 悩み花形バッジ（worry-bubble）: こげ茶とコーラルのギザギザ円に白文字。人物写真の周りに4つ配置する
• ポイント番号見出し（point-number）: 筆記体の「Point」＋大きな2桁の数字＋右に2行の見出し
• VOICEラベル（voice-tag）: コーラルの細枠で囲んだ小さなラベル。年代と肌質はコーラル文字
• チェックリスト（check-list）: チェックボックス型のアイコン付きで、処方のこだわりを縦に並べる
• 成分の円バッジ（ingredient-circle）: 半透明の水玉風の円に成分名を入れ、3つ＋2つで配置する
• 効能効果帯（effect-band）: 写真の下にグリーンまたはコーラルの2分割帯で訴求を2つ並べ、×でつなぐ。その下に細い効能欄を置く

Do's and Don'ts

Do - 商品ごとの色分けを、FVからポイント解説・CTAまで一貫させる - 皮膚断面図などのやさしい図解で、仕組みを視覚的に説明する - 白い方眼紙柄の地を使い、清潔で研究的な印象を出す - 強調語はコーラル文字か黄色マーカーで目立たせる - 医薬部外品の表示や注釈を、枠付きの小ラベルで正確に添える

Don't - 本文に純黒や寒色系の濃紺を使わない - CTAを単色フラットにしない。光沢と影で目立たせる - 原色の赤や鮮やかすぎる蛍光グリーンを広い面に使わない - 角張ったゴシック体の見出しで硬い印象にしない - 注釈を省略したり、本文と同じサイズで書いたりしない

Page Structure

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

1. ファーストビュー（対象者と2ステップのケアを一目で伝える）: 左をグリーン、右をコーラルに2分割。上に大きな見出し、中央に商品の切り抜き、下にStepラベルと商品名
2. 悩みの提起（対象者の悩みに共感する）: 方眼の白地。中央に悩む女性の写真を置き、周りに花形バッジで悩みを4つ配置
3. 専門家の解説（原因を説明して信頼を得る）: コーラルの見出し帯つきのカード。チェックリストで3要因を示し、右に白衣の人物写真
4. 解決策の提示（シリーズ商品を紹介する）: 淡いグレーの泡背景に、円形の特長バッジ2つと商品を並べる
5. 使い方ステップ（洗顔→保湿の順番を示す）: 商品色の枠線カードにピル見出しをつける。使用写真＋2分割の効能帯
6. 初回購入特典（購入を後押しする）: サーモン地に月桂樹の装飾と大見出し。特典カードと深紅のCTA
7. お客様の声（使用感の口コミを紹介する）: クリームの地。写真と文を左右交互に並べ、VOICEラベルをつける
8. 化粧水のポイント（成分と仕組みを説明する）: グラデーションの帯見出し＋ティールの番号。断面図と成分の円バッジ、チェックリスト
9. 洗顔料のポイント（泡・抗菌・成分・処方を説明する）: グリーンの帯見出し＋コーラルの番号。写真の上に文字帯、成分の円写真カード、豆知識コラム
10. 特典の再掲とシリーズ紹介（関連商品のついで買いを促す）: サーモン地に集合写真と商品別の白カード（価格＋送料無料ボタン）
11. フッター（法定表記とリンクを載せる）: 白地に小さなグレー文字のリンクを縦線で区切り、コピーライトを添える

Imagery

• 商品は白背景で切り抜き、泡や液体のしずくを横に添える
• 人物は素肌感のある女性。白Tシャツで、洗顔・頬に触れるなどのしぐさ
• 背景は水面の波紋・シャボン玉・泡を淡くぼかした写真
• 図解はフラットなイラスト。肌色・ピンク・水色で角質層を描き、点線の丸と矢印で説明する
• 植物成分は葉や花の切り抜きを淡い円の中に置く
• 装飾は月桂樹のリース、手描き風の吹き出し線、筆記体のpoint
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、PCでは中央に幅約480〜750pxのカラムを置き、左右は方眼柄やセクション色で埋めることを推奨する
• FVの左右2分割はPCでも維持し、商品を大きく見せる
• お客様の声のジグザグ配置は、PCでは写真の比率を大きくする
• 成分の円バッジやシリーズ商品カードは、PCで3〜4列に広げてよい
• CTAの幅は最大420px程度に抑え、中央に置く

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