---
version: alpha
name: Black and Crimson Brush Impact Figure LP
description: 漆黒の地に深紅のパネルと赤い筆文字の叫びを重ね、金属光沢のある立体写真を大きく見せるホビー商品LP。見出しは斜めにカットした黒帯ラベル、外部リンクは青×赤のバッジで目立たせる。写真主導で、情報量の多い迫力型。
colors:
  background: '#010101'
  primary: '#8A1711'
  accent-1: '#C12518'
  dark-section: '#3F3738'
  on-dark: '#F2EEE8'
  secondary: '#9C7A3C'
  accent-2: '#C8A24A'
  cta: '#1A3FB8'
  on-cta: '#EEFBFF'
  accent-3: '#DC0C0B'
  tint-1: '#4E8A3A'
  background-alt: '#F0E9CE'
  text-muted: '#BBBBBB'
typography:
  display:
    fontFamily: Yuji Syuku
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.1
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.3
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 900
    lineHeight: 1.3
  accent:
    fontFamily: Oswald
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 900
    lineHeight: 1.3
rounded:
  sm: 0px
  md: 4px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 10px
  section: 40px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  label-section:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 28px
  badge-link:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 80px
  brush-shout:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 120px
  panel-crimson:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 600px
  glow-pointer:
    rounded: '{rounded.full}'
    height: 200px
  caption-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 80px
  staff-table:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 60px
  quote-line:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 70px
---

# DESIGN.md — 黒×深紅の筆文字が熱いホビーフィギュアLP（Black and Crimson Brush Impact Figure LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、和風、情報量多め・訴求型
- **キーワード**: 漆黒・深紅・筆文字・金属光沢・光の円・劇画調
- **地の質感**: 黒地に金の火の粉や薄いグロー。赤パネルは墨のかすれ模様と大きな薄い漢字の透かし。
- **形**: 角を斜めに切った黒帯ラベルと細い金の枠線。リンクバッジだけ角丸。
- **温度感**: 熱い。赤・橙・金の暖色が黒い地の上で燃えているように見せる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#010101` | ページ全体の漆黒の地 | 40% | 画素の実測 |
| `primary` | `#8A1711` | 深紅の訴求パネル | 18% | 画素の主要色に補正 |
| `accent-1` | `#C12518` | 赤い筆文字の叫び | 5% | 画素の主要色に補正 |
| `dark-section` | `#3F3738` | 見出しラベルと説明パネルの暗灰色 | 6% | 画素の主要色に補正 |
| `on-dark` | `#F2EEE8` | 黒地上の本文と見出し | 3% | 画素の実測 |
| `secondary` | `#9C7A3C` | 金茶系セクションの地 | 8% | 推定 |
| `accent-2` | `#C8A24A` | 金の枠線と区切り線 | 1% | 推定 |
| `cta` | `#1A3FB8` | リンクバッジの青い外枠 | 1% | 推定 |
| `on-cta` | `#EEFBFF` | バッジ上の白文字 | 0% | 画素の実測 |
| `accent-3` | `#DC0C0B` | バッジ内の赤ボタン帯 | 0% | 画素の実測 |
| `tint-1` | `#4E8A3A` | 必殺技セクションの緑のグロー | 4% | 推定 |
| `background-alt` | `#F0E9CE` | ファーストビューの空・雲の暖色 | 6% | 画素の主要色に補正 |
| `text-muted` | `#BBBBBB` | 著作権表記 | 0% | 推定 |

