DESIGN.md — 橙×クリームのオーガニックサプリ LP（Warm Orange Organic Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 果実の橙・クリーム地・手描き植物線画・ピル型ラベル・定期購入の価格表・有機認証
• 地の質感: 白い漆喰風の背景と自然光の物撮り。植物の線画を薄く重ねる
• 形: ピル型ラベル、角丸カード、丸いバッジ
• 温度感: 暖色寄り。橙・黄・赤茶で温かみを出す

Colors

• 地は白・クリーム・ベージュの 3 色を交互に使ってセクションを分ける
• 橙は帯、丸バッジ、ポイント番号など面で使う
• 見出しの強調語は赤茶色。残りの見出しは墨色にする
• 購入ボタンだけ濃い赤にして、ほかの色と混ぜない
• 深緑はフッターと一覧エリアだけに限り、LP 本体には入れない
• 価格の数字は大きく赤茶色で表示し、定価は取り消し線をつけて灰色にする
• price-card は文字 #CE6025 × 背景 #FFFFFF のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD5822、4.58:1）を使う。
• discount-steps は文字 #FEF3EE × 背景 #D45334 のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C34729、4.53:1）を使う。
• pill-label は文字 #FEF3EE × 背景 #CE6025 のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD5822、4.56:1）を使う。
• point-number は文字 #FEF3EE × 背景 #ECA33D のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9F6310、4.52:1）を使う。
• ingredient-pill は文字 #FEF3EE × 背景 #ECA33D のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9F6310、4.52:1）を使う。

Typography

• 見出しでは数字と強調語だけを 1.5 倍ほど大きくし、助詞は小さくする
• 見出しの上に、ピル型ラベルに入れたサブコピーを置く
• 本文は中央揃えにし、要点を太字の墨色で示す
• 手書き風の書体は写真の注記と口コミだけに使う
• 英字見出しは字間を広めにした細身のサンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 カラム、比較アイコンは 3 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で配置し、セクション間の区切りに使う
• ポイント解説はクリーム地の上に白カードを置き、縦に並べる
• 価格表は商品画像を左、プラン名・価格・ボタンを右に置く横並びカード
• 仕様表は見出しと本文を上下に置き、細い線で区切る
• 同じ価格表を LP の前半と後半の 2 回置く

Elevation & Depth

• 価格カードには淡い影をつけて白く浮かせる
• 物撮り写真は自然光の柔らかい影で立体感を出す
• そのほかの面はフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の矩形。円形切り抜きは丸バッジだけに使う
• セクション境界: 直線で地色を切り替える。フッターは右上だけ大きな角丸
• ラベル・成分名はピル型
• 割引率は円形バッジにする
• 購入ボタンは角丸小の横長
• ポイント番号は縦長の角丸タブ

Components

• 購入ボタン（button-primary）: 濃い赤の横長ボタン。右端に白い丸矢印
• 定期便の価格カード（price-card）: 白カード。右上に割引率の丸バッジ、定価は取り消し線、価格は大きな数字
• 割引率の階段図（discount-steps）: 朱色ブロックを右に行くほど高く並べ、間を矢印でつなぐ
• サブコピーのピルラベル（pill-label）: 赤茶塗り、または赤茶の枠線のピル。見出しの上に置く
• ポイント番号（point-number）: 橙の縦長角丸タブに「Point」と 2 桁の番号
• 口コミカード（review-card）: 罫線ノート風の地に手書き文字。星 5 つと、黄色マーカーを引いた強調文
• 成分ピル（ingredient-pill）: 橙・赤茶のピルを階段状にずらして並べる
• 商品仕様表（spec-table）: ■付きの見出しと本文を、グレーの横線で区切る
• フッター（footer）: 深緑の地に白い英字ナビと枠線ボタン。右上が大きな角丸

Do's and Don'ts

Do - 果実の橙とクリーム地で温かい自然感を保つ - 数字（含有量・割引率・価格）を極端に大きく見せる - 見出しの上にピルラベルでサブコピーを置く - 植物の線画を背景の隅に薄く入れる - 注釈は小さく添え、根拠を明示する

Don't - 寒色や蛍光色を本体に入れない - 購入ボタンを橙にしない（濃い赤で統一） - 手書き書体を本文に多用しない - 強い影やグラデーションのボタンにしない - 背景を真っ白だけにして単調にしない

Page Structure

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

1. 定期購入の価格表（冒頭でお得さを示す）: 大きな赤い見出し、割引の階段図、価格カード 3 枚
2. 商品紹介（栄養の多さを訴求する）: 大きな数字の見出し、中央に商品パッケージ、左右に手書きの注記、下に橙の帯
3. お客様の声（共感と信頼を得る）: クリーム地に罫線ノート風カードを 2 枚。黄色マーカーで強調
4. 原料の説明（素材への理解を深める）: 枠で囲んだ強調語の見出し、原料の 3 形態の写真、サステナブル性を説明する白カード
5. 凝縮・安心訴求（含有量と植物由来であることを示す）: 大きな数字の見出しと、手のひら・物撮りの全幅写真
6. 成分 No.1 訴求（主要成分の優位性を示す）: 橙の帯見出し、丸バッジ、成分ピルを階段状に並べる
7. 吸収の仕組み（成分の組み合わせを説明する）: 丸 2 つをプラス記号でつなぐ図と、産地の全幅写真
8. こだわりポイント（品質の根拠を 3 点示す）: クリーム地に白カード。Point 番号、写真、アイコン 3 列、認証基準のリスト
9. 製造・飲みやすさ（安心感と、生活に取り入れる場面を見せる）: 研究室の写真、橙ラベルを重ねた利用シーン写真のグリッド
10. ギフト提案（贈答用途を広げる）: クラフト箱の物撮りに注記ボックスを重ねる
11. CTA（価格表の再掲）（購入を促す）: 冒頭と同じ価格表
12. 商品仕様（詳細情報を載せる）: 線で区切った仕様表と、折りたたみ式の項目
13. 関連商品・フッター（ほかの商品へ回遊させる）: 生成り地に英字見出しと 2 カラムの商品カード。深緑のフッター

Imagery

• 白い漆喰や木の板の上で、自然光と強めの影をつけた物撮り
• ガラス皿に盛った錠剤・果実を斜め上から撮る
• オレンジの果実や手のひらに乗せた錠剤を寄りで撮る
• 茶色の線で描いた植物のスケッチを背景に重ねる
• 青空の下の果実の木など、産地の風景を全幅で見せる
• 細線の円形ピクトアイコン（禁止マーク付き）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を 750px 前後に固定して中央に置き、左右は地色で埋める
• 価格カードは PC で 3 列横並びにしてもよい
• 全幅写真は PC では高さを抑えてトリミングする
• 商品一覧は PC で 4 カラムにする

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