DESIGN.md — 生成りストライプ×緑橙の野菜レシピ LP（Fresh Vegetable Recipe Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、ポップ・元気、情報量多め・訴求型
• キーワード: 野菜・食育・レシピ・生成り・ストライプ・3色ナビ
• 地の質感: 生成り地に淡い縦ストライプ。紙の付箋やマスキングテープ風の装飾
• 形: 角の小さい四角カード、ピル型ボタン、吹き出し型の数値バッジ、円形アイコン
• 温度感: 暖かく明るい。家庭的でヘルシー

Colors

• 地は生成りストライプで統一し、情報ブロックは白カードで浮かせる
• 章ごとに緑→橙→黄緑のアイコン色とナビ色を対応させる
• 数値・グラム数はオレンジ、ブランド語は緑で強調
• 要点の文言は黄マーカーや黄緑下線で引く
• レシピカード地は黄緑とクリーム黄を交互にする
• 本文は黒でなく茶系で柔らかく
• gram-bubble は文字 #F15615 × 背景 #FFFFFF のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D1460C、4.57:1）を使う。

Typography

• 見出しは中央揃えの丸ゴシック太字
• キーワードの一字目や数値を他より大きくする
• 「！」や語尾を少し斜めにした遊びを入れる
• 注釈は小さく薄く、本文下にまとめる
• 数値は単位より大きく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、レシピカードは SP 1 列（PC 2 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 章の頭に円形アイコン＋二重枠の見出しボックスを置く
• 章の間に破線の曲線と切り抜き野菜を挟む
• レシピカードは写真→提案者→レシピ名→ポイント→ボタンの順
• 数値比較は横棒グラフで見せる
• FV直下に3色の章ナビを並べる

Elevation & Depth

• カードは薄いドロップシャドウでわずかに浮かせる
• 見出しボックスは白地に茶の二重線枠、影なし
• 吹き出しバッジは白地に淡い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角の四角に白フチ、野菜は切り抜きで散らす
• セクション境界: 手描き風の波打つ破線
• ボタンは白地に茶枠のピル型
• カード角にマスキングテープ風の黄色帯
• グラム数は丸い吹き出し
• アイコンは円形の色面に白線画

Components

• 3色章ナビ（nav-chapter）: 緑・橙・黄緑の3ボタンを横並び、アイコン＋2行文＋▼
• 章見出しボックス（heading-box）: 上に円形アイコン、白地に茶の二重枠で見出しを中央配置
• 摂取量バーグラフ（bar-graph）: オレンジ帯で目標と現状を比べ、不足分を緑ラベル
• 栄養素ピル（nutrient-pill）: 橙・緑・黄緑の小さなピルラベルを横並び
• 栄養素カード（nutrient-card）: 上下に色帯、左に見出しと説明、右に切り抜き野菜
• レシピカード（recipe-card）: 黄緑/クリーム地、テープ装飾、写真、商品切り抜き、ポイント欄
• グラム数吹き出し（gram-bubble）: 写真右上に重なる白い吹き出しで野菜量をオレンジ数字で表示
• レシピボタン（button-recipe）: 白地に茶枠のピル型、中央寄せ
• 詳しく見るボタン（button-primary）: 濃緑のピル型に白文字と外部リンクアイコン

Do's and Don'ts

Do - 生成りストライプ地を全体に敷く - 章ごとの色を見出しアイコンとナビで揃える - 野菜の切り抜きを余白に散らす - 数値は大きくオレンジで見せる - レシピカード地は2色を交互に

Don't - 黒や純色の濃い地を広く使わない - 角の鋭い硬いボタンにしない - 明朝体で堅くしない - 写真を全面裁ち落としにしない - 強調色を4色以上に増やさない

Page Structure

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

1. ファーストビュー（テーマの提示）: 白地に切り抜き野菜を散らし、中央に大見出しとロゴバッジ
2. 章ナビ（3章への誘導）: 緑・橙・黄緑の3ボタン横並び
3. 課題提起（不足量を数値で示す）: 見出しボックス、数値見出し、白カード内に棒グラフと出典
4. ランキング導線（地域別データへ誘導）: 濃緑と黄緑の2段の横長バナー
5. 効能紹介（栄養素の利点）: 栄養素ピル3つと、色帯付き白カード3枚を縦に
6. 食べ方提案（目安量の提示）: バッジ画像と目安量の見出し、短い説明
7. レシピ一覧（具体的な料理提案）: 2列のレシピカード、吹き出し、商品切り抜き、ボタン
8. プロジェクト紹介（活動紹介と外部リンク）: 白地に円形ロゴ、説明文、濃緑ピルボタン

Imagery

• 料理は真上か斜め上から自然光で、布やまな板を敷いて家庭的に
• 野菜は白背景の切り抜きで、FVと章の間に散らす
• 商品パッケージは切り抜きでカード端に少し傾けて重ねる
• アイコンは円形色面に白の線画
• 提案者は小さなイラスト人物を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約800pxを中央に置き、両端はストライプ地
• レシピカードは PC 2列、SP 1列
• 章ナビは SP でも3分割を保ち、文字を小さく
• FVの散らし野菜は SP で数を減らす
• 見出しは SP で一段階小さく

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