DESIGN.md — 紺×赤×金の信頼系サプリ通販 LP（Trust Blue Functional Supplement Direct Response LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
• キーワード: 濃紺グラデ帯・赤の強調文字・金メダル装飾・科学的図解・繰り返すオファー・明朝の大見出し
• 地の質感: 青のグラデーションと銀色のきらめき背景。金属っぽい光沢のある金バッジ、薄いグレーの無地面
• 形: 角ばった帯と下向き三角の矢印。ボタンは横長のピル型。カードは角丸を小さめ
• 温度感: やや冷たく清潔。赤と金で温かみと特別感を加える

Colors

• 地は白と薄グレーを交互に。区切りの帯と見出しの背景は濃紺のグラデにする
• 赤は一番伝えたい効能語とオファー帯だけに使う
• 金はメダル・実績バッジ・価格の装飾だけに使う
• CTAは緑のグラデのピルボタンにして、青系の地からはっきり浮かせる
• 企業の歴史セクションだけは焦茶の暗い地に白と金の文字
• 黄色マーカーは図解の注目部分と本文の強調だけに使う
• button-primary は文字 #FFFFFF × 背景 #3A9A2E のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#338628、4.58:1）を使う。

Typography

• 大見出しは明朝を極太にして、数字や効能語だけを1.5〜2倍に大きくする
• 図解・データ系の見出しは太いゴシックにして、紺と赤で塗り分ける
• 強調語は赤文字・黄マーカー・白フチ文字のどれかで目立たせる
• 出典や注釈は10px前後で、該当する図の直下に必ず置く
• 縦書きのキャッチを写真の横に重ねる演出を使う
• 導入語は「＼ ／」で挟んだ短いフレーズにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解内は 2 列の比較パネルを使う
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の画像と帯を縦に積み、余白を詰めて密度を上げる
• オファーブロック（価格とCTA）を4回ほど繰り返し挟む
• 図解は細い枠で囲ったカードに入れ、点線で小見出しを区切る
• 各セクションは下向き三角の矢印でつなぐ
• 写真は大小を組み合わせたグリッドで並べる

Elevation & Depth

• CTAボタンには下方向の影と上部の光沢グラデをつける
• オファーカードは白地に薄い影を敷く
• 金メダルは金属のグラデとフチ取りで立体的に見せる
• 見出し文字には白フチや薄いドロップシャドウをつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角いグリッドを基本にする。研究写真は円形の切り抜きを重ねる
• セクション境界: 下向き三角の矢印、斜めの帯、直線で切り替える
• 悩みは楕円の吹き出しで表す
• 理由の番号は紺の円形バッジにする
• 実績は金の円形メダルにする
• 帯見出しは角ばった長方形にする

Components

• 申込CTA（button-primary）: 緑のグラデのピル型。左に商品画像、右端に白丸の再生アイコンを置く
• 価格オファーカード（offer-block）: 紺地に特大の白い価格、割引バッジ、送料無料バッジ、申込条件の表を収める
• 紺の帯見出し（band-heading）: 全幅の紺グラデ帯に白の明朝見出し。下に三角の矢印をつける
• 金メダルバッジ（gold-medal）: 効能や実績を円形の金メダルに収め、3つ並べる
• 理由番号（reason-number）: 紺の円の中に「理由」と数字を白で入れる
• 悩み吹き出し（worry-bubble）: 淡いピンクや緑の楕円の吹き出しに、悩みを短い言葉で6つ散らす
• 掲載実績リスト（media-list）: 白い表の各行に赤い媒体名と日付を並べ、点線で区切る
• お客様の声（testimonial）: 写真の横に赤い鉤括弧のコピー、赤丸の年齢、本文、注釈を置く
• 導入ラベル（lead-label）: 紺の台形タブや「＼ ／」で囲んだ短い問いかけ

Do's and Don'ts

Do - 効能の主張には必ずグラフや図解と出典を添える - オファーブロックは同じデザインで複数回出す - セクションの区切りに紺の帯と三角矢印を使う - メーカーの歴史と工場の写真で信頼を補強する - 数字は特大の明朝で見せる

Don't - パステル一色のゆるいトーンにしない - 赤を本文全体に使わない - CTAを紺や青にして地に埋もれさせない - 注釈や出典を省かない - 細い文字だけで見出しを作らない

Page Structure

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

1. ファーストビュー（実績No.1と効能を一目で伝える）: 赤の帯に金のNo.1バッジ、データグラフ、赤い特大の効能見出し、商品パッケージを置く
2. キャンペーンとオファー（初回価格で申込を促す）: 金と赤のキャンペーン見出しの下に、紺の価格カードと緑のCTAを置く
3. 製造体制（品質と自社製造を示す）: 紺地に工場写真をグリッドで並べ、縦書きのコピーを重ねる
4. 制度の説明（機能性表示の意味を教える）: 紺の帯と黄マーカーの縦書きラベル、人物写真を組み合わせる
5. メカニズムの図解（成分が働く理由を科学的に説明する）: 枠で囲った白いカードに円グラフ、折れ線グラフ、イラストを入れる
6. 選ばれる理由（3つの理由で差別化する）: 紺の番号バッジと明朝の見出しの下に、カプセル技術の図解を置く
7. ベネフィットのビジュアル（使用後の爽快感を伝える）: 女性の写真に紺の大きな矢印と縦書きのコピーを重ねる
8. メディア掲載（社会的な証明を示す）: 赤の見出しの下に、金のきらめき地の白い表を置く
9. 悩みの提起（共感を得て原因を示す）: イラストの周りに吹き出しを並べ、続けて暗いグレーの帯で問題を提起する
10. 開発の背景（市場規模と開発の意義を伝える）: グレー地に赤い数字、線画イラスト、三角の矢印を置く
11. 企業の歴史（老舗の信頼を伝える）: 焦茶の地に金の100周年メダル、社員と工場の写真、モノクロの歴史写真を並べる
12. 広告キャラクター（認知と親近感を高める）: 雪の結晶を散らした地に人物写真と動画枠を置き、青い帯で紹介する
13. お客様の声（体験談で後押しする）: 写真と赤い鉤括弧のコピー、年齢バッジを、白とグレーの地で交互に並べる
14. 開発者メッセージ・実証（責任者の言葉と根拠で締める）: 紺の帯の下に枠で囲ったカードを置き、研究者の写真と黄マーカーの強調を入れる

Imagery

• 白衣の研究者や工場設備を明るく清潔なトーンで撮った写真
• 笑顔の幅広い世代の人物写真（明るい屋内、白い服）
• 腸や菌を丸い顔のキャラクターで表した、やさしいパステルのイラスト
• 顕微鏡写真や細胞の3D調のビジュアルを青い地で見せる
• 商品パッケージの切り抜きを、銀色のきらめき背景の上に置く
• 歴史の訴求にはモノクロの古い写真をコラージュする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅750px前後のSP版をそのまま置き、左右を薄グレーの地にする
• 画像主体なので、拡大しても文字が画像内で崩れないよう大きめの解像度で作る
• 図解カードは最大幅を決めて中央に揃える
• CTAはPCでも横幅いっぱいにせず、最大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 行書くと起動時に読み込まれる。