DESIGN.md — チョコ茶×ピンクのバレンタイン投稿キャンペーンLP（Chocolate Pink Valentine Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
• キーワード: 板チョコ柄・ハート・リボン・ギフト箱・チョコ茶×ピンク・投稿キャンペーン
• 地の質感: 板チョコのブロックを敷いたパターンと、ピンクの三角・半円の幾何柄。光沢のあるチョコ片やリボンを立体イラストで添える。
• 形: ハート形のタイトル枠。面取りした板チョコ風の額縁カード。溶けたチョコ風の波形でセクションを区切る。
• 温度感: 暖色寄り。甘く柔らかい温かさ。

Colors

• 地の色はチョコ茶とピンクを交互に置き、セクションごとに切り替える。
• チョコ茶の地には白文字を置く。生成りやピンクの地には濃い茶の文字を置く。
• 主なCTAは赤ピンクの面に白文字とし、白い縁取りを付けて目立たせる。
• サブCTAはチョコ茶の面にクリーム黄の文字で、主CTAと区別する。
• 赤は数字・賞品名・キーワードの強調と、STEPのリボンだけに使う。
• 端末の外側はクリーム地にして、本文の柱を浮かせる。

Typography

• 全体を太めの丸ゴシックで統一し、柔らかい印象にする。
• 本文は中央揃えにし、行間は2倍前後と広く取る。
• 見出しの下には「- English -」形式の小さな英字副題を添える。
• 数字やキーワードは赤にし、本文の1.5〜2倍に拡大する。
• 語尾に「♪」や「！」を使い、親しみやすい口調にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の柱で、応募例は 2 列、STEPは横長に並べる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックはカードや額縁の中に入れ、地から浮かせる。
• 左右には約4%のクリーム色の余白を固定で設ける。
• セクション見出しは中央に置き、上に48px程度の余白を取る。
• カード同士の間は32px前後空ける。
• STEPはカードを縦に積み、左上にリボン形のラベルを重ねる。

Elevation & Depth

• 板チョコ風カードは縁を面取りし、ハイライトと影で立体感を出す。
• 写真や応募例のカードには薄いドロップシャドウを付ける。
• CTAボタンは白い縁取りを付け、軽く浮かせる。
• 装飾のチョコ片には光沢と影を付け、カードの角に重ねる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 白フチのポラロイド風に角度を付けて切り抜き、上部の2隅をマスキングテープで留める
• セクション境界: 溶けて垂れるチョコ風の波形、または半円が連なるスカラップ形
• タイトルはハート形の枠に収める。
• カードの上辺はアーチ状に、角はくり抜き形にした額縁にする。
• 応募例カードは対角の2隅を赤いリボン帯で留める。
• 見出しのラベルはリボン形の台形にする。
• ボタンはすべてピル型にする。

Components

• 応募ボタン（button-primary）: 赤ピンクのピル型ボタン。白い縁取りを付け、両脇に小さなハートを添える。
• サブCTA（button-secondary）: チョコ茶のピル型ボタンで、文字はクリーム黄にする。2行まで入れられる。
• 開閉ボタン（button-toggle）: 淡ピンクのピル型ボタン。右側に下向きの矢印を置く。
• 板チョコ額縁カード（chocolate-card）: チョコ茶の面を面取りした額縁で囲み、中に白文字の本文を入れる。
• STEPリボンラベル（step-ribbon）: 赤い帯の下端を切り込んだリボン形のラベル。手書き風の数字を入れる。
• 応募例カード（example-card）: 生成りのカード。罫線入りの見出しの下に手描きイラストを置き、角を赤リボンで留める。
• ギフト箱型の賞品枠（gift-box-panel）: 上部にストライプの蓋とリボンを付けた、白い賞品パネル。
• リボン型の小見出し（heading-label）: 淡ピンクの台形のラベル。茶色の枠線を付ける。
• 規約のスクロールボックス（terms-box）: 白い角丸の枠。中身をスクロールさせ、茶色のスクロールバーを付ける。

Do's and Don'ts

Do - チョコ茶とピンクのセクションを交互に配置する。 - ハート・リボン・チョコ片をカードの角にはみ出させて散らす。 - 注釈は「※」で始め、小さな文字で添える。 - 応募手順は3ステップのカードで、入力画面を簡略化した図を示す。 - 投稿写真はポラロイド風にし、傾けて並べる。

Don't - 寒色や原色の青・緑を地色に使わない。 - 角張ったゴシックの太字見出しにしない。 - 装飾のないフラットな白背景を長く続けない。 - 主CTAを赤ピンク以外の色にしない。 - 本文を左揃えで長く詰め込まない（規約は例外）。

Page Structure

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

1. ファーストビュー（キャンペーン名、応募期間、賞品を一目で伝える）: チョコ茶の格子地の上に、ピンクのハート形タイトルを置く。左下に期間、右下に円形の賞品バッジを配置し、下端は溶けたチョコの波形にする。
2. 主催者の挨拶・企画背景（開催の経緯と参加を呼びかける）: ピンクの幾何柄の地に板チョコ額縁カードを置き、白文字の中央揃えの本文と開閉ボタンを入れる。
3. 賞品（賞品と当選数を訴求する）: 淡ピンクの格子地に置いたギフト箱型パネル。吹き出しラベル、大きな赤い数字、商品イラストで構成する。
4. キャンペーン概要・応募例（投稿内容のイメージを伝える）: 板チョコ柄の地に、アーチ形の白い額縁を置く。中に手描きイラスト付きの応募例カードを4枚並べる。
5. 応募方法（3ステップで手順を示す）: ピンク地に、STEPリボン付きのチョコ茶カードを3枚積む。カード内に入力欄の図と応募ボタンを入れる。
6. CTA（応募を後押しする）: 集中線を添えた呼びかけ文と、大きな赤ピンクのピル型ボタンを置き、下に注釈を続ける。
7. 前回の投稿紹介（実例で参加意欲を高める）: 生成りの額縁カードの中に、テープで留めたポラロイド写真を傾けて縦に並べる。最後にサブCTAを置く。
8. 応募規約（規約を提示する）: ピンク地に、白い角丸のスクロールボックスを置く。

Imagery

• 光沢のある板チョコ片を立体イラストにし、傾けて散らす。
• 赤ピンクのリボンが流れる装飾と、白線のハートを散らす。
• 人物は温かみのある線画風の手描きイラストにし、くすんだ色で塗る。
• ギフト箱からお菓子があふれる賞品イラストに、きらめきを添える。
• 投稿写真は家庭で撮った自然な写真を使い、白フチを付けて傾ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもコンテンツ幅は約800〜900pxの中央の柱に収め、外側はクリーム地にする。
• FVは横長にし、期間・タイトル・賞品を横に並べる。
• 応募例カードは2列のグリッドにする。
• STEPカードは横長にし、左に説明、右に図やボタンを置く。
• 投稿写真は2〜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 行書くと起動時に読み込まれる。