DESIGN.md — 黒×金の特撮ヒーロー投票キャンペーンLP（Black Gold Hero Battle Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型、ポップ・元気
• キーワード: 黒×金・バトル演出・太枠パネル・赤いピル帯・極太見出し・墨しぶき
• 地の質感: 黒地に墨・絵の具しぶきのグランジ。パネル内は白〜大理石風の薄いテクスチャ。金枠はグラデーションで光沢あり
• 形: 四角い金枠パネル、台形の黒タブ見出し、ピル型の赤帯、円形の金縁バッジ
• 温度感: 熱く派手。黒と金で高級感、赤で興奮を足す

Colors

• 地は黒＋墨しぶき。コンテンツは必ず金枠の白パネルに入れる
• 金は枠・見出し・バッジ縁のみ。光沢グラデで使う
• 赤は主CTA・コース名帯・STEP矢印に限る
• 補足情報のブロックはクリーム地にして白地と分ける
• ヘッドラインは白文字に黒の太フチ、または金グラデ文字に黒フチ
• 商品紹介ではキャラ別に赤・青・黄・緑・紫・白の面を使い分ける

Typography

• 見出しは極太書体に黒の太フチと影を重ねる
• 金見出しは縦方向の金グラデで光らせる
• FVの導入文は明朝の中央揃えで物語っぽく
• 規約は左揃えで、行頭に「・」を付ける
• 当選者数は数字を大きく、単位を小さく2段で組む
• 日付は太字ゴシックで大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 外側に金の太枠パネル、その中に小さい金枠ボックスを入れ子にする
• 各ボックスの上端中央に黒い台形タブ見出しを置く
• STEPは縦に並べ、間に赤い三角矢印を入れる
• 当選数の円バッジは賞品画像の右上に重ねる
• 長い規約はスクロール枠に入れて高さを固定する

Elevation & Depth

• パネルは影なし。金枠の光沢で浮かせる
• STEPカードは金縁に黄色の外光をうっすら付ける
• 見出し文字には黒フチとドロップシャドウ
• 円バッジは黒地に金リングで立体感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: FV・商品紹介は斜めカットの多角形パネルでキャラを切り抜く。賞品は白地に切り抜き
• セクション境界: 墨しぶきの黒地をはさみ、金枠パネルごとに区切る
• パネル・ボックスは角丸なしの四角
• CTAとコース帯は赤グラデのピル型
• タブ見出しは台形の黒帯
• 当選数バッジは正円

Components

• 赤グラデ主CTA（button-primary）: 赤から濃い赤のグラデのピル型。右端に白い三角アイコン
• 金枠パネル（panel-gold）: 白地を太い金グラデ枠で囲んだ大きなコンテンツ枠
• 黒台形タブ見出し（tab-heading）: ボックス上端に掛かる黒い台形と金文字
• STEPカード（step-card）: 上部が黒→グレーのグラデ帯にSTEP番号、下が白地の説明。金縁
• コース名ピル帯（course-band）: 幅いっぱいの赤グラデピルに白い極太文字
• 当選数円バッジ（badge-count）: 黒地に金リング、金文字で数字と名様
• SNSフォローボタン（button-sns）: 黒または赤のピル型、左にアイコン、右に矢印
• 規約スクロール枠（scroll-terms）: 高さ固定でスクロールさせる応募要項

Do's and Don'ts

Do - 黒地＋金枠＋赤CTAの3色を軸にする - 見出しは極太フチ文字でゲーム・特撮っぽく - 情報は入れ子の金枠ボックスとタブ見出しで整理する - 賞品ごとに当選数バッジを大きく見せる - キャラ・商品は斜めカットの色面パネルで並べる

Don't - パステル色や柔らかい丸ゴシックを主に使わない - パネルに大きな角丸を付けない - 赤を本文や装飾に広げない - 金を平坦な黄土色ベタにしない - 規約部分まで装飾フォントにしない

Page Structure

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

1. ファーストビュー（コラボの世界観と商品ラインナップを一目で伝える）: 上部にロゴ2つを×でつなぐ。キャラと料理を斜めカットで6分割し、中央にグランジのロゴ文字
2. 導入ストーリー（投票バトルの意味づけ）: 金色の雲背景に商品パッケージを3×2で並べ、明朝の中央揃えで物語文を置く
3. 投票キャンペーン概要（参加条件を伝える）: 金枠パネルの最上部に金グラデの見出し帯。フチ文字の告知コピーと期間ボックスを続ける
4. 参加方法（手順を案内して投票へ誘導）: STEPカード3枚を赤矢印でつなぎ、赤い主CTAを置く
5. レシート撮影方法（応募不備を防ぐ）: クリーム地にレシートの線画イラストを2列で並べ、下に箇条書きの補足
6. 注意事項・応募要項（規約の明示）: 白地に太字の中見出し、箇条書き。要項はスクロール枠
7. 当選賞品（賞品の魅力で参加意欲を上げる）: 赤ピル帯のコース名、賞品の切り抜き画像、右上に円バッジ
8. 対象商品・問い合わせ（対象と連絡先を示す）: パッケージ画像と黒丸の箇条書きリスト。問い合わせは金フチの見出しの下に中央揃え
9. SNSキャンペーン（2つ目の企画を案内）: 同じ金枠パネル構成を繰り返す。期間・賞品・Wチャンス（クリーム地）・STEP・要項の順
10. 商品紹介（商品ラインナップの訴求）: 黒地に金見出し。キャラ色の斜めカットパネルを2列×3段、隅に投票誘導の盾型バッジ
11. フッター（関連サイトへの導線と権利表記）: 濃グレー帯にバナーを2つ。下に明るいグレー地でリンクとコピーライト

Imagery

• ヒーローは正面寄りの決めポーズで切り抜き、料理の湯気が立つ俯瞰写真と組み合わせる
• 背景は黒地に白・青緑の絵の具しぶきと筆跡のグランジテクスチャ
• FV下部は金色の雲・煙のグラデで光を表現
• 賞品とパッケージは白地に影なしの切り抜き
• 手順説明は白黒の線画レシートで図解する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの固定幅（約860px）の金枠パネルにし、外側を黒のグランジ背景で埋める
• PCのSTEPは横3列で、間を右向き矢印にする
• PCではQRコード付きの「スマホ限定」案内ボックスを追加
• レシート例・賞品・対象商品リストはPCで3列や2列に広げる
• FVはPCで横長にし、キャラパネルを横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 行書くと起動時に読み込まれる。