DESIGN.md — 深緑×生成りの栄養管理冷凍弁当 LP（Olive Green Healthy Meal Delivery LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 情報量多め・訴求型、ナチュラル、信頼・誠実、親しみ・手作り感
• キーワード: 深緑の帯見出し・生成り地・赤茶の価格強調・丸い数値バッジ・料理写真の多用・ストライプ日よけ装飾
• 地の質感: フラットな面に紙のような生成り地と淡いチェック柄を敷き、料理写真で温かみを足す
• 形: 角丸の帯・ピル型ラベル・正円バッジ・吹き出し。波形やテント型の区切りも混ぜる
• 温度感: 暖かめ。緑の落ち着きに橙と赤茶の食欲色を足す

Colors

• 地は生成りと白を交互に使い、区切りに深緑の横帯を入れる
• 価格・限定・割引は赤茶で塗るか赤茶文字で大きく見せる
• 購入・選択ボタンは黄緑の立体ボタンに統一する
• 栄養数値は深緑または橙の正円バッジに白文字で載せる
• 悩みカードは橙・緑・青・朱の4色を順番に回す
• 濃緑地の上の強調文は黄色、通常文は白にする
• button-primary は文字 #FBFEF7 × 背景 #6EB04B のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#508036、4.6:1）を使う。
• need-card は文字 #FBFBFB × 背景 #D79350 のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A56526、4.52:1）を使う。
• nutrition-cell は文字 #D79350 × 背景 #ECE5DC のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A56526、4.51:1）を使う。

Typography

• 見出しは太字ゴシックで、要点語だけ色や白地ボックスで抜く
• 価格数字は単位より2倍以上大きく、税込表記は小さく添える
• 見出しの左右にハの字の短い線を付ける
• 本文は中央揃えが基本、手順と口コミは左揃え
• 濃緑地の文章は1文ずつ改行し強調文を黄色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジや料金ボタンは2〜4列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション冒頭に全幅の深緑帯見出しを置く
• 悩みカードは写真と色面を左右交互に並べる
• 料金カードは左に食数ラベル、右に価格、下に2ボタン
• 栄養値は4列グリッドの小カードで並べる
• スライダーは左右に丸矢印、下にドットを置く

Elevation & Depth

• 料金カードとCTAには下方向の濃いめの影で立体感
• 白カードは薄い影か細い枠線
• バッジは影なしのフラット
• 写真上の文字カードは半透明白で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は角丸矩形か斜めカット、皿は円形切り抜き、人物は背景切り抜き
• セクション境界: 直線の帯、緩い波形、テント風ストライプを使い分ける
• 数値は正円バッジ
• 制限食名は赤茶の角丸ピルラベル
• 吹き出しは角丸の白か深緑
• ボタンは角丸8〜10pxで右に三角矢印

Components

• 購入ボタン（button-primary）: 黄緑の立体角丸ボタン、白太字と右向き三角
• 深緑帯見出し（section-band）: 全幅の深緑帯に白抜き見出し、両脇にハの字線
• 栄養数値バッジ（nutrient-badge）: 正円に項目名と数値を2段で入れる
• 料金カード（price-card）: 淡黄地、左上に赤茶の食数タグ、大きな赤茶価格と2ボタン
• 制限食ラベル（menu-label）: 赤茶の角丸ピルに白文字、下に小さな説明
• 悩みカード（need-card）: 色面と写真を半々に、要点語を白地ボックスで抜く
• 価格円バッジ（price-starburst）: 赤茶の円に白い数字で初回価格を示す
• 手順項目（step-item）: 線画アイコンと深緑のステップラベル、区切り線に下三角
• 栄養表セル（nutrition-cell）: 橙見出しと淡橙地の数値の小カード

Do's and Don'ts

Do - 価格・割引は赤茶で大きく繰り返し見せる - セクションごとに深緑帯見出しで区切る - 数値情報は円バッジや表で視覚化する - 料理写真を大きく使い食欲を出す - CTAは各メニュー後に必ず置く

Don't - 寒色を主役にしない - 細い明朝で上品に寄せすぎない - ボタン色を黄緑以外に変えない - 余白を広げすぎて情報密度を落とさない - 写真を暗く加工しない

Page Structure

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

1. ファーストビュー（最安訴求と初回価格提示）: 深緑地に極太見出し、料理写真、赤茶の価格円とCTA帯
2. メディア掲載（信頼付け）: 金色調プレートの見出しと雑誌・人物写真
3. 特長まとめ（手軽さと栄養管理を示す）: 淡いチェック地に手順写真と深緑の円バッジ
4. メニュー紹介スライダー（料理の魅力と栄養値）: 大きな料理写真と赤茶の栄養表
5. 初回キャンペーン（価格オファー）: 深緑帯見出し、取消線価格→大きな赤茶価格、特典ボックス、黄緑CTA
6. 悩みの提起（ニーズに共感）: 4色の悩みカードを写真と交互に並べる
7. 専門家監修（安心感）: 人物写真と資格証、制限食ラベル一覧
8. 品質・冷凍技術（おいしさの不安解消）: 吹き出し見出しと写真スライダー
9. 安さの理由（低価格の根拠）: 比較棒グラフ風の積み上げ図
10. 定期便と配送（利用の柔軟性を示す）: 組み合わせ図、置き配イラスト、小カード2枚
11. よくある質問（疑問解消）: 深緑吹き出し見出しとスライド式Q&Aカード
12. メニュー別料金（購入選択）: 制限食ごとに説明カード・栄養表・料金カードを繰り返す
13. ご利用方法（購入手順）: 線画アイコン付き3ステップ
14. お客様の声・メッセージ（共感と想い）: 似顔絵付き口コミ、SNS写真グリッド、濃緑地の黄色強調メッセージ

Imagery

• 仕切り容器の冷凍弁当を真上や斜め上から明るく撮る
• 紺や白の和皿に盛った料理を寄りで撮る
• シニアや介護場面の人物写真を自然光で使う
• 手順やメッセージは太線で黄色差しの線画イラスト
• 野菜を角に切り抜いて添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅でSPと同じ構成を表示する
• 左右の余白は生成りか淡いチェック柄で埋める
• 料金カードは2列に並べてもよい
• 見出し文字は1.3倍程度に拡大

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