DESIGN.md — オレンジ×黄の柑橘系ビタミンサプリ LP（Vivid Citrus Orange Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 柑橘オレンジ・レモンイエロー・透明感・しずく・泡・縦書きコピー・数字訴求
• 地の質感: 白〜クリームの地に光の玉・水滴・泡のぼかし。写真は明るいハイキーで艶感がある。
• 形: 角丸の白カード、正円バッジ、斜めカットの帯、ピル型の見出しラベル。
• 温度感: 暖色中心で明るく健康的。保証セクションだけ水色で涼しく切り替える。

Colors

• 主役は朱オレンジ、地は白・クリーム・ピーチで明るく保つ。
• 数字・キーワードは朱オレンジの大文字か朱の帯に白抜き。
• CTA ボタンだけ緑のグラデーションにして目立たせる。
• 返金保証ブロックは水色地と青文字で信頼感を出す。
• 悩みの提起だけダークブラウン地にして気分を切り替える。
• データ・比較図の背景帯に深緑を使い、オレンジとの補色で対比する。
• 黄はポイント見出しの地と強調下線に限定する。
• button-primary は文字 #FFFFFF × 背景 #2E9A62 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#288656、4.53:1）を使う。
• countdown-timer は文字 #EB642D × 背景 #FEFEFE のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4913、4.6:1）を使う。
• guarantee-banner は文字 #FFFFFF × 背景 #3A9BC0 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2F7F9D、4.52:1）を使う。
• price-block は文字 #EB642D × 背景 #FFFFFF のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4913、4.52:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #EB642D のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4913、4.52:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #EB642D のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4913、4.52:1）を使う。
• loop-ticker は文字 #EB642D × 背景 #FFFFFF のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4913、4.52:1）を使う。

Typography

• キーワードは周りの文字の 1.5〜2 倍に拡大して朱色にする。
• モデル写真の横に縦書きの見出しを置く。
• 価格の数字は極太で巨大にし、単位は小さく添える。
• 英字の装飾テキストは薄い色で大きく背景に敷く。
• 注釈は 10px 前後でグレーにし、ブロックの下にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分カードのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅で、文字は写真の上に重ねる。
• 価格・CTA ブロックはページ中で 2 回以上繰り返す。
• 『設計 01/02』『POINT 01〜03』のように番号付きで特長を並べる。
• 比較図・グラフは白カードの中に入れる。
• セクション間は斜めカットや帯で区切る。

Elevation & Depth

• 白カードには淡い影（0 4px 12px rgba(0,0,0,.08)）をつける。
• CTA ボタンは下側に濃い影をつけ、立体的に見せる。
• 商品パッケージ写真には落ち影をつけて浮かせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は全幅の角版か角丸、成分写真は上部角丸カード、比較写真は角版。
• セクション境界: 斜めカット・ストライプ帯・英字ループ帯
• 正円バッジで割引率や数字を囲む。
• 吹き出しは白の角丸で、しっぽは小さな丸にする。
• 見出しラベルはピル型か角丸の帯にする。
• カウントダウンの数字は角丸の白タイルに入れる。

Components

• 主 CTA ボタン（button-primary）: 緑グラデーションの横長ボタン。左に保証の円バッジ、右に再生風の矢印丸。
• カウントダウン（countdown-timer）: 白タイルにデジタル風の朱数字で残り時間を表示する。
• 保証吹き出し（guarantee-banner）: 青地の角丸帯に白文字。下に三角のしっぽ。
• 価格ブロック（price-block）: 通常価格→矢印→巨大な初回価格。割引率の円バッジと送料無料の枠を添える。
• 円形バッジ（badge-circle）: 朱か黄の正円に白抜きで短いフレーズや数字を入れる。
• 帯見出し（heading-band）: 朱の長方形に白抜き文字。2 段に重ねて並べる。
• 悩み吹き出し（worry-bubble）: ダーク地の写真の上に白い角丸吹き出しで悩みを書く。
• 成分カード（ingredient-card）: 上が写真、下が白地に成分名と説明。2 列で並べる。
• POINT 番号（point-number）: 英字 POINT と細い円線で囲んだ 2 桁番号。
• 英字ループ帯（loop-ticker）: ブランド英字をくり返した細い帯でセクションを区切る。

Do's and Don'ts

Do - 暖色の地に写真を重ね、明るい透明感を保つ。 - 数字（％・円・日・μm）は大きく朱色で見せる。 - しずく・光の玉・泡のぼかしで質感を足す。 - 価格と CTA は中盤と後半で繰り返す。 - 比較グラフや図は白カードに入れて簡潔に見せる。

Don't - 暗い地を多用しない（悩み提起だけにする）。 - 寒色を主役にしない（保証ブロックだけにする）。 - 細い明朝で見出しを作らない。 - 写真を暗いトーンや低彩度にしない。 - CTA に朱以外の目立たない色を使わない。

Page Structure

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

1. ファーストビュー（商品と効果を一目で伝える）: 笑顔のモデルと商品写真、縦書きコピー、朱の帯に特長ラベル 2 つとロゴ。
2. 実績（ランキングや販売数で権威づけ）: 大きな数字の見出し、商品の台座写真、金色の盾型バッジを 3 つ並べる。
3. イメージビジュアル（続けやすさを印象づける）: モデル全面写真に巨大な手書き風の朱見出しと黄色の吹き出し。
4. オファー・CTA（初回価格で申込を促す）: カウントダウン、保証の吹き出し、価格ブロック、緑の CTA。
5. 返金保証（不安を取り除く）: 水色の泡背景、円矢印の中に青い大きな数字、白いボックスを 3 つ。
6. インフルエンサー（社会的証明）: フォロワー数の円バッジ、斜めの写真、朱の帯で名前、動画のサムネイル。
7. 悩みの提起（従来品の不満を共有）: ダーク地に写真をずらして配置し、白い吹き出しで悩みを書く。
8. 特長・設計 01/02（仕組みを図解で説明）: 番号見出し、朱帯のキーワード、図解の円、比較写真、グラフを白カードに。
9. 原料・成分（品質と配合を伝える）: ×で結んだ 2 つの枠、成分写真カードを 2 列のグリッドで。
10. POINT 01〜03（飲みやすさ・飲み方・価格）: 黄地・グレー地・朱地を切り替え、円バッジと写真で番号ごとに説明。
11. Q&A（安さの理由を説明）: 緑のタブ見出しの白カードに、図とコストダウンの矢印。

Imagery

• 20〜30 代の女性モデルがハイキーの白背景で自然に笑う写真。
• 商品パッケージは黄→朱のグラデーションで、斜めに置いて影をつける。
• オレンジ色の液体の玉・しずく・光のフレアを背景に散らす。
• 成分は素材の寄り写真で、温かい色味。
• 体の図解はやわらかいフラットなイラスト。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP カラムを置き、左右に淡い背景を敷く。
• PC で 2 カラムにするなら、写真と縦書きコピーを左右に分ける。
• 成分カードは PC で 3 列にする。
• CTA ボタンは PC でも横幅 600px 程度に抑える。

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