DESIGN.md — 黄色×赤×紺の菓子レシート応募キャンペーンLP（Bright Yellow Festive Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 黄色ベース・きらめき装飾・2コース比較・白カード・えんじのアコーディオン・大きな数字
• 地の質感: フラットな黄色の地に、半透明の円・斜線・ドットと白いキラ星を散らして祝祭感を出す
• 形: 角丸が小さめの白カード、色付きの枠線ボックス、太い角丸の帯
• 温度感: 暖色中心で明るく元気。紺で信頼感を少し足す

Colors

• 地は黄色系3段（濃黄・淡黄・クリーム）でセクションを切り替える
• 必ずもらえる系は赤、抽選系は紺と色でコースを分ける
• 情報は白カードに載せ、黄色の上に直接長文を置かない
• 見出し帯・アコーディオン・ボタンは濃えんじで締める
• 注意喚起は赤枠、手順やポイントはオレンジ枠
• OK例は水色、NG例はピンクの面で対比させる

Typography

• 金額・人数・個数の数字は本文の3〜4倍にし、赤か紺で塗る
• 見出しには白フチや影をつけてポップに仕上げる
• セクション見出しの上に英字の斜めタグを添える
• 本文は中央揃えを基本にし、カード内の説明は左揃えにする
• 注釈は小さく灰茶色で、米印を付けて並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。2コース・Good/NGは2列でもよい
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは中央の幅広ボックスに収める
• 2コースは左右に並べて対比させる
• 手順・ポイントはSPで1列に積む
• アコーディオンは12px間隔で縦に並べる
• 見出しの下に16px空けてリード文を置く

Elevation & Depth

• 白カードには淡いソフトシャドウ（0 2px 6px rgba(0,0,0,.1)）
• アコーディオンは影なしのフラット
• ヒーローの賞品カードはやや強めの影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで縦に並べ、写真は角丸の四角に入れる
• セクション境界: 直線で切り替え、背景色だけを変える
• 枠線は2px程度の色線にする
• コース見出しは上辺に重ねた色帯タブにする
• サブボタンはピル型にする
• 番号付きの吹き出しバッジは丸く小さく

Components

• 英字斜めタグ付き見出し（section-label-tag）: 赤い斜めの英字ラベルの下に太い見出しを置く
• コース別カード（course-card）: 上辺に赤または紺の帯見出しが付いた枠線付きの白カード
• 特大数字の賞品表示（prize-number）: 金額や人数を特大の数字で見せ、単位を小さく添える
• 応募期間ボックス（period-box）: 淡いピンク面に、ラベル列と日付を並べる
• ステップ・ポイントカード（step-card）: オレンジ枠の白カード。番号はオレンジ、見出しはこげ茶
• えんじ見出し帯（band-header）: カード上部に置く全幅の濃色帯。右側に開閉記号を付ける
• 規約アコーディオン（accordion）: 濃えんじの角丸帯。中央に白文字、右に＋を置く
• 詳細ピルボタン（button-primary）: 濃えんじのピル型ボタン。白文字に矢印を添える
• Good/NG比較（good-ng）: 水色とピンクの面を並べ、丸とバツの記号で例を示す
• ページ内ナビ帯（anchor-nav）: 赤い帯に白文字のリンクを等幅で並べ、下矢印を付ける

Do's and Don'ts

Do - 背景を黄色系にしてキラ星を散らす - コースごとに赤と紺で色分けを徹底する - 数字は極端に大きくする - 注意点は枠付きカードに分けて整理する - 見出しには英字タグを必ず添える

Don't - 黒やグレーの地を広く使わない - 寒色を主役にしない（紺はコース識別だけに使う） - 長文を黄色の地に直置きしない - 装飾をカードの内側に入れない - 細い明朝体を使わない

Page Structure

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

1. ヘッダー（ブランド表示とサイト内の移動）: 白地にロゴとSNSアイコン、その下に赤いグローバルナビ帯
2. ファーストビュー（キャンペーン内容と賞品規模を一目で伝える）: 濃黄の地に放射光とキラ星。大見出し、商品の切り抜き、2コースの白カード、応募期間の帯を置く
3. ページ内ナビ（各セクションへ誘導する）: 赤帯に4項目を等分して並べる
4. キャンペーン概要（2コースの違いを要約する）: 淡黄の地に、赤枠と紺枠の小カードを2つ並べる
5. 賞品紹介（コース別に賞品と条件を詳しく示す）: 帯見出し付きの大カードを縦に2枚。特大数字と応募期間ボックスを入れる
6. 併用の注意（応募ルールを補足する）: オレンジ枠の白カードにチェックアイコンと赤文字の強調
7. ポイント交換先（賞品の使い道を伝える）: 白カードの左に交換先ロゴのグリッド、右に説明と詳細ボタン
8. 対象商品（対象のラインナップを示す）: 濃黄の地に白カード。商品の切り抜きを4列のグリッドで並べ、下に品名
9. 応募方法（手順をステップで説明する）: えんじの帯見出し付きカードの中に、Step1〜3をオレンジ枠のカードで並べる
10. 注意事項・撮影ポイント（無効応募を防ぐ）: 赤枠の注意カード、Good/NG比較、2列のポイントカード、NG例の写真グリッド
11. 利用規約（規約を折りたたんで掲載する）: クリーム地に、えんじのアコーディオンを縦に10本
12. お問い合わせ・フッター（問い合わせ先と関連リンクを示す）: 茶枠のクリーム色ボックスに電話番号。下に赤ナビ、灰色地のブランドロゴ列

Imagery

• 商品は白背景の切り抜きで、縦向きに斜めに重ねる
• 背景に白い4点キラ星、半透明の円、斜線、ドットを散らす
• スマホやレシートはフラットな写真かイラストで見せる
• 紙吹雪やプレゼント箱で当選の楽しさを出す
• NG例の写真には赤いバツ線を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約700px幅のカードを置き、両端の背景装飾を見せる
• SPでは2コースのカードを縦積みにするか、小さく2列で並べる
• 商品グリッドはPCで4列、SPで2列
• ページ内ナビはSPで2×2または横スクロール
• 特大数字はSPで40px前後に抑える

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