DESIGN.md — 生成り×若草色のオーガニックサプリ LP（Organic Kraft & Leaf Green Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: オーガニック・クラフト紙・若草色・生成り・明朝の数字・円形モチーフ
• 地の質感: 和紙のような生成りの地に、マットなクラフト紙の質感を組み合わせる
• 形: 円形の吹き出しと数字バッジ、ゆるい山型のセクション境界、角丸の小さいカード
• 温度感: 暖かく穏やか。緑が爽やかさを、茶色が素朴さを足す

Colors

• 地の色は白と生成りを交互に使い、悩みや解説のパートだけ淡い黄緑の地にする
• 見出しの強調語は primary の緑にし、残りは濃いグレーにする
• 価格・割引率・特典名は accent-1 の赤に限って使う
• 受賞数字や満足度の数字はベージュゴールドの明朝体で大きく見せる
• 黄色マーカーは見出しのキーワード 1 箇所にだけ引く
• CTA は緑一色で塗る。赤は CTA に使わない
• button-primary は文字 #FFFFFF × 背景 #5D9154 のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#53814B、4.56:1）を使う。
• limited-label は文字 #E04A48 × 背景 #FEFEFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC3432、4.55:1）を使う。
• tag-green は文字 #FFFFFF × 背景 #5D8F54 のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#54814C、4.54:1）を使う。
• worry-circle は文字 #5D8F54 × 背景 #DEFDCE のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#54814C、4.52:1）を使う。
• point-circle は文字 #5D8F54 × 背景 #DEFDCE のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#54814C、4.52:1）を使う。

Typography

• 情緒的なコピーと数字は明朝・セリフ体、説明はゴシック体と使い分ける
• 見出しは助詞を小さくし、キーワードを大きく緑にする
• 情緒コピーは縦書きの明朝にして余白を大きく取る
• 注釈は 9〜10px のグレーでブロックの直下に置く
• 価格は数字だけを特大にし、円・税込は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典やメディア掲載だけ 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文の左右余白は約 20px
• 見出しは中央揃え、本文は左揃え
• ページ左右に細い緑のフレーム線を通す
• 特典カードは縦に積み、最後の 2 つは 2 列にする
• CTA ブロックは商品写真・価格・ボタンの順に縦に並べる

Elevation & Depth

• カードはごく薄い影か影なしで、地の色の差で区切る
• 価格の割引バッジは影なしの赤い円
• 写真カードは白い枠線と角丸で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きか角丸の長方形。悩みや特徴は円の中に収め、人物写真は端まで広げる
• セクション境界: ゆるい山型のカーブで地の色を切り替える。それ以外は直線
• ラベル類は角丸の緑の帯やピルにする
• ポイントは大きな淡緑の円に番号と見出しを入れる
• 特典番号は金色のリボン型タグにする
• CTA ボタンはほぼ角の立った長方形で、右端に矢印を付ける

Components

• 申込ボタン（button-primary）: 緑のベタ塗りに白抜きの太字、右端に矢印。幅は約 90%
• 価格ブロック（price-block）: 赤い円の割引バッジ、取り消し線の通常価格、赤い特大の価格を並べる
• 限定条件の枠（limited-label）: 白地に赤い細枠と赤文字で、初回限定などの条件を示す
• 特典カード（benefit-card）: 白いカードの左に金色のリボン型番号タグ。特典名は赤で書く
• 緑ラベル（tag-green）: 緑の角丸帯に白文字。見出しの前置きや強調語に使う
• 悩みの円吹き出し（worry-circle）: 人物写真の上に淡緑の円を 3 つ置き、悩みのキーワードを緑の太字で入れる
• 番号付きポイント円（point-circle）: 淡い黄緑の大きな円に細身の番号と見出し。イラストを添える
• 月桂樹の数値実績（laurel-stat）: 金色の月桂樹で明朝の大きな % 数字を囲む
• お客様の声（review-item）: 左に丸いイラストアイコンと年代、右に太字タイトルと本文。区切り線でつなぐ
• 欧文ライン見出し（line-heading）: 左右に細線を引き、中央に小さな欧文ラベルを置く

Do's and Don'ts

Do - 地は白・生成り・淡い黄緑の 3 色に絞り、交互に使ってリズムを作る - 数字の実績は明朝やセリフ体で大きくし、上品に見せる - 商品はクラフト紙パッケージの写真を CTA ごとに繰り返し見せる - 強調語には緑の文字か黄色マーカーを 1 箇所だけ使う - 注釈はグレーの小さな文字で、根拠のすぐ下に置く

Don't - CTA を赤やオレンジにしない - 原色の鮮やかな緑や影の強いボタンは使わない - 明朝を本文に使わない - 黒ベタの地を多用しない（使うのは料理写真の背景に限る） - 角丸を大きくしすぎてポップに寄せない

Page Structure

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

1. ファーストビュー（実績 No.1 と独自性を一目で伝える）: 生成りの地にベージュの巨大明朝数字、商品写真、明朝のキャッチ、ロゴ
2. 権威性の帯（日本初・特許・認証の 3 点を示す）: 緑の帯の上に 3 列のアイコンと白文字、下に注釈
3. SNS の口コミ（利用者の多さを見せる）: マーカー付き見出し、タブ、横スクロールの投稿カード
4. ブランドの想い（安心感を情緒的に伝える）: 縦書きの明朝コピーと広い余白
5. 限定特典（購入動機を高める）: クリーム地に金リボンの特典カードを 6 つ。価格は赤
6. 実績数値・メディア掲載（満足度・リピート率と掲載実績で信頼を得る）: 月桂樹の数字、雑誌の切り抜きコラージュ、ロゴの並び
7. スポンサー・公的活動（社会的な信頼を補強する）: 写真 2 枚、監督のコメント、緑の帯見出しのカード
8. CTA（初回の申込を促す）: 商品写真、明朝の商品名、限定枠、赤い価格、緑のボタン
9. 悩みの提起（潜在的な不足に気づかせる）: モノクロ写真、淡緑の円吹き出し、チェックリスト
10. 解決策・メリット（成分の優位性を説明する）: グラデーション枠の大きな円、番号付きの淡緑の円 3 つ
11. 3 つの特徴（商品独自の強みを示す）: 空と植物の写真から生成りのカードへつなぎ、原料写真の図解と大きな番号
12. 開発ストーリー・おすすめ（開発背景と対象者を伝える）: 縦書きコピー、親子写真、開発者カード、緑チェックのリスト
13. 使い方・レシピ（続けやすさを見せる）: 暗い料理写真の上に半透明の白カード、レシピの横スクロール
14. お客様の声・満足度・最終 CTA（後押しして申込へ）: アイコン付きの声、緑の円グラフ風の数値、CTA の繰り返し

Imagery

• 商品はクラフト紙パッケージを柔らかい自然光で撮り、生成りや木の上に置く
• 人物は子育て世代の母子や女性。明るい室内で自然に笑う表情にする
• 悩みのパートはモノクロや彩度の低い写真にして、解決後のカラーと対比させる
• 原料は白背景の切り抜きで、緑の線でつないで図解する
• イラストはフラットで線の細いもの。人物やアイコンは淡い色でまとめる
• 装飾は金色の月桂樹、リボンタグ、植物の葉のモチーフ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、PC では幅 375〜480px の中央カラムに SP デザインをそのまま置くのを推奨する
• 左右の余白は生成りか #F0F0F0 で埋め、細い緑のフレーム線を残す
• 特典やメディア掲載は PC でも列数を増やしすぎない
• 横スクロールのカードは 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 行書くと起動時に読み込まれる。