DESIGN.md — 宇宙青×赤の特撮コラボゲーム LP（Cosmic Hero Collab Game Campaign LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 星空背景・縁取り立体ロゴ見出し・セクション色の切り替え・ゲーム画面カード・集中線・放射光・期間バッジ
• 地の質感: 星屑のボケ、金属のヘアライン、放射状の集中線、光彩エフェクト
• 形: 角を斜めに落とした多角形の見出し台座、角丸の小さいカード、ピル型ボタン
• 温度感: 寒色（青・紺）がベースで、赤と蛍光色が熱さを加える

Colors

• 外側は星空の青グラデで固定し、中央カラムの地色をセクションごとに切り替える
• セクションの地色は紺青・赤・金属グレー・黒の 4 種類を順番に使う
• 見出しは白・赤・金色の文字に、黒や紺の太い縁取りを重ねる
• 主 CTA はライムイエロー、2 つ目のボタンはマゼンタにして、地色との補色関係で目立たせる
• 本文中の強調語はマゼンタかピンク
• 注意事項は淡いラベンダーの箱に入れ、濃い文字で書く
• page は文字 #292C45 × 背景 #5E70D2 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#8290DC、4.53:1）を使う。
• button-secondary は文字 #F2F9FF × 背景 #E040B0 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D0229C、4.5:1）を使う。
• button-sub は文字 #F2F9FF × 背景 #A2A4AD のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#6E717D、4.58:1）を使う。

Typography

• 見出しは画像化を前提に、太い縁取りとドロップシャドウ、グラデーションを付ける
• 見出しの直下に小さい英字ラベルを置く
• 本文は太字で中央揃え、1 行を短めにする
• 日付と期間は濃紺のバッジに数字を大きく入れる
• 注釈は※付きで小さく、薄めの色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC でも中央に固定幅のカラム）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• カラム内のセクションは端まで地色で塗る
• イベントは画像バナー＋遊び方のスライダーで 1 カードにまとめ、縦に積む
• 賞品は 2 列のカードを並べる
• CTA は中央に置き、その下に注釈と小さいサブボタンを添える
• スライダーの左右には矢印、下にはドットを付ける

Elevation & Depth

• 見出しやロゴには強いドロップシャドウと光彩を付ける
• カードは黒やグレーの太い枠で囲み、影は使わない
• キャラクターの背後に放射状の光を置き、浮き出して見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: キャラクターは切り抜いて使い、ゲーム画面は角丸の矩形に収める
• セクション境界: カラム中央に台形の切り欠きタブを付けて、地色を切り替える
• 見出し台座やラベルは角を斜めに落とした多角形にする
• ボタンは完全なピル型にし、矢印か外部リンクのアイコンを付ける
• キャラクター一覧のアイコンは角丸の正方形にする

Components

• 立体ロゴ見出し（section-title）: 縁取りした極太文字。後ろに六角形のエンブレムを敷き、下に英字ラベルを付ける
• 主 CTA ボタン（button-primary）: ライムイエローのピル型ボタンに外部リンクのアイコンを付ける
• マゼンタボタン（button-secondary）: 後半キャンペーンの参加ボタン
• 小さいサブボタン（button-sub）: グレーのピル型。詳細を見るための補助ボタン
• 開催期間バッジ（period-badge）: 濃紺の帯に「開催期間」ラベルと日付を入れる
• 賞品カード（prize-card）: 上部に色付きの見出し帯、中は淡い地、下に当選人数の帯を付ける
• イベントカード（event-card）: バナー画像＋遊び方の帯＋スクリーンショットのスライダー
• 注意事項ボックス（notice-box）: 淡いラベンダー地に対象者や店舗を箇条書きにする
• 追従メニュー（floating-menu）: PC の右下に固定する黒いメニュー。セクションへのリンクを並べる

Do's and Don'ts

Do - セクションごとに地色をはっきり切り替えて、リズムを作る - 見出しは必ず縁取りと影を付けて立体的にする - キャラクターの背後には放射光か集中線を置く - 期間・賞品・人数は数字を大きく見せる - スライダーには矢印とドットを付けて、操作できると分かるようにする

Don't - 淡色ベースの余白が多い上品なデザインにしない - 細い明朝体の見出しを使わない - CTA を地色に近い色にしない - 装飾のない平らな見出しにしない - 写真の実写素材を主役にしない

Page Structure

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

1. ファーストビュー（コラボ開催を告知する）: 宇宙背景にキャラクターを集合させ、両ブランドのロゴと×、大きなタイトル、期間の帯を置く
2. アプリ導線（ダウンロードを促す）: 黒地にストアバッジを並べ、遊び方へのピル型ボタンを置く
3. 新キャラ紹介（目玉キャラを見せる）: 紺地。光背付きのキャラスライダー、アイコンの列、ゲーム画面、スキル説明
4. 限定お着替え（限定衣装を訴求する）: 赤地にセット名ロゴとキャラを置き、黒枠の補足ボックスを添える
5. 剣士お着替え（入手できる衣装を一覧で見せる）: 金属グレー地に 2 列で放射光とキャラを置き、下に台座ラベルを付ける
6. イベント（期間中のイベントを紹介する）: 黒地にイベントカードを縦に積む
7. キャンペーン（SNS 施策・店舗施策を紹介する）: 紺紫地に賞品カード 2 列、CTA、注意事項ボックス
8. 復帰・新規施策（新規と復帰のユーザーを呼び込む）: 大きな数字を使った一枚バナー
9. コラボ動画（動画へ誘導する）: ダークグレーの金属地にサムネイルのスライダーを置く
10. フッター（ナビゲーション・規約・権利表記）: 黒地にリンク、ストアバッジ、アプリ情報、規約リストを置く

Imagery

• 2〜3 頭身のデフォルメキャラクターを切り抜いて大きく配置する
• 背景は星空のボケと宇宙の光で埋める
• キャラクターの背後には白く光る放射光や集中線を入れる
• ゲームのスクリーンショットは枠付きのカードに収める
• 爆発や炎のエフェクトでにぎやかさを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は約 480px 幅（元画像では約 950px）のカラムを中央に固定し、両側に星空背景を見せる
• PC では左側にコラボロゴを、右下に追従メニューを固定する
• SP はカラムを全幅にし、外側の背景は使わない
• 賞品カードは SP でも 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 行書くと起動時に読み込まれる。