DESIGN.md — 金箔×黒×赤の優勝祝賀キャンペーン LP（Gold Confetti Celebration Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 金箔・紙吹雪・祝賀・立体金文字・白カード・赤い数字
• 地の質感: 背景は金箔・ラメの粒感テクスチャ。カードはフラットな白で、黒いオフセット影がつく。
• 形: 角丸の大きい白カード、ピル型ボタン、ローレル付きの丸メダル、リボン帯の見出し。
• 温度感: 暖色寄りで熱気が高い。金と赤のお祝いムード。

Colors

• 地は金箔テクスチャ。情報はすべて白カードにのせる。
• 赤は賞品数・金額・応募ボタンだけに使う。
• 黒は STEP 帯とメダルナビ帯、カードの影に使う。
• サブの『詳しく』ボタンは金グラデ＋黒文字、主の応募ボタンは赤＋白文字。
• 見出し画像は金の立体文字を焦げ茶の台座にのせる。
• 灰色は注釈と補足の帯だけに使う。
• button-primary は文字 #FFF4F3 × 背景 #FE2F37 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E2010A、4.59:1）を使う。
• pill-badge は文字 #FFF4F3 × 背景 #F7022F のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E3022B、4.52:1）を使う。

Typography

• 数字は極太で特大、単位は小さく 2 行に組む。
• 『＼ ◯名さまに ／』のように斜線で挟んで強調する。
• 本文も太字寄りで、中央揃えを基本にする。
• 注釈は※付きの左揃え・小さい灰文字にする。
• 大見出しは金の立体・縁取り文字の画像で作る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メダルナビだけ 4 列×2 段
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅 90% で中央に置く。
• 各カードの上に立体見出し画像を重ねる。
• カード内の順番はロゴ→条件→賞品→ボタン→期間→注釈。
• ボタンはカード幅 90% で、縦に 16px 間隔で並べる。

Elevation & Depth

• 白カードには右下へ 6px ずらした黒のベタ影（ぼかしなし）をつける。
• ボタンの下辺に濃い色の細い影をつけて押せる感じを出す。
• 見出し画像はドロップシャドウで背景から浮かせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。メダルは円形に切り抜いて金のローレル枠で囲む。
• セクション境界: 直線の区切りはなし。カードの間に金箔の背景を見せる。カード内は点線で区切る。
• カードは角丸 24px。
• ボタン・セレクトボックスはピル型。
• 小見出しは右端を切り欠いたリボン形の金帯。
• STEP 帯は黒の四角に下向きの三角をつける。

Components

• 赤い応募ボタン（button-primary）: 赤のピル型で白文字、右端に › アイコン。
• 金グラデの詳細ボタン（button-gold）: 金から淡金へのグラデ。黒文字と ›。
• メダル型ナビ（medal-nav）: 黒地に金ラベル付きの丸メダルを 4 列で並べる。
• リボン帯見出し（ribbon-heading）: 左にイラスト、右端を切り欠いた金のリボン帯。
• STEP 帯（step-bar）: 黒帯に白文字。下に三角をつける。
• 賞品表（prize-table）: 灰色の罫線で 2 列。1 等の行だけ赤文字。
• 赤い吹き出しバッジ（pill-badge）: 赤のピル型に白文字。下に尻尾をつける。
• 店舗検索セレクト（select-box）: 白地に黒の太枠ピル型、右に ▼。

Do's and Don'ts

Do - 金箔テクスチャの地に白カードを積む構成を守る。 - 数字は赤の極太・特大にする。 - 主の応募は赤、詳細は金とボタンの色を使い分ける。 - カードごとに応募期間と注釈を必ず置く。 - 紙吹雪・扇子・帽子などのお祝いモチーフで見出しを飾る。

Don't - 白カードの外に本文を置かない。 - 赤を本文や装飾に乱用しない。 - 細い明朝や淡いパステル色を使わない。 - カードの影をぼかしの強いソフトシャドウにしない。 - 見出しを平らな単色文字だけで済ませない。

Page Structure

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

1. ファーストビュー（祝賀ムードとキャンペーン開催を伝える）: 金の紙吹雪の背景、立体金文字の大見出し、マスコット。最下部に黒文字の開催帯。
2. 特典一覧ナビ（複数の特典を一目で見せ、各特典へ誘導する）: 黒地に金ラベル付きの丸メダルを 4×2 で並べる。
3. メイン抽選キャンペーン（最大の目玉賞品を訴求する）: 立体見出し→白カード。リボン帯、赤の大きな数字、賞品表、金と赤のボタン。
4. 店頭キャンペーン（来店での参加を促す）: 金のチケット型画像、等級表、セレクトボックスでの店舗検索。
5. 店頭イベント（イベントと景品を紹介する）: 赤の大見出し、イベント写真、景品を丸枠で 4 つ並べる。
6. SNS 参加キャンペーン（フォローとリポストでの応募を促す）: ロゴ→条件→斜線で挟んだ赤見出し→ポイント数→キャラクター→金ボタン。
7. 契約特典（新規契約でのキャッシュバックを訴求する）: 商品写真を 2 列に並べ、斜め端のラベルをつける。
8. 応募方法ステップ（応募の手順を明確にする）: 黒の STEP 帯と説明文、赤ボタンを交互に並べる。
9. セール告知（割引セールへ送客する）: 赤の『最大◯%OFF』と家電の切り抜き写真を散らして配置。
10. フッターバナー（記念告知とサイト導線）: 黒地に斜めストライプのバナー。下に灰色のフッター。

Imagery

• 背景は金箔・ラメの粒子に紙吹雪が舞う高彩度ゴールド。
• 見出しは金の立体文字＋焦げ茶の台座。帽子や扇子のモチーフを添える。
• マスコットやキャラクターはカード右下からのぞかせる。
• 商品は白背景の切り抜きで、少し重ねて配置する。
• メダルは白い円に金のローレル枠をつけ、中央にアイコンを置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央に約 600px の 1 カラムを置き、SP の構成を拡大したものにする。
• PC は左右の余白にも金箔背景を広げる。
• PC の数字見出しは 1 行にまとめ、単位を横に並べる。
• メダルナビは PC でも 4 列×2 段を保つ。

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