--- version: alpha name: Night Festival Fireworks Campaign LP description: 濃紺の夜空に花火を散らした地に、朱赤とピンクのグラデーションカードを重ねたフードデリバリーの期間限定キャンペーン LP。筆文字のタイトル、黄色の大きな数字、ギザギザの爆発バッジで祭りの熱気と「お得さ」を押し出す。後半はライトグレー地とアコーディオンで情報を整理している。 colors: primary: '#F42B01' background: '#070A37' background-alt: '#F5F5F7' surface: '#FDFEFD' cta: '#F42A01' on-cta: '#FEF8F7' secondary: '#F95A83' accent-1: '#FDE84A' tint-1: '#FDF9B7' accent-2: '#272094' tint-2: '#DBD4FE' text: '#0F0D0F' text-muted: '#817F83' on-dark: '#EDEEF3' marker: '#D51B0A' cta-accessible: '#DD2601' primary-accessible: '#D02501' secondary-accessible: '#D8083E' typography: display: fontFamily: Yuji Syuku fontSize: 64px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px burst-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 200px campaign-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 560px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px product-slider-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 290px period-bar: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 34px section-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 70px fv-nav-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px --- # DESIGN.md — 濃紺×朱赤の夏祭り花火キャンペーン LP（Night Festival Fireworks Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 夜祭り・花火・濃紺・朱赤グラデ・黄色の大数字・爆発バッジ - **地の質感**: 濃紺のベタ地に花火・紙幣・きらめきの写真コラージュ。カード内は赤〜ピンクのグラデーション。 - **形**: 角丸の白フチカード、ピル型ボタン、ギザギザの爆発型バッジ、楕円ラベル。 - **温度感**: 暖色の強調色を寒色の夜空に乗せた、高コントラストで熱い印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F42B01` | ブランド朱赤・CTA 地 | 6% | 画素の実測 | | `background` | `#070A37` | 夜空の濃紺地 | 40% | 画素の実測 | | `background-alt` | `#F5F5F7` | 後半のライトグレー地 | 16% | 画素の実測 | | `surface` | `#FDFEFD` | カード・アコーディオンの白 | 12% | 画素の実測 | | `cta` | `#F42A01` | 主ボタン | 3% | 画素の実測 | | `on-cta` | `#FEF8F7` | ボタン文字 | 0% | 画素の実測 | | `secondary` | `#F95A83` | セール枠のピンクグラデ | 12% | 画素の実測 | | `accent-1` | `#FDE84A` | 大数字・強調の黄色 | 2% | 推定 | | `tint-1` | `#FDF9B7` | 見出しの淡黄ラベル | 2% | 画素の主要色に補正 | | `accent-2` | `#272094` | 開催期間帯の青紫 | 1% | 画素の実測 | | `tint-2` | `#DBD4FE` | 見出しラベルの淡ラベンダー | 0% | 画素の実測 | | `text` | `#0F0D0F` | 見出し・本文の黒 | 1% | 画素の実測 | | `text-muted` | `#817F83` | 注釈グレー | 0% | 画素の実測 | | `on-dark` | `#EDEEF3` | 濃紺上の白文字 | 1% | 画素の実測 | | `marker` | `#D51B0A` | 英字ラベル・＋アイコンの赤 | 0% | 画素の実測 | | `cta-accessible` | `#DD2601` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D02501` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#D8083E` | AA を満たす補正値（計算） | | 計算 | - 前半は濃紺の夜空地に統一し、企画ブロックを白フチの角丸カードとして浮かせる。 - メイン企画カードは朱赤→オレンジ、サブ企画カードはピンク系グラデーションで色分けする。 - 金額や割引率などの数字は黄色の極太文字にし、赤系の地に乗せる。 - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の筆文字タイトル | 手書き・筆 | Yuji Syuku | 700 | 64px | 1.1 | 0.0em | | `headline-lg` | カード内の大きな金額・割引訴求 | ゴシック | Dela Gothic One | 900 | 52px | 1.1 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.4 | 0.02em | | `headline-sm` | ラベル見出し・カード店名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `accent` | 英字の小見出し | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.0em | | `body-md` | 本文・リード | ゴシック | Noto Sans JP | 700 | 12px | 1.9 | 0.03em | | `note` | 注釈・期間表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 900 | 15px | 1.2 | 0.03em | - 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-28e4e844`（元 LP の URL から採番） - **元 LP**: https://demae-can.com/link/cam/lp/goigoiafterparty2026 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。