DESIGN.md — 青×金の科学系整腸サプリ LP（Clinical Blue Gold Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、清潔・爽やか、力強い・インパクト
• キーワード: 科学感・青のグラデーション・金メダル・明朝の大見出し・価格訴求・繰り返すCTA
• 地の質感: ミルクのしぶきや菌の 3D CG、光のボケを使った写実的な画像。悩みのパートは暗いコンクリート調の地。
• 形: 角丸の青いCTAカード、ピル型のタグ、アーチ形の成分写真、円形メダル
• 温度感: 基本はクールな青。金と赤で温かみと緊急感を足す

Colors

• 地は白と淡い青グレーが基本。青のグラデーションで科学感を出す
• 悩み・原因のパートは黒紺とグレーのコンクリート調に切り替え、不安をあおる
• 価格・割引率・特典名は赤、メダルや権威の要素は金
• CTA は濃紺から青のグラデーションカード。価格数字だけを金にする
• 成分ごとにテーマ色を分ける（青・緑灰・黄土）
• クーポン券は淡い黄色に金の月桂樹

Typography

• 大見出しは明朝。縦書きも使い、白地や写真上で強いコントラストを出す
• 数字は特大にし、単位は小さく添える
• 価格は斜体の太字欧文と赤で強調する
• 見出しの中のキーワードだけ黒地白抜きにする
• 注釈は※付きの極小文字でブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。タグやチップは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 画像中心のセクションは全幅にする
• CTA カードは左右に約 6% の余白を取って中央に置く
• オファー（クーポン→比較価格→保証→CTA）を中盤と終盤で繰り返す
• 成分は番号＋アーチ形の写真＋色付きパネルで同じ型をそろえる
• 特典リストは点線で区切った縦並び

Elevation & Depth

• CTA カードは弱いドロップシャドウで浮かせる
• メダルは金のグラデーションと光沢で立体感を出す
• チェックリストのカードはフラットな白に細い枠

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 成分写真は上がアーチの縦長窓。人物は全幅の写真
• セクション境界: 多くは直線で切り替え。ときどき下向き三角の吹き出しでつなぐ
• タグ・チップはピル型の白地に色付き文字
• CTA カードは角丸 10px 前後
• 価格比較ボックスは角丸なしの太い枠
• 権威バッジは円形メダルか盾形

Components

• 価格CTAカード（cta-offer-card）: 青いグラデーションのカード。上部に割引帯、左に商品画像、中央に金の大きな価格、右上に赤い円の割引率、下部に白文字と丸い矢印アイコン
• 金メダルバッジ（gold-medal）: 円形の金メダルに実績や権威を 2〜3 行の明朝で入れ、英字を添える
• クーポン券（coupon-ticket）: 淡い黄色の券面に月桂樹の装飾。割引額を斜体の欧文で入れ、コード枠を付ける。上に人数限定のピル型ラベル
• 価格比較ボックス（price-compare）: 通常価格は灰色の枠で打ち消し線、特別価格は濃紺の枠に赤の大きな数字。下に緑の吹き出し帯
• 悩みチェックリスト（check-list）: 白いカードに黒い見出し帯。チェックボックス付きの短い悩みを 5 行。ぐるぐるの手描き線を添える
• 成分パネル（ingredient-panel）: 大きな斜体の番号、アーチ形の写真、縦書きの効能ラベル、成分名、ピル型タグ、説明文
• 機能チップ（benefit-chip）: 半透明の白いピル型。3 列で機能名を並べる
• 特典行（perk-row）: 左に紺の正方形の番号、右に小さな説明と赤い大見出し。点線で区切る
• 見出し帯ラベル（label-band）: 濃紺か黒の帯に白文字で導入の一言。下に細い縦線で続ける

Do's and Don'ts

Do - オファーのブロックをページ内で 3 回以上繰り返す - 数字（含有量・価格・割引率・販売数）は最大級の大きさで見せる - 成分紹介は同じ型で色だけを変える - 注釈はブロックの直下に必ず小さく入れる - 暗いパートと明るいパートを交互に置いて起伏をつける

Don't - パステル調やかわいいイラストに寄せない - 価格に青を使わない（赤か金にする） - CTA をフラットな小さいボタンだけで済ませない - 余白を広く取りすぎて情報密度を落とさない - 明朝とゴシック以外の書体を混ぜない

Page Structure

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

1. ファーストビュー（効果と手軽さを伝える）: 笑顔の女性写真に縦書きのコピーと金メダル 3 つ。下部の青い帯に明朝の特大コピー
2. 表示・CTA（信頼性の担保と最初のオファー）: 制度表示の枠、導入の一言、価格CTAカード、黄色枠の定期縛りなしの説明
3. 実績訴求（含有量のすごさを伝える）: 菌の CG に縦書きの明朝の特大文字。ヨーグルト写真に特大数字
4. キャンペーン（限定価格の提示）: クーポン券、青の地に商品とメダル、価格比較、返金保証のカード、CTA
5. 悩みの提起（自分ごと化させる）: コンクリート調のグレー地にチェックリスト
6. 原因の説明（不安を深める）: 黒紺の地に人体の CG、石の球体で要因を 4 つ
7. 解決策の提示（成分を紹介する）: ミルクのしぶきの円に色違いの見出しで 3 成分
8. 成分の詳細（根拠を示す）: 番号付きの成分パネル ×3。間にグラフや素材写真を挟む
9. ベネフィット（生活の変化を描く）: 青いラベルと明朝の特大見出し、爽やかな女性写真
10. 多機能の訴求（お得感の拡大）: 青いボケの地に商品と機能チップのグリッド
11. 販売実績（社会的証明）: 金の月桂樹と特大数字、商品をずらりと並べる
12. 最終CTA・特典（申込を後押しする）: キャンペーンを再掲し、6 つの特典リストと配送サイクルの図

Imagery

• 乳酸菌や分子の青い 3D CG に被写界深度のボケを付ける
• ミルクのしぶきや白いヨーグルトで清潔感を出す
• 悩みのパートは暗い地に発光した人体や臓器の CG
• 人物は明るい自然光で目を閉じて晴れやかな表情
• 金の月桂樹・紙吹雪・光のフレアで実績を演出する
• 素材写真（升や穀物）は暖色の逆光で温かく
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の画像セクションは最大幅 750px 前後で中央に配置する
• 背景は左右を淡いグレーブルーで埋める
• チップやタグは PC でも 3〜4 列程度にとどめる
• CTA カードは幅 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 行書くと起動時に読み込まれる。