DESIGN.md — 深緑×黄緑×橙の野菜スープ健康食品LP（Fresh Green Vegetable Soup Health Food LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 国産野菜・深緑と黄緑・白い器の料理写真・明朝×太ゴシック・数字訴求・波形の区切り
• 地の質感: 白い漆喰風の薄いテクスチャ地と、写真を重ねたフラットな色面
• 形: 角丸カード・ピル型の立体CTA・円形バッジ・大きな波形の区切り
• 温度感: 温かみのある自然派で、少し温度高めの訴求

Colors

• 基本の地は白か薄いグレーのテクスチャにし、深緑・黄緑・黄・橙の帯を交互に挟んでリズムを作る
• 深緑はブランドの帯や科学的説明に、黄緑は特長カードや商品紹介に使う
• 橙は番号・お客様の声の地・円形の価格バッジに限って使う
• 価格の数字は赤、その周りの補助文字は黒にする
• 黄色は見出し下のマーカーと、主張を見せるセクションの地に使う
• CTAは緑のグラデーションで立体感を出し、白文字と白い▼を入れる
• button-primary は文字 #FFFFFF × 背景 #2E8B1E のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2D871D、4.57:1）を使う。

Typography

• 情緒的なコピーは明朝で書き、縦書きにして縦線を添える
• 数字と価格は極太ゴシックで大きくし、単位は小さくする
• 見出しの一部の語だけ橙にするか、文字を大きくして抑揚をつける
• キーワードの下には黄色いマーカー線を引く
• 番号は橙の欧文セリフにする
• 注釈は小さく、関係する要素のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材の円形アイコンだけ 4 列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長カードは上部が黄緑の見出し、下部が白い本文の2段にする
• 利用シーンは見出しを写真に少し重ね、白いキャプション箱を下に置く
• セクションの間に大きな写真を全幅で挟む
• 購入までの流れの中にCTAを3回置く
• 装飾として野菜の切り抜き写真を画面端に散らす

Elevation & Depth

• CTAボタンには下方向に濃い影をつけ、立体的に見せる
• 白いカードには淡い影をつける
• 利用シーンのキャプション箱にもごく薄い影をつける
• 暗い写真の上には影を置かず、色面だけで見せる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形と人物の円形切り抜き。商品と野菜は背景を抜いて置く
• セクション境界: 大きな曲線の波形と斜めのカット、下向きの三角
• 番号を入れた特長カードの上には半円のタブを出す
• 価格カードは緑枠で囲み、下に吹き出しの尖りをつける
• 素材名は細い線の円で囲む
• 価格は橙の円形バッジに入れて強調する

Components

• 立体ピルCTA（button-primary）: 緑のグラデーションに白文字2行と右端の▼を入れ、影で立体感を出す
• 価格オファーカード（price-card）: 緑枠の白カード。帯見出しの下に取り消し線の通常価格、赤の大きな価格、橙の丸バッジを置く
• 番号付き特長カード（feature-card）: 黄緑の上部に半円タブと橙の番号を置き、明朝の見出し、写真、白地の本文と続ける
• 悩みのメモカード（worry-note）: 生成りの付箋カードを画鋲で留めた見た目にし、橙のチェックアイコンで悩みを3つ並べる
• 円形の実績バッジ（badge-round）: 紺と金のメダル風エンブレムにリボンをつける
• 深緑の帯見出し（heading-band）: 商品画像の横に深緑の帯を敷き、白文字で権威を示す見出しを置く
• お客様の声カード（voice-card）: 橙の地に白いカードを置き、人物イラストと声を左右交互に配置して、属性は緑の小さな文字で添える
• 素材の円タグ（ingredient-circle）: 細い黒線の円の中に素材名を小さく入れる

Do's and Don'ts

Do - 実績の数字は極太で大きく、赤か深緑で見せる - 白い器に盛ったスープの写真を何度も登場させる - 明朝の情緒的なコピーと、ゴシックの具体的な訴求を交互に置く - 根拠を示す注釈は必ず添える - 色の帯は波形や斜めで区切り、動きを出す

Don't - 青や紫をメインの色に使わない - CTAを平板な四角にしない - 白地だけのセクションを3つ以上続けない - 装飾フォントを多用しない - 写真の上に注釈なしで効果を断言する表現を載せない

Page Structure

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

1. ファーストビュー（商品の特徴と権威を一目で伝える）: 野菜とスープの写真の上に、白い帯で明朝の見出しを2段重ねる。メダルバッジと深緑の帯も置く
2. 実績訴求（販売数で信頼を得る）: 紙吹雪を散らした明るい背景に、赤い極太数字と商品を2つ並べる
3. オファー・CTA（初回価格を提示して申込を促す）: 大きな割引率、緑枠の価格カード、立体CTAの順に置く
4. 悩みの提起（共感を得る）: 黒緑の地にメモカードと悩む人物の写真を置き、下端は三角で区切る
5. 解決提示（商品を答えとして示す）: 吹き出しラベル、黄色マーカーを引いた明朝見出し、スプーンの写真の順に置く
6. こだわり（品質の根拠を伝える）: 番号付きの黄緑カードを4枚、縦に並べる
7. 利用シーン（自分ごと化させる）: 橙の波形帯に縦書きコピーを入れ、写真とキャプションのブロックを4つ置く
8. 仕組みの説明（科学的な根拠を示す）: 暗い葉の写真に縦書きを重ね、深緑の地に図解と比較グラフを置く
9. 監修者紹介（権威付け）: 白い地に、橙の見出しと人物写真、経歴を並べる
10. 商品ラインナップ（味の違いを伝える）: 黄緑の地にパッケージ、色付きの名前、器の写真、素材の円タグを置く
11. 専門家コメント（第三者の推薦）: ベージュの地に、黄と深緑のラベル見出しと白いカードを置く
12. お客様の声（社会的証明）: 橙の地に白いカードを3枚、人物イラストを左右交互にして並べる
13. メディア掲載・企業信頼（信頼の補強）: スマホ画面のモックとロゴを3列で並べ、工場の写真と認証バッジの枠を置く
14. 最終CTA（購入を後押しする）: 価格カードと立体CTAを再び置く

Imagery

• 白い陶器の器に盛ったスープを、明るい自然光で斜め上から撮る
• 生の野菜とまな板を白い卓上に並べ、俯瞰で撮る
• 白い背景で撮った商品パウチを、2種類並べて見せる
• 白シャツ・オフィス服の人物写真を、柔らかいトーンで使う
• 野菜の切り抜きを装飾として画面端に散らす
• お客様の声は顔を描かないフラットな人物イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 750px 前後の 1 カラム幅でそのまま表示する
• PC の左右の余白には薄いグレーのテクスチャ地を敷く
• PC でも縦書きコピーや波形の区切りは維持する
• メディアのロゴは PC で4列に広げてもよい
• CTA は SP と同じく 90% 幅のまま固定する

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