DESIGN.md — 緑×橙グラデの果実系冷菓 新商品 LP（Fresh Melon Green-Orange Frozen Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 清潔・爽やか、ポップ・元気、ナチュラル
• キーワード: 果実の色・グラデーション・ひし形の窓・シズル写真・波形の区切り・季節限定
• 地の質感: なめらかなグラデーション地に、薄いひし形格子と光の筋を重ねる。商品写真は高彩度で、霜が降りたような冷たさを出す
• 形: ひし形の切り抜きと線の枠、波形のセクション境界、角丸のボタン
• 温度感: 明るく爽やかで、夏らしい温かみもある

Colors

• 地の色は緑からオレンジへのグラデーションで、2 種類の果実の色を表す
• セクションごとに緑系とオレンジ系を交互に切り替え、境界は波形にする
• オレンジの単色は発売日の帯と主 CTA に限定する
• 商品名と価格は濃い茶色。白い縁取りを付けて写真の上でも読めるようにする
• 色の付いた地の上の見出しと本文は白にし、薄い影を付ける
• 小見出しの下線は、その果実の色（緑かオレンジ）に合わせる
• release-band は文字 #E8EFE3 × 背景 #FB9B03 のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#995E02、4.52:1）を使う。
• button-primary は文字 #E8EFE3 × 背景 #FB9B03 のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#995E02、4.52:1）を使う。
• button-secondary は文字 #FB9B03 × 背景 #E8EFE3 のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#995E02、4.52:1）を使う。

Typography

• 商品名と価格は極太ゴシックにし、白い縁取りを付ける
• 情緒的な見出しと説明文は明朝体にし、上品なみずみずしさを出す
• 見出しの強調語だけ、果実の色（黄やオレンジ）のグラデーション文字にする
• 見出しは中央揃え、説明文は左揃えにする
• 注釈は小さいゴシック体で、行頭に「※」を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅、または画面からはみ出すくらい大きく配置する
• 特長は「ひし形の写真 → 小見出し → 説明文」の縦積みにする
• セクションの境界は波形にし、地のグラデーションを切り替える
• CTA ボタンは横幅いっぱいに近いサイズで縦に 2 つ並べる
• 関連商品は全幅のバナーを縦に並べる

Elevation & Depth

• 影はほぼ使わない。白抜き文字にだけ薄いドロップシャドウを付ける
• 写真の果物には自然な落ち影を付けて、浮いて見える立体感を出す
• ボタンは影なしで、太い枠線で立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真はひし形の窓で切り抜く。果物は切り抜き写真にして散らす
• セクション境界: なだらかな波形のカーブ
• ひし形の線枠を 2 つ重ねて、2 種類の対比を表す
• 主ボタンは角丸の長方形、サブボタンはピル型にする
• 地には細いひし形格子のパターンを薄く重ねる

Components

• 発売日の帯（release-band）: FV の直下に置く全幅のオレンジ帯。発売日を白の明朝体で中央揃えにする
• 価格表示（price-badge）: 本体価格と税込価格を、白縁取りの茶色の極太数字で写真に重ねる
• ひし形の写真窓（diamond-frame）: 商品の断面をひし形に切り抜き、淡い色の枠の外へ果物をはみ出させる
• マーカー下線の小見出し（heading-underline）: 白い明朝の文字の下に、果実の色の太い下線を引く
• 細線付きのセクションタイトル（section-title-line）: 白い明朝の見出しの下に、白い細線を全幅近くまで引く
• 店舗検索ボタン（button-primary）: オレンジ地に濃いオレンジの太枠。左に丸い矢印アイコンを置き、白文字にする
• 情報リンクボタン（button-secondary）: 白地にオレンジ枠のピル型。文字は小さめにする
• 関連商品のバナー（related-banner）: 商品ごとにテーマ色の地を敷いた全幅バナー。商品写真に極太の商品名を重ねる

Do's and Don'ts

Do - 果実 2 色（緑とオレンジ）の対比を、地・線・下線で繰り返す - 商品写真は大きく、果物の切り身を周りに散らしてシズル感を出す - セクションの境界は波形にし、グラデーションで色を移す - 注釈は CTA の下にまとめて小さく載せる

Don't - 真っ白な無地のセクションを長く続けない - 黒や寒色をブランド色に使わない - 角の立った箱型のカードを多用しない - 明朝の見出しを濃色の地に黒文字で置かない

Page Structure

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

1. ファーストビュー（商品名・価格・ひと言コピーを一目で伝える）: 淡いミント地に商品を中央に置き、果物を散らす。上に極太の商品名、右下に価格、左に縦書きのコピーを置く
2. 発売日の帯（発売開始日を告知する）: 全幅のオレンジ帯に白い明朝体を置く
3. コンセプト（2 種類の素材の組み合わせを印象づける）: 左右に果物の写真を置き、間にひし形の線枠を 2 つ重ねる。下にグラデーション文字のリード見出しを置く
4. おいしさのポイント（素材ごとのこだわりを説明する）: 緑からオレンジへのグラデーション地。ひし形の写真、下線付きの小見出し、明朝の説明文を 2 回繰り返す
5. CTA（来店を促し、店舗検索へ誘導する）: 波形の境界の後に緑地を敷き、白い明朝の呼びかけ、大きな商品写真、オレンジのボタン、ピル型のサブボタンを並べる
6. 注釈（価格・税率・取扱いの注意を伝える）: 淡い緑地に小さい※付きの文字を置く
7. 関連商品（シリーズのほかの商品へ回遊させる）: オレンジの見出し帯の後に、商品ごとのテーマ色の全幅バナーを縦に並べる

Imagery

• 透明カップに入った冷菓を、真横からやや見下ろす角度で撮る
• 果物の切り身を切り抜きで散らし、浮遊感を出す
• 地には斜めの光の筋と、薄いひし形格子のテクスチャを重ねる
• 関連商品のバナーには、水しぶきやコーヒー豆などテーマに合う小物を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 960px 幅で、FV は商品を中央、商品名を下に横一行で置く
• PC の特長はひし形写真とテキストを左右交互の 2 カラムにする
• PC のリード見出しは 1 行にまとめる
• PC の関連商品は 3 カラムに横並びにする
• 波形の境界とグラデーションの地は SP・PC で共通にする

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