DESIGN.md — 水色×黒黄の煽り型 口臭ケアサプリ LP（Fresh Mint Breath Supplement Persuasion LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、力強い・インパクト、ナチュラル
• キーワード: 水色の爽快感・黒×黄の警告演出・数値で煽る調査・ベージュの成分カード・緑グラデCTA
• 地の質感: 透明感のある水しぶき・氷のような光沢。タイル壁の写真背景、斜線ストライプの地紋、煙のぼかしを使う。
• 形: 四角いカードと帯見出しが基本。泡のような円形バッジ、吹き出し、下向き三角の区切りを組み合わせる。
• 温度感: 前半は冷たく爽やか。中盤は暗く緊迫。後半は温かいベージュで安心感。

Colors

• FV・オファー・成分表は白と水色で清潔感を出す。
• 悩み・煽りパートだけ黒地にし、黄色の警告テープとマゼンタで緊張感を出す。
• 統計は黄×黒の 2 色の円グラフと、黄色ベタ地で見せる。
• 成分とお客様の声はベージュ地＋こげ茶ラベルで落ち着かせる。
• CTA はどこでも緑グラデーションに白文字で統一する。
• 割引はオレンジのグラデ円か黄色の星形で示す。
• button-primary は文字 #FFFFFF × 背景 #4DB81E のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#388616、4.58:1）を使う。
• discount-badge は文字 #FFFFFF × 背景 #F07A1A のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#BB5B0C、4.55:1）を使う。

Typography

• 見出しは明朝体で字間を広めに取り、上品に見せる。
• 煽りコピーは黒い帯に白文字を載せ、1 行ずつ区切る。
• 数値は明朝の太字で極端に大きくする。単位は小さくする。
• キーワードは黄色マーカー、マゼンタの文字、傍点で強調する。
• 成分名の下には英字の筆記体を薄く添える。
• CTA と価格ラベルは太いゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の写真のみ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 7% ほど余白を取って中央に置く。
• セクションの頭は下向き三角か斜めカットでつなぐ。
• オファーブロックは FV の直後とページ後半で繰り返す。
• 悩みの写真は左右交互に置き、黒帯のテキストを重ねる。
• 成分カードは写真→ラベル帯→見出し→本文の順で縦に並べる。

Elevation & Depth

• オファーカードとお客様の声カードに柔らかい影（0 4px 12px rgba(0,0,0,.15)）を付ける。
• CTA ボタンは光沢グラデと下方向の影で立体的に見せる。
• 円形バッジは金属光沢やガラスのような質感にする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は長方形の角丸小で切り抜く。成分は円形サムネ、人物は切り抜きか円形にする。
• セクション境界: 下向き三角の吹き出し状の区切り、黒地の斜めカット、警告テープを使う。
• CTA は角丸 8px の横長ボタンにし、右に白い三角を付ける。
• 特長は泡のような円形で 3 つ並べる。
• ラベルは角のある帯形にする。
• 吹き出しは黒の雲形や角丸にする。

Components

• 緑グラデ申込ボタン（button-primary）: 幅いっぱいの緑グラデボタン。白太字と右三角を付ける。
• 定期コース価格カード（offer-card）: 水色の見出し帯、商品写真、大きな価格、割引バッジ、注釈、CTA を 1 枚にまとめる。
• 割引率の円バッジ（discount-badge）: オレンジのグラデ円か黄色の星形に、白い明朝で割引率を入れる。
• 黒帯の煽りテキスト（black-band-caption）: 写真の上や下に黒いベタ帯を置き、白文字を 1 行ずつ載せる。
• 統計の円グラフ（stat-pie）: 黄地の上に黒い円と黄の斜線を使い、大きな % 数値を添える。
• POINT 番号帯（point-label）: 紺灰の帯に白い欧文で番号を入れ、左右交互に配置する。
• 成分カード（ingredient-card）: 上に写真。こげ茶ラベルに成分名と英字筆記体を入れ、ベージュ地に明朝の見出しと本文を置く。
• お客様の声カード（voice-card）: 斜線ストライプの枠に白カードを置く。筆記体の番号タグ、人物写真、地域と名前を右寄せで入れる。
• 商品情報表（spec-table）: 水色の罫線と水色の項目名で、項目と内容を縦に積む表。

Do's and Don'ts

Do - 悩みパートは黒・黄・マゼンタで暗く強くし、前後の爽やかなパートとの差を出す。 - 数値はできる限り大きくし、円グラフで視覚化する。 - オファーブロックは 2 回以上繰り返す。 - 成分は写真を主役にした同型カードで並べる。 - CTA の色は緑だけで統一する。

Don't - ベージュの成分パートに黒黄の警告色を持ち込まない。 - CTA を水色やオレンジにしない。 - 見出しをすべてゴシックにしない。明朝を基調にする。 - 価格を小さく扱わない。 - 写真のない文字だけのカードを続けない。

Page Structure

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

1. ファーストビュー（悩みの解消と手軽さを一目で伝える）: 水色の水しぶき背景に笑顔の人物と商品を置き、極太の大コピーを重ねる。周年メダルと特長の泡 3 つを配置する。
2. オファー（定期コース）（最初に価格と割引を見せる）: 白カードに水色帯、大きな価格、オレンジの割引円、緑の CTA を入れる。
3. 悩みの提起（気付かない不安を共感させる）: 暗いグラデ地に場面写真を交互に置き、煙のイラストと黒帯の白文字を重ねる。
4. 煽りの山場（危機感を高める）: 黒地に雷形の切り込み、驚く人物、黄黒の警告テープを置く。
5. 調査結果（数値で問題の大きさを証明する）: 黄地と白地を三角で区切り、円グラフ、大数字、人型アイコンを並べる。
6. 解決策の提示（商品を答えとして示す）: 水色帯の見出しから商品 FV を再掲する。
7. 特長 POINT（商品の特長を 3 点で示す）: 白タイル背景に紺灰の番号帯を左右交互に置き、切り抜き写真と明朝コピーを添える。
8. 原因の解説（悩みの原因を整理する）: 斜線地に黒い雲形の吹き出しを置き、黒丸の番号付き紺灰カードを 3 枚並べる。
9. 成分紹介（成分の根拠を示す）: ベージュのカードを縦に並べる。写真、こげ茶ラベル、円形サムネのグリッドで構成する。
10. お客様の声（実感を伝えて信頼を得る）: ベージュ地に斜線枠の白カードを 3 枚置き、筆記体の番号タグを付ける。
11. 料金プラン比較（複数のコースから選ばせる）: FV を再掲した後、定期コース、安心の黒ボタン 2 つ、単品とひと月コースのカードを並べる。
12. 商品情報・購入案内（法的表示と購入時の不安解消）: 水色罫線の成分表の後、ベージュ見出し帯で支払い・送料・配送・問い合わせを並べる。

Imagery

• 人物写真は白い歯の笑顔と、困った顔・驚いた顔を対比させる。
• 口臭は茶色がかった煙のぼかしと手書きの擬音で表現する。
• 成分は自然光の植物・果物を寄りで撮り、緑を多めにする。
• 商品は水しぶきや果物と組み合わせ、明るい水色の光の中に置く。
• 葉っぱの切り抜きを画面の端に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、中央に 640px 前後の 1 カラムで置く方法を推奨する。
• 左右の余白は水色かベージュの地を延長して埋める。
• 成分の円形サムネは PC で 4〜5 列に増やしてもよい。
• CTA の幅は最大 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 行書くと起動時に読み込まれる。