DESIGN.md — 墨黒×朱×山吹の和風アクションゲームLP（Bold Retro Brawler Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 墨と朱・古紙テクスチャ・筆文字見出し・漫画調キャラ・機種別購入導線
• 地の質感: 和紙・古紙のざらつき、墨のにじみ、炎のような筆のかすれ
• 形: 直角ベースの四角ボタンと枠線付きの画像。特典ラベルだけピル型
• 温度感: 暖色寄りで熱量が高い。黒地で締める

Colors

• セクションの地は黒→朱→古紙→黒→山吹の順に切り替え、単調にしない
• 主CTAは緑1色だけにし、黒地でもベージュ地でも目立たせる
• 黒地の見出しは金〜黄のグラデーション筆文字にする
• 本文中のキーワードは朱赤または黄で色を変えて強調する
• 機種別ボタンには各プラットフォームのブランド色（濃赤・青・紫）を使う
• 特典カードは白枠と濃灰ボタンで山吹地から浮かせる

Typography

• 見出しは筆文字で墨のかすれを生かし、中央に置く
• 物語・説明の本文は明朝で講談調に見せる
• UIやボタン、表はゴシックで読みやすくする
• 難読語にはルビを振る
• 強調語は鉤括弧で囲み、色を変える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードは SP で 2 列、PC で 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しの下に 24〜32px 空ける
• キャラクターのイラストは枠の外へはみ出させ、立体感を出す
• セクションごとに地の色を全幅で塗り分ける
• 製品情報は「黒ラベル＋値」の 2 列の表にする
• 各セクションの最後に詳細ボタンを中央に置く

Elevation & Depth

• 影はほとんど使わない。枠線と地の色の差で階層を作る
• 説明ボックスは白地に細い影を付け、古紙の上で浮かせる
• キャラクターのイラストには太い黒の輪郭線を付けて前に出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: スクショは四角に切り、赤か白の細い枠を付ける。キャラクターは切り抜きにする
• セクション境界: 破れた紙や墨のにじみのような不定形の境界。黒地どうしは直線で区切る
• ボタンは角丸なしの長方形にし、右側に細い矢印線を入れる
• 特典の店舗名ラベルだけ白いピル型にする
• 雲・炎の和柄を隅に飾る

Components

• 緑の購入ボタン（button-primary）: 四角の緑ボタン。左に文字、右に長い矢印線を置く
• 機種別購入ボタン（button-platform）: 機種のロゴと矢印線を並べる。地の色は機種のブランド色
• 筆文字見出し（heading-brush）: 中央揃えの筆文字。黒地では金色にする
• 章の説明ボックス（story-card）: 白いボックスに朱色の章番号と筆文字の題、明朝の本文を入れる。キャラクターと重ねて置く
• 製品情報表（spec-table）: 左に黒地＋白枠のラベル、右に値を書く表
• 特典カード（bonus-card）: 白い画像枠、白いピル型の店舗名、特典内容、購入ボタン 2 段の順に並べる
• 固定ナビ（nav-bar）: 黒い帯に白い項目を並べ、右端に赤い購入ボタンを置く
• 動画の再生ボタン（video-play）: 暗くしたキービジュアルの中央に白い丸の再生アイコンを置く

Do's and Don'ts

Do - キャラクターを大胆に切り抜いて画面からはみ出させる - 地の色を交互に切り替えてセクションにリズムを付ける - 見出しは筆文字、本文は明朝に統一する - 購入導線は各セクションの最後に繰り返し置く - 和紙・墨・炎の質感を背景に重ねる

Don't - パステルカラーや淡い色にしない - ボタンを丸いピル型にしない（店舗名ラベルを除く） - 均一なフラット背景だけで構成しない - 見出しに細いゴシックを使わない - CTAの色を複数混ぜない

Page Structure

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

1. ファーストビュー（作品の世界観を伝え、発売中であることを示す）: 古紙地の左にタイトルロゴと緑の購入ボタン、右にキャラクターの集合イラストを置く。左上に対応機種のロゴを並べる
2. ナビゲーション（ページ内を移動しやすくする）: 黒い帯にメニューを並べ、右端に赤い購入ボタンを置く
3. お知らせバナー（最新情報を告知する）: 黒地に横長バナーを置くスライダー。左右に黄色の丸い矢印
4. 動画（PVを見せる）: 暗くしたビジュアルの上に再生ボタンを置く
5. 導入・世界観（物語のあらすじを伝える）: 朱赤の墨地に主人公の大きなイラストを置き、右に明朝のリード文。最後の一文は炎の筆跡の上に載せる
6. ストーリー（章ごとのあらすじを見せる）: 古紙地に筆文字の見出し、キャラクター、白い説明ボックス、スクショ 2 枚、緑のボタンの順に置く
7. システム（遊び方の特長を伝える）: 黒地でスクショと説明文を左右交互に並べる。小見出しは朱と白の筆文字
8. 製品情報・購入（仕様を示して購入へ誘導する）: モノクロのキャラクター背景に、パッケージ画像と仕様表を置き、下に機種別ボタンを3つ並べる
9. 店舗特典（予約・購入の店を選ばせる）: 山吹色の格子模様の地に、特典カードを3列のグリッドで並べる
10. フッター（SNSと権利表記を載せる）: 黒地にSNSの丸アイコン、関連ロゴ、機種ロゴ、小さな注釈を置く

Imagery

• 太い黒の輪郭線で描いた漫画調のデフォルメキャラクター。表情は誇張する
• 背景は古紙・墨のにじみ・炎の筆跡・雲紋を重ねた和風テクスチャ
• ゲーム画面のスクショは四角に切り、細い枠で囲む
• 背景用の人物は暗いモノクロに落としてテクスチャとして使う
• 特典の画像は白地に商品を置いたシンプルな撮り方にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最大幅およそ 960px の中央寄せ。SP は 1 カラムにする
• ファーストビューは SP ではロゴを上、キャラクターを下に縦に積む
• システムの左右交互レイアウトは SP では画像→文の縦積みにする
• 特典カードは PC で 3 列、SP で 2 列（文字が多い場合は 1 列）
• ナビは 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 行書くと起動時に読み込まれる。