DESIGN.md — 深緑×黄色の豆粉パン通販 LP（Deep Green Plant-Based Bread Offer LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、信頼・誠実、情報量多め・訴求型
• キーワード: 深緑・黄色マーカー・焼き色の食品写真・60%OFF訴求・番号付き特長・棒グラフ比較
• 地の質感: ほぼフラットな面に、生成り・薄グレーの地色と自然光の食品写真を重ねる
• 形: 角丸 8〜16px のカード、太い角丸枠、下向き三角の吹き出し、円形バッジ
• 温度感: やや温かい（深緑＋黄＋木目の茶色）

Colors

• 地は白・生成り・薄グレー緑・淡い黄色をセクションごとに切り替える
• 深緑は見出し帯、特長カード、サブボタンに限定して面で使う
• 黄色は見出し下マーカー、グラフ棒、数字強調、見出し帯に使う
• 価格と割引率だけ赤で強調し、ほかに赤は使わない
• 主 CTA は白地にオレンジ枠・オレンジ文字のクーポン風にする
• 茶色の帯は推薦コメントやコラム的な横長ブロックに使う
• button-coupon は文字 #E29A1A × 背景 #FFFFFF のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#9D6B12、4.62:1）を使う。

Typography

• 見出しは極太ゴシックを深緑で書き、中央揃えにする
• 見出しの上に「＼ 前置き ／」の形で小さなコピーを置く
• 数字（%・倍・価格）は周りの文字より 1.5〜2 倍大きくする
• 見出しの重要語に黄色の下線マーカーを引く
• 注釈は 10px 前後の灰色で、各ブロックの直下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の要約やおすすめは 3 列カード、SNS 投稿は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色を切り替え、全幅帯で区切る
• 特長は番号バッジ付きの太枠カードの中に、グラフ・写真・リストを入れる
• オファーは薄グレー緑の地の上に白い角丸の太枠カードを置き、下に三角の吹き出しを付ける
• フレーバー紹介は写真と文章を左右交互に配置する
• CTA はオファーの直後にクーポンボタンと緑ボタンを縦に並べる

Elevation & Depth

• 基本はフラット
• ボタンには下方向に濃い色のずれ影（2〜4px）を付ける
• おすすめカードと SNS カードは薄いグレーの影か 1px 線で浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 食品写真は角丸 8px の長方形、人物は切り抜き、栄養素は円形バッジ
• セクション境界: 直線で切り替え、下向き三角の矢印・吹き出しでつなぐ
• 特長カードは深緑の 3px 前後の太枠と角丸 16px
• 番号は黄色の円に緑の数字を入れ、カードの上端に半分かける
• ボタンは角丸 12px の長方形で、ピル型にはしない

Components

• クーポン取得ボタン（button-coupon）: 白地にオレンジの太枠、角に斜めの帯。2 行のオレンジ文字
• そのまま申込ボタン（button-secondary）: 濃い緑の地に白文字の 2 行ボタン。下に影を付ける
• 初回価格オファーカード（offer-card）: 商品写真、大きな割引率、セット内容、緑の価格見出し帯、赤い価格を入れた白い太枠カード
• 番号付き特長カード（number-feature-card）: 上部は深緑の帯に白見出し、上端に黄色の番号円。中は白地
• 月桂樹の実績バッジ（award-badge）: 金色の月桂樹で囲んだ No.1・高評価率を 3 つ横に並べる
• 比較棒グラフ（bar-chart）: 黄色の棒と灰色の棒で比べ、オレンジの円形吹き出しに倍率を出す
• 黄色の見出し帯（yellow-heading-band）: 角丸の黄色い帯に深緑の太字見出し
• チェックリスト（check-list）: 淡い黄色の角丸箱に、緑の丸チェックと太字の行を並べる
• お客様の声の吹き出し（voice-bubble）: 淡い黄色の地に白い吹き出しとイラストの人物を左右交互に置く

Do's and Don'ts

Do - 数字訴求は黄色・赤・オレンジで大きく目立たせる - 見出しは深緑の極太ゴシックで統一する - 根拠の注釈は各ブロックの直下に必ず置く - 食品写真は木目や布を背景に、温かい自然光で撮る - オファーと CTA のセットはページの中盤と終盤に繰り返す

Don't - 深緑以外の寒色をメインに使わない - 赤を価格以外の装飾に使わない - ボタンをピル型や細い線だけのデザインにしない - 写真を暗くしたり、彩度を下げたりしない - 注釈を省いて数値だけを見せない

Page Structure

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

1. ファーストビュー（商品の魅力と大幅割引を一度に伝える）: 食品写真の上に黒い極太コピーを置き、下に深緑の帯と黄色の大きな割引率、送料無料の円形バッジを並べる
2. 実績（ランキングや評価で信頼を得る）: 生成りの地に月桂樹のバッジを 3 つ並べ、下に注釈を置く
3. 専門家の推薦（プロの声で品質を裏付ける）: 店内写真を背景に黄色の見出し帯と白いコメント箱を置き、人物を切り抜きで添える。緑の下向き矢印で次へつなぐ
4. 販売実績・商品概要（累計販売数と商品のコンセプトを伝える）: 大きな数字の帯のあと、生成りの地に深緑の見出しと中央揃えの本文、かご盛りの写真を置く
5. 新フレーバーの紹介（新商品を推す）: 茶色の帯に白い箱を入れ、商品パッケージと推薦者の写真を添える
6. オファー・CTA（初回価格で申込を促す）: 薄グレー緑の地に白い太枠カードを置き、割引率・セット内容・赤い価格を入れる。下にクーポンボタンと緑ボタンを並べる
7. おすすめの対象（自分ごと化させる）: 淡い黄色の地に白い角丸カードを 3 つ並べ、下に人物写真と深緑の円形コピーを重ねる
8. 特長の要約（3 つの強みを一覧で見せる）: 素材の俯瞰写真と商品写真のあと、深緑の番号付きカードを 3 列に並べる
9. 特長の詳細（数値と素材で根拠を示す）: 番号付きの太枠カードに黄色の見出し帯、棒グラフ、チェックリスト、栄養素の円を入れる
10. フレーバー紹介（味のバリエーションを見せる）: 写真と文章を左右交互に置き、フレーバー名を色違いの太字と下線で書く
11. 食べ方の提案（おいしく食べる方法を伝える）: 濃い茶色の帯に黄色と白の文字を置き、右にトースターの写真を入れる
12. SNS 投稿（利用者の生の声を見せる）: タブ風のボタンの下に投稿カードを 3 列グリッドで並べ、もっと見るボタンを置く
13. オファー・CTA（再掲）（最後にもう一度申込を促す）: 中盤のオファーカードとボタンを同じ形で繰り返す
14. お客様の声（共感と安心で後押しする）: 淡い黄色の地に白い吹き出しとイラストの人物を左右交互に置き、商品の写真を添える

Imagery

• 食品は木目・リネン・ラタンのかごの上で、自然光を使い斜め上から撮る
• 素材（豆・ナッツ・粉）を小皿に入れ、白い布の上に整列させて俯瞰で撮る
• 人物は明るい室内で、商品を手に笑顔の自然なカット
• お客様の声は太い線画に単色ベタ塗りのフラットなイラスト
• パッケージはたくさん積んだ箱の形で、オファーの中に配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜750px 幅の SP レイアウトを置き、左右を地色で埋める形にする
• PC に広げる場合、3 列カードは横幅を広げ、写真と文章の交互配置は 2 カラムにする
• 大数字や価格は PC でも画面幅に応じて大きく保つ
• SNS 投稿グリッドは PC で 4〜6 列に増やす

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