DESIGN.md — オレンジ×ライムの元気なサプリ LP（Vivid Orange and Lime Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、清潔・爽やか
• キーワード: ビタミンカラー・大きな数字・円バッジ・吹き出し・斜めストライプ・野菜写真
• 地の質感: ベタ塗りの面に細い斜めストライプを薄く敷く。グラデーションは黄→橙の縦方向のみ
• 形: 大きな円弧のセクション境界、正円バッジ、角丸の白パネル、尻尾つき吹き出し
• 温度感: 暖色中心で明るく、黄緑と水色でさわやかさを足す

Colors

• 地色はオレンジ・蛍光イエロー・グレー・黄緑・淡ピンクをセクションごとに切り替える
• 情報の主役は白い大きな円・角丸パネルに載せ、地色の上に浮かせる
• 数字と成分名はオレンジで強調し、背景が暖色のときは白抜きにする
• 帯見出しはオレンジ・黄・水色・ピンクのベタ塗り＋白か黒文字
• 赤はお得額など価格訴求にだけ使う
• 黄緑は悩み文の強調語と成分円で使う
• heading-band は文字 #FDFAFA × 背景 #FC7204 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BB5402、4.62:1）を使う。
• ranking-hero は文字 #FC7204 × 背景 #FEFEFE のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BB5402、4.52:1）を使う。

Typography

• 数字は本文の3〜4倍に大きくし、単位は半分くらいの大きさで添える
• 見出しは極太ゴシックで、字間を少し広げる
• 強調語だけ色を変える（オレンジ・黄緑）
• 白抜きの縁取り数字は大きな見せ場でだけ使う
• 注釈は小さいグレーで、本文と分けて書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真のグリッドは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面いっぱいの地色で区切る
• 白い円パネルは画面より大きく描き、上下を円弧で見せる
• 見出しは中央揃え。帯見出しは左寄せで段違いに積む
• 円バッジは中心ビジュアルの周りに環状に並べる
• 人物写真は片側に大きく置き、テキストを反対側に重ねる

Elevation & Depth

• パネルは基本フラットで、影を付けない
• SNS投稿カードだけごく薄い影を付ける
• 商品パッケージの写真は少し影を付けて浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物と食材は角版か切り抜き。成分写真は正円、ラベルは六角形
• セクション境界: 大きな円弧で上下を切る。ほかは直線で地色を切り替える
• 吹き出しは角丸長方形かピル型で、下に三角の尻尾を付ける
• 成分や悩みは正円バッジにする
• 帯見出しは角丸なしのベタ長方形
• 下向きの三角を3つ縦に並べて次へ誘導する

Components

• 帯見出し（heading-band）: ベタ塗りの長方形帯に太字を載せる。2段なら段違いに積む
• ピル型吹き出し（speech-pill）: 白のピル型に尻尾を付けたリードラベル。大見出しの上に置く
• 成分円バッジ（circle-badge）: 黄〜橙のグラデーション円に、項目名と大きな数字を入れる
• 悩み円（worry-bubble）: 濃グレーの円に白文字。キーワードは黄緑。人物写真に重ねて散らす
• セット価格比較表（price-table）: 黒い見出しセルの表。下に赤ボックスでお得額を示す
• 掲載実績パネル（media-panel）: グレーの角丸パネルに、オレンジのラベルと誌面写真を入れる
• SNS投稿カード（sns-card）: 白枠の正方形写真＋アイコン列。上に吹き出しで短い声を添える
• No.1実績ブロック（ranking-hero）: 王冠と月桂樹で巨大な数字を飾り、下に獲得実績を2行入れる
• 配合率グラフ（bar-chart）: オレンジの縦棒グラフ。基準線を赤で引き、突出値には吹き出しを付ける

Do's and Don'ts

Do - セクションごとに地色をはっきり切り替えて、テンポを出す - 数字は極太で大きく、単位は小さくする - 根拠となる数値には※注釈を付ける - 白い円や吹き出しで情報を区切る - 野菜・果物の写真をパネルの縁にはみ出させて、鮮度感を出す

Don't - 暗い地色や落ち着いたくすみ色を主役にしない - 細い明朝体を使わない - 長文を詰め込まない。1ブロックは5行以内にする - 強調色を1つの見出しに3色以上混ぜない - 影や立体効果を多用しない

Page Structure

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

1. ファーストビュー（商品と主要成分の数値を一目で伝える）: オレンジ地に白の大円。商品写真を中央に置き、食材写真で囲み、下に円バッジを4つ並べる
2. コンセプト（商品の位置づけを伝える）: オレンジ地に黄色の大見出し、白い吹き出し、帯見出し2段、人物写真
3. まとめ買い価格（セット購入のお得さを訴求する）: グラデーション帯の見出し、セット写真、比較表、赤のお得額ボックス
4. 販売実績・ランキング（人気を数字で証明する）: 白の大円内に月桂樹と累計数、シリーズ写真の列、巨大なNo.1
5. メディア・SNS掲載（第三者の評価を見せる）: 黄→橙グラデーション地にグレーのパネルを積み、誌面写真と投稿グリッドを置く
6. 悩みの提起（食生活の不安に共感する）: セージ地の大円内に人物写真。濃グレーの悩み円を5つ散らし、結論の語に下線を引く
7. 解決提示（商品を解決策として示す）: 黄ストライプ地にオレンジの帯見出し2段、商品と人物の写真
8. 成分一覧（配合量の多さを見せる）: 商品を中心に、成分円を色相順に環状配置する
9. 配合率グラフ（必要量を満たすことを示す）: 黄地に吹き出し付きの縦棒グラフ
10. 追加成分（乳酸菌・美容成分の付加価値を示す）: 水色帯の見出しと縁取り数字、写真＋吹き出し。ピンク地に正円写真とラベル
11. まとめ訴求（一度に摂れる利便性を示す）: 白の大円に色帯の語を並べ、粒の写真と吹き出し
12. 機能表示（公的な表示基準への適合を示す）: オレンジ地に黄色の大見出し、野菜写真の上に六角形ラベルを並べる
13. 品質・安心（製造品質で信頼を得る）: 黄緑地に研究写真の角丸パネル、見出しと本文、商品写真

Imagery

• 白地に、色の濃い野菜（トマト・パプリカ・ブロッコリー）を俯瞰で撮り、四方に散らす
• 女性モデルが明るい屋外や海辺で伸びをする、晴れやかな写真
• 悩みの場面は、室内で頭に手を当てるオフィス女性
• 商品パッケージは白地に黄〜橙の円を散らした柄で、正面から撮る
• 成分素材は丸く切り抜いたマクロ写真
• 研究室で顕微鏡を使う白衣の手元で、清潔感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は1カラムで組み、白い円パネルは画面幅の130%ほどにして円弧だけ見せる
• PC は中央に幅750px程度で置き、左右に地色を延ばす
• 成分の環状配置は、SP では3〜4列のグリッドに置き換えてもよい
• SNSグリッドは SP で2列にする
• 比較表は SP で横スクロールさせず、文字を縮めて収める

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