DESIGN.md — オレンジ×黒の荒々しい筆致ゲーム告知 LP（Grunge Orange Delinquent Otome Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: グランジ・筆の帯・有刺鉄線・破れ紙・ヤンキー学園・特典一覧
• 地の質感: オレンジ地にかすれた墨のしみ。白い面は端がギザギザに破れた紙のよう。
• 形: 角は直角を基本にし、黒の筆の帯を見出しの台座にする。ボタンだけ小さな角丸。
• 温度感: 暖色で熱く、荒っぽいが楽しい雰囲気

Colors

• 地はかすれたオレンジにし、情報は白い破れ紙の上に載せる
• 見出しは黒い筆の帯に白い太字で入れる
• 購入ボタンだけ赤にして目立たせる
• 強調語と箇条書きの記号はオレンジにする
• セクションの境目に黒い有刺鉄線を横に通す
• button-primary は文字 #FFFFFF × 背景 #EC432C のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E22D14、4.55:1）を使う。

Typography

• 見出しは極太のゴシックで黒帯の中に入れる
• キャッチは筆文字にし、一部の字だけ大きくする
• 本文は中央ぞろえで短く改行する
• 特典名は太字で書き、その下に細字で説明を添える
• 英字の名前は縦に長い字体で背景に大きく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典は画像の下に説明を縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 白い紙面はオレンジ地の上に画面幅の約 85% で置く
• 特典の 1 件は画像・説明・右寄せの購入ボタンを 1 組にする
• 店舗名の見出しのあとに小見出しを 2 段で続ける
• 有刺鉄線の線で大きなセクションを区切る

Elevation & Depth

• 影はほぼ使わず平面で見せる
• 画像に白いフチと薄い影をつけ、写真を貼ったように見せる
• 奥行きは破れ紙を重ねて出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いキービジュアル。缶バッジの画像は円形にする
• セクション境界: ギザギザの破れ紙の端と有刺鉄線の線
• 見出しの台座は端がかすれた筆の帯
• ボタンは横長の長方形で右に »
• 白い紙面の左右の端は不規則に破れた形
• 装飾はくっきりした角で描き、柔らかい形を避ける

Components

• 購入ボタン（button-primary）: 赤の長方形で白い太字、右端に »。特典ごとに右下へ置く
• 筆の帯の見出し（brush-heading）: 黒い筆の帯に白い太字を入れ、下に三角の突起をつける
• 店舗名ラベル（shop-label）: 斜めに走る黒い筆の形に白文字で店舗名を入れる
• 筆の下線の小見出し（underline-subhead）: 黒い太字の下に、かすれた黒い筆の線を引く
• オレンジの丸番号リスト（numbered-list）: オレンジの丸に白い数字を入れ、セットの中身を並べる
• 破れ紙の白い面（torn-paper-panel）: 端がギザギザの白い面。製品情報や特典をのせる
• 黒板風のキャッチ帯（catch-banner）: 深緑の帯を少し傾け、白文字の紹介文を入れる
• 有刺鉄線の区切り（barbed-divider）: 黒い有刺鉄線のイラストを横幅いっぱいに通す

Do's and Don'ts

Do - 地はかすれたオレンジにし、墨のしみを散らす - 見出しは必ず黒い筆の帯にする - 購入ボタンは赤に統一し、特典ごとに置く - 白い面の端を破れた形にする - 有刺鉄線でセクションを区切る

Don't - パステル色や柔らかい丸い形を使わない - 大きな角丸のカードやピル型のボタンを使わない - オレンジ以外の地の色を増やさない - 見出しを細い字や明朝体にしない - 購入ボタンの色を店舗ごとに変えない

Page Structure

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

1. ファーストビュー（作品の世界観と発売日を伝える）: キャラクター集合のイラストにロゴと発売日を重ね、深緑のキャッチ帯と予約特典の小バナーを置く
2. キャッチコピー（作品の魅力を一言で伝える）: 筆文字のキャッチを黒い筆の帯に入れ、その下に紹介文を中央ぞろえで 3 行置く
3. 特長（ゲームの特長を 3 つ見せる）: 黒い筆の見出しとゲーム画面を左右交互に並べ、説明を短く添える
4. ストーリー（あらすじを伝える）: 教室の写真を淡く敷き、2 作のタブの下に中央ぞろえの短い文を続ける
5. キャラクター（登場人物を紹介する）: 大きな英字名と立ち絵、白抜きの名前ラベル、左右の矢印、番号 1/8 を並べる
6. 製品情報（仕様と価格を伝える）: 写真の背景に破れ紙の白い面を置き、表を 2 列で並べる
7. 予約特典（共通の特典を見せる）: 白い面に告知画像を 1 枚大きく置く
8. 店舗別の特典（各店舗の特典を比べて購入へ導く）: 店舗ラベル、小見出し、画像と内容のリスト、赤い購入ボタンの組を繰り返す
9. フッター（著作権を表記する）: 有刺鉄線の下に黒い帯を置き、小さな白文字を入れる

Imagery

• アニメ調のキャラクターイラストを主役にする
• 学ランの不良学生が集合する構図にする
• 背景には落書きの廊下や教室の写真を使う
• 特典の商品は白地で撮った写真を整然と並べる
• 装飾は墨のしみ、筆の線、有刺鉄線、破れた紙で作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 720px 幅の白い面を置く。SP は幅 90% にする
• 特典は PC では画像と説明を左右に並べる。SP では縦に積む
• 特長は PC では左右交互に並べる。SP では画像を上に置く
• キャラクター紹介は SP では英字名を小さくし、立ち絵を画面幅いっぱいにする
• 購入ボタンは 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 行書くと起動時に読み込まれる。