- 地は黒で統一し、セクションごとに深紅・金茶・緑のパネルを内側に敷く。
- 叫びの言葉はすべて赤の筆文字にし、黒地の上で発光させる。
- 見出しは暗灰色の帯に白文字で、深紅パネルの左上に重ねる。
- 青×赤のバッジはリンク誘導だけに使い、他の用途には使わない。
- 金の細線でパネルを縁取り、高級感を出す。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 写真に重ねる縦書き・斜めの叫び | 手書き・筆 | Yuji Syuku | 700 | 64px | 1.1 | 0.0em |
| `headline-lg` | セリフの引用見出し | 明朝 | Shippori Mincho | 800 | 24px | 1.3 | 0.0em |
| `headline-md` | 黒帯ラベルのセクション見出し | ゴシック | Noto Sans JP | 900 | 17px | 1.3 | 0.0em |
| `accent` | 英字のシリーズ名ロゴ | 装飾・ディスプレイ | Oswald | 700 | 30px | 1.0 | -0.02em |
| `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em |
| `note` | 写真キャプションと注記 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em |
| `label-button` | リンクバッジの文字 | 明朝 | Noto Serif JP | 900 | 14px | 1.3 | 0.0em |

- 叫びの筆文字は写真にかぶせ、傾けたり縦に組んだりする。
- 筆文字には黒か赤の外側グローをつけて、背景から浮かせる。
- 技の名前には薄い大きな漢字を透かしで敷き、ふりがなを添える。
- 本文は12px前後で短く、半透明の暗いボックスに入れる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は2列のグリッドと、全幅の重ね配置を混ぜる
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 40px、基本単位 8px、カード内 10px（375px 幅換算）
- パネルは左右に約4%の黒い余白を残して置く。
- 写真とテキストを左右に分け、互い違いに配置する。
- 変形パターンは『本体写真＋光の円＋丸い指示線＋部品写真』を縦に繰り返す。
- 詳細写真は黒い枠の2列グリッドにし、下にキャプションを入れる。

## Elevation & Depth

- 影は使わず、白・黄・赤の放射グローで手前感を出す。
- パネルには内側の暗いビネットで奥行きをつける。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: 切り抜きのフィギュアをはみ出させて配置。詳細写真は黒地の四角に入れる
- **セクション境界**: 直線。金の細線か斜めカットのラベルで区切る
- 見出しラベルの右端は斜めにカットする。
- リンクバッジだけ角丸12pxにして青い縁で囲む。
- 指示線は細い線の先に丸い輪をつける。

## Components

- **斜めカット見出し帯**（`label-section`）: 暗灰色の帯に白い太字。右端を斜めに切り、パネルの左上に重ねる
- **外部ストーリー誘導バッジ**（`badge-link`）: 青い角丸の枠に白い明朝の見出しを入れ、中に白地の作品名と赤い帯ボタンを重ねる
- **筆文字の叫び**（`brush-shout`）: 赤い筆文字を写真の上に大きく重ね、グローをつける
- **深紅の訴求パネル**（`panel-crimson`）: 墨のかすれ模様が入った深紅の面。金の細い縁をつける
- **光の円＋指示線**（`glow-pointer`）: 本体の背後に色付きの光の円を置き、丸い輪の付いた指示線で部品写真を指す
- **半透明の説明ボックス**（`caption-box`）: 暗い半透明の四角に白い本文を入れ、写真の上に置く
- **スタッフクレジット表**（`staff-table`）: 暗い帯に役職ラベルと名前を並べた小さな表
- **セリフ引用**（`quote-line`）: 話者の名前を小さく書き、白い明朝のセリフをかぎ括弧で大きく見せる

## Do's and Don'ts

**Do**
- 写真は大きく、画面からはみ出すように見せる。
- 叫びの言葉は赤い筆文字で、斜めや縦に組んで勢いを出す。
- セクションごとにパネルの色（深紅・金茶・緑）を変えてテーマを分ける。
- 金の細線と火の粉で高級感と熱さを足す。
- 商品名ロゴは白で黒地の中央に置く。

**Don't**
- 白や淡い色の明るい地を広く使わない。
- 丸ゴシックやパステル色でかわいく見せない。
- ボタンをピル型のフラットなものにしない。
- 筆文字を整った横組みだけにしない。
- 余白を取りすぎて静かな印象にしない。

## Page Structure

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

1. **ファーストビュー**（商品の迫力と作品の熱さを一目で伝える）: 暖色の空に2体の立体写真を重ね、左右に赤い筆文字の縦書きの叫びを置く。左下にリンクバッジ
2. **商品ロゴ・クレジット**（シリーズ名と監修者を示して信頼を得る）: 白いブランドロゴと商品名の明朝、その下に暗い帯のスタッフ表
3. **ブランド紹介**（シリーズのこだわりを説明する）: 黒地に斜めカットの見出し帯、写真2点と右寄せの白い本文
4. **新型機体の紹介**（新しい仕様を伝える）: 深紅パネルに本体写真と半透明の説明ボックス、リンクバッジを置く
5. **変形・ギミックの解説**（パーツの変形パターンを見せる）: 光の円の上の本体と、指示線で結んだ部品写真を縦に4〜5回繰り返す。薄い漢字の透かしを入れる
6. **セリフ引用**（作品の世界観を盛り上げる）: 白い明朝のセリフを大きく見せ、下にリンクバッジ
7. **既存機体の紹介**（もう1体の詳細と可動性を見せる）: 金茶のパネルに大きな写真と詳細写真の2列グリッド。必殺技の部分だけ緑のグローにする
8. **ディテール訴求**（特徴的なパーツを強調する）: 黒地に炎の輪と赤い筆文字の叫び。小さな写真と説明文を添える
9. **ビジュアルの締め**（感情を最高潮に高める）: 2体の写真に赤い筆文字の叫びを何行も重ね、火の粉を散らす。中央に白いロゴ
10. **付属品一覧**（セット内容を示す）: 金の細い枠の中に、グレーのグラデーションの上に並べた付属品写真
11. **フッター**（作品ロゴと権利表記を載せる）: 黒地の中央に作品ロゴ、小さな著作権表記と注記

## Imagery

- 金属光沢のある立体物を切り抜き、斜めの躍動的なポーズで見せる。
- 背後に光の円や炎の輪のグラフィックを重ねる。
- 赤い筆文字の書き殴り、火の粉、墨のかすれを装飾に使う。
- アニメ風の大きな漢字を薄い透かしで背景に敷く。
- 詳細写真は黒い背景のスタジオ撮影で、部品に寄る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC画像がないため推奨：PCでは中央に幅約750pxの列を置き、外側は黒い地にする。
- PCでは写真と説明を左右2カラムに広げる。
- 筆文字の叫びはPCで写真の外側に広げてもよい。
- 変形パターンはPCで2列のグリッドにしてもよい。

## 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-073aec74`（元 LP の URL から採番）
- **元 LP**: https://p-bandai.jp/item/item-1000228161/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（4/13 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。