漆黒×深紅のヒーロー模型 LP

Dark Crimson Hero Figure Product LP

黒地に深紅のグリッド背景とスポットライト風グラデーションを重ね、商品写真を大きな切り抜きで見せるホビー商品 LP。金→赤のグラデーション縦バーを付けた白い太字見出しで特長を区切り、最後に仕様と青いグラデーションの購入ボタンで締める。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクトクール・先進的SP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は黒を基本に、特長セクションごとに深紅の放射グラデーションを敷く
文字は白、注釈はグレー、強調キャッチだけ赤の発光文字にする
金→赤の縦グラデーションバーは見出し専用
仕様・セット内容はグレーの金属的パネルで赤から切り離す
購入ボタンだけ補色の青を使い、ページ内で唯一の寒色にする

TYPOGRAPHY

書体

displayFV の発光キャッチ明朝／ Shippori Mincho 800 ／ 30px ／行間 1.35

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg英字の商品タイトル（斜体太字）欧文サンセリフ／ Barlow Condensed 800 ／ 40px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

accent英字サブタイトル（字間広め）欧文サンセリフ／ Montserrat 400 ／ 12px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md特長見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明文・写真キャプションゴシック／ Noto Sans JP 400 ／ 12px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

note画像はイメージ等の注釈ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

label-button購入ボタンゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

FV キャッチは明朝太字を赤＋白い外光彩で発光させる
英字タイトルは斜体の極太コンデンス体で大きく
見出しは左揃え、本文説明は中央揃え
注釈は写真右下に小さく置く

PAGE STRUCTURE

セクション構成

ファーストビュー作品世界と商品の迫力を伝える左上にロゴ、炎や光のエフェクトを背景に大小 2 体の商品写真、下に発光キャッチ
商品タイトル・概要商品名と概要を示す字間広い英字小見出し＋極太斜体の英字タイトル、白い中央揃えの説明 5 行
特長1 造形・配色成形色の再現度を示す深紅グリッド地に前後の全身写真、赤枠の拡大写真 2 枚を段違いに
特長2 可動域ポーズの自由度を示すバー見出し＋短い説明、2 体の躍動ポーズ写真を重ねる
特長3 付属武器付属品の形態を見せる斜めの赤い帯の上に武器写真と形態名ラベル、ポーズ写真を交互配置
特長4 エフェクト付属エフェクトを見せる格子背景に必殺ポーズとクリアパーツを大きく
セット内容同梱物を一覧で示すグレーパネルに本体と付属品を平置き撮影
シーン写真世界観に浸らせる爆炎背景の全幅写真
パッケージ紹介箱絵を見せる白見出し＋パッケージ画像＋注釈
商品仕様・購入価格と付属品を示し購入へ左に仕様文と枠付き付属品、右に全身写真、最下部に青い購入ボタン

COMPONENTS

部品

購入ボタン button-primary青のグラデーションで角丸、白太字。ページ最下部に中央配置
金赤バー付き見出し heading-bar左に金→赤グラデーションの太い縦バー、右に白太字の 2 行見出し
発光キャッチ glow-catch明朝太字の赤文字に光彩。1行目のみ白
向きラベル view-tagFRONT/REAR などを白枠の小タグで写真脇に
赤枠写真 framed-photo赤い細線枠の拡大写真を左右段違いで並べ、下に中央揃えキャプション
セット内容パネル set-panelグレーグラデ地に付属品を平置きで並べ、斜めカットのタブ見出し付き
付属品枠 spec-box黒地にグレー細線の枠で付属品を 2 行記載

守ること

黒と深紅を主に使い、白文字の高コントラストを保つ
商品は切り抜きで大きく、ポーズを変えて複数配置
特長ごとに金赤バー見出し＋写真の 1 セットにする
注釈は小さいグレー文字で写真の近くに添える

DON'T

避けること

