DESIGN.md — 深緑×ティールと金の美容液通販 LP（Teal Green Clinical Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 深緑・ティール・金箔・明朝見出し・水滴・ツボクサの葉
• 地の質感: 水滴・ジェル・葉の写真と、ザラついた黒緑の板の質感を合わせる。金はグラデーションの箔で見せる
• 形: 角丸カード、円形の成分バブル、斜めにカットした帯、矢羽型のタブ
• 温度感: 涼しく清潔。価格まわりだけ赤とオレンジで温度を上げる

Colors

• 地は白・ミント・淡グレーを交互に敷き、要所の特典と悩みのセクションだけ深緑にする
• ティールはタブ、バッジ、見出し帯、文字マーカーに限って使う
• 赤は割引率と価格の数字に限る。オレンジは主 CTA だけに使う
• 金はグラデーションで特典見出し・開発訴求・見出し帯に使う
• 本文の強調はティール文字か、ティール地に白抜きの帯で入れる
• 悩みのセクションは黒緑のテクスチャ地に、深緑の帯と白文字を重ねる
• button-primary は文字 #FEFFFF × 背景 #F07A1E のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD5A0D、4.53:1）を使う。
• badge-tag は文字 #EAF1F0 × 背景 #1EA297 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#167971、4.58:1）を使う。

Typography

• 大見出しは明朝。キーワードだけ 1.5 倍に大きくし、色か金帯で目立たせる
• 価格の数字は明朝の極太で特大にし、「円」と「税込」は小さく添える
• 英字ラベルは字間を広げ、細いセリフ体で見出しの上に置く
• ファーストビューと声のキャッチは縦書き明朝にする
• 本文は 15px 前後の太めのゴシックで、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードを 2 列のグリッドで並べる箇所もある
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面いっぱいに見せ、テキストカードは左右 5% 内側に置く
• 特典ブロックと価格カードは、ページ中で 3 回同じ形でくり返す
• 成分は円形バブルを 4〜5 個、ずらして重ねる
• 悩みは横長の写真帯を縦に 5 本積み、各帯に深緑のテキスト帯を重ねる
• セクション頭には英字の円弧ラベルか、斜めの帯を置く

Elevation & Depth

• カードは薄い影（0 4px 12px rgba(0,0,0,.12)）で浮かせる
• CTA ボタンは下方向の影と光沢グラデーションで立体的に見せる
• 特典カードには白地にティールの細い枠と影をつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は大きな円弧で切り抜く。成分は円形のバブルにする
• セクション境界: 斜めのカットか緩い弧で区切る。直線で区切る箇所もある
• 価格カードは角丸 16px で、上辺をティールの帯にする
• 特典番号は左に置く角丸のティールバッジにする
• 成分の比較タブは矢羽（シェブロン）形で 2 つ並べる
• FAQ は深緑の角の立った横長バー

Components

• 主 CTA ボタン（button-primary）: オレンジのピル型。上段に小さい割引文言、下段に大きい行動文言、右端に白丸の矢印アイコン。左に商品画像を重ねる
• 定期コース価格カード（price-card）: 上辺はティールの見出し帯。中に商品画像、内容量、取り消し線の通常価格、赤帯の割引率、特大の価格、ティールのバッジ群を並べる
• 特典カード（benefit-card）: 左にティールの番号バッジ、右に赤い割引率の明朝文字。深緑地の上に 3 枚縦に並べる
• 条件バッジ（badge-tag）: ティール地に白文字の小さな角丸タグ。送料や解約条件を 2〜3 個並べる
• 成分バブル（ingredient-bubble）: 半透明の水滴風の円に、明朝 2 行で成分名と数を入れる
• 英字ラベル（section-label）: 深緑の半円か弧の中に、字間を広げた英字を入れる。セクションの先頭に置く
• こだわり番号（secret-badge）: 深緑の角丸四角に、小さい英字と大きい番号の 2 段
• FAQ アコーディオン（faq-bar）: 深緑のバー。左に大きな薄い Q、右に＋アイコン
• 悩み写真帯（worry-strip）: 横長の人物写真に深緑の帯を 1〜2 行重ね、一部の語をティールでハイライトする
• 使い方ステップ（step-card）: 白の角丸カードに、左の写真、ティールの丸い step 番号、右の説明文を並べる

