DESIGN.md — 生成り×緑×朱色の野菜スープ定期便 LP（Warm Cream Veggie Soup Subscription LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 生成り地・深緑の帯・朱色の数字・料理写真グリッド・手描きイラスト・黄土色キャンペーン帯
• 地の質感: フラットな面に紙吹雪や野菜の切り抜き写真を散らす。セクションの境目には波線やゆるい山形を使う
• 形: 角丸カード、ピル型のラベル、黒い枠線の吹き出しカード、スラッシュ（\ /）で囲んだ見出し
• 温度感: 暖色寄り。クリームと黄色の地に緑で健康感を出す

Colors

• ベースは生成りかベージュにし、真っ白は使いすぎない。白はカード面に使う
• 深緑は特長セクションの帯、CTA、ブランドの数字に限って使う
• 朱色は価格・kcal・強調語など数字の強調に使う
• 黄色と黄土色はキャンペーン・価格まわりの地に限定する
• 本文中の強調語は朱色か緑の文字色で示す。マーカーは使わない
• button-primary は文字 #EFFFFA × 背景 #1E8D62 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C825B、4.63:1）を使う。
• price-block は文字 #CC5739 × 背景 #F7F7ED のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD4D31、4.56:1）を使う。
• label-pill は文字 #EFFFFA × 背景 #CC5739 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BD4D31、4.51:1）を使う。
• campaign-ribbon は文字 #FEFEFE × 背景 #B28626 のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#957020、4.51:1）を使う。
• calorie-compare-card は文字 #FEFEFE × 背景 #ECC2BC のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#565656、4.55:1）を使う。

Typography

• 見出しは太字で、数字だけを 2〜3 倍に大きくする
• 本文も太めの字（700）で、行間は広めにとる
• 小見出しは「\ 〜 /」のスラッシュで挟む
• ブランド名や英字ラベルは細めの欧文サンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニュー写真は 4 列または 3 列のグリッド、比較カードは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 料理写真は画面幅いっぱいに使う
• 価格ブロックは黄色の枠の中にクリーム色のパネルを置く
• キャンペーンのブロック（価格・特典・CTA）はページ内で 2 回以上繰り返す
• 特長は写真の上に黒枠のカードを重ねる

Elevation & Depth

• 影はほぼ使わない。平面で構成する
• カードの区切りは黒の 2px 枠線か白い面で出す
• 切り抜き写真をセクションの境界にはみ出させて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は四角か角丸。人物写真は上部をアーチ形に切り抜く
• セクション境界: 波線、ゆるい山形、直線の切り替え
• CTA とラベルはピル型にする
• 特長カードは白地に黒枠で、角丸 12px
• 価格の割引率は下向きの五角形バッジにする
• 吹き出しの尾は細い線か点線でつなぐ

Components

• 主 CTA ボタン（button-primary）: 緑のピル型。右端に白い丸の矢印アイコンを置き、上に締切を書いた白いラベルを重ねる
• カウントダウン帯（countdown-bar）: 黒い帯に黄色のデジタル数字で残り時間を表示する
• 価格ブロック（price-block）: 定価に打ち消し線を引き、矢印の先に朱色の大きな価格を置く。横に割引率バッジを添える
• 特長カード（feature-card）: 白地に黒枠のカード。見出しの数字だけを朱色にする
• ピル型ラベル（label-pill）: 朱色または緑の小さなピル型ラベル。下に小さな尾をつけてもよい
• キャンペーン帯（campaign-ribbon）: 黄土色の帯に紙吹雪を散らし、白抜きの日付と記念キャンペーン名を置く
• カロリー比較カード（calorie-compare-card）: 上が写真、下が淡ピンクの帯に kcal 表示。置き換える対象のカードは朱色の枠で囲む
• 悩みの写真キャプション（quote-caption）: 写真の上に白い帯を置き、かぎ括弧つきの一言を 2 行で載せる
• プラン条件ボックス（plan-option-box）: 点線で囲んだ枠に商品パッケージを並べ、その下に細い枠のタグを 2 つ置く

Do's and Don'ts

Do - 価格・kcal・実績などの数字は朱色か緑で特大にする - 料理写真は自然光で、テーブルクロスや器ごと見せる - キャンペーンと CTA のブロックは中盤と後半で繰り返す - 手描きの人物や野菜のイラストを少しだけ添える - 注釈は小さな灰色の文字で必ず添える

Don't - 青系や寒色の地を使わない - 影の強いカードやグラデーションのボタンは使わない - 細い明朝体で高級感を出しすぎない - 朱色を広い面の塗りに使わない - 写真に強いフィルターをかけない

Page Structure

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

1. カウントダウン（期限を示して急がせる）: 黒い帯に黄色の数字で残り時間を表示する
2. ファーストビュー（商品の魅力を一目で伝える）: クリーム地に焦げ茶の太い見出しを置き、下に料理の大きな写真。手書き風の吹き出しと人物イラストを添える
3. メディア実績（権威付け）: 黄色の地に大きな朱色の数字を置き、雑誌の表紙を斜めに並べる。下にテレビ番組のロゴを入れた白枠
4. 著名人の掲載（共感と信頼）: アーチ形の人物写真に縦書きの手書き文字とコメント帯を重ねる
5. メニューの豊富さ（選べる楽しさを伝える）: 大きな朱色の数字の下に、料理写真を 4 列のグリッドで並べる
6. 特典プレゼント（申込の動機づけ）: 淡ピンクの地を二重線の枠で囲み、特典の写真と仕様を書いた注釈を載せる
7. キャンペーン・価格（申込に向けたオファー）: 黄土色の帯、料理写真のグリッド、価格ブロック、特典カード、送料の帯、CTA の順に並べる
8. 特長（商品の価値を説明する）: 緑の帯に白い大見出しを置き、写真に黒枠のカードを重ねて点線でつなぐ
9. カロリー比較（効果を数値で見せる）: 朝・昼・夕の 3 列カードで比較し、矢印で差分 kcal を示す
10. 販売実績（社会的証明）: 商品パッケージを並べ、緑の特大数字と媒体ロゴの枠を置く
11. 再 CTA（申込の取りこぼしを防ぐ）: キャンペーンのブロックをもう一度載せる
12. ターゲットの悩み（共感を引き出す）: 写真を左右交互に配置し、白い帯のかぎ括弧キャプションを重ねる
13. 解決提示・食べ方（商品で悩みを解決できると示す）: ロゴの下に黄色い丸の吹き出しを置き、写真に白帯の見出しを重ねる。続けて朱色のピル型ラベルの下に見出し

Imagery

• 自然光で、俯瞰か斜め上から撮った料理写真。チェックや柄のクロス、木のトレイを背景にする
• トマトやパプリカなどの野菜の切り抜き写真をセクションの端に配置する
• 線画の手描き人物イラストを添える
• 四角い紙吹雪や紙片を散らしてお祝い感を出す
• 生活シーンの人物写真は明るくナチュラルに
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 600px 幅の SP レイアウトを置き、左右を背景色で埋める
• 写真のグリッドは PC でも列数を保ち、余白だけ広げる
• 大きな数字のサイズは PC でも 1.2 倍程度にとどめる

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