DESIGN.md — 若草緑×オレンジの置き換えスムージー LP（Fresh Green Smoothie Diet LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、清潔・爽やか、情報量多め・訴求型、親しみ・手作り感
• キーワード: 若草緑・セージ地・オレンジ強調・明朝×手書き・食材写真・数値訴求
• 地の質感: フラットな色面に食材写真。線画イラストや方眼紙風カード、黒板風背景で手作り感を足す
• 形: 角丸カード、ピル型ラベル、円形切り抜き、吹き出し尾つき黒帯
• 温度感: 明るく爽やか。緑で自然、オレンジで元気さ

Colors

• 地色は白・セージ・若草緑を交互に切り替えてセクションを区切る
• オレンジは数値の差やレビュー、STEPなど『結果・行動』の面だけに使う
• 大きなカロリー数値は深い赤で、白い帯の上に置く
• ラベルは黒に近い濃色のピル型で、白の手書き風文字を載せる
• 緑地の上の強調見出しには黄緑を使う
• 本文で強調したい語は黄色マーカーかオレンジ文字にする
• band-heading は文字 #FFFFFF × 背景 #5C8B1B のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#568219、4.56:1）を使う。
• spec-circle は文字 #5C8B1B × 背景 #FEFEFE のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#568219、4.52:1）を使う。
• feature-card は文字 #5C8B1B × 背景 #FEFEFE のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#568219、4.52:1）を使う。
• step-block は文字 #FFFFFF × 背景 #E38404 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AE6503、4.5:1）を使う。

Typography

• 情緒的な見出しは明朝、数値と機能訴求は極太ゴシックで分ける
• 数値は単位より2倍以上大きくし、単位は小さく添える
• 見出し内のキーワードは緑や色替え、手書き線のアンダーラインで強調
• 黒帯ラベル・口コミは手書き風フォントで親しみを出す
• 欧文セリフは英字ラベル・番号に限定する
• 見出しは中央揃え、本文は短く2〜3行
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較・特長は3列、写真とテキストは2分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅か左右2分割で余白なく並べる
• セクションは地色の切り替えで区切り、余白は控えめ
• 朝昼夜の比較は3列カードを上下2段で前後比較
• STEPは写真とオレンジ面を左右交互に配置
• 白カードは画面端から約16pxの余白で配置

Elevation & Depth

• 基本はフラットで影なし
• 白カードは影なしか、ごく薄い影
• 写真の上の白カードは少し重ねて奥行きを出す
• 半透明の暗い面(アレンジ表)を写真に重ねる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形・2分割の正方形、素材は円形切り抜き
• セクション境界: 基本は直線。所々に緩い弧や三角の矢印
• ラベルとバッジはピル型
• 比較・特長カードは緑線の角丸枠
• 素材写真は円形にそろえる
• 吹き出しは小さな三角の尾をつける
• スペック表示は円形の白い枠で囲む

Components

• 黒帯ピルラベル（label-dark-pill）: 見出しの前に置く導入の一言。手書き風白文字で、尾つきのものもある
• 緑の帯見出し（band-heading）: 全幅の緑地に白明朝2行の見出し
• 円形スペックバッジ（spec-circle）: 白い丸に細い緑線。小見出しと大きな数値を緑ゴシックで縦に積む
• 前後比較カード（compare-card）: 白カードに線画の食事と数値。下段のオレンジ枠でマイナス値を見せる
• 方眼紙レビューカード（review-card）: 方眼柄の白カード。オレンジの欧文番号見出しと手書き風本文、黄色マーカーをつける
• 総カロリー数値帯（big-number-bar）: 赤い円バッジと白帯に赤の極太数値
• アイコン付き特長カード（feature-card）: 上に緑丸の線画アイコン、緑太字の見出し、区切り線と補足を3列で並べる
• STEPブロック（step-block）: オレンジ面に縦書き欧文STEP番号と白い説明。隣に写真を並べる
• 失敗理由ラベル（mistake-label）: 黒ピルに大きい欧文番号と手書き風の理由

Do's and Don'ts

Do - 緑・セージ・白の地色を交互に使い、リズムをつける - カロリーなどの数値は極太で大きく、単位は小さく - 食材とドリンクの写真は明るい自然光で大きく見せる - 線画イラストで食事内容や工程を補足する - 手書き風フォントは口コミやラベルに限って温かみを足す

Don't - 青や紫などの寒色を主色にしない - オレンジをセクション背景以外に乱用しない - 見出しをすべてゴシックにして明朝の上品さを失わせない - 影の強い立体的なボタンを使わない - 写真に余白付きの細い枠を多用しない - 長文の段落を続けない

Page Structure

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

1. ファーストビュー（商品と理想像の提示）: 白地に緑明朝の大見出し、緑グラデーションの帯サブコピー、商品と果物の写真、円形スペックバッジ
2. フレーバー紹介（味の魅力訴求）: 緑の帯見出しの下に、左に商品と星評価ラベル、右に果物写真の2分割
3. 悩みの提起（ダイエットの挫折に共感）: 黒ピルラベルと明朝見出し、暗い写真2分割に白文字、黒ピルで悩みを2つ
4. 解決提案（置き換えという方法を提示）: 全幅のモデル写真、食事からドリンクへの線画フロー図
5. カロリー比較（数値で効果を見せる）: 緑地に朝昼夜の3列比較カード、オレンジ枠で削減量、セージ地に赤の大きな累計数値
6. 失敗理由と体験談（不安の解消と社会的証明）: 明朝の見出し、黒ラベルの理由番号、オレンジ地に方眼紙レビューカード3枚
7. 成分・満腹感（機能の根拠）: ドリンクの接写写真に白文字見出しと手書き縦書きコピー
8. 腸内環境の解説（健康価値を啓蒙）: セージ地、お腹の写真に重ねた白カードで解説
9. 素材紹介（原料のこだわり）: 緑地に細線の枠、円形の素材写真を3×2で並べる
10. 成分訴求・無添加（安心感）: 緑とセージ地を切り替え、黄緑見出しと全幅写真、説明は中央揃え
11. 開発ストーリー（品質への思い）: 黒板風の暗い角丸パネルに手書き風白文字、緑の小ラベル
12. 特長まとめ（価値の総括）: 商品写真と3列の特長カード、緑帯で手軽さを訴求
13. 飲み方ステップ（手軽さの証明）: 黒ピルと緑の大きな数字見出し、STEPを写真とオレンジ面の交互2分割で、アレンジは半透明の表
14. 利用シーン（生活への定着）: 緑帯見出し、人物写真とセージ地の手書き文字を市松状に配置

Imagery

• キウイや葉野菜、緑のドリンクを明るい自然光で撮る。白〜灰の背景や木のテーブルに置く
• 細身の女性モデルはベージュ系の温かいトーンで撮る
• 食事や工程は黒の細い線画イラストにする
• 素材は円形に切り抜き、緑地に並べる
• 背景には植物の淡い線画や黒板の質感を薄く敷く
• 生活シーンは白基調の部屋で、笑顔の人物を撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後のカラムを置き、左右は淡い地色で埋める
• 3列カードは PC でも3列のまま、余白を広げる
• 2分割の写真ブロックはPCで横幅を広げ、比率は保つ
• 見出しは PC で1.3倍程度に拡大する
• 全幅帯の背景色は画面幅いっぱいまで伸ばす

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