Do's and Don'ts

Do - 価格の訴求は赤い明朝の特大数字と、取り消し線の通常価格を対にして見せる - 特典と価格カードを、ページの前・中・後の 3 か所にくり返し置く - 水滴・葉・ジェルの写真で清潔感を出す - 見出しのキーワードは金帯やティール文字で強調する - 注釈（※）は小さな灰色文字で、カード下にまとめる

Don't - オレンジを CTA 以外に使わない - 暖色の背景を広く敷かない - 見出しを丸ゴシックにしない - フラットなイラストで成分を描かない - 余白の少ない詰め込みカードにしない - 金を平塗りの黄色で代用しない

Page Structure

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

1. ファーストビュー（実績と商品の魅力を一目で伝える）: 金の月桂樹で販売実績を飾る。女性写真に縦書き明朝のコピーと商品ボトルを重ね、下に成分バブルを並べる
2. 商品名と使用前後（商品の認知と効果の印象づけ）: 欧文セリフの商品名、ティールのピル型帯、BEFORE/AFTER の 2 枚の写真、注釈
3. 特典と価格（割引による購入動機をつくる）: 深緑地に特典カード 3 枚、続けて価格カードと CTA
4. 受賞実績（第三者の評価で信頼を得る）: 英字ラベル、雑誌名、大きな明朝の順位、誌面画像のコラージュ
5. SNS の口コミ（インフルエンサーの使用で共感を得る）: ティール地に SNS 投稿風カードを 2×2 で並べ、背景に大きなハッシュタグを置く
6. 開発背景と商品紹介（新商品の価値と仕組みを示す）: 金の帯で開発期間を見せ、成分写真の円に商品を挟む。浸透の断面図を添える
7. 悩みの提起（読者の悩みを言語化する）: 黒緑のテクスチャ地に悩みの写真帯を 5 本。放置した場合の不安を円形の板 3 つで示す
8. 解決提示（商品を悩みの解決策として示す）: 金の円バッジから導き、水滴の背景に商品と縦書きコピーを置く
9. 成分の特長（2 つの主成分を説明する）: 矢羽型のタブを 2 つ並べ、写真付き角丸カードにチェック付きの箇条を入れる
10. 3 つのこだわり（根拠と品質で納得させる）: 番号バッジ、明朝の見出しと金帯、英字の小見出し、測定結果のバーグラフ、成分の円
11. お客様の声（実感の声で背中を押す）: 円弧に切り抜いた人物写真に縦書きの見出しを重ね、名前・年代と本文を添える
12. 使い方（使用の手軽さを示す）: 3 ステップのカードを点線でつなぐ
13. よくある質問（購入前の不安を解消する）: 深緑のアコーディオンバーを縦に並べる
14. 最終 CTA（購入を決断させる）: 特典 3 枚、価格カード、オレンジの CTA、注釈

Imagery

• 白背景で明るく撮った、肌のきれいな女性のアップ。頬に手を添えたポーズ
• シルバーのエアレスボトルを光沢と影つきで斜めに配置する
• ツボクサの丸い葉、水滴、ジェルのテクスチャを前景にあしらう
• 悩みの写真は彩度を落とし、鏡を見て困った表情にする
• 成分は光沢のある水滴の球体で表現する
• 金は箔のグラデーションと月桂樹の飾りで表現する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では SP のデザインを幅 750px 程度で中央に置く運用を推奨
• 左右の余白は淡いミントかグレーの地で埋める
• SNS カードは PC で 4 列にしてもよい
• 価格カードは PC で商品画像と価格を左右 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 行書くと起動時に読み込まれる。