白や淡色の地を広く使わない
青を購入ボタン以外に使わない
角丸カードやパステルの装飾を入れない
本文を長く続けない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 漆黒×深紅のヒーロー模型 LP（Dark Crimson Hero Figure Product LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
キーワード: 漆黒・深紅グラデーション・メタリック・切り抜き写真・グリッド背景・発光文字
地の質感: 黒地に深紅の放射グラデーションと細かい格子模様を重ね、金属的で暗いトーンにする
形: 基本は直角。赤い細枠の写真フレーム、角を斜めに切ったタブ見出し
温度感: 暗いが熱い。赤が発光して見える暖色寄りのダーク

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#020202`	ページ基調の黒	40%	画素の実測
`dark-section`	`#290404`	深紅グラデーションセクション地	20%	画素の主要色に補正
`primary`	`#95201E`	ブランドを代表する深紅	8%	画素の主要色に補正
`secondary`	`#560505`	暗いえんじの帯	8%	画素の主要色に補正
`accent-1`	`#E8201C`	発光する赤の見出し文字	1%	推定
`accent-2`	`#D9A514`	見出しバー上部の金色	0%	推定
`on-dark`	`#FFFFFF`	黒地上の見出し・本文	3%	推定
`text-muted`	`#ACAAA7`	英字サブタイトル・注釈のグレー	1%	画素の主要色に補正
`surface`	`#606065`	セット内容パネルのグレー地	6%	画素の主要色に補正
`background-alt`	`#C8CACE`	セット内容パネル上部の明るいグレー	3%	推定
`line`	`#C0201E`	写真フレームの赤い細線	0%	推定
`cta`	`#3A63E0`	購入ボタンの青	0%	推定
`on-cta`	`#FFFFFF`	購入ボタン文字	0%	推定

地は黒を基本に、特長セクションごとに深紅の放射グラデーションを敷く
文字は白、注釈はグレー、強調キャッチだけ赤の発光文字にする
金→赤の縦グラデーションバーは見出し専用
仕様・セット内容はグレーの金属的パネルで赤から切り離す
購入ボタンだけ補色の青を使い、ページ内で唯一の寒色にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の発光キャッチ	明朝	Shippori Mincho	800	30px	1.35	0.02em
`headline-lg`	英字の商品タイトル（斜体太字）	欧文サンセリフ	Barlow Condensed	800	40px	1.0	0.0em
`accent`	英字サブタイトル（字間広め）	欧文サンセリフ	Montserrat	400	12px	1.2	0.4em
`headline-md`	特長見出し	ゴシック	Noto Sans JP	700	18px	1.4	0.03em
`body-md`	説明文・写真キャプション	ゴシック	Noto Sans JP	400	12px	1.7	0.0em
`note`	画像はイメージ等の注釈	ゴシック	Noto Sans JP	400	8px	1.5	0.0em
`label-button`	購入ボタン	ゴシック	Noto Sans JP	700	17px	1.2	0.05em

FV キャッチは明朝太字を赤＋白い外光彩で発光させる
英字タイトルは斜体の極太コンデンス体で大きく
見出しは左揃え、本文説明は中央揃え
注釈は写真右下に小さく置く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真比較のみ 2 列を段違い配置
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
商品写真は横幅いっぱいに大きく配置
見出しは左端から 14px の位置にバー付きで置く
写真を前後でセクション境界にはみ出させ奥行きを出す
仕様欄は左に文字、右に全身写真を重ねる

Elevation & Depth

影ではなく背景の光（放射グラデーション）で立体感を出す
キャッチ文字に赤い外光彩
購入ボタンは上明・下暗のグラデーションと細い明色縁

Shapes

角丸: 小 0px ／中 4px ／大 8px。ボタンは角丸の長方形。
写真の切り抜き: 商品は背景を抜いた切り抜き。シーン写真は全幅の矩形
セクション境界: 直線。グラデーションの濃淡で境界をぼかす
写真フレームは赤 1px の直角枠
セット内容は右上を斜めにカットしたタブ見出し
ラベル（FRONT/REAR）は角丸の白枠小タグ

Components

