DESIGN.md — 焦げ橙×金のクリーム地・腸活サプリ LP（Warm Orange Gold Gut Health Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、やさしい・柔らかい
• キーワード: 焦げオレンジ・金グラデ帯・クリーム地・白角丸カード・エビデンスグラフ・黄色マーカー
• 地の質感: クリームや淡い生成りのフラットな地。帯と価格見出しにだけ金のグラデーションを使う
• 形: 角丸カード、六角形の番号バッジ、下向き矢印の帯、楕円の吹き出し
• 温度感: 暖色寄り。信頼セクションだけ淡い青で冷やす

Colors

• 地は白・クリーム・ベージュを交互に使い、セクションを区切る
• 見出しの強調語と帯は焦げオレンジに統一する
• 価格オファーとまとめの帯は金のグラデーションにする
• 購入ボタンだけ、明るいオレンジ赤のグラデーションにする
• 2つの機能は、淡ピンク（おなか）と黄緑（脂肪）で色分けする
• 企業の信頼セクションだけ、淡い青地に紺の見出しにする
• button-primary は文字 #FEF9F6 × 背景 #CE5915 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5213、4.56:1）を使う。
• band-heading は文字 #FEF9F6 × 背景 #CE5915 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5213、4.56:1）を使う。
• number-badge は文字 #FEF9F6 × 背景 #CE5915 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5213、4.56:1）を使う。
• worry-card は文字 #CE5915 × 背景 #FEFFFE のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5213、4.58:1）を使う。

Typography

• 見出しは太いゴシックで書き、キーワードだけオレンジにして一回り大きくする
• 助詞は小さく、名詞を大きくするジャンプ率で組む
• 強調語には黄色マーカーの下線を引く
• 写真の上に置くコピーは、縦書きのオレンジ帯に白文字で載せる
• ※注釈は 10px 前後の灰色で、必ず該当箇所の直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは画像とテキストの 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 情報ブロックは白かベージュの角丸カードに入れて、地から浮かせる
• グラフは、白カードの中にさらに白い枠を入れて配置する
• 価格ブロックは金の帯ヘッダーと白い本体の箱で組む
• 写真セクションは全幅か、片側だけを角丸にして断ち落とす

Elevation & Depth

• 価格ボックスには淡いドロップシャドウを付ける
• CTAボタンは下側に濃いオレンジの影を付けて立体的に見せる
• カードは基本フラットにし、地との色差で分ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形か、片側だけ大きく角丸にした断ち落とし。錠剤は円形の枠で見せる
• セクション境界: 下向き三角付きの帯、緩い波線、大きな角丸カードの縁
• 番号やQのバッジは六角形にする
• 「でも」「さらに」などのつなぎ見出しは、下向きの矢印帯にする
• 吹き出しは白地にオレンジ線の角丸で作る

Components

• 購入CTAボタン（button-primary）: オレンジ赤グラデのピル型。上段に小さい補足、下段に大きい行動語、右端に矢印
• 価格オファーボックス（offer-box）: 金グラデ帯に赤い丸の限定バッジと割引率。白い本体に、通常価格→特別価格の矢印比較
• 帯見出し（band-heading）: 全幅に近いオレンジか金の帯に、白文字の中央揃え
• 矢印つなぎ帯（arrow-band）: 焦げ茶の短い帯の下に三角形を付け、流れを転換する
• 六角形の番号バッジ（number-badge）: オレンジグラデの六角形に白い欧文数字
• エビデンスカード（evidence-card）: ベージュの角丸カードに、枠線付きの見出し、白いグラフ枠、試験概要の注釈
• チェックリスト（check-list）: 淡オレンジの四角にチェック印。項目は罫線で区切る
• FAQアコーディオン（faq-item）: 金の六角Qバッジ、太字の質問、右端に＋。項目は灰色の罫線で区切る
• 悩みの吹き出しカード（worry-card）: 写真の上に半透明の白いカードを左右交互に置き、オレンジ文字で悩みを書く

Do's and Don'ts

Do - 強調語はオレンジ＋マーカーで、1 見出しに 1〜2 箇所だけ強調する - グラフは灰色（比較群）とオレンジ（摂取群）の 2 色で描き、吹き出しで結果を言い切る - ※の注釈を必ず添えて、薬機法に配慮したトーンを保つ - CTA 付きの価格ブロックはファーストビュー直後とページ後半の 2 回置く - 人物写真は自然光の明るいものを使い、生活の一場面として見せる

Don't - 寒色を主役にしない（青は信頼セクション限定） - CTA 以外に赤オレンジのグラデーションを使わない - 注釈を省いたり、本文と同じ大きさで書いたりしない - 細い明朝体で見出しを組まない - 暗い背景のセクションを多用しない

Page Structure

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

1. ファーストビュー（歴史・2つの機能・商品を一目で伝える）: 金帯の上見出し、ピンクと黄緑のカードを＋でつなぐ。男女の写真の上に商品パッケージと粒数のバッジ
2. 届出表示（法定表示）: 白地に小さい注釈テキスト
3. 価格オファー（早期に購入を促す）: 金帯のヘッダー、価格の比較、ピル型 CTA、注意事項
4. 独自性の訴求（成分の組み合わせの唯一性を伝える）: 成分を丸い図形で並べて＋でつなぎ、大見出しにマーカーを引く。下は金グラデ地で W ケアを訴求
5. 悩みの提起（共感を得る）: オレンジ帯の見出しの下、写真の上に悩みカードを 3 枚、左右交互に置く
6. 知識の解説（腸内細菌の基礎を説明する）: クリーム地にイラスト、白カード、キャラ化した菌、折れ線グラフ
7. 障壁の提示（続けにくさを示し、解決策へ橋渡しする）: 焦げ茶の矢印帯、チェックリスト、マーカー見出し、3 分割の写真
8. 解決策の提示（商品を習慣として提案する）: 縦書きのオレンジ帯を重ねた生活写真、粒数を大きな数字で見せる
9. 機能とエビデンス（2つの機能を根拠付きで示す）: 六角番号、写真の上の白帯見出し、成分カード、金帯、ベージュのグラフカードを連続で並べる
10. 手軽さ（1日あたりの価格と飲みやすさ）: 矢印帯、ピル型ラベル、錠剤を円で切り抜いた写真、クリームの円
11. 生活提案と再オファー（習慣化を促し、購入させる）: 写真を＋で縦につなぎ、縦書きの帯を重ねる。その後に価格ボックスを再掲
12. ブランドの信頼（企業の歴史と品質への姿勢）: 淡グレー地に縦書きのタイトルと本文。淡青地で画像とテキストの 2 列を 4 段
13. よくある質問（不安を解消する）: 金帯の見出し、六角Qのアコーディオン

Imagery

• 30〜40代の男女を、自然光で明るく撮った日常の写真（食事・運動・ストレッチ）
• 人物の背景は緑か室内を浅い被写界深度でぼかす
• 商品パッケージは正面から撮り、下に反射を付ける
• シンプルな線画の人物イラストと、顔付きでキャラ化した丸い菌のイラスト
• 研究室・原料・顕微鏡の写真で信頼感を出し、角丸で切り抜く
• グラフは灰色とオレンジのフラットなデザインで、オレンジ線の吹き出しを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため、以下は推奨。PC では 750px 前後の中央カラムに SP デザインを置き、左右はクリーム地で埋める
• 特長カードや信頼項目は PC で 2〜4 列に展開してよい
• 価格ボックスは最大幅 640px に収め、CTA は幅 480px 程度にする
• 全幅の写真は PC で横長にトリミングし、縦書き帯の位置を保つ

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