DESIGN.md — 黒とティールの荒々しいゲームティザー LP（Dark Street Brawler Game Teaser LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 黒地・キャラクター立ち絵・極太コンデンス見出し・グラフィティ・ティールの細枠・斜めカット
• 地の質感: 黒地にざらついたグラフィティや筆のかすれを薄く重ねる。動画部分には走査線ノイズを入れる。
• 形: 角丸はほぼ使わない。四角形と斜めの切り欠き、平行四辺形の枠が基本。
• 温度感: 夜の街のような寒色寄りのダーク。差し色の赤とティールで熱を加える。

Colors

• 地色はほぼ黒で統一する。濃紺や濃グレーは写真やテクスチャの陰で出す程度にとどめる。
• ティールは細い枠線、項目ラベル、スライダーの点など、線や小さな文字だけに使う。
• 赤はリード見出しの帯と筆跡の装飾に限る。1セクションに1か所まで。
• 白い面はMORE・再生などの小さなボタンだけに使う。
• 購入ボタンは各ストアのブランド色で塗り、白い細枠と白いロゴを載せる。
• 本文は白、注釈やフッターはグレーにして明度で階層を分ける。

Typography

• セクション見出しは英字1語にする。極太のコンデンス体で、頭文字を大きくしたスモールキャップ風に組む。
• 見出しは左寄せで画面幅の半分近くまで大きくする。製品仕様の見出しだけは中央に置く。
• 日本語の本文は字間を広めにし、行間を2.0前後にして写真の上でも読めるようにする。
• 写真の上に載せる文字は白に限り、背景の暗い部分に配置する。
• 動画見出しは同じ英単語を縦に4回並べる。1つだけを白い塗り文字にし、残りは中抜きにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。仕様表とボタンは中央寄せの幅狭ブロックにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション同士は余白を挟まず、全幅の写真や地色を直接つなげる。
• 見出しと本文は左端を12px前後にそろえる。
• 仕様表と購入ボタンは画面幅の約78%で中央に置く。
• 1セクションの高さは画面1〜2枚分にし、キャラクターの写真を背景いっぱいに使う。
• ニュースとキャラクターは横スライダーにし、矢印ボタンか番号表示を付ける。

Elevation & Depth

• 影はほとんど使わない。黒いパネルの重なりと写真の暗さで奥行きを出す。
• 写真の上の文字は、背景の暗い部分と弱いグラデーションで読みやすくする。
• トップへ戻るボタンは丸形にし、ティールの細枠で浮いて見せる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形、または斜めにカットした平行四辺形。キャラクター一覧は斜めの枠で横に並べる。
• セクション境界: 斜めのカット、白い細線、筆で擦ったような赤い筆跡
• ボタンとパネルは角丸なしの四角形を基本にする。
• 仕様表の各行は左上をティールの斜めの折れ線で装飾する。
• 購入ボタンは左上の角を斜めに落とした形にし、白い細枠を付ける。
• 見出し横のメニューアイコンは正方形にし、ティールの枠で囲む。

Components

• 英字セクション見出し（section-title-condensed）: 極太コンデンス体の英字1語。白文字で左寄せにする。
• 赤帯リード見出し（lead-red-band）: 赤い面の上に白い太字で2行のリードを載せる。見出しの直下に置く。
• MOREボタン（button-more）: 右寄せの白い四角形。黒い英字と、枠付きの小さな矢印アイコンを並べる。
• 仕様表の行（spec-row）: 黒いパネル。上にティールの小さなラベル、下に白い太字の値を並べる。左上をティールの斜めの線で装飾する。
• ストア購入ボタン（store-button）: 各ストアのブランド色で塗り、白いロゴと白い細枠を付ける。左上の角を斜めに落とす。縦に3つ並べる。
• ヒーロー内の告知バナー（hero-banner）: キャラクターの画像と文字を入れた横長バナー。ティールの細枠で囲み、角を斜めにカットする。
• スライダー矢印（slider-arrows）: 黒い正方形に白い矢印を入れる。見出しの右側に2つ並べる。
• トップへ戻るボタン（pagetop-button）: 黒い丸にティールの細枠を付け、白い上向き矢印を入れる。区切り線の上に重ねる。
• ニュースカード（news-card）: 正方形のサムネイル、日付、タイトルを縦に並べる。カードの右に白い縦線を引いて区切る。

Do's and Don'ts

Do - 地色は黒にし、キャラクターの写真やイラストを全幅で大きく見せる。 - 見出しは英字の極太コンデンス体1語にし、大きく左寄せで置く。 - 差し色はティールの線と赤の帯の2色に絞る。 - グラフィティや筆のかすれ、走査線のテクスチャを薄く重ねて街の荒々しさを出す。 - 購入ボタンはストアのブランド色を守り、縦に並べる。

Don't - 白や明るい地色のセクションを作らない。 - 丸いピル型ボタンや大きな角丸カードを使わない。 - パステルカラーやグラデーションの派手な塗りを増やさない。 - 日本語の見出しを大きく主役にしない。主役は英字の見出しにする。 - 写真の明るい部分に本文を重ねて読みにくくしない。

Page Structure

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

1. ファーストビュー（キャラクターとタイトルロゴで世界観を一目で伝える）: 夜の街を背景に主要キャラクター3人を重ねて描く。対応機種のロゴを左上に、言語切替を右上に置く。下部にロゴ、発売時期の一文、告知バナーをまとめる。
2. ニュース（最新のお知らせを知らせる）: グラフィティ柄の暗い地に英字見出しと矢印を置き、カードを横スライダーで見せる。
3. 動画（ゲームプレイの映像へ誘導する）: 中抜き文字を繰り返した見出しを置き、走査線入りの映像の静止画に白い再生ボタンを重ねる。赤い筆跡で装飾する。
4. 作品紹介（シリーズの歴史と新作の魅力を伝える）: 全幅のキャラクター写真の上に、英字見出し、赤帯のリード、白い本文、MOREボタンを重ねる。
5. ストーリー（世界観とあらすじで没入感を高める）: 敵キャラクターの写真を全幅で敷き、長めの本文を白文字で重ねる。
6. キャラクター（登場人物を一覧で見せる）: 斜めの枠でキャラクターを横に並べるスライダー。左下に英字見出しと番号表示を置く。
7. 製品情報・購入（仕様を示し、ストアの購入ページへ誘導する）: 中央に英字見出しを置く。ティール装飾付きの黒いパネルを縦に並べ、その下にストアボタンを3つ置く。
8. フッター（公式リンク、関連ロゴ、権利表記を示す）: 黒地の中央にリンクを並べる。下に企業と機種のロゴ群、細い区切り線、グレーの注記を置く。

Imagery

• キャラクターはセルルックの3Dか、劇画調のイラストにする。拳を構えるなど動きのあるポーズで全身または半身を描く。
• 背景はネオンがにじむ夜の都市にし、紫と青の寒色で暗く仕上げる。
• グラフィティ文字やスプレーのかすれを、モノクロで薄く地に敷く。
• 動画の静止画には走査線やブラウン管風のノイズを重ねる。
• 赤い筆で擦ったような跡を、セクションの端に少しだけ入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではヒーローのキャラクターを左に、ロゴと告知を右に置く横長の構図にする。
• PCのニュースはカード3枚を横に並べて一覧表示する。
• PCの動画は中抜き文字の見出しを左に、映像を右に置く2分割にする。
• PCの仕様表は2カラムにし、ラベルと値を横並びにする。
• PCのストアボタンは3つを横に並べる。
• PCのフッターは、ロゴ群と注記を左に、公式リンクを右に置く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 行書くと起動時に読み込まれる。