DESIGN.md — 深緑×黄マーカーの訴求型サプリ LP（Fresh Green Sprout Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、ポップ・元気、力強い・インパクト
• キーワード: 深緑・黄マーカー・極太ゴシック・新芽写真・白カード・番号バッジ
• 地の質感: 緑地に薄い斜線やグリッドの紙地テクスチャ。白カードは方眼柄の淡い背景
• 形: 角丸の白カード、円形の番号バッジ、ギザギザの星形バッジ、円切り抜き写真
• 温度感: 爽やかで元気な暖寒中間。緑が主、黄とオレンジが温かみを足す

Colors

• 地は白と淡グレーを基本に、成分解説・秘密紹介は深緑帯の上に白カードを載せる
• 重要語は黄色マーカーを文字下半分に敷いて強調する
• 効能の説明文はサーモン色の太字で一段大きく
• 健康=緑、ダイエット=オレンジ、美容=青の3色ラベルを一貫して使う
• 警告や原因提示は赤い円バッジでのみ使う
• 濃緑帯の見出しは白文字、キーワードのみ黄文字
• category-label は文字 #F9FEFA × 背景 #FC5B02 のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CC4A02、4.53:1）を使う。
• brand-pill は文字 #F9FEFA × 背景 #FC5B02 のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CC4A02、4.53:1）を使う。

Typography

• 見出しは極太ゴシックで、キーワードだけ緑や黄の色替え＋大きく
• 助詞は一回り小さくして語のメリハリを出す
• 本文は中央寄せかカード内左寄せ、行間広め
• 数字は特大にして単位を小さく添える
• カテゴリ英字は手書き風欧文で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較パネルは 3 列並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 緑帯の上に白カードを縦に積み、カード間は 24px
• カード上端に番号バッジを半分はみ出させて置く
• チェックリストは左アイコン＋右文言、点線区切り
• 悩みは中央の人物を円写真4つで囲む
• セクション冒頭に吹き出し型の問いかけ帯を置く

Elevation & Depth

• 白カードに薄い影（0 2px 8px rgba(0,0,0,.15)）
• 商品パッケージ写真に落ち影
• 星形バッジは影なしでフラット

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 円形切り抜きと横長矩形、商品は切り抜き
• セクション境界: 直線の色切替と斜めの白い帯
• カードは角丸 16〜20px
• 番号は緑の円バッジ
• 成分名はギザギザ円バッジ
• ラベルは角なし矩形の色帯

Components

• 問いかけ吹き出し帯（speech-band）: 下に三角の付いた深緑のピル帯に白文字
• 番号円バッジ（number-badge）: カード上端に重なる緑円の白数字
• 成分白カード（feature-card）: 緑地上の角丸白カード、見出し・写真・チェック付き説明
• 星形数値バッジ（burst-badge）: 黄色のギザギザ円に特大赤数字
• 黄色マーカー強調（marker-text）: 語の下半分に黄色を敷く
• 3色カテゴリラベル（category-label）: 緑・オレンジ・青の矩形に白太字
• チェックリスト（check-list）: 緑の大きなチェックアイコンと点線区切りの行
• 秘密番号タグ（secret-tag）: 深緑の小さな角丸タグに白文字
• 締めのオレンジピル（brand-pill）: フッター前のオレンジ帯に白文字

Do's and Don'ts

Do - 重要語は必ずマーカーか色替えで強調する - 緑帯と白地を交互にしてリズムを作る - 数字は大きく、星形バッジで目立たせる - キャラクター化したイラストで仕組みを説明する - 3色のカテゴリ色を最後まで統一する

Don't - 細い明朝や淡い色だけで見出しを組まない - 緑以外の色を地の色に広く使わない - 強調色を一文に3色以上混ぜない - 写真なしの文字だけのセクションを続けない - カードを角張らせない

Page Structure

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

1. ファーストビュー（商品と主効果を一目で伝える）: 新芽の全面写真に白の極太見出し、黄帯サブコピー、商品と星形数値バッジ
2. 素材紹介（原料の話題性を伝える）: 吹き出し帯の問いかけ、色替え大見出し、素材写真、マーカー入り本文
3. 悩みの提起（続けにくさへの共感）: 中央に悩む人物、周囲に円写真と短い悩み、下に黄文字の緑帯
4. 解決提示（凝縮量を示す）: 大量の素材イラスト、商品、星形バッジ、写真上の特大文字
5. 成分解説（2大成分の効能説明）: 緑地上に番号付き白カード、写真とチェック付きサーモン強調文
6. トリプルサポート（3つの効果を整理）: 写真背景に白見出し、黄円3つを×で連結、商品
7. 仕組みの説明（体内の働きを図解）: キャラクター、ピンクの3列パネル、3色ラベル
8. 問題提起（働きの低下を示す）: 落ち込むキャラ、紫の3列写真パネル、赤円警告
9. 解決の効能（成分による改善）: 笑顔キャラと素材、点線罫の本文、3色ラベル
10. おすすめ対象（自分ごと化）: 緑帯見出し、チェックリスト5行と円写真
11. 続けられる理由（飲みやすさ・価格・品質）: 緑地に秘密タグ付き白カード3枚、マーカー付きチェック項目
12. クロージング（購入意欲の後押し）: 大見出し、人物写真と商品、成分バッジ、オレンジのピル帯

Imagery

• 新芽や葉を寄りで撮った鮮やかな緑の写真を背景に使う
• 商品パッケージは切り抜きで粒を添える
• 臓器や太陽を顔付きのゆるキャラで描く
• 悩み人物は明るい室内のストック写真を円で切る
• 製造現場は白衣の清潔な写真を横並び
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC幅でも約950pxの縦長1カラム、SPはそのまま縮小で成立
• SP では見出し 28〜36px に抑え 2〜3 行で改行
• 3列パネルは SP でも3列維持、文字は13px程度
• 白カードの左右余白は16px
• PCでは中央 750px 前後に固定し左右を緑地で埋める

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