購入ボタン（button-primary）: 青のグラデーションで角丸、白太字。ページ最下部に中央配置
金赤バー付き見出し（heading-bar）: 左に金→赤グラデーションの太い縦バー、右に白太字の 2 行見出し
発光キャッチ（glow-catch）: 明朝太字の赤文字に光彩。1行目のみ白
向きラベル（view-tag）: FRONT/REAR などを白枠の小タグで写真脇に
赤枠写真（framed-photo）: 赤い細線枠の拡大写真を左右段違いで並べ、下に中央揃えキャプション
セット内容パネル（set-panel）: グレーグラデ地に付属品を平置きで並べ、斜めカットのタブ見出し付き
付属品枠（spec-box）: 黒地にグレー細線の枠で付属品を 2 行記載

Do's and Don'ts

Do - 黒と深紅を主に使い、白文字の高コントラストを保つ - 商品は切り抜きで大きく、ポーズを変えて複数配置 - 特長ごとに金赤バー見出し＋写真の 1 セットにする - 注釈は小さいグレー文字で写真の近くに添える

Don't - 白や淡色の地を広く使わない - 青を購入ボタン以外に使わない - 角丸カードやパステルの装飾を入れない - 本文を長く続けない

Page Structure

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

ファーストビュー（作品世界と商品の迫力を伝える）: 左上にロゴ、炎や光のエフェクトを背景に大小 2 体の商品写真、下に発光キャッチ
商品タイトル・概要（商品名と概要を示す）: 字間広い英字小見出し＋極太斜体の英字タイトル、白い中央揃えの説明 5 行
特長1 造形・配色（成形色の再現度を示す）: 深紅グリッド地に前後の全身写真、赤枠の拡大写真 2 枚を段違いに
特長2 可動域（ポーズの自由度を示す）: バー見出し＋短い説明、2 体の躍動ポーズ写真を重ねる
特長3 付属武器（付属品の形態を見せる）: 斜めの赤い帯の上に武器写真と形態名ラベル、ポーズ写真を交互配置
特長4 エフェクト（付属エフェクトを見せる）: 格子背景に必殺ポーズとクリアパーツを大きく
セット内容（同梱物を一覧で示す）: グレーパネルに本体と付属品を平置き撮影
シーン写真（世界観に浸らせる）: 爆炎背景の全幅写真
パッケージ紹介（箱絵を見せる）: 白見出し＋パッケージ画像＋注釈
商品仕様・購入（価格と付属品を示し購入へ）: 左に仕様文と枠付き付属品、右に全身写真、最下部に青い購入ボタン

Imagery

商品は背景を抜き、スタジオ光でメタリックな光沢を強く出す
ポーズ写真は斜めや跳躍など動きのある構図
背景は黒〜深紅の放射グラデーションに細かい格子や鉄骨シルエット
炎・光の粒・爆発の CG で劇中の雰囲気を出す
付属品は平置きで影を抑え、整列させる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像なし。PC では中央 750px 程度のカラムに SP の構成をそのまま配置
左右の余白は黒または深紅のグラデーションで埋める
写真比較は PC で 2〜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 行書くと起動時に読み込まれる。

---
version: alpha
name: Dark Crimson Hero Figure Product LP
description: 黒地に深紅のグリッド背景とスポットライト風グラデーションを重ね、商品写真を大きな切り抜きで見せるホビー商品 LP。金→赤のグラデーション縦バーを付けた白い太字見出しで特長を区切り、最後に仕様と青いグラデーションの購入ボタンで締める。
colors:
  background: '#020202'
  dark-section: '#290404'
  primary: '#95201E'
  secondary: '#560505'
  accent-1: '#E8201C'
  accent-2: '#D9A514'
  on-dark: '#FFFFFF'
  text-muted: '#ACAAA7'
  surface: '#606065'
  background-alt: '#C8CACE'
  line: '#C0201E'
  cta: '#3A63E0'
  on-cta: '#FFFFFF'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Barlow Condensed
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.0
  accent:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.4em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.5
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 50px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 46px
  heading-bar:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 50px
  glow-catch:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 120px
  view-tag:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 16px
  framed-photo:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 180px
  set-panel:
    backgroundColor: '{colors.surface}'
    height: 330px
  spec-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 40px
