DESIGN.md — ぶどう紫×苺赤とクリーム地の菓子キャンペーンLP（Berry Wine and Cream Dessert Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ぶどう紫と苺赤の二色・クリーム地・金茶の明朝見出し・果物のシズル写真・ステップ型応募解説
• 地の質感: 生成りの紙のような淡いベージュ地に、白い布のドレープ写真や果物写真を重ねた、しっとりした質感
• 形: 角丸カード、波型のセクション境界、レース縁取りの楕円ボタン、細い二重線の飾り罫
• 温度感: 暖色寄り。クリームと金茶で甘く温かく、紫と赤で濃厚さを出す

Colors

• ページの地はクリームで、情報は白い角丸カードにのせる
• 紫と赤は左右に半分ずつ塗って二つの味を表す。参加訴求の帯と FV 下部にだけ使う
• 見出しは金茶の明朝で書き、黒は使わない
• 主 CTA は金茶の楕円にレース縁を付け、濃色面の上に置く
• 注意書きや条件は赤文字にして本文と分ける
• 規約の見出しバーは焦茶の面に白文字で、地のクリームと差をつける
• button-primary は文字 #FFFFFF × 背景 #A88874 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8F6E5A、4.62:1）を使う。
• medal-badge は文字 #3A2A2A × 背景 #9A7A55 のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AE906C、4.54:1）を使う。

Typography

• 大見出しは明朝。上に小さな英字筆記体、下に点線か二重線を付ける
• STEP 番号は太い欧文セリフで、カードの左上にかぶせて置く
• 本文は中央揃え、カード内の文は左揃えにする
• 数字（当選人数など）は大きくして金メダル風の円に入れる
• 注釈は 11px で※を付け、条件は赤にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品・対象商品のカードは 2 列も可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央見出し、リード文、カードの順に並べる
• ステップは白カードを縦に並べ、カード同士を 16px 空ける
• カード内は左にイラスト円、右に説明を置く（SP では縦に積む）
• 規約はアコーディオンを縦に並べ、間を 8px 空ける

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける
• 金メダル風バッジにはグラデーションとやわらかい影を付ける
• CTA には浮き出るような影を付ける
• それ以外はフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。説明イラストはベージュの円の中に入れる。果物は画面の端からはみ出させる
• セクション境界: 濃色帯の上下はゆるい波形のカーブでクリーム地につなぐ
• 主 CTA は楕円のピル型で、レース状の縁取りを付ける
• サブボタンは白地に紫か赤の細枠を付けたピル型にし、右に矢印を置く
• 賞品カードは片側だけ大きく角を丸めてもよい
• 規約バーは角丸 6px の帯にし、右端に丸囲みの＋を置く

Components

• レース縁の応募ボタン（button-primary）: 金茶の楕円にレース模様の縁を付け、右に矢印を置く。濃色帯の上に配置する
• 細枠のサブボタン（button-outline）: 白地に赤か紫の細い枠。2 行のラベルと右矢印を入れる
• 飾り付き中央見出し（heading-ornament）: 上に英字筆記体のサブ見出し、金茶の明朝、下に点線か二重線を置く
• 当選人数の金メダル（medal-badge）: 金色グラデーションの円に、人数を大きな数字で入れる
• STEP カード（step-card）: 白の角丸カード。左上に大きな STEP 番号をかぶせ、左にイラスト円、右に説明を置く
• 賞品コースカード（prize-card）: 布のドレープ地にコース名、商品の切り抜き、メダルを組み合わせる
• 規約アコーディオン（accordion-bar）: 焦茶の帯に白い太字の項目名を左寄せし、右端に丸囲みの＋を置く
• 紫のアンカーナビ（anchor-nav）: 紫の帯に項目を等間隔に並べ、各項目の下に▼を付ける
• 赤字注釈（note-red）: ※始まりの小さな赤文字で、条件や NG を示す

Do's and Don'ts

Do - 紫と赤の二色で 2 つの味を表し、左右に対で置く - 見出しは金茶の明朝にし、飾り罫を付ける - 手順は STEP カードとイラストで図解する - 果物写真を画面の端に散らして、みずみずしさを出す - 注意事項は箇条書きと赤字ではっきり示す

Don't - 純黒や原色の青を使わない - 見出しを太いゴシックだけで組まない（明朝の上品さを残す） - CTA をフラットな四角ボタンにしない - 紫と赤を同じ面で混ぜたグラデーションにしない - クリーム地を純白に置き換えない

Page Structure

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

1. ファーストビュー（商品のシズル感とキャンペーン名を伝える）: 果物と商品の大きな写真に、筆文字の縦書きコピーと楕円のロゴバッジを重ねる
2. キャンペーン要約帯（期間・賞品・対象商品を一目で示す）: 赤の帯に白文字の訴求を置き、白い小カードで A/B コースと対象商品を見せ、CTA を添える
3. アンカーナビ（長いページの中を移動しやすくする）: 紫の帯に項目を 5 つ並べ、それぞれに▼を付ける
4. 商品紹介（商品の魅力を伝える）: 紫と赤を左右に分けた面に、2 つの味の写真と中央揃えの白文字を置く
5. キャンペーン概要（応募条件を説明する）: クリーム地に明朝見出しを置き、条件の数字は赤で大きくする
6. 賞品コース（賞品と当選人数を見せる）: 布地のカードにコース名の筆記体、メダル、商品の切り抜きを組み合わせる
7. 対象商品（対象の商品を明示する）: 白カード 2 枚に商品の切り抜きと名前を入れ、下に注釈を付ける
8. 参加促進マップ（参加の盛り上がりを見せる）: 紫と赤の二分割の地に白カードを置き、地図グラフと参加ログのリスト、CTA を入れる
9. 応募方法（手順をわかりやすく示す）: STEP 1〜4 を白カードに分けて縦に並べ、イラスト円と赤字の注意を添える
10. 当選後の案内（賞品の届け方を説明する）: STEP カードと人物アイコンのフロー図を黄色い矢印でつなぐ
11. 撮影時の注意（無効な応募を防ぐ）: 茶色の見出しバー付きカードに、番号付きのレシート図解と、NG 例を斜線で消したサムネイルを 5 つ並べる
12. 応募規約（規約を開示する）: 焦茶のアコーディオンバーを縦に並べる
13. フッター（関連ブランドへ誘導する）: 薄グレーの地に、枠付きのブランドロゴを横に並べ、SNS アイコンとリンクを置く

Imagery

• ぶどうと苺は水滴の付いたマクロ写真にし、画面の端から大きくはみ出させる
• アイスはスプーンですくう瞬間を、ソースが垂れるシズル感で撮る
• 背景には白い布のドレープやクリームのうねりを使う
• 手順の説明はベージュの円に入れた線画イラスト（スマホを持つ手など）で描く
• 人物はシンプルな線画アイコンにし、肌の色だけ薄く塗る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 900px で中央に置く。SP は 1 カラムで横の余白を 16px にする
• STEP カードは PC で横並び（イラストと説明）、SP では縦に積む
• 紫と赤の二分割の地は、SP でも左右分割を保つ
• アンカーナビは SP では横スクロールか 2 段にする
• NG 例のサムネイルは PC で 5 列、SP では 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 行書くと起動時に読み込まれる。