DESIGN.md — 深紅×漆黒の極道アクションゲームLP（Crimson Noir Action Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、和風、情報量多め・訴求型
• キーワード: 深紅と漆黒・極太英字見出し・縦書きの墨文字・斜めの帯・写実的なゲーム画面・硬派
• 地の質感: 赤地にうっすらと龍の紋様と和紙のムラ。黒地には墨絵風の装飾を薄く入れる
• 形: 角丸なしの四角形が基本。見出しの帯は斜めにカットし、画像は角を落とさず四角いまま置く
• 温度感: 熱く重い。前半の赤は熱気、後半の黒は冷たさと闇を表す

Colors

• ページの前半は深紅、後半は漆黒を地にし、色で世界観を2つに分ける
• ページの冒頭と商品一覧では、画面を左右で赤と黒に塗り分けて2作品を並べる
• 黄色は購入・予約ボタンだけに使い、ほかの要素には使わない
• 赤地のサブボタンは黒地に白文字にする。黒地では明るい赤地に白文字にする
• 黒地の小見出しは明るい赤、赤地の小見出しは黒か白にする
• 本文はほぼ白で書き、注記だけグレーにする
• product-card は文字 #B81317 × 背景 #010102 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#D3D3E9、4.54:1）を使う。

Typography

• 英字見出しは画面幅いっぱいまで大きくし、縦に回転させるか斜めに置く
• 斜めに置いた英字見出しには、和文のサブキャッチを白地の帯や赤い帯に載せて添える
• 和文の見出しはかなり太いゴシックで書き、飾りは付けない
• 情念を表す台詞は明朝の縦書きにして、背景に何本も並べる
• 本文は小さく抑え、読ませるより雰囲気を見せる配分にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介は写真とテキストを重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 英字見出しは左右の端に縦に寄せ、本文ブロックは中央にまとめる
• 各ブロックは『小見出し→画像→ラベル→本文→READ MOREボタン』の順に積む
• 人物紹介は写真を右に寄せ、テキストを左に置いて横長の行を重ねる
• 見出しの帯はセクション境界にまたがるように斜めに配置する
• 商品一覧はグレーのパネルの中に黒いカードを並べる

Elevation & Depth

• 影はほぼ使わない
• 奥行きは写真の暗いグラデーションと文字の重なりで出す
• ラベルは画像の下端に黒→透明のグラデーションを敷いて重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま切り抜く。赤い細枠を付けることもある。人物写真は背景ごとフェードさせる
• セクション境界: 斜めの赤い帯と、左右の色の塗り分けで区切る
• 角丸は使わない
• ボタンは角のある細長い長方形にし、右端に三角の矢印を置く
• 見出しの帯は約8度傾ける

Components

• 購入ボタン（button-buy）: 黄色の長方形に黒い太字。右端に矢印を付ける
• READ MOREボタン（button-readmore）: 細長い長方形のボタン。赤地では黒、黒地では赤の地に白文字。右端に三角を置く
• 斜めの英字見出しと帯（slant-heading）: 巨大な赤い英字の下に、傾けた赤い帯を敷き、和文のサブキャッチを白文字で載せる
• 縦組みの英字見出し（vertical-title）: 画面の端に黒または赤の英字を90度回転させて置く
• 画像の左下ラベル（image-label）: スクリーンショットの左下に、太字の地名を白文字で重ねる。下に赤または黒のグラデーションを敷く
• 人物紹介の行（cast-row）: 肩書き→名前→台詞→説明文の順に縦に並べ、右側には黒く溶けていく人物写真を置く
• 商品エディションのカード（product-card）: グレーのパネルの中に黒いカードを置き、赤字のエディション名、パッケージ画像、購入ボタンの順に並べる
• 製品仕様の表（spec-table）: 赤地の上に、項目名と値を左右に並べ、暗い赤の罫線で区切る

Do's and Don'ts

Do - 赤地と黒地を大きな面で切り替えて、2つの世界観を示す - 英字見出しは常に画面からはみ出すくらい大きく扱う - 背景に縦書きの明朝の台詞を重ね、情念を出す - 黄色は購入導線だけに使う - 写真は暗く重い色調で、コントラストを強くする

Don't - 角丸やピル型のボタンを使わない - パステルカラーや明るい背景を使わない - 黄色を装飾に使わない - 細くかわいいフォントを使わない - 余白を広く取りすぎて軽く見せない

Page Structure

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

1. ファーストビュー（2作品の同時発売と、発売日・価格を伝える）: 画面を左右で赤と黒に分け、それぞれに主人公とロゴを置く。背景に縦書きの台詞を流し、上部に固定の黄色い予約ボタンを置く
2. 体験版の告知（体験版の配信を告知する）: 黒いバナーに赤の太字で告知し、赤枠で囲む
3. メディア（トレーラーやCM動画を見せる）: 英字見出しの下に、動画のサムネイルを横に送るカルーセルを置く
4. イントロ（作品のコンセプトを伝える）: 2人の人物の写真に大きな白い和文コピーを重ね、下に本文を置く
5. 作品1のストーリー（あらすじを伝える）: 赤地の端に縦組みの英字を置き、メインビジュアルとキャッチを添える
6. 作品1のキャスト（出演者を紹介する）: モノクロの顔写真を縦長に並べ、名前を縦書きにする
7. 作品1のバトル・遊び（ゲームシステムを伝える）: 小見出し→スクリーンショット→ラベル→本文→ボタンを繰り返す
8. 作品2のビジュアル（黒地の作品へ切り替える）: 黒地に赤と白の明朝の台詞を斜めに流し、大きなロゴを置く
9. 作品2のストーリー・キャスト（物語と登場人物を伝える）: 斜めの赤い帯の見出しを置き、人物紹介の行を縦に重ねる
10. 作品2のバトル・遊び（遊びの要素を伝える）: 赤枠のスクリーンショットに赤い小見出しを付けて並べる
11. 遊べるスポット（やり込み要素が多いことを示す）: サムネイルをタイル状に敷き詰める
12. 予約特典（特典で予約を後押しする）: 写真と明朝の特典名を横長のバナーにまとめる
13. 商品一覧（エディションを比べて購入へ導く）: グレーのパネルに黒いカードを並べ、黄色の購入ボタンを置く
14. 仕様・フッター（製品情報と関連リンクを示す）: 赤地に仕様の表、関連バナーのカルーセル、ロゴを並べる

Imagery

• 写実的な3DCGで描いた、強面の男性人物。暗い背景にスポットライトを当てる
• ネオン街や南国の街並みなどのゲーム内スクリーンショットを、横長で大きく見せる
• キャスト写真はモノクロにし、縦長に切り抜いて並べる
• 背景に、龍の紋様や墨絵の鬼を薄く透かして入れる
• 縦書きの台詞を、赤・白・黒の明朝で何本も流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは、ファーストビューの左右の塗り分けを上下の2段に組み替える
• 縦組みの英字見出しは、SPでは横向きにしてセクションの上に置く
• 人物紹介の行は、SPでは写真が上、テキストが下の縦積みにする
• 商品カードは、SPでは1カラムにする
• PCでは本文の幅を約70%（最大720px）に収める

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