DESIGN.md — 橙赤グラデの訴求型医薬部外品サプリ LP（Orange-Red Gradient Fatigue Supplement Sales LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、ポップ・元気
• キーワード: 橙赤グラデーション・黒帯ラベル・黄色マーカー・価格の大きな強調・繰り返す購入カード・金色の特典
• 地の質感: 白地と薄い紙のような石目テクスチャ。グラデーション面はフラット。特典パートは金色の光とぼかしを重ねる
• 形: 四角い帯と角ばったボックスが基本。カードは小さめの角丸。円形のバッジや線だけの円、下向き三角の吹き出しを使う
• 温度感: 暖色が中心で熱量が高い。悩みパートだけ紺で冷たくし、対比をつける

Colors

• 地は白と薄い石目のアイボリー。区切りに橙→赤（左上→右下）のグラデ面を大きく入れる
• 悩み提起だけ紺のグラデ地にし、白文字と黄色の下線で強調する
• 価格の数字は橙→赤のグラデ文字。通常価格は灰色に赤の取消線
• 購入ボタンだけ緑のグラデにして、暖色の中で一番目立たせる
• 黒帯ラベルは話題の切り替えや小見出しに使い、白文字をのせる
• 特典パートは金・ベージュに茶色の文字で高級感を出す
• button-primary は文字 #FFFFFF × 背景 #3FA535 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#33862B、4.58:1）を使う。
• symptom-tag は文字 #FFFFFF × 背景 #F36826 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE4A0B、4.56:1）を使う。

Typography

• 見出しは極太ゴシックで、字間を少し広げる
• 1 行の中で一部の語だけ色・サイズ・白抜きの箱で強調する
• 価格の数字は本文の 3〜4 倍の大きさのグラデ文字。円や税込は小さく添える
• 特典・コース名など高級感を出したい所だけ明朝やイタリック明朝を使う
• セクションの英字ラベル（Features 等）はオレンジの小さな文字で見出しの上に置く
• 本文は 14px 前後、行間は 1.8
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。症状タグは 3 列グリッド、コース比較は 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 購入カード（商品画像＋成分＋価格＋ボタン）を 4〜5 回繰り返す
• グラデ面のセクションは画面幅いっぱいに敷く
• カードは左右 16px ほどの余白で配置する
• 特徴は番号付きで 01〜04 を縦に並べる
• 強調コピーは中央揃え、本文は左揃え

Elevation & Depth

• 購入カードは白地に柔らかい影（0 4px 12px rgba(0,0,0,.15)）
• 口コミカードは灰色地の上に白カード、影は弱め
• 特典カードは下に濃いぼかし影を落として浮かせる
• ボタンは下側に濃い緑の影をつけて立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品パッケージは切り抜きで斜めに重ねる。人物は円形か背景を消した切り抜き
• セクション境界: 斜めの切り返しや緩い弧でグラデ面に入る。下向き三角の矢印でつなぐ
• 症状タグは角の立った四角でグラデ塗り
• 黒帯ラベルは長方形で、下に三角を付けて吹き出しにする
• 効能のテーマは細いグラデ線の円で囲む
• 時間帯の帯は平行四辺形にする

Components

• 購入ボタン（button-primary）: 緑グラデの横長ボタン。左にカート、右に三角アイコン
• 購入カード（offer-card）: 白カードに区分ラベル、商品名、成分の黒見出しの箱、商品画像。通常価格は取消線、初回価格は大きなグラデ数字
• 黒帯ラベル（black-label）: 黒い長方形に白文字。下に三角を付けて次につなぐ
• 症状タググリッド（symptom-tag）: 橙赤グラデの四角に白抜きの短い語。3 列で並べる
• 黄色マーカー強調（marker-text）: 強調する語の下に太い黄色の下線か波線を引く
• 特徴番号見出し（feature-number）: 小さい欧文ラベルの横に大きなオレンジの 2 桁番号を置き、続けて太字の見出し
• チェックリスト（check-list）: チェックボックスのアイコンに太字の悩み文。紺地なら白文字に黄色の下線
• FAQ アコーディオン（faq-item）: 灰色地にオレンジの Q。開くと橙赤グラデ地に白文字の A
• 特典カード（bonus-card）: ベージュのカード。左に茶金色の円形番号、右に明朝で大きなグラデ数字

