DESIGN.md — 緑×オレンジのメロン系フローズンスイーツ LP（Fresh Melon Green and Orange Frozen Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、清潔・爽やか、やさしい・柔らかい
• キーワード: 二色メロン・季節限定・ダイヤ柄グラデ・リボン見出し・丸窓写真・みずみずしさ
• 地の質感: ダイヤ柄（菱形格子）を薄く重ねた放射状グラデーション。光沢感はなく、柔らかな光を感じる。
• 形: 円形の写真フレーム、カーブを描くリボン帯、角丸の白ボタン
• 温度感: 暖色のオレンジと寒色寄りの緑が半々。全体は明るく夏らしい

Colors

• 緑とオレンジの地を、セクションごとに交互に切り替える
• どちらの地にも、明るい中心から外へ濃くなる放射グラデーションとダイヤ柄を重ねる
• 見出しのリボンは白地にし、文字はオレンジと緑の2色で塗り分ける
• 色地の上の本文は白にする
• 価格や商品名など強く見せる文字は濃い茶色の極太にする
• ボタンは白地に金茶の縁、文字はオレンジにする。赤や青は使わない
• date-band は文字 #D78A28 × 背景 #FDFEFD のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A3691E、4.52:1）を使う。
• ribbon-heading は文字 #D78A28 × 背景 #FDFEFD のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A3691E、4.52:1）を使う。
• button-primary は文字 #D78A28 × 背景 #FDFEFD のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#A3691E、4.52:1）を使う。
• button-secondary は文字 #D78A28 × 背景 #FDFEFD のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#A3691E、4.52:1）を使う。

Typography

• 商品名と価格は極太のゴシックにし、白い縁取りでFVから浮かせる
• コピーや本文は明朝にして、品の良さとやさしさを出す
• 大見出しは中央揃えにし、左右に唐草風の飾り線を添える
• 見出しのリボン内では、ひらがなと強調したい語で色やサイズを変える
• ポイントの小見出しは2〜3行に改行して短くまとめる
• 価格の小数点以下は小さく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイント欄は写真と文字を左右に振り分け、ジグザグに並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画面幅いっぱいの色帯にする
• ポイントは丸窓写真を画面端から少しはみ出させ、交互に左右へ置く
• テキストブロックは写真の反対側に置き、上下中央を写真に揃える
• リボン見出しはセクションの境目に重ねて配置する
• CTAボタンは中央に置き、横幅は約85%にする

Elevation & Depth

• 丸窓写真とボタンには、ごく薄いドロップシャドウを付ける
• リボン帯には影と巻き込みの陰影を付けて、立体的に見せる
• 背景はフラットなグラデーションにし、カードの浮き上がりは使わない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 素材写真は淡い黄緑の縁付きの円で切り抜く。果物の写真は背景を抜いて配置する
• セクション境界: 白いリボン帯が波打ちながらセクションの境目をまたぐ
• メインのボタンは角丸が小さい長方形にし、金茶の二重線で縁取る
• サブボタンは完全なピル型にする
• 円形の丸窓は画面端で見切れさせて動きを出す
• 直線的な区切り線は使わない

Components

• FVの価格表示（hero-price）: 税抜と税込を2段で極太表示。税込は括弧で囲み、白い縁取りを付ける
• 発売日の帯（date-band）: 画面幅いっぱいの白い帯に、オレンジ明朝で発売日を中央表示
• リボン見出し（ribbon-heading）: カーブした白いリボンに、オレンジと緑の2色文字を載せてセクション境目に置く
• ポイント番号（point-label）: 欧文セリフの番号ラベルの左右に、唐草状の飾り線を付ける
• 丸窓写真（circle-photo）: 淡い黄緑の太縁が付いた円形写真。果物の切り抜き写真を手前に重ねる
• 店舗検索ボタン（button-primary）: 白地に金茶の二重枠。オレンジの丸に矢印アイコン、右に店舗のアイコンを置く
• サブリンクボタン（button-secondary）: 白いピル型に細い金茶の縁。文字は小さめで、詳細ページへ誘導する
• 注釈（note-block）: ページ最下部に※付きの小さな文字を左揃えで並べる

Do's and Don'ts

Do - 色地は緑とオレンジの2色だけにし、交互に使う - 地にはダイヤ柄とグラデーションを重ねて奥行きを出す - 素材写真は丸窓と切り抜きを組み合わせ、みずみずしく見せる - 見出しはリボン帯と飾り線で装飾的にする - 本文は明朝で短く改行し、余白を広くとる

Don't - 黒や濃紺の重い背景を使わない - 四角い写真をそのまま並べない - 本文に極太のゴシックを使わない - ボタンを原色の塗りつぶしにしない - 文字情報を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品と価格をひと目で伝える）: 緑の地に黄色いテーブル面。商品写真を中央に置き、縦書きのコピー、極太の商品名、価格を周りに配置する
2. 発売日の告知（発売開始日を知らせる）: 白い帯にオレンジ明朝で1行
3. コンセプト（新商品が登場したことを情緒的に伝える）: オレンジのダイヤ柄の地。中央に飾り見出し、左右に果物の切り抜き、下に白い明朝のリードを3行
4. おいしさのポイント（特長を3つ説明する）: リボン見出しの下、緑の地。丸窓写真と番号付きの小見出しを左右交互に3つ並べる
5. 締めのCTA（店舗での購入へ誘導する）: 2段のリボンメッセージの下、オレンジの地に商品写真。白い枠付きの店舗検索ボタンとサブボタンを置く
6. 注釈（価格と取り扱いの但し書き）: オレンジの地に小さな濃茶の文字を左揃え

Imagery

• 商品はやや上から正面に撮る。明るく均一な光で、透明カップの層が見えるようにする
• 果物はカットした断面を見せ、背景を抜いた切り抜きにする
• ソースなどの素材は小さなガラス器に入れて添える
• 丸窓の中は素材のクローズアップにし、縁で切る
• 装飾は唐草風の細い飾り線と菱形格子の地柄に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは、商品写真を中央、商品名と価格を下部に横並びにし、記念ロゴは右上に移す
• PCのポイント欄は3つの丸窓を横に並べ、上下にずらした配置にする
• PCのコンセプトのリードは2行にまとめる
• PCでもセクションの順番と色帯の交互配置は変えない
• PCのCTAは商品写真の右下に重ね、幅を狭くする

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