DESIGN.md — 濃紺×朱赤の夏祭り花火キャンペーン LP（Night Festival Fireworks Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 夜祭り・花火・濃紺・朱赤グラデ・黄色の大数字・爆発バッジ
• 地の質感: 濃紺のベタ地に花火・紙幣・きらめきの写真コラージュ。カード内は赤〜ピンクのグラデーション。
• 形: 角丸の白フチカード、ピル型ボタン、ギザギザの爆発型バッジ、楕円ラベル。
• 温度感: 暖色の強調色を寒色の夜空に乗せた、高コントラストで熱い印象。

Colors

• 前半は濃紺の夜空地に統一し、企画ブロックを白フチの角丸カードとして浮かせる。
• メイン企画カードは朱赤→オレンジ、サブ企画カードはピンク系グラデーションで色分けする。
• 金額や割引率などの数字は黄色の極太文字にし、赤系の地に乗せる。
• CTA はどの地の上でも朱赤のピル＋白文字で統一する。
• 後半の補足情報はライトグレー地＋白カードに切り替えて落ち着かせる。
• セクション名の英字小見出しは朱赤で入れ、日本語見出しは黒にする。
• button-primary は文字 #FEF8F7 × 背景 #F42A01 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD2601、4.59:1）を使う。
• burst-badge は文字 #EDEEF3 × 背景 #F42B01 のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D02501、4.59:1）を使う。
• campaign-card は文字 #EDEEF3 × 背景 #F95A83 のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D8083E、4.5:1）を使う。
• pill-label は文字 #F42B01 × 背景 #FDF9B7 のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D02501、4.51:1）を使う。
• fv-nav-card は文字 #EDEEF3 × 背景 #F42B01 のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D02501、4.59:1）を使う。

Typography

• FV のタイトルだけを白の筆文字にし、祭りらしさを出す。
• 金額は数字だけを極端に大きくし、単位は 1/2 ほどに小さくする。
• 見出しの文字は太字（800〜900）が基本。本文も太字寄りにする。
• 英字小見出しを和文見出しのすぐ上に置き、2 段の見出しを作る。
• 数字の強調は黄色に赤か濃い影・縁取りを付けて立体的にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは左右がはみ出す横スライダー。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 企画カードは画面幅の約 92% に白フチ 6px を付け、中央に置く。
• カード直下に CTA ボタンとテキストリンクを中央に縦積みする。
• スライダーは中央カードを幅約 60% にし、左右に隣のカードを半分ずつ見せる。
• 見出しは中央揃え。小ラベルを左右の細い罫線で挟む。
• アコーディオンは幅 90%・高さ 64〜80px の白カードで縦に並べる。

Elevation & Depth

• 商品カードには下方向に柔らかい大きめの影（blur 20px 前後、薄い黒）を付ける。
• FV の 2 枚の誘導カードには、厚みを出す濃い色の下影を付ける。
• 企画カードは影を付けず、白フチだけで濃紺地から浮かせる。
• アコーディオンは影なしのフラットな白にする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品写真はカード上部に角丸なしの横長矩形で入れる。人物は切り抜きでコラージュする。
• セクション境界: 区切りは背景色の直線切り替えのみ。花火写真や人物の帯を区切りに使う。
• CTA は完全なピル型にし、右端に矢印を付ける。
• カウントダウンは赤いギザギザの爆発型バッジにする。
• ラベルは楕円か角丸の帯にする。
• FV の誘導カードは角丸 12px で、右下に丸い下矢印アイコンを置く。

Components

