DESIGN.md — 若草緑×レモン黄の爽快サプリ LP（Fresh Green Sunshine Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 若草グリーン・レモンイエロー・青空と日差し・極太数字・斜め帯見出し・手書き吹き出し
• 地の質感: 青空や逆光の写真と淡い黄緑のフラット面を交互に置く。緑面にはドット柄を薄く敷く。
• 形: 波形のセクション境界、円形バッジ、下向き三角の帯、角丸の白カード。
• 温度感: 明るく暖かい日差しの温度感。悩みパートだけ黒で冷たく落とす。

Colors

• 地は白と淡い黄緑を交互に使い、区切りに緑のベタ帯を挟む。
• 強調語は蛍光黄の帯マーカーか緑文字で示す。
• 数字の主張は緑か黄色の極太で大きく出す。
• 赤は価格のお得額表示だけに使う。
• 悩みパートだけ黒地にし、解決パートで緑に戻す。
• 黄色文字には濃い緑か黒の細いフチを付けて可読性を保つ。
• badge-circle は文字 #FDFCFD × 背景 #30A700 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#268600、4.57:1）を使う。
• comparison-table は文字 #30A700 × 背景 #E9F283 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#268600、4.6:1）を使う。
• label-pill は文字 #FDFCFD × 背景 #30A700 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#268600、4.57:1）を使う。

Typography

• 数字を本文の 3〜4 倍に、単位を小さくしてメリハリを付ける。
• 見出しでは助詞を小さく、キーワードを大きくする。
• 大見出しの上に「＼ 〇〇 ／」の小見出しを添える。
• 黄色の見出しは斜めに少し傾けて躍動感を出す。
• 本文は中央揃えで短く改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色を切り替えて区切る。
• 写真は全幅に敷き、その上に見出しを重ねる。
• 商品パッケージ画像を何度も繰り返し置く。
• 価格表と比較表は画面幅いっぱいに近い幅で組む。
• 注釈は各ブロックの直下に小さく置く。

Elevation & Depth

• 基本はフラット。影はほとんど使わない。
• 商品パッケージには柔らかい落ち影を付ける。
• 白カードは影なしで、淡い黄緑の地から浮かせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は全幅の角版、食材は円形に切り抜き、果物は切り抜きで散らす
• セクション境界: 波形のカーブ、下向き三角の帯、直線の切り替え
• バッジは円形で緑か黄色のベタ。
• 斜め帯は平行四辺形で黒フチ付き。
• 吹き出しは手書き風の黒線で角丸に描く。

Components

• 円形スペックバッジ（badge-circle）: 緑や黄の円の中に小さな前置きと大きな数字。2〜3 個を重ねて置く。
• 斜め黄色帯見出し（slant-banner）: 黄色の平行四辺形に黒フチ、極太文字を少し傾けて載せる。
• 蛍光マーカー強調（marker-text）: 本文中のキーワードの背景に黄色の帯を敷く。
• まとめ買い価格表（price-table）: 黒ヘッダーの 3 列表。下に赤の下向き矢印ボックスでお得額を表示。
• 悩みチェックリスト（check-list）: 黒地の上に白カード。黄色のチェックボックスと太字キーワードを並べる。
• 手書き吹き出し（speech-hand）: 黒の手書き線で描いた吹き出しに短いひとこと。
• 他社比較表（comparison-table）: 自社列を黄緑で高く強調し、数字を緑の極太で表示。他社はグレー。
• 成分ラベル（label-pill）: 円形写真の下に置く緑や黄のピル型ラベル。
• 実績の月桂樹（achievement-laurel）: 多色の葉の月桂樹で大きな実績数字を挟む。

Do's and Don'ts

Do - 緑と黄の 2 色で元気さを統一する。 - 数字は極太で大きく、単位を小さく。 - 青空・逆光の明るい写真を使う。 - パッケージ画像を要所で繰り返し見せる。 - 強調語には黄色のマーカーを敷く。

Don't - くすんだ色や彩度の低い緑を主色にしない。 - 赤をお得表示以外に使わない。 - 明朝体で上品にまとめない。 - 長文を詰め込まない。 - 黒地を悩みパート以外に広げない。

Page Structure

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

1. ファーストビュー（元気さと主要スペックを一目で伝える）: 上部に緑ドットの波帯で問いかけ。日差しを浴びる人物写真に斜めの極太キャッチ、円形バッジと商品画像を重ねる。
2. 商品紹介（商品名と役割を示す）: 黄緑地に欧文ロゴ風の名前。青空写真の上に縦書きの黄色見出しと短い本文。
3. まとめ買い価格（セット購入をすすめる）: 茶色帯の見出し、黄緑地にセット写真、黒ヘッダーの価格表と赤のお得額。
4. 実績（信頼を示す）: 白地に月桂樹と大きな販売数、シリーズ商品を横並び、緑の巨大ランキング表記。
5. 悩みの提起（自分ごと化する）: 黒地に人物写真と手書き吹き出し、白カードのチェックリスト。
6. 原因の指摘（不足を気付かせる）: 緑ベタ帯に白の大見出し、下向き三角で次へ誘導。
7. 解決の提示（商品で解決できると示す）: 手書きの添え書き、黄色の極太見出し、逆光の人物写真、マーカー強調の本文。
8. 特長1 配合量（スペックの高さを伝える）: 青空写真に黄色の大きな数字と商品画像、波で白地へ。
9. 特長2 味（続けやすさを伝える）: 黄色見出し、吹き出し、笑顔の人物と果物切り抜き、円形バッジ。
10. 特長3 追加成分（付加価値を伝える）: 黄緑地にマーカー見出しと緑の大数字、写真と吹き出し、白カードで 2 成分を×で並べる。
11. 他社比較（優位性を示す）: 緑ドット帯の見出し、斜め黄色帯、自社列を強調した比較表。
12. 安心・品質（製造品質で安心させる）: 濃い黄緑地に吹き出し見出し、研究者写真、マーカーラベルと本文、商品画像。

Imagery

• 人物は明るい逆光や青空の下で、笑顔や伸びをする写真。
• 空は青からシアンのグラデーションに白い雲。
• 果物は葉付きで切り抜き、画面端に散らす。
• 食材は俯瞰で撮り円形に切り抜く。
• 装飾は手書きの線、キラキラ、ぐるぐる線を黒で添える。
• 悩みパートは暗い室内で疲れた表情の写真。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は画像主体の縦長で SP と同じ 1 カラム構成。
• PC では中央に 480〜750px 幅で置き、左右は地色を延長する。
• 比較表と価格表は SP でも横スクロールなしで収める。
• 大きな数字は SP で画面幅の 6〜7 割に収める。

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