DESIGN.md — 緑×オレンジ×黄の元気な乳製品 LP（Bright Veggie Orange Green Food Product LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、清潔・爽やか
• キーワード: ミント地・緑タブ見出し・オレンジ黄グラデ・ドット柄・星モチーフ・大きな角丸
• 地の質感: フラットな単色とやわらかいグラデーション。影は使わず、緑のドット柄を角丸パネルの外側にずらして敷き奥行きを出す
• 形: 角丸 20〜24px の大パネル、ピル型ボタンとタグ、吹き出し型の黄色帯、円グラフ
• 温度感: 暖かく明るい。緑で健康感、オレンジと黄で食欲と元気さを出す

Colors

• 地はセクションごとに白とミントを交互にする
• 見出しタブ・見出し文字・タグは緑に統一する
• 商品パネルは商品ごとにオレンジ赤と黄のグラデを割り当てる
• 小見出しの帯は黄の吹き出しにし、文字は黒にする
• 色面の上の文字とボタンは白にし、ボタン文字は緑にする
• パネルの外側に緑または白のドット柄を一部だけ敷く
• section-tab-heading は文字 #FFF8F0 × 背景 #3A9E48 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#30823B、4.55:1）を使う。
• button-primary は文字 #3A9E48 × 背景 #FEFEFE のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#31863D、4.52:1）を使う。
• nutrient-tag は文字 #FFF8F0 × 背景 #3A9E48 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#30823B、4.55:1）を使う。
• product-panel は文字 #FFF8F0 × 背景 #FF4D37 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E21900、4.56:1）を使う。
• flavor-badge は文字 #FF4D37 × 背景 #FED23C のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E21900、4.58:1）を使う。
• donut-stat は文字 #3A9E48 × 背景 #ECF8EE のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#30823B、4.5:1）を使う。
• floating-menu は文字 #FFF8F0 × 背景 #3A9E48 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#30823B、4.55:1）を使う。

Typography

• 見出しと本文は中央揃えにする
• 見出しは丸ゴシックの太字で、2行に分けて言い切る
• 本文は行間を約2.1と広くとる
• セクションごとに筆記体の英字ラベルを左右どちらかに置く
• 数字は緑の大きな太字にし、%は小さく下に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、比較図と円グラフは 2 列、レシピは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは緑のタブ見出しを白またはグラデのパネル上端に重ねる
• パネルは左右 12px 程度の余白で画面いっぱいに置く
• 装飾の星とドットはパネルの角の外側にはみ出して置く
• 感想は人物線画付きの吹き出しを高さをずらして3つ並べる

Elevation & Depth

• 影はほぼ使わない。フラットな面で構成する
• 奥行きはパネルの背後にずらしたドット柄で出す
• 店舗検索バナーだけごく薄い影と細枠をつける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 16px の長方形。FVは大きな角丸に切り、外側を緑線で縁取る
• セクション境界: 直線で地色を切り替える。角丸パネルの外側にドット柄を一部はみ出させる
• 見出しタブは上だけ大きな角丸の緑帯にし、右上を斜めにする
• 比較図のブロックは角丸 40px 程度の大きく丸い四角にする
• 小見出しは下向きの三角が付いた黄の吹き出しピルにする
• レシピ写真の左上に三角の色ラベルを付ける

Components

• 緑タブ見出し（section-tab-heading）: パネル上端に乗る横長の緑帯。白文字で、脇に星の装飾を付ける
• 英字ラベル（script-label）: タブ見出しの斜め上に置く緑の筆記体英字
• 黄の吹き出し帯（speech-band）: 下向き三角付きの黄ピル。下にドット柄を敷く
• 詳細ボタン（button-primary）: 白地に緑の枠と緑文字のピル。右端に長い矢印を付ける
• 栄養素タグ（nutrient-tag）: 緑地に白文字の小さなピルを横に3つ並べる
• 商品グラデパネル（product-panel）: オレンジ赤または黄のグラデ面に商品画像、円形バッジ、商品名、タグ、説明、ボタンを縦に並べる
• 円形の味バッジ（flavor-badge）: 商品画像の左上に重ねる黄やオレンジの円。味の名前を太字で入れる
• 円グラフ評価（donut-stat）: 淡緑の円グラフの中央に緑の大きな%数字を置き、2列で並べる
• 感想吹き出し（voice-bubble）: 緑線の白い角丸吹き出しの下に人物の線画を置く
• 丸いメニュー・トップ戻り（floating-menu）: 緑の円に白い三本線や上矢印を入れる

Do's and Don'ts

Do - 見出しは必ず緑タブと英字ラベルをセットにする - パネルの角には星や紙片の装飾と、ずらしたドット柄を添える - 商品ごとに暖色の色を割り当て、グラデ面で区切る - 評価や数字は円グラフと吹き出しで見せる - ボタンは白ピルに緑文字と矢印にする

Don't - 黒や濃紺の重い地を使わない - 鋭い角や細い明朝で硬い印象にしない - 濃い影や立体的なボタンを使わない - 緑・オレンジ・黄以外の強い色を増やさない - 本文を左揃えで詰めて組まない

Page Structure

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

1. ファーストビュー（商品の使い方と価値を一目で伝える）: 角丸に切った料理写真を緑線で縁取り、左下に縦積みのキャッチ、右下に商品パッケージ。下にドット柄とスライダーの丸ドット
2. 商品紹介（商品のコンセプトを説明する）: ミント地パネルに生活シーンの写真、緑の2行見出し、中央揃えの説明文、商品2点を並べる
3. 特長（既存品との違いを図で示す）: 白パネルに黄の吹き出し帯、黄と青の丸四角をA+Bで並べ、緑の十字、下に緑の大ブロックとイラストを置く
4. 商品ラインナップ（味ごとの特徴を比べる）: オレンジ赤と黄のグラデパネルを縦に連結する。商品画像、円形バッジ、白い商品名、栄養素タグ、説明、白ピルボタンを並べる
5. 店舗検索（購入先へ誘導する）: 白い横長バナーにロゴと小さな外部リンクアイコン
6. お客様の声（調査結果で信頼を出す）: 白パネルに黄の吹き出し帯、2列の円グラフ、人物線画付きの感想吹き出しを3つ。2つの調査を繰り返す
7. レシピ（使い方を広げる）: オレンジから黄のグラデパネルに白見出し、角丸写真2列グリッドと料理名、白ピルボタン
8. 関連バナー（関連ブランドへ回遊させる）: 角丸の写真バナーを縦に2つ。右下に緑丸のトップ戻りボタン

Imagery

• 料理写真は明るい自然光で、木のプレートや白い器に彩りよく盛る
• チーズを星やハートや動物の形に抜いた子ども向けアレンジを見せる
• 家族の朝食シーンは白基調で、明るく柔らかく撮る
• 野菜はかぼちゃ・トマト・パプリカなどを切り抜き画像で重ねる
• 人物は緑の単線で描いたシンプルなアイコンにする
• 装飾はオレンジ・黄の星や折り紙風の三角、緑と白のドット
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約1000px にし、パネルは左右に余白を残す
• 商品紹介は写真を左、文章と商品を右に置く2カラムにする
• 特長の図は横一列に並べる
• 商品ラインナップは2つのグラデパネルを左右に並べる
• 評価は2つの調査を左右に並べ、円グラフを4つ横に並べる
• レシピは4列、関連バナーは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 行書くと起動時に読み込まれる。