---

# DESIGN.md — 漆黒×深紅のヒーロー模型 LP（Dark Crimson Hero Figure Product LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
- **キーワード**: 漆黒・深紅グラデーション・メタリック・切り抜き写真・グリッド背景・発光文字
- **地の質感**: 黒地に深紅の放射グラデーションと細かい格子模様を重ね、金属的で暗いトーンにする
- **形**: 基本は直角。赤い細枠の写真フレーム、角を斜めに切ったタブ見出し
- **温度感**: 暗いが熱い。赤が発光して見える暖色寄りのダーク

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#020202` | ページ基調の黒 | 40% | 画素の実測 |
| `dark-section` | `#290404` | 深紅グラデーションセクション地 | 20% | 画素の主要色に補正 |
| `primary` | `#95201E` | ブランドを代表する深紅 | 8% | 画素の主要色に補正 |
| `secondary` | `#560505` | 暗いえんじの帯 | 8% | 画素の主要色に補正 |
| `accent-1` | `#E8201C` | 発光する赤の見出し文字 | 1% | 推定 |
| `accent-2` | `#D9A514` | 見出しバー上部の金色 | 0% | 推定 |
| `on-dark` | `#FFFFFF` | 黒地上の見出し・本文 | 3% | 推定 |
| `text-muted` | `#ACAAA7` | 英字サブタイトル・注釈のグレー | 1% | 画素の主要色に補正 |
| `surface` | `#606065` | セット内容パネルのグレー地 | 6% | 画素の主要色に補正 |
| `background-alt` | `#C8CACE` | セット内容パネル上部の明るいグレー | 3% | 推定 |
| `line` | `#C0201E` | 写真フレームの赤い細線 | 0% | 推定 |
| `cta` | `#3A63E0` | 購入ボタンの青 | 0% | 推定 |
| `on-cta` | `#FFFFFF` | 購入ボタン文字 | 0% | 推定 |

