DESIGN.md — 朱橙×若葉緑の女性向け機能性青汁 LP（Orange and Leaf Green Functional Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、やさしい・柔らかい、信頼・誠実
• キーワード: 朱橙の帯見出し・若葉グリーンの地・線画イラスト・棒グラフ解説・口コミ吹き出し・価格訴求
• 地の質感: フラットな単色面が中心。方眼パターンの淡い地と、野菜写真のコラージュを合わせる。
• 形: 角が四角い帯見出しと、細い影付きの口コミ枠。丸い円形バブル、ピル型の CTA。
• 温度感: 暖色と自然な緑が半分ずつで、温かく健康的な印象。

Colors

• 地は白を基本にして、ストーリーは淡い若葉色、成分のまとめはベージュ、データは淡い水色の方眼に塗り分ける。
• 朱橙は帯見出しと、6 つの機能を並べる大きな面に絞って使う。
• 成分の解説はグリーンでそろえ、番号・ラベル・グラフの棒を同じ緑にする。
• 価格と CTA の周りだけ赤を使い、そのほかでは赤を使わない。
• 悩みの提起ではモノクロ写真とグレーの地を使い、明るいセクションとの落差をつける。
• 強調したい語句は朱橙の文字にして、文字サイズも大きくする。
• worry-bubble は文字 #E0702A × 背景 #FEFEFE のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BC591B、4.54:1）を使う。
• gift-box は文字 #E0702A × 背景 #FEFEFE のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BC591B、4.54:1）を使う。

Typography

• ファーストビューとストーリーの見出しは縦書きにし、白い短冊の上に置く。
• 強調したい語句だけを 1.5 倍ほどに大きくして、朱橙の文字にする。
• 成分名は字間を広く取った細めの大きな文字にする。
• 価格の数字は特大の赤い太字にし、旧価格は打ち消し線にする。
• 注釈は米印付きの小さい文字にして、見出しのすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較とグラフ部分のみ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• ストーリーは淡い緑の大きなパネルに入れ、パネルの左右に少し白を残す。
• 成分紹介は、大きな番号＋ラベル帯＋成分名の見出しのあと、写真と本文を左右交互に並べる。
• グラフはベージュの枠に入れ、商品画像を左側に重ねる。
• 口コミの吹き出しは左右にずらして縦に 3 つ並べる。
• 価格ブロックは、割引バッジ＋価格＋CTA＋特典の順に、プランごとにまとめて繰り返す。

Elevation & Depth

• 口コミ枠に、右下へ落ちる薄い影と下辺の橙線を付ける。
• CTA ボタンには、下側に浅い影を付けて立体感を出す。
• そのほかはフラットな面で構成する。

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角で切り抜く。悩みのワードは円形バブル、商品は切り抜き画像にする。
• セクション境界: 直線で切り替える。下向きの三角矢印で次のセクションへつなぐ。
• 帯見出しは角丸のない長方形で、2 段を左右にずらして重ねる。
• 悩みのワードは細い橙の円線で囲み、イラストの周りに配置する。
• 流れを示す矢印は、黒い太い曲線矢印にする。

Components

• 朱橙の帯見出し（band-heading）: 白文字の長方形の帯を 2 段、ずらして重ねる
• ストーリー番号見出し（story-number）: 細い橙のセリフ数字と、二重線付きの小見出しを組み合わせる
• 悩みワードのバブル（worry-bubble）: 白地に橙の円線。短い語句をイラストの周りに散らして置く
• 口コミ吹き出し（review-card）: 白い四角に、しっぽと影、下辺の橙線を付ける
• 成分番号ラベル（ingredient-label）: 大きな緑の数字の横に、緑の帯ラベルを置く
• 栄養比較グラフ（chart-card）: ベージュの枠の中に、緑と橙の横棒グラフを入れる
• 割引バッジ（discount-badge）: 赤い四角に割引額を白文字で入れ、横に送料無料の枠を並べる
• カート CTA（button-primary）: ピル型。左にカートのアイコン、下段に小さい補足を入れる
• 特典案内（gift-box）: 薄い橙の枠に、特典の写真を右側に添える

Do's and Don'ts

Do - 悩み→ストーリー→成分→データ→価格の順に、長い構成で並べる。 - 強調色は朱橙とグリーンの 2 系統に絞る。 - 人物は線画イラストにし、悩みのワードを円で添える。 - 数値は棒グラフや矢印で見せる。 - 商品の切り抜き画像を各セクションに繰り返し置く。

Don't - CTA 以外に赤を多用しない。 - 濃い色の地を長く続けない。 - 成分ブロックの写真と本文の配置を同じ向きばかりにしない（左右交互にする）。 - 角丸を大きくしすぎない。 - 本文を 15px 以上の太字にしない。

Page Structure

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

1. ファーストビュー（ターゲットと商品を提示する）: 人物写真の上に縦書きの橙帯を置き、商品画像と月桂樹の実績バッジを添える
2. 注意書き（価格は後ろで案内することを予告する）: 白い枠に赤の細い線で囲んだ中央揃えの文
3. 機能一覧（6 つの機能を示す）: 朱橙の地に、丸数字と白い文字で 6 行並べる
4. 一般品との違い（他との違いを示す）: 他商品を並べ、下向き矢印の吹き出しで商品へつなげる
5. 悩みの提起（共感を生む）: モノクロ写真、黒い帯の見出し、×印を付けた円形ワード
6. ストーリー 01〜04（生活のシーン別に効果をイメージさせる）: 淡い緑のパネルに、線画、縦書きの見出し、橙の帯、口コミ 3 件を入れる
7. 9 種の成分（配合の根拠を示す）: 大きな緑の番号、写真と本文を左右交互に置き、グラフ枠を添える
8. 栄養のまとめ（バランスの良さを示す）: 方眼の地に、白い円とレーダーチャートを置く
9. 追加成分（付加価値を示す）: 橙のラベルと成分名を見出しにし、写真と商品画像を並べる
10. 粒タイプの比較（飲みやすさを訴える）: 2 列の比較。グレーと緑のヘッダーにチェックリストを並べる
11. 臨床データ（エビデンスを示す）: 水色の方眼の地に、緑のラベルとグラフ、赤い矢印を置く
12. 価格・CTA（購入を促す）: 3 プランを縦に並べ、割引バッジ、大きな価格、ピル型 CTA、特典を入れる
13. 問い合わせ・保証（不安を解消する）: ベージュのピル型の電話ボタンと、金色の保証バナー

Imagery

• 人物は細い黒の線画で描き、服だけを淡い色で塗る。
• 野菜や素材は自然光で寄って撮り、背景を白か緑にする。
• 商品は袋の切り抜き画像に、金縁の丸い認証バッジを重ねる。
• 悩みの場面は、オフィスにいる女性のモノクロ写真にする。
• 青果のコラージュを、白くフェードさせて背景に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央 750px 幅の 1 カラムに収めて、左右は淡いグレーにすることを推奨する。
• PC では成分ブロックの写真と本文の比率を半々にする。
• PC でも、縦書きの見出しは維持する。
• PC では CTA の最大幅を 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 行書くと起動時に読み込まれる。