DESIGN.md — 苺レッド×白枠の洋菓子プレゼントキャンペーンLP（Valentine Berry Red Sweets Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、かわいい、情報量多め・訴求型
• キーワード: 苺レッド・ローズピンク・白い装飾フレーム・明朝見出し・スイーツ切り抜き・テーブルコーディネート
• 地の質感: ほぼフラットな赤い面です。四隅に、お菓子・花・食器の写真と軽い影を散らします。
• 形: 上辺が丸くえぐれた白枠カード。中央が膨らむ弓形のタブで区切ります。
• 温度感: 暖色寄りで甘く華やかな印象です。

Colors

• 地はローズレッドと濃い苺レッドの2段にします。セクションごとに交互に切り替えます。
• 情報カードは白地にして、見出しを赤文字にします。
• 主CTAは白地に赤文字です。細い赤の二重線の枠を付けます。
• 当選人数バッジと見出しリボンは深紅の塗りに白文字にします。
• 白パネル内では、黒文字と淡いピンクのラベルで情報を整理します。
• 良い例・悪い例は赤とグレーのバーで区別します。
• page は文字 #222222 × 背景 #C13D4A のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#D06973、4.51:1）を使う。
• section-tab は文字 #FFFFFF × 背景 #D65866 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D14453、4.5:1）を使う。

Typography

• 見出しと本文は明朝で統一します。注釈だけゴシックにします。
• 日付や数字は欧文セリフで大きく見せます。
• 赤地の文字は白にして、中央揃えにします。
• STEP・Recipe などの欧文ラベルは字間を広くとり、小さく添えます。
• リード文は短い行で改行し、中央揃えで詩のように並べます。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは2列または横スクロールにします。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは、上辺中央の弓形タブに見出しを載せて始めます。
• 装飾写真は画面の左右端にはみ出させて配置します。
• セクションの末尾ごとに参加ボタンを繰り返し置きます。
• 応募方法は STEP カードを矢印でつなぎます。
• 撮影方法は大きな白パネルにまとめます。

Elevation & Depth

• カードとボタンには、薄い影（0 2px 6px rgba(0,0,0,.15)）を付けます。
• 切り抜き写真には、やわらかい落ち影を付けます。
• 白パネルはほぼフラットにして、角丸で浮かせます。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は角丸の縦長枠に入れます。商品パッケージと装飾は切り抜きにします。
• セクション境界: 上辺中央が膨らむ弓形のカーブで区切ります。
• カードの上辺の角を内側に丸くえぐった装飾枠にします。
• ボタンは小さな角丸の長方形です。内側に細い二重線を入れます。
• 当選人数は深紅の円バッジにします。
• 見出しには、両端が切れ込んだリボン形を使います。

Components

• 参加ボタン（button-primary）: 白地に赤文字の明朝で、二重線の枠を付けます。右端に「〉」を置きます。
• 弓形見出しタブ（section-tab）: セクションの上辺中央に、膨らんだ半円状のタブを付けて、小見出しを載せます。
• リボン見出し（ribbon-heading）: 深紅のリボン帯に白い明朝の2行コピーを入れます。
• 賞品カード（prize-card）: 上辺をえぐった白枠カードです。条件ラベル・賞名・写真・説明の順に並べ、右下に人数バッジを置きます。
• 当選人数バッジ（count-badge）: 深紅の円に、白い数字と「名様」を入れます。
• 応募ステップカード（step-card）: 白線で囲んだ透過カードです。STEP番号・説明・線画のイラストを入れ、矢印でつなぎます。
• 対象商品（product-circle）: 白い細線の円の中にパッケージの切り抜きを置き、下に商品名と容量を添えます。
• 番号付きラベル（point-label）: 淡いピンク地に、丸数字と項目名を4つ並べます。
• 良い例・悪い例バー（example-bar）: 全幅のバーです。良い例は深紅、悪い例は濃いグレーにして、白文字を中央に置きます。

Do's and Don'ts

Do - 地は苺レッドとローズの濃淡2色に限定します。 - 見出しと本文は明朝で、上品さを保ちます。 - ページの端に、お菓子・花・苺・食器の切り抜きを散らします。 - 参加ボタンは各セクションの末尾に繰り返し置きます。 - 情報量の多い説明は白パネルにまとめます。

Don't - ネオン系やビビッドな青緑を使わないでください。 - ボタンをピル型や赤のベタ塗りにしないでください。 - 太いゴシックで見出しを組まないでください。 - 装飾写真を本文の上に重ねて、読みにくくしないでください。 - セクションの区切りを直線だけにしないでください。

Page Structure

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

1. ファーストビュー（キャンペーンの主題と賞品数を伝えます。）: テーブルに並ぶ紅茶・お菓子の写真の上に、ピンクの装飾ロゴ枠と白帯の告知を置きます。
2. 応募期間（期間を明示し、参加を促します。）: 濃赤の帯に、大きな欧文セリフの日付と参加ボタンを置きます。
3. オリジナルメニュー紹介（商品を使う楽しさを伝えます。）: リボン見出しと中央揃えのリード文の下に、角丸縦長の動画カードを横スクロールで並べます。
4. レシピ一覧（レシピページへ誘導します。）: 白枠の小カードを4つ並べます。中身は写真・料理名・チェックボタンです。
5. 監修者プロフィール（信頼性を補います。）: 細線で区切り、左に人物の切り抜き、右に名前と経歴を置きます。
6. おすすめレシピ（商品の使い道を広げます。）: 白線枠の透過カードを4つ並べます。中身は番号・写真・説明です。
7. SNS誘導（公式アカウントへ誘導します。）: 写真のコラージュの中央に、白いボタンを置きます。
8. 賞品（賞品と応募条件を示します。）: 装飾枠の白カードを3つ並べ、それぞれに人数バッジを付けます。
9. 対象商品（購入対象を明確にします。）: 円の中にパッケージの切り抜きを置いて4つ並べ、注意書きを添えます。
10. 応募方法（手順を理解させます。）: STEPカードを4つ、矢印でつないで並べます。
11. 撮影方法の説明（応募不備を防ぎます。）: 大きな白パネルに、確認項目のラベル、良い例・悪い例の線画イラストを並べます。
12. フッター（規約の表示と最終CTAを置きます。）: 参加ボタン、小さな注釈、ページトップへのリンクを並べ、薔薇の写真で飾ります。

Imagery

• 料理写真は、ピンクのテーブルクロスに白い皿をのせて自然光で撮ります。
• 苺・薔薇・チョコ・紅茶・カトラリーを切り抜いて、四隅に散らします。
• ハートのクッキーやリボン付きの箱など、バレンタインのモチーフを入れます。
• 説明図は白黒の線画にします（レシートやスマホ操作など）。
• レースペーパーやギンガムチェックの布を、差し色として端に入れます。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで約70%幅です。SPは90%幅の1カラムにします。
• 賞品カード・STEPカードは、PCの3〜4列からSPでは1列または2列にします。
• 動画カードはSPで横スクロールのカルーセルにします。
• 装飾写真はSPで縮小し、端に一部だけ見せます。
• 大きな日付やタイトルはSPで26〜34pxにします。

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