- 地は黒を基本に、特長セクションごとに深紅の放射グラデーションを敷く
- 文字は白、注釈はグレー、強調キャッチだけ赤の発光文字にする
- 金→赤の縦グラデーションバーは見出し専用
- 仕様・セット内容はグレーの金属的パネルで赤から切り離す
- 購入ボタンだけ補色の青を使い、ページ内で唯一の寒色にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の発光キャッチ | 明朝 | Shippori Mincho | 800 | 30px | 1.35 | 0.02em |
| `headline-lg` | 英字の商品タイトル（斜体太字） | 欧文サンセリフ | Barlow Condensed | 800 | 40px | 1.0 | 0.0em |
| `accent` | 英字サブタイトル（字間広め） | 欧文サンセリフ | Montserrat | 400 | 12px | 1.2 | 0.4em |
| `headline-md` | 特長見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em |
| `body-md` | 説明文・写真キャプション | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em |
| `note` | 画像はイメージ等の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em |
| `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 17px | 1.2 | 0.05em |

- FV キャッチは明朝太字を赤＋白い外光彩で発光させる
- 英字タイトルは斜体の極太コンデンス体で大きく
- 見出しは左揃え、本文説明は中央揃え
- 注釈は写真右下に小さく置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真比較のみ 2 列を段違い配置
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
- 商品写真は横幅いっぱいに大きく配置
- 見出しは左端から 14px の位置にバー付きで置く
- 写真を前後でセクション境界にはみ出させ奥行きを出す
- 仕様欄は左に文字、右に全身写真を重ねる

## Elevation & Depth

- 影ではなく背景の光（放射グラデーション）で立体感を出す
- キャッチ文字に赤い外光彩
- 購入ボタンは上明・下暗のグラデーションと細い明色縁

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品は背景を抜いた切り抜き。シーン写真は全幅の矩形
- **セクション境界**: 直線。グラデーションの濃淡で境界をぼかす
- 写真フレームは赤 1px の直角枠
- セット内容は右上を斜めにカットしたタブ見出し
- ラベル（FRONT/REAR）は角丸の白枠小タグ

## Components

- **購入ボタン**（`button-primary`）: 青のグラデーションで角丸、白太字。ページ最下部に中央配置
- **金赤バー付き見出し**（`heading-bar`）: 左に金→赤グラデーションの太い縦バー、右に白太字の 2 行見出し
- **発光キャッチ**（`glow-catch`）: 明朝太字の赤文字に光彩。1行目のみ白
- **向きラベル**（`view-tag`）: FRONT/REAR などを白枠の小タグで写真脇に
- **赤枠写真**（`framed-photo`）: 赤い細線枠の拡大写真を左右段違いで並べ、下に中央揃えキャプション
- **セット内容パネル**（`set-panel`）: グレーグラデ地に付属品を平置きで並べ、斜めカットのタブ見出し付き
- **付属品枠**（`spec-box`）: 黒地にグレー細線の枠で付属品を 2 行記載

## Do's and Don'ts

**Do**
- 黒と深紅を主に使い、白文字の高コントラストを保つ
- 商品は切り抜きで大きく、ポーズを変えて複数配置
- 特長ごとに金赤バー見出し＋写真の 1 セットにする
- 注釈は小さいグレー文字で写真の近くに添える

**Don't**
- 白や淡色の地を広く使わない
- 青を購入ボタン以外に使わない
- 角丸カードやパステルの装飾を入れない
- 本文を長く続けない

## Page Structure

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

1. **ファーストビュー**（作品世界と商品の迫力を伝える）: 左上にロゴ、炎や光のエフェクトを背景に大小 2 体の商品写真、下に発光キャッチ
2. **商品タイトル・概要**（商品名と概要を示す）: 字間広い英字小見出し＋極太斜体の英字タイトル、白い中央揃えの説明 5 行
3. **特長1 造形・配色**（成形色の再現度を示す）: 深紅グリッド地に前後の全身写真、赤枠の拡大写真 2 枚を段違いに
4. **特長2 可動域**（ポーズの自由度を示す）: バー見出し＋短い説明、2 体の躍動ポーズ写真を重ねる
5. **特長3 付属武器**（付属品の形態を見せる）: 斜めの赤い帯の上に武器写真と形態名ラベル、ポーズ写真を交互配置
6. **特長4 エフェクト**（付属エフェクトを見せる）: 格子背景に必殺ポーズとクリアパーツを大きく
7. **セット内容**（同梱物を一覧で示す）: グレーパネルに本体と付属品を平置き撮影
8. **シーン写真**（世界観に浸らせる）: 爆炎背景の全幅写真
9. **パッケージ紹介**（箱絵を見せる）: 白見出し＋パッケージ画像＋注釈
10. **商品仕様・購入**（価格と付属品を示し購入へ）: 左に仕様文と枠付き付属品、右に全身写真、最下部に青い購入ボタン

## Imagery

- 商品は背景を抜き、スタジオ光でメタリックな光沢を強く出す
- ポーズ写真は斜めや跳躍など動きのある構図
- 背景は黒〜深紅の放射グラデーションに細かい格子や鉄骨シルエット
- 炎・光の粒・爆発の CG で劇中の雰囲気を出す
- 付属品は平置きで影を抑え、整列させる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像なし。PC では中央 750px 程度のカラムに SP の構成をそのまま配置
- 左右の余白は黒または深紅のグラデーションで埋める
- 写真比較は PC で 2〜3 列の横並びにする
- 仕様欄は 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-0f6cbff8`（元 LP の URL から採番）
- **元 LP**: https://p-bandai.jp/hobby/special-1000017586/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（1/13 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://p-bandai.jp/hobby/special-1000017586/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP