DESIGN.md — 赤×黄×青のゲーム風コラボキャンペーン LP（Bold Game-Color Collaboration Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 斜めストライプ地・ビス留めプレート・極太ゴシック・原色の色面切替・波形の区切り・キャラクター切り抜き
• 地の質感: 細い斜めストライプのトーン違いで面に質感を出す。生成り地には薄い模様を敷く。白パネルの四隅に小さなビス点を置く
• 形: 角丸ピルボタン、四隅ビス付きの角丸パネル、斜めにカットした帯見出し、上下の波形境界
• 温度感: 暖色の赤と黄が主役で温度は高い。紺・水色で引き締めて変化をつける

Colors

• セクションごとに赤→生成り→赤→白→紺/水色→黄→チャコール→赤と地色をはっきり切り替える
• 赤・黄・水色の地には同系色の細い斜めストライプを重ねる
• 主 CTA は赤のピル型、赤地の上だけは黄色ボタンに赤文字で反転させる
• 日付・期間の数字は赤の極太ゴシックで目立たせる
• 黄地の文字は黒ではなく濃い茶色、白パネル内の見出しは紺系にする
• ナビボタンは黒に近い濃グレー地に白文字で統一
• button-primary は文字 #FFF4F0 × 背景 #EB1A04 のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE1904、4.58:1）を使う。
• button-on-red は文字 #CD220F × 背景 #FEDC04 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#BF200E、4.51:1）を使う。

Typography

• 見出しはほぼすべて極太で、細いウェイトは使わない
• 大見出しは 2 行に分けて画面幅いっぱいまで大きく組む
• 日付は数字を大きく、年月日・曜日を小さくして強弱をつける
• 大見出しの上には小さめのリードを 1 行置く
• 本文も太め（700）で、黄・白地の上でもつぶれないようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンは 2〜3 個ずつ中央寄せで折り返す
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白パネルは左右 6% ほど空けて浮かせる
• キャラクター画像はパネルの端からはみ出させて動きを出す
• 開催地リストは左に県名ラベル、右に会場と日付の 2 段組
• 各セクションの最後に CTA ボタンを中央に 1 つ置く
• 大見出しは中央揃えまたは斜め帯の上に左寄せ

Elevation & Depth

• 白パネルとプレートには下方向にやや濃い影を付けて立体的に見せる
• CTA ボタンは下側を濃い色にして押せるボタン風にする
• お知らせカードは右下に濃い黄色の影
• キャラクター切り抜きは影なしで背景の上に直接置く

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キャラクターは背景を切り抜いて配置。動画とスマホ画面は角丸なしか小さい角丸の長方形
• セクション境界: 上下の波形（スカラップ）と、斜めにカットした帯で区切る
• ロゴ・お知らせ・白パネルは四隅にビス点を打ったプレート風にする
• 県名ラベルは白地の小さな四角に赤文字
• ナビボタンは小さめの角丸長方形にアイコン＋文字
• 星形の爆発バッジを見出しの横に添える

Components

• 赤ピル CTA（button-primary）: 赤のピル型ボタン。中央に白文字、右端に小さな三角の矢印
• 黄ピル CTA（button-on-red）: 赤地の上で使う黄色のピル型ボタン。文字は赤、右に三角
• アイコン付きナビボタン（nav-chip）: 濃グレー地に線アイコンと白文字。ページ内の各セクションへのリンク
• ビス留め白パネル（riveted-panel）: 四隅に小さなビス点がある白い角丸パネル。期間・お知らせ・動画をまとめて載せる
• 黄色お知らせカード（news-card）: 黄色のプレート。上に赤い日付、下に濃色の本文、右端に三角
• 斜め帯見出し（slanted-band-heading）: 濃い赤や紺の帯を斜めに入れ、白の極太文字で大見出しを置く
• 県名ラベル付き日程行（pref-label-row）: 左に白い四角の赤文字ラベル、右に白文字の会場名と日付
• 黄色番号リスト（numbered-list）: 黄色の大きな番号＋ドット、その横に小さなリードと白の項目名
• 星形バッジ（burst-badge）: 白いギザギザの星形に赤文字で地域名などを添える

Do's and Don'ts

Do - セクションごとに原色の地色を大胆に切り替える - 地色には同系色の斜めストライプを重ねる - 見出しは極太で大きく、2 行で迫力を出す - キャラクターやアイテムの切り抜きをパネルの端からはみ出させる - 各セクションの最後にピル型 CTA を 1 つ置く - 期間・日付は赤い大きな数字で強調する

Don't - 細い明朝や繊細な書体を使わない - くすんだ色や淡いパステル中心にしない - セクションの区切りを細い直線だけで済ませない - CTA を四角いボタンや枠線だけのボタンにしない - 余白を広く取りすぎて静かな印象にしない - 黄色の地に黒の細い文字を置かない

Page Structure

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

1. ファーストビュー（コラボの世界観と高揚感を一目で伝える）: 赤ストライプ地。上部に黄色のビス留めロゴプレート、白文字のリードを数行、下半分にキャラクターの集合切り抜き
2. 期間とナビゲーション（開催期間を示し、各企画へ案内する）: 生成り模様地の上に白パネル。期間を赤い極太数字で表示し、アイコン付きの濃色ナビボタンを並べる
3. 新着情報（最新のお知らせを伝える）: 白パネル内に黄色のお知らせカードを縦に並べ、赤い日付と本文を載せる
4. 動画紹介（動画でキャンペーンの雰囲気を見せる）: 極太見出しの下に動画タイトルと 16:9 の埋め込み動画を縦に並べる
5. 駅前イベント（巡回イベントの内容と日程を伝える）: 斜めの濃赤帯に白の大見出しと星形バッジ。集合キャラ、黄色番号リスト、地図、県名ラベル付き日程、黄色 CTA の順
6. 駅の装飾（装飾された駅を紹介する）: 上部を波形にした白地。装飾のイメージ図、緑の極太見出し、短い説明、赤 CTA
7. ラッピング列車（特別車両と運行期間を紹介する）: 紺の斜め帯に白の大見出し、水色ストライプ地に車両画像、車両名と左に線を引いた説明・期間、キャラ、赤 CTA
8. デジタルスタンプラリー（参加方法と景品抽選を伝える）: 波形で区切った黄色ストライプ地に茶色の大見出し。スマホ画面の画像と白パネルの説明、注釈、赤 CTA
9. オリジナルグッズ（グッズ販売へ誘導する）: チャコール地にロゴと白の大見出し、ビス留め白パネルに黒地ラベルの強調、アイテムの飾り、赤 CTA
10. フッター（ナビの再表示と権利表記）: 赤ストライプ地にロゴプレート、ナビボタン、白い小さな権利表記

Imagery

• キャラクターは背景を抜いた 3DCG 風の全身ポーズで、元気な動きのあるものを使う
• コイン・星・キノコ・はてなブロックなどの小さなアイテムを余白に散らす
• 地図は虹色グラデーションの立体風にし、赤いピンを立てる
• 実写は列車・改札・スマホ画面など、明るく彩度の高いものを使う
• 地域のシルエットを地色より少し濃い色で背景に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではヒーローを左にロゴとリード、右にキャラクターの横並びにする
• PC の期間表示は 1 行にまとめ、ナビボタンは 1〜2 行に収める
• PC の動画は 2 カラムのグリッドにする
• PC のイベントは左にキャラと地図、右に日程リストの 2 カラム
• PC では大見出しを 1 行にし、斜め帯を横に長く伸ばす
• PC のスタンプラリーは左にスマホ、右に白パネルの横並び

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