---
version: alpha
name: Crimson Noir Action Game LP
description: 深紅と漆黒を半分ずつ使う家庭用ゲームの発売告知LP。前半が赤地、後半が黒地で、2作品の世界観を色で切り替える。巨大な縦組み・斜め配置の英字見出し、ゲーム内の写実的なスクリーンショット、墨文字が縦に流れる演出で、重く硬派な印象をつくる。購入ボタンだけ黄色にしている。
colors:
  primary: '#950101'
  background: '#000000'
  accent-1: '#E40F0C'
  cta: '#FDC201'
  on-cta: '#0B0B09'
  dark-section: '#010102'
  surface: '#2E2E2E'
  on-dark: '#FFFFFF'
  secondary: '#B81317'
  text-muted: '#BBBBBB'
  line: '#910000'
  background-alt: '#1E2122'
  dark-section-accessible: '#D3D3E9'
typography:
  display:
    fontFamily: Archivo Black
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.4
  accent:
    fontFamily: Shippori Mincho B1
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.2
  label-button:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-buy:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 44px
  button-readmore:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 36px
  slant-heading:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 90px
  vertical-title:
    typography: '{typography.display}'
    height: 200px
  image-label:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 28px
  cast-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 120px
  product-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    height: 300px
  spec-table:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 200px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#950101` | 前半セクションの深紅の地 | 30% | 画素の実測 |
| `background` | `#000000` | 後半セクションの漆黒の地 | 35% | 画素の実測 |
| `accent-1` | `#E40F0C` | 斜めの帯・英字見出し・サブボタンの明るい赤 | 4% | 画素の実測 |
| `cta` | `#FDC201` | 購入ボタンと予約ボタンの黄色 | 1% | 画素の実測 |
| `on-cta` | `#0B0B09` | 黄色ボタンの上の文字 | 0% | 画素の主要色に補正 |
| `dark-section` | `#010102` | 赤地のREAD MOREボタンと商品パネルの黒 | 5% | 画素の実測 |
| `surface` | `#2E2E2E` | 商品一覧の外枠に使うグレーのパネル | 3% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 赤地・黒地の上の白い見出しと本文 | 2% | 推定 |
| `secondary` | `#B81317` | 黒地のセクション小見出しの赤文字 | 0% | 画素の実測 |
| `text-muted` | `#BBBBBB` | 仕様表の注記に使うグレーの文字 | 0% | 推定 |
| `line` | `#910000` | 仕様表の罫線と画像の赤い細枠 | 0% | 画素の主要色に補正 |
| `background-alt` | `#1E2122` | フッター近くのSNS帯の濃いグレー | 1% | 画素の実測 |
| `dark-section-accessible` | `#D3D3E9` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | STORY・CASTなどの巨大な英字見出し（縦組みにしたり斜めに配置したりする） | 欧文サンセリフ | Archivo Black | 900 | 56px | 1.0 | -0.02em |
| `headline-lg` | セクションのキャッチ（太い和文ゴシック） | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.0em |
| `headline-md` | 遊びの要素ごとの小見出し | ゴシック | Noto Sans JP | 800 | 18px | 1.4 | 0.0em |
| `accent` | 背景に縦に流す台詞・特典名などの墨文字 | 明朝 | Shippori Mincho B1 | 800 | 22px | 1.3 | 0.05em |
| `body-md` | あらすじ・説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em |
| `headline-sm` | 画像の左下に重ねるラベル（地名・モード名） | ゴシック | Noto Sans JP | 900 | 16px | 1.2 | 0.0em |
| `label-button` | READ MOREボタンと購入ボタンの文字 | 欧文サンセリフ | Montserrat | 700 | 12px | 1.0 | 0.05em |
| `note` | 仕様表や権利表記などの注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |

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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-19c3aa42`（元 LP の URL から採番）
- **元 LP**: https://ryu-ga-gotoku.com/kiwami3/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。