DESIGN.md — 赤×黒の漫画コマ風スマホゲーム LP（Manga Panel Action Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 漫画コマ・斜めパネル・赤帯見出し・SDキャラ・集中線・黒×赤×白
• 地の質感: 黒地に濃淡グレーのコマ割り線と集中線、網点ドットを重ねた印刷漫画風の質感
• 形: わずかに傾いた四角パネル、太い黒フチ、斜めに切った帯、吹き出し形の雲枠
• 温度感: 赤と黒の高コントラストで熱量が高く、白パネルで読みやすさを確保する

Colors

• 地は黒のコマ割り柄を基本にし、白パネルで読ませる
• 後半のキャラ・仕様は薄灰地に切り替える
• 赤は見出し帯・ラベル・本文の一部強調に限定する
• 本文は黒、強調語だけ赤にする
• パネル・カードは必ず黒の太フチで囲む
• FV は赤〜黄の放射グラデで最も派手にする

Typography

• 英字見出しは斜体＋白フチ＋黒影で立体的にする
• 日本語キャッチは斜体の極太で、行下に赤い筆線を引く
• 本文も太字にして漫画のセリフ感を出す
• 強調は赤文字のみ。下線や背景マーカーは使わない
• 見出しは短く言い切り、感嘆符で勢いをつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラ一覧だけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 白パネルは左右 6% 程度の余白で中央配置
• パネルとゲーム画面を交互に縦積みする
• キャラ画像をパネル角に重ねてはみ出させる
• 英字見出しは画面幅いっぱいの赤帯の上に置く
• SPEC は太枠の中にラベル帯と値セルを交互に並べる

Elevation & Depth

• 影はほぼ使わず、黒い太フチで立体感を出す
• 英字見出しだけ黒のオフセット影を付ける
• キャラ切り抜きは白フチ＋色付きフチで浮かせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラは輪郭切り抜き。キャラカードは角を斜めに落とした縦長の四角
• セクション境界: 直線で切り替え、パネル自体を 2〜3 度傾ける
• パネルは平行四辺形気味に少し傾ける
• 吹き出しの雲形枠でキャッチを囲む
• キャラカードは角を一つ斜めに切る
• ボタンは小さい角丸の四角

Components

• ストアボタン（store-buttons）: 黒地に白文字のストアバッジを 2 つ横並び。集中線柄の白帯中央に置く
• 英字見出し帯（section-title-band）: 斜めに切れた赤帯の上に斜体の極太英字。端に網点を付ける
• 赤帯付きパネル（panel-header）: 黒フチの白パネル上部に赤帯の白抜き見出しを載せる
• 傾いた本文パネル（tilted-panel）: 白地・黒太フチで少し傾け、斜体キャッチ＋赤下線＋本文を入れる
• ゲーム画面フレーム（screenshot-frame）: 黒い太枠の端末風フレームにゲーム画面を縦長で入れる
• キャラカード（character-card）: 黒フチの縦長カードに SD キャラ顔＋下に作品ロゴ。スライダーで送る
• 仕様表（spec-table）: 黒太枠の中に赤ラベル帯と灰色の値セルを交互に積む
• SNS 帯（sns-banner）: 左が黒地に白英字の SNS 誘導、右がカラフルな告知バナーの 2 分割

Do's and Don'ts

Do - 黒いコマ割り柄の地を広く取る - キャラをパネルからはみ出させて動きを出す - 英字見出しは斜体＋赤帯で統一する - 本文の強調語だけを赤にする - 枠はすべて黒の太線で描く

Don't - 大きな角丸やピル型ボタンを使わない - パステル色や淡いグラデを主役にしない - 細い明朝体を使わない - パネルを傾けずに整列させすぎない - 赤を広い背景に多用しない

Page Structure

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

1. ファーストビュー（作品世界とキャラの多さを一目で伝える）: 赤黄の放射背景にキャラ集合絵とロゴ。全面ビジュアル
2. ダウンロード CTA（すぐインストールさせる）: 灰色の集中線と雲形の白地に、太字見出し＋ストアボタン 2 つ。両脇にキャラ
3. SNS・告知リンク（公式 SNS と情報ページへ誘導）: 黒い SNS 帯とカラフルなバナーを左右 2 分割
4. 提携ロゴ帯（関連媒体を示す）: 白地にコマ線を薄く敷き、ロゴを中央に配置
5. 動画（ゲームの動きを見せる）: グレーのグラデ地に白の大きな英字。黒枠の動画スライダーと左右キャラ
6. ゲーム概要（どんなゲームかを説明）: 黒コマ柄の地に赤帯見出し付き白パネル。雲形枠のキャッチと本文、ゲーム画面
7. バトルシステム（遊び方の魅力を伝える）: 傾いた白パネルに斜体キャッチ＋赤下線、強調赤の本文。下にゲーム画面
8. キャラ集結の訴求（登場キャラの多さを伝える）: 見出し帯なしの傾いたパネルと編成画面のスクショ
9. キャラクター紹介（登場キャラを一覧で見せる）: 薄灰地に赤帯英字見出し。2 列のキャラカードをスライダーで送り、最後に今後の告知
10. 仕様（基本情報を示す）: 赤帯英字見出しと黒太枠の仕様表
11. シェア・フッター（共有と法務表記）: SNS 丸アイコン、注釈、灰色地のリンク一覧とロゴ

Imagery

• 2〜3 頭身の SD キャラを白フチ＋色フチで切り抜く
• キャラは武器やポーズで動きを出し、斜めに配置
• 背景にコマ割り線・集中線・網点を薄く重ねる
• ゲーム画面は縦長スクショを黒枠に入れる
• FV は放射線とカラフルな紙吹雪（菱形・十字）で賑やかに
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px 幅で、FV は横長ビジュアルにする
• PC の概要・システムはパネルとスクショを左右 2 カラムにし、交互に入れ替える
• PC のキャラカードは 5 列×2 段
• PC の仕様表はラベルと値を横並びの行にする
• フッターリンクは PC で 1 行に並べる

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