DESIGN.md — 紺×臙脂×金の戦国ゲームコラボ LP（Samurai Gold Navy Collab Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 戦国・金箔・矢絣柄・対決・イベント告知・和モダン
• 地の質感: 濃紺に矢絣柄をうっすら敷き、金のグラデーション帯と金箔風パネルを重ねる
• 形: 雲形のシルエット背景、交差した刀のアイコン、角の立った金帯、角丸のピル型サブボタン
• 温度感: 暗く重厚な地に金と赤で熱量を出す

Colors

• 企画ごとに地色を濃紺と臙脂で切り替える
• 小見出しは金のグラデーション帯に黒または白文字
• 紺地の強調語は黄色、淡色地の強調語は赤
• 期間表示は黒いリボンに白文字
• 白は本文パネル・カード・ボタンに限定
• フッターだけ淡いグレー地で落ち着かせる

Typography

• 企画ロゴは筆文字に金縁と黒影を付けて画像化する
• 本文はゴシックで太め、中央揃えが基本
• 注釈は※付きで小さく左揃え
• 期間・日付は太字で目立たせる
• 見出しの前後にダッシュを付ける（例: – 見出し –）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、景品・報酬カードは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 企画ごとに交差刀アイコンと金ラインで区切る
• 見出し→期間リボン→説明→金帯小見出しの順で積む
• 画面イメージは右、説明は左の2分割も可
• 注釈は該当ブロック直下に置く
• 各企画の末尾にピル型ボタンを中央配置

Elevation & Depth

• 影はほぼ使わずフラット
• 金箔パネルは金の細枠で浮かせる
• 筆文字ロゴのみ強いドロップシャドウ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キャラ画像は角丸正方形、ゲーム画面はスマホ枠で縦長
• セクション境界: 金の水平線の中央に交差した刀アイコン、雲形シルエット背景
• 金帯は角丸なし
• 期間リボンは両端が矢じり型
• メニューは角丸ピルに下向き矢印

Components

• ピル型サブボタン（button-pill）: 白地に黒枠、右端に黒丸矢印
• 公式サイト誘導ボタン（button-primary）: 白地に太い黒枠、赤文字の横長ピル
• 金帯小見出し（gold-band-heading）: 幅いっぱいの金グラデーション帯
• 期間リボン（period-ribbon）: 黒の両端矢じり型リボンに白い期間文字
• メニューボタン（menu-tab）: 水色やピンクのピルに明朝風文字と下矢印
• 景品カード（prize-card）: 白カードに商品写真、赤の賞バッジと説明
• 対決スコアパネル（versus-panel）: 左紺右赤の市松地にキャラアイコンとスコア
• 当選数テーブル（result-table）: 赤ヘッダの表、行はピンクとグレー交互

Do's and Don'ts

Do - 企画ごとに紺か臙脂で地色を切り替える - 見出しには必ず金の要素を入れる - 期間・日付を目立つ位置に繰り返し置く - 画面イメージには拡大アイコンを付ける - 背景に矢絣などの和柄を薄く敷く

Don't - パステルや明るい地色を広く使わない - 細い明朝だけで見出しを作らない - ボタンを角張った四角にしない - 注釈を省いて情報を減らしすぎない - 金をフラットな黄色で代用しない

Page Structure

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

1. ファーストビュー（対決コラボの世界観を伝える）: 左右に武将、中央に列車と筆文字ロゴ、下に金帯で実施期間
2. メニュー（各企画へ案内する）: 濃紺地に色違いのピル型ボタンを4つ横並び
3. 現在の戦況（対決状況を見せる）: 金箔パネル内に赤見出しと対決スコアパネル
4. 連動企画（投票）（投票参加とグッズ抽選を促す）: 臙脂地、雲形背景に筆文字ロゴと期間リボン、淡ピンクの本文パネル
5. 参加方法（手順を時系列で説明）: 金帯見出しで期間ごとに区切り箇条書き
6. 景品・当選数（賞品を見せる）: 3列の景品カードと赤ヘッダ表
7. ミッション企画（駅訪問で報酬獲得を伝える）: 濃紺地にキャラ画像、画面イメージ、対象駅リスト、2列報酬カード
8. 収集企画（アイテム交換を伝える）: 番号付き手順と画面イメージ、金枠の限定アイテム枠
9. 対戦企画（毎日の参加を促す）: 操作フロー画像を矢印で横に並べる
10. ダウンロード・フッター（アプリ導入と公式誘導）: 淡グレー地にアプリ画像、ストアバッジ、白ピルボタン、SNSアイコン

Imagery

• 武将は写実的なCGで甲冑姿、炎や稲妻の背景
• 新幹線などの乗り物を前景に合成して対決感を出す
• ゲーム画面はスマホ枠付きのスクリーンショット
• 背景に矢絣・市松の和柄と雲形シルエット
• 区切りに交差した刀の線画アイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅の固定カラムで左右は地色
• SP はカラム幅を 90% にする
• メニュー4ボタンは SP で2×2に並べる
• 景品3列は SP で横スクロールか2列
• 画面イメージ横並びは 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 行書くと起動時に読み込まれる。