• 主 CTA ピルボタン（button-primary）: 朱赤のピルに白太字＋右矢印。中央に置く。
• 爆発型カウントダウンバッジ（burst-badge）: ギザギザの星形の赤地に、白い極太文字で残り日数を出す。FV の右上と後半の帯に置く。
• 白フチ企画カード（campaign-card）: 赤やピンクのグラデーション地に白フチ。中に黄色ラベル・大数字・賞品リストを入れる。
• 黄色楕円ラベル（pill-label）: 淡黄の地に赤文字の太字で、企画名を枠付きの楕円で見せる。
• 商品スライダーカード（product-slider-card）: 白カードに写真・小タグ・価格・店名・注文ボタン。左右に隣のカードを少し見せる。
• 開催期間帯（period-bar）: 青紫の全幅帯に白文字の日付を入れ、曜日は丸囲みにする。
• 英字＋和文の 2 段見出し（section-heading）: 赤の英字小見出しの下に、黒の太字和文見出しを置く。
• 詳細アコーディオン（accordion）: 白い角丸カードの左に太字の題名、右に薄赤の＋アイコンを置く。
• FV 誘導カード（fv-nav-card）: 赤とピンクの 2 枚を横に並べ、短い訴求と下矢印アイコンを入れる。

Do's and Don'ts

Do - 濃紺の地に暖色のカードと黄色の数字を乗せ、強いコントラストを保つ。 - 金額や割引は数字を最大級に大きくし、単位は小さくする。 - CTA は各企画ブロックの直後に必ず置き、朱赤のピルで統一する。 - 花火・きらめき・紙幣などの祭り素材を背景にちりばめる。 - 後半の補足情報はグレー地に切り替え、読みやすさを優先する。

Don't - 淡いパステル単色の地にしない。夜祭りの濃紺を崩さない。 - 細い明朝体や細字の見出しを使わない。 - CTA の色を青や緑にしない。 - 企画カードの角を直角にしない。 - 数字を本文と同じくらいの小ささで並べない。

Page Structure

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

1. ヘッダー（ブランドを示す）: 白い細帯の左にロゴだけを置く。
2. ファーストビュー（祭り企画の熱気と 2 つの目玉を伝える）: 濃紺の夜空に花火・提灯・ミラーボール。筆文字タイトル、人物の切り抜き、右上に爆発バッジ。下部に赤とピンクの誘導カードを並べる。
3. 開催期間（期間限定であることを示す）: 青紫の全幅帯に白文字の日付を入れる。
4. 企画の概要（企画の趣旨を短く説明する）: 英字小見出し＋ラベンダーのラベル＋白文字 2 行を中央揃えで置く。
5. 目玉の抽選企画（高額プレゼントで参加を促す）: 赤グラデのカードに黄色ラベルと巨大数字。1〜3 等の賞品をメダル付きの横長リストで並べ、紙幣を散らす。
6. CTA（店舗検索へ誘導する）: 朱赤のピルボタンとその下の白テキストリンク。
7. セール＆クーポン（割引商品を見せて注文させる）: ピンクグラデのカードに黄色の大見出し。クーポンとセールの 2 つのスライダーを罫線付きラベルで区切る。
8. CTA（対象店舗へ誘導する）: 濃紺地の中央に朱赤のピルボタンを置く。
9. その他のキャンペーン（関連施策を案内する）: グレー地に 2 段見出し、バナー画像、太字の題名、グレーの期間表記。
10. カウントダウン（締切で急がせる）: 濃紺地に大きな爆発バッジ。下に人物が並ぶ帯写真。
11. キャンペーン詳細（規約や条件を補足する）: グレー地に 2 段見出しと白いアコーディオンを縦に並べる。
12. フッター（著作権を表示する）: 赤の全幅帯に白の小さな文字を中央に置く。

Imagery

• 夜空には打ち上げ花火の写真を、多色で画面の端に散らす。
• 人物は白フチ付きの切り抜きにし、祭りの羽飾りや法被で賑やかに見せる。
• 紙幣・コイン・クーポン札などのお金モチーフを、カードの縁に斜めに散らす。
• 料理写真は明るく寄りの構図で、湯気やとろみが伝わるシズル感を出す。
• 白い十字のきらめきを濃紺の地にちりばめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 380px）のコンテンツ列を固定し、左右の余白を濃紺＋花火の背景で埋める。
• PC は右側にタイトルロゴとページ内リンク（目次）を固定表示する。
• PC は左側にアプリ誘導の QR コードと人物イラストを置く。
• コンテンツ列の中のレイアウトは SP と同じにする。

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