DESIGN.md — 赤×チョコ茶のバレンタイン菓子キャンペーンLP（Valentine Chocolate Red Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感
• キーワード: バレンタイン・板チョコ・ハート・赤×茶・キャラクター・レシート応募
• 地の質感: フラットな塗りが中心。板チョコの立体イラスト、ドット柄、ストライプ柄の面を重ねる
• 形: ハート形のフレーム、角丸カード、ピル型ラベル、太めの茶色の枠線
• 温度感: あたたかく甘い。赤とピンクで華やかに、チョコ茶色で落ち着かせる

Colors

• 地は赤一色にして、情報は白い角丸カードに載せる
• 見出し・枠線・重要な文字はチョコ茶色にする。黒は使わない
• 当選数や数字の強調は赤のピル、または赤文字にする
• 応募ボタンだけピンク地＋赤文字＋白縁にして目立たせる
• レシピの帯はピンク・朱赤・赤のドット、ストライプ、斜めの面を重ねて賑やかにする
• 日付ラベルやレシピ名は黄色のピルで区別する
• 規約の本文はグレーにして、装飾部分と温度差をつける
• button-primary は文字 #C90A17 × 背景 #F0A7A0 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#F9DAD7、4.53:1）を使う。

Typography

• 見出しは極太の丸ゴシックにして、角の立った書体は避ける
• メインキャッチは赤文字に白フチと茶色の影をつける
• 数字（日付・金額）は本文より大きくして目立たせる
• 規約はグレーの細字で詰め、項目の頭に■をつける
• ラベル類は字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。対象商品は 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算）
• 赤地の上に白い角丸カードを左右 6% の余白で置く
• 賞品のコースごとに茶色枠の角丸ボックスを入れ子にする
• コース名はハート形のバッジにして、枠の左上に重ねる
• レシピカードの中はドット線で区切る
• 規約は全幅に近い白い面にまとめ、項目の間を 1 行空ける

Elevation & Depth

• 影はほぼ使わず、フラットにする
• 応募ボタンだけ下に濃いピンクの縁をつけて厚みを出す
• メインキャッチは茶色のずらし影で立体感を出す

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸なしの四角。商品は切り抜きで白地に置く
• セクション境界: ファーストビューは銀紙が破れたような不規則な境界にする。レシピの帯は幾何学パターンの面で切り替える
• ハート形は見出しやバッジ、装飾に繰り返し使う
• 枠線は茶色か赤で 2〜3px
• ラベル・ボタンはすべてピル型にする

Components

• 応募ボタン（button-primary）: ピンクのピルに白縁をつけ、赤い極太文字を置く。左右の端に白いハートを添える
• コースのハートバッジ（badge-course）: チョコ茶色のハートに白文字でコース名を入れ、枠の左上に重ねる
• 当選数ピル（pill-winners）: 赤いピルに白の太字で当選人数を入れる
• 期間ラベル（label-date）: 白または黄色のピルに赤文字で項目名を書き、下に大きな日付を置く。黄縁のボックスで囲むこともある
• 賞品カード（card-prize）: 白い角丸の大きなカードの中に、茶色枠の角丸ボックスを入れる
• 対象商品ボックス（box-target）: 赤い見出し帯つきの角丸ボックスに赤枠をつけ、中に切り抜きの商品写真を 2 列で並べる
• ハート形タイトル（heading-heart）: 白い大きなハートの中に茶色の極太見出しを入れ、ドット線とサブコピーを添える
• つくり方アコーディオン（bar-recipe）: 赤いピル型バーの中央に白文字、右端に＋アイコンを置く
• レシピ名ピル（pill-recipe-title）: 黄色のピルに茶色の手書き風文字を入れる
• 規約見出し帯（header-terms）: 茶色の細い帯に白文字で中央揃え

Do's and Don'ts

Do - 地の赤と白いカードのコントラストをはっきり保つ - ハート、チョコ、キャラクターのイラストを各セクションの角に散らす - 賞品は大きな写真と赤い太字の名前で見せる - 数字と期間は大きな太字で目立たせる - 装飾は茶・赤・ピンク・黄の 4 系統に絞る

Don't - 黒や寒色を主役にしない - 細い明朝や角張ったゴシックを見出しに使わない - 強いドロップシャドウや光沢をつけない - 白いカードの外側に長い本文を直接置かない - ボタンを角張った四角にしない

Page Structure

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

1. ファーストビュー（コラボの世界観とキャンペーン名を伝える）: 板チョコ柄の背景にハート枠のキャラを 3 体並べる。破れた銀紙のような境界で赤地へ切り替え、ロゴのリボンと極太のキャッチを置く
2. 応募期間（応募期間とレシートの有効期間を示す）: 白ピルのラベルの下に白い大きな日付を置く。レシートの期間は黄縁の白いボックスに入れる
3. 応募条件と賞品（購入条件とコースごとの賞品を見せる）: 白いカードの上部に赤い太字で条件を書く。コースごとに茶色枠のボックスを設け、ハートバッジ・写真・賞品名・当選数ピルを順に並べる
4. 対象商品（対象となる商品の範囲を示す）: 赤い見出し帯のボックスに切り抜きの商品写真を 2 列で並べ、最後に注釈を添える
5. CTA（応募フォームへ誘導する）: ピンクのピルボタンを赤地の中央に大きく置く
6. お問い合わせ先（事務局の連絡先を示す）: 白い角丸カードに茶色の見出しと区切り線を入れ、電話番号を大きな太字で載せる
7. レシピ紹介（商品を使った楽しみ方を提案する）: ピンクと赤のパターン背景に白いハートのタイトルを置く。白いカードの中に、レシピ名ピル・料理写真・つくり方バーを繰り返す
8. 応募規約（法的な条件をまとめて示す）: 茶色の見出し帯がついた白い面に、■見出し付きのグレー小文字で長文を流す
9. フッター（権利表記）: 赤地に白い小さな文字で中央揃え

Imagery

• キャラクターは太い茶色の線と頬の赤みがある手描き風イラスト。セクションの角からはみ出させて置く
• 板チョコ、ハート、クッキーなどのお菓子モチーフをフラットに描いて散らす
• 料理写真は明るい自然光で、ピンクのクロスや木の器を使った甘い色調にする
• 商品写真は白背景の切り抜きで、パッケージを正面から撮る
• 背景パターンはドット、ストライプ、斜めの帯、円をピンク・赤系で組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 70% のカードを置き、両側は赤地またはパターン背景にする
• PC のファーストビューは左に板チョコとキャラ、右にキャッチと期間を置く 2 分割
• PC の A コースは写真を左右 2 列に、B コースは画像と賞品名を横並びにする
• PC の対象商品は 4 列のグリッド
• 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 行書くと起動時に読み込まれる。