DESIGN.md — きらめく橙と赤の柑橘フローズンスイーツ LP（Sparkling Citrus Orange Frozen Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 力強い・インパクト、上品・高級、ポップ・元気
• キーワード: 柑橘オレンジ・光の粒・シズル感・明朝の光る見出し・季節限定・暖色一色
• 地の質感: ラメのような細かい光の粒と、シロップのようなツヤのある波形グラデーション
• 形: 四角い帯と波形の境界。ボタンは角の小さい長方形と、ピル型のサブボタン
• 温度感: とても暖かい。赤〜橙〜ピーチの暖色だけでまとめる

Colors

• 地色はほぼすべてオレンジ〜赤のグラデーション。白い面は発売日の帯とサブボタンだけにする
• グラデーションは上が濃い赤、中央が明るいオレンジになるように流す
• 見出しは白文字に赤橙の縁取りと外側グローを付ける
• 見出しの強調したい 1 文字だけを金色にする
• CTA は地色より一段濃い赤にし、薄い金色の枠で囲う
• 寒色やグレーは使わない
• button-primary は文字 #F9F5EE × 背景 #E33A0C のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D2360B、4.52:1）を使う。
• numbered-point は文字 #F9F5EE × 背景 #E34B14 のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C94212、4.52:1）を使う。

Typography

• 見出しも本文も明朝体を基本にして、上品なシズル感を出す
• 大見出しは中央揃えで 2〜3 行に改行し、白文字に赤い縁取りとグローを付ける
• 本文は左揃えで短い行で改行し、写真と横並びにする
• ポイント見出しは「数字+ピリオド」で始める
• 注釈は 7px 前後のゴシックで、最下部か FV の下にまとめる
• 価格は太い欧文数字で、税込価格をかっこで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。説明は本文と写真の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに背景画像を切り替え、余白は背景の上で取る
• 大見出しは中央、本文ブロックは左に寄せて右に果物の写真を置く
• ポイントは商品写真を左に大きく置き、右側に見出しと本文を縦に 2 つ積む
• 発売日は全幅の白い帯で、セクションの区切りを兼ねる
• CTA は画面幅の 90% ほどで、商品写真に重ねて配置する

Elevation & Depth

• 見出しの文字に赤橙の外側グローを付けて、浮いて見せる
• 商品写真は切り抜きにし、下に柔らかい影を落とす
• CTA ボタンはベタ塗りで、薄い金色の枠を付ける
• カードの影はほぼ使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と果物は背景を切り抜いて配置し、断面を見せる
• セクション境界: シロップが滴るような金色の波形の境界と、まっすぐな白い帯
• 主 CTA は角の小さい長方形にする
• サブボタンは白いピル型にし、赤い枠線を付ける
• 矢印は丸の中に置いたアイコンにする
• 小見出しは左右の細い横線で挟む

Components

• 店舗検索ボタン（button-primary）: 赤地に白い明朝のラベル。左に丸い矢印アイコン、右に店舗のアイコン。薄い金色の枠で囲う
• 情報リンクのピルボタン（button-secondary）: 白いピル型に赤い枠線と赤い文字。左に赤い丸の矢印
• 発売日の帯（release-band）: 全幅の白い帯に、赤い明朝で日付を大きく書く
• 光る明朝の大見出し（glow-headline）: 白文字に赤い縁取りとグロー。強調語 1 文字だけ金色にする
• 罫線で挟んだ小見出し（line-subheading）: 中央の明朝の文字を、左右の細い白線で挟む
• 番号付きポイント（numbered-point）: 「1.」で始まる白い明朝の見出しと、その下の金色の線。後に白い本文が続く
• 価格表示（price-tag）: 本体価格を大きな欧文数字で書き、税込価格をかっこで添える。白地に黒い文字
• 注釈ブロック（note-block）: ※から始まる小さい文字を、複数行まとめて置く

Do's and Don'ts

Do - 背景には光の粒の入ったオレンジ〜赤のグラデーションを敷き詰める - 商品の切り抜き写真と果物の断面を、各セクションで大きく見せる - 見出しは明朝体で白く光らせる - セクションの境界にシロップのような金色の波と、垂れるしずくを入れる - 価格と発売日は FV のすぐ近くに置く

Don't - 白い背景やグレーの背景を広く使わない - 見出しに丸ゴシックやポップな手書き体を使わない - 寒色のアクセントを入れない - 影の強いカード UI を並べない - 本文を長い段落にしない（短く改行する）

Page Structure

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

1. ファーストビュー（商品名と価格、商品の姿を一目で伝える）: 上部に白い太字の商品名。中央に商品の切り抜き写真、右に果物。縦書きの短いコピーを添え、右下に価格、左下に周年ロゴと注釈
2. 発売日告知（発売開始日を伝える）: 全幅の白い帯に、赤い明朝で日付を書く
3. 新登場の訴求（このシリーズで初めての味であることを打ち出す）: 光の粒の背景に、光る明朝の大見出しを中央で 3 行。強調語 1 文字は金色
4. 素材の説明（使っている果実の品種の特徴を説明する）: 罫線で挟んだ小見出しの下に、左の白い本文と右の果物断面の写真。下を金色の波形で区切る
5. おいしさのポイント（おいしさの理由を 2 つ示す）: しずくの演出の下に大見出し。商品写真を左に大きく置き、右に番号付きの見出しと本文を 2 つ
6. CTA（店舗への来店を促す）: 光の粒の背景に誘導コピーを 2 行、その下に商品写真。写真に重ねて赤い主ボタンと白いピルボタン
7. 注釈（税率や取扱店舗の注意を書く）: 最下部に小さい白文字を左揃えで並べる

Imagery

• 商品は透明なカップの側面から撮り、層と果肉が見えるようにして切り抜く
• 果物は断面を見せ、ツヤのある赤とオレンジを強調する
• 背景はラメのような細かいボケの光の粒と、暖色のグラデーション
• 果汁のしぶきや、果皮をらせん状にむいたものを添えて動きを出す
• 金色のシロップの波と、垂れるしずくを装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はおよそ 960px 幅の中央寄せで、背景のグラデーションを全幅に広げる
• PC の FV は商品名と価格を写真の下に横 1 列で並べ、周年ロゴは左上に置く
• ポイントは PC では商品写真を中央に置き、2 つの説明を左右に振り分ける
• CTA セクションは PC では写真を左、コピーを右にした 2 分割にする
• 注釈は PC では 1 行が長くなるので、文字を少し大きくしてよい

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