Do's and Don'ts

Do - 購入カードとボタンはセクションの区切りごとに繰り返す - 価格は通常価格（取消線）→矢印→初回価格（大きなグラデ数字）の順で見せる - 強調語は白抜きの箱、グラデ文字、黄色マーカーのどれかで目立たせる - グラデは左の橙から右の赤へ流す - 大きな数字や棒グラフで裏付けを見せる

Don't - 購入ボタンを緑以外の色にしない - 寒色はファーストビュー直後の悩みパート以外で広く使わない - 細字だけの静かな見出しにしない - 本文の左右余白を詰めすぎない - 金色の演出を特典パート以外に広げない

Page Structure

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

1. ファーストビュー（悩みと効果を一言で示し、初回価格まで見せる）: 白い箱の赤文字キーワードを×でつなぎ、極太の大コピーにグラデの下線。商品画像と価格のカードを重ねる
2. 悩みの提起（読み手の症状に当てはめる）: 紺のグラデ地に円形の人物写真。チェック付きの悩みを 4〜5 個並べ、黄色の下線を引く
3. データの提示（悩みが多くの人に共通すると示す）: 黒い円の明朝バッジ、グラデ箱の強調、灰色と橙赤の横棒グラフ、小さな出典
4. 原因の問いかけ（原因が複数あると気づかせる）: オレンジの問いかけ文、青い吹き出し付きの黒い箱、縦線で下のグラデの弧へつなぐ
5. 改善テーマ（必要な対策を 4 つ見せる）: グラデ線の円に太字のテーマ、横に線画イラスト。解説は枠線ボックス
6. 解決策の提示（商品を答えとして示す）: 斜めのグラデ帯に黒いピル型ラベルと白抜き大文字。下にグラデのイタリック見出しと黄色の下線
7. オファー CTA（最初の購入の誘導）: 購入カードと緑のボタン
8. 特長（効能、成分、飲み方、剤形を説明する）: 01〜04 の番号見出し。症状タググリッド、構成図、朝・昼・夜の色分け帯とチェックリスト。白地とグラデ地を交互にする
9. 結論と CTA（要点をもう一度伝えて購入へ促す）: グラデ地に黒帯ラベル、白い箱のキーワード、極太の白コピー、購入カード
10. 開発背景（作り手の思いで信頼を得る）: 白地に英字ラベルと見出し、丸点付きの小見出し、長めの本文、担当者名と人物写真
11. お客様の声（利用者の実感を伝える）: 灰色のグラデ地に白カードのスライダー。似顔絵アイコン、属性、三角付きの見出し。左右に円形の矢印ボタン
12. よくある質問（不安をなくす）: 灰色のアコーディオンに Q。開くとグラデ地に A
13. 定期コースの案内（まとめ買いへ誘導する）: 斜めのグラデ帯に明朝イタリックの見出し。3 段の矢印型比較と、割引額を見せるグラデの価格ボックス
14. 特典と最終 CTA（特典で背中を押し、申込みを締める）: 金色の地に月桂樹と王冠、明朝の大見出し、赤いリボン。番号付きの特典カード 4 枚、3 袋の購入カード、注釈

Imagery

• 商品パッケージは白背景に切り抜き。2〜3 個を斜めに重ねて量を見せる
• 悩みの人物は寒色の光で、こめかみを押さえるなど疲れたポーズの写真
• 改善テーマは細い線と淡い水色の、シンプルな人物線画イラスト
• 成分は生薬やカプセル、粉末を真上や斜めから撮ったブツ撮り
• 特典パートは金のボケ光、王冠、月桂樹、赤いリボンで飾る
• 口コミは丸い枠の似顔絵イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後のコンテンツ幅。グラデ面は全幅のまま
• PC のファーストビューは左にコピーと購入カード、右に商品画像の 2 カラム
• 改善テーマは PC で 2×2、症状タグは 4 列にする
• 朝・昼・夜の飲み方は PC で 3 列に並べる
• 開発背景は PC で本文と写真を左右に並べる。特典 02〜04 は 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 行書くと起動時に読み込まれる。