DESIGN.md — 生成り×ココア茶の上品な菓子キャンペーンLP（Warm Cream and Cocoa Brown Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: 生成りクリーム・ココアブラウン・明朝見出し・筆記体ラベル・木目テーブル写真・立体ピルボタン
• 地の質感: 白とクリームの平らな面が中心。一部のセクションだけ淡い和紙のような地模様を入れる。写真は木目テーブルの暖かい質感。
• 形: 大きな角丸カード（約24px）、ピル型ボタン、正円の番号バッジ、手描きの曲線ライン
• 温度感: 暖かめ。黄みのクリームと赤茶系で、落ち着いた甘さを出す

Colors

• 白とクリームの地をセクションごとに交互に置く。境目は直線で切り替える
• ブランド色のココア茶は、期間帯・番号バッジ・FAQ・規約ボタン・問い合わせ見出しといった締めの面だけに使う
• 赤は主CTAと数字・商品名の強調、注意事項の枠に限る
• 緑はログインなどのサブCTAだけに使う
• カードは白地ならベージュ、クリーム地なら白にして、地と1段階差をつける
• 文字は純黒を使わず、こげ茶で統一する
• button-secondary は文字 #FFF8F6 × 背景 #349B3D のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2C8233、4.6:1）を使う。

Typography

• 見出しと数字は明朝、本文・ボタン・注釈はゴシックで使い分ける
• セクション見出しには、上に筆記体の英字ラベル、下に手描きの曲線を必ず添える
• 大きな数字の左右に、放射状の短い線を置いて強調する
• 時間ごとの食べごろ説明は縦書きの明朝で、詩的に並べる
• 強調語は赤文字にし、赤い波線の下線を引く
• ボタンは上に小さな補足、下に大きな主文言の2段組にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。NG例だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に約80pxの余白を取り、中央揃えの見出しから始める
• 内容は左右に約16pxの余白を残した角丸カードに収める
• ステップは1枚ずつ独立したカードにし、間を約24pxあける
• 本文は中央揃えを基本にする。長い手順だけ左揃え
• CTAは赤と緑を縦に2つ重ねて置く

Elevation & Depth

• CTAボタンは下側に濃い同系色の厚み（4〜6pxの影）をつけ、立体的に見せる
• 目次カードは白地に柔らかい影（0 4px 12px rgba(0,0,0,.15)）
• その他のカードは影なしで、面の色の差だけで区切る

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸約24pxの長方形。イラストは白い正円の背景に収める
• セクション境界: 直線で地の色を切り替える。見出しの下に手描き曲線を入れる
• カードは大きめの角丸にする
• 番号は茶色の正円バッジ
• FAQ行は角丸14pxの茶色バー
• 時間の表示は細線の正円で囲む
• 賞品写真の右上に茶色のリボンタグを重ねる

Components

• 立体ピル型の主CTA（button-primary）: 赤いピル型ボタン。2段の文字と右端の白丸矢印を持ち、下側に濃い赤の厚みをつける
• 緑のログインボタン（button-secondary）: 主CTAと同じ形の緑版
• 茶色のリンクボタン（button-dark）: 茶色のピル型。右に二重矢印をつけ、上に斜線で挟んだ誘導文を置く
• 筆記体ラベル付き見出し（section-heading）: スプーンの線画、筆記体の英字、明朝の見出し、手描き曲線を縦に重ねる
• 目次カード（anchor-nav-card）: 白い角丸カードに2列×3行のリンクを並べる。各リンクは筆記体ラベル、項目名、下向き丸矢印、下線で構成する
• ステップカード（step-card）: ベージュのカードに、茶色の丸い番号バッジ、明朝の見出し、区切り線、説明文を入れる
• 注意事項ボックス（caution-box）: 赤いヘッダー帯に赤い細枠。中に番号付きの赤い強調リストを入れる
• FAQアコーディオン（faq-item）: 茶色の角丸バー。左に白文字の質問、右に＋アイコン
• 手書き風の吹き出し（speech-bubble）: 写真の角に重ねる白い楕円の吹き出し。黒い線で手書き風の短い一言を入れる
• 応募期間帯（period-band）: 茶色の帯の上に白いラベルを置き、その下に明朝の大きな日付を入れる

Do's and Don'ts

Do - 見出しは毎回「筆記体＋明朝＋曲線」のセットで統一する - 地は白とクリームを交互にして、セクションを区切る - 強調色は赤1色に絞る - 写真は木目の上に置いた暖かい光の物撮りにする - 手順はステップカードと線画イラストで見せる

Don't - 純黒・彩度の高い青などの寒色を使わない - 見出しをゴシックの太字だけで作らない - カードを角張った形にしない - 赤と緑をCTA以外の大きな面に使わない - 影を強くしすぎない

Page Structure

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

1. ファーストビュー（賞品と当選数を一目で伝える）: 木目テーブルの物撮りに手書きコピーを添える。下にクリームの帯を置き、当選数と賞品名を明朝で入れる
2. 応募期間（期間を明示する）: 茶色の帯に白いラベルと大きな日付を置く
3. 目次ナビ（各セクションへ誘導する）: 白い角丸カードに2列のリンクを並べ、下に動画への誘導タブを置く
4. キャンペーン概要（応募条件を伝える）: 条件を中央揃えの明朝で書き、赤い強調と波線を入れる。下に商品パッケージを横に並べる
5. 当選訴求（賞品の魅力を伝える）: 白いカードに大きな数字と賞品写真、リボンタグを入れる
6. 参加CTA（会員登録・ログインへ誘導する）: 説明文と注釈の下に、赤と緑の立体ボタンを縦に並べる
7. プレゼント内容（賞品の詳細を見せる）: 地模様入りのクリーム地に、明朝の賞品名と吹き出し付きの写真を置く
8. 楽しみ方（商品の情緒的な価値を伝える）: 円で囲んだ時間3つと縦書きの説明を並べ、続けて動画を埋め込む
9. 対象商品（対象を示す）: 白いカードにパッケージ画像と商品名を縦に並べる
10. 応募方法（手順を説明する）: ステップ1〜4をカードにし、線画イラストを添える
11. 注意事項（無効応募を防ぐ）: 赤枠のボックスにレシート図解・番号リスト・NG例のグリッドを入れる
12. 応募規約（規約を開いて確認させる）: 茶色の開閉ボタンを1本置く
13. よくある質問（疑問を解消する）: ベージュのカードに茶色のアコーディオンを並べる
14. 再CTA・問い合わせ（最後にもう一度応募を促し、問い合わせ先を示す）: CTAを再掲する。その下に茶色ヘッダーと黄色本文の角丸カードで電話番号を大きく載せる

Imagery

• 木目テーブルに白い器と金のスプーンを置き、斜め上から暖かい自然光で撮る
• 背景に紅茶のグラスなどをぼかして入れ、カフェのような空気を出す
• 手順のイラストは白黒の線画で、白い正円の背景に収める
• スプーンの細い線画と手描きの曲線を見出しの装飾に使う
• NG例はグレーのカードに簡易図を描き、赤い斜線を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に幅約900pxのコンテンツを置き、左右に地の色を広げる
• PCの目次は横1列のバーにまとめる
• PCの当選訴求は、左に文字・右に写真の2カラムにする
• PCは商品を4列、ステップ2と3を横並び、NG例を6列にする
• PCではCTAの赤と緑を横に並べる

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