黒×深紅ネオンの変身玩具 LP

Dark Crimson Neon Hero Toy LP

黒と深紅の地に、ピンク紫のネオン光線とX字の装飾を重ねたヒーロー玩具の紹介LP。斜体の極太見出し帯と商品の切り抜き写真をつなぎ、ギミックを順に見せていく。

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

ダウンロード

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

COLORS

配色

地は黒→深紅の放射グラデーションで中央を明るくする
セクション見出し帯は濃紫地＋白銀の縁＋左右ピンクのX字
各ギミックのパネルは赤ネオンの細枠で囲む
ネオンピンクの光線を斜めに走らせて動きを出す
文字は白が基本、注釈のみ灰色
明るい地の面は使わない

TYPOGRAPHY

書体

display縦書きの決め台詞（筆文字）手書き・筆／ Yuji Syuku 700 ／ 44px ／行間 1.1

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

headline-lg商品名ロゴ（斜体の極太）装飾・ディスプレイ／ Dela Gothic One 900 ／ 34px ／行間 1.1

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

headline-md見出し帯の文字（斜体・白）装飾・ディスプレイ／ Dela Gothic One 800 ／ 22px ／行間 1.2

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

body-lgギミック説明の太字ゴシック／ Noto Sans JP 900 ／ 16px ／行間 1.4

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

body-md短い説明文ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.5

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

note別売り等の注釈ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.4

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

accent技名の吹き出し文字装飾・ディスプレイ／ Dela Gothic One 800 ／ 15px ／行間 1.2

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

見出しは斜体の極太で勢いを出す
子ども向けに漢字へふりがなを振る
見出しの文字には白と黒の縁取りや影をつける
本文は短くし、2行以内で収める
注釈は写真の右下に小さく置く

PAGE STRUCTURE

セクション構成

ファーストビューキャラクターと商品の世界観を一目で伝えるキャラ写真と商品を大きく重ね、右に縦書きの決め台詞、下に商品名ロゴと付属品バッジを置く
基本ギミック紹介別売り品とのセット方法を見せるX字見出し帯の下のネオン枠パネルに、手順の写真と短い説明を置く
アクション紹介音声・発光ギミックを訴求する商品を斜めに配置し、技名の吹き出しとキャラ写真を組み合わせる
変形・合体別売り品との合体形態を見せるパーツが飛んで合体する写真を縦に並べ、ピンクの光線で背景を割る
紹介動画動く様子で購買意欲を高める見出し帯の下に動画を全幅で埋め込む
クレジット権利表記紫の帯に小さい白文字を置く

COMPONENTS

部品

X字付き見出し帯 section-banner濃紫の平行四辺形に白銀の縁、両端にネオンピンクのX字を置いた見出し
赤ネオン枠パネル neon-panel深紅の地を赤く光る細い枠で囲み、角を切り欠いたパネル
縦書き決め台詞 vertical-catchFV右側に筆文字で縦書きし、白の縁取りをつける
商品名ロゴ product-logo斜体の極太で、青・白のメタリックな縁取りをつける
付属品バッジ badge-bundle黒い平行四辺形に白文字、端に丸アイコンを添えたバッジ
技名の吹き出し callout-bolt黒地の平行四辺形に白枠、稲妻形の尻尾をつけて技名を叫ぶ
別売り注釈 note-caption写真の右下に置く小さな注釈
クレジット帯 credit-bar最下部の紫の帯に権利表記を中央揃えで置く

守ること

黒と深紅の地にピンクのネオン光線を斜めに走らせる
見出しはすべて同じX字帯の部品で揃える
商品写真は切り抜いて大きく、斜めに配置する
漢字にふりがなを振る
別売りの物には必ず注釈をつける

DON'T

避けること

白や淡い色の広い地を使わない
角丸やピル型のやわらかい形を使わない
長い文章を置かない
ネオンの色を青や緑系に広げない
フラットな単色の面だけで構成しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×深紅ネオンの変身玩具 LP（Dark Crimson Neon Hero Toy LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的
キーワード: ダーク・ネオン光線・斜体極太・X字装飾・切り抜き商品・スモーク
地の質感: 黒〜深紅の放射グラデーションに、霧・煙と光の筋を重ねた発光する質感
形: 平行四辺形の見出し帯と左右のX字、細い赤ネオン枠で囲んだパネル
温度感: 暗く熱い（赤と紫の発光）

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#750525`	深紅のパネル地	20%	画素の主要色に補正
`background`	`#0B080A`	ページの黒地	25%	画素の主要色に補正
`dark-section`	`#4F0306`	暗い赤黒のセクション地	15%	画素の主要色に補正
`accent-1`	`#E0102A`	赤いネオン枠線	2%	推定
`accent-2`	`#E86AB8`	ネオンピンクの光線・X字	3%	推定
`secondary`	`#280820`	見出し帯の濃紫	4%	画素の主要色に補正
`tint-1`	`#F0F0F0`	見出し帯の白銀ハイライト	2%	推定
`on-dark`	`#FFFFFF`	暗地上の白文字	2%	推定
`accent-3`	`#2A6FD8`	商品名ロゴの青み	1%	推定
`surface`	`#3C1F5A`	フッターのクレジット帯	1%	推定
`text-muted`	`#BBBBBB`	注釈の灰文字	0%	推定

地は黒→深紅の放射グラデーションで中央を明るくする
セクション見出し帯は濃紫地＋白銀の縁＋左右ピンクのX字
各ギミックのパネルは赤ネオンの細枠で囲む
ネオンピンクの光線を斜めに走らせて動きを出す
文字は白が基本、注釈のみ灰色
明るい地の面は使わない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	縦書きの決め台詞（筆文字）	手書き・筆	Yuji Syuku	700	44px	1.1	0.0em
`headline-lg`	商品名ロゴ（斜体の極太）	装飾・ディスプレイ	Dela Gothic One	900	34px	1.1	-0.02em
`headline-md`	見出し帯の文字（斜体・白）	装飾・ディスプレイ	Dela Gothic One	800	22px	1.2	0.0em
`body-lg`	ギミック説明の太字	ゴシック	Noto Sans JP	900	16px	1.4	0.0em
`body-md`	短い説明文	ゴシック	Noto Sans JP	700	13px	1.5	0.0em
`note`	別売り等の注釈	ゴシック	Noto Sans JP	400	9px	1.4	0.0em
`accent`	技名の吹き出し文字	装飾・ディスプレイ	Dela Gothic One	800	15px	1.2	0.0em

見出しは斜体の極太で勢いを出す
子ども向けに漢字へふりがなを振る
見出しの文字には白と黒の縁取りや影をつける
本文は短くし、2行以内で収める
注釈は写真の右下に小さく置く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム（写真が全幅）
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
セクションごとに見出し帯→ネオン枠パネルの順で並べる
パネルの中に商品写真を大きく斜めに置く
テキストは写真の余白に重ねる
見出し帯は画面幅いっぱいに置き、X字を両端に添える
最後に動画埋め込みとクレジット帯を置く

Elevation & Depth

影ではなく発光（グロー）で奥行きを出す
商品写真の背後に白いフラッシュの光を置く
スモークや霧を下層に敷く

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 商品を背景なしで切り抜き、斜めに配置
セクション境界: 平行四辺形の見出し帯と左右のX字で区切る
角丸は使わず、鋭い角と斜めの線で作る
枠の角は切り欠きのある直線にする
吹き出しは稲妻形・平行四辺形にする

Components

X字付き見出し帯（section-banner）: 濃紫の平行四辺形に白銀の縁、両端にネオンピンクのX字を置いた見出し
赤ネオン枠パネル（neon-panel）: 深紅の地を赤く光る細い枠で囲み、角を切り欠いたパネル
縦書き決め台詞（vertical-catch）: FV右側に筆文字で縦書きし、白の縁取りをつける
商品名ロゴ（product-logo）: 斜体の極太で、青・白のメタリックな縁取りをつける
付属品バッジ（badge-bundle）: 黒い平行四辺形に白文字、端に丸アイコンを添えたバッジ
技名の吹き出し（callout-bolt）: 黒地の平行四辺形に白枠、稲妻形の尻尾をつけて技名を叫ぶ
別売り注釈（note-caption）: 写真の右下に置く小さな注釈
クレジット帯（credit-bar）: 最下部の紫の帯に権利表記を中央揃えで置く

Do's and Don'ts

Do - 黒と深紅の地にピンクのネオン光線を斜めに走らせる - 見出しはすべて同じX字帯の部品で揃える - 商品写真は切り抜いて大きく、斜めに配置する - 漢字にふりがなを振る - 別売りの物には必ず注釈をつける

Don't - 白や淡い色の広い地を使わない - 角丸やピル型のやわらかい形を使わない - 長い文章を置かない - ネオンの色を青や緑系に広げない - フラットな単色の面だけで構成しない

Page Structure

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

ファーストビュー（キャラクターと商品の世界観を一目で伝える）: キャラ写真と商品を大きく重ね、右に縦書きの決め台詞、下に商品名ロゴと付属品バッジを置く
基本ギミック紹介（別売り品とのセット方法を見せる）: X字見出し帯の下のネオン枠パネルに、手順の写真と短い説明を置く
アクション紹介（音声・発光ギミックを訴求する）: 商品を斜めに配置し、技名の吹き出しとキャラ写真を組み合わせる
変形・合体（別売り品との合体形態を見せる）: パーツが飛んで合体する写真を縦に並べ、ピンクの光線で背景を割る
紹介動画（動く様子で購買意欲を高める）: 見出し帯の下に動画を全幅で埋め込む
クレジット（権利表記）: 紫の帯に小さい白文字を置く

Imagery

商品は背景なしで切り抜き、高コントラストで光沢を見せる
背景は赤い煙と星雲のようなテクスチャ
ピンク・赤のレーザー光線を斜めに交差させる
商品の背後に白いフラッシュの光を置く
合体の流れは赤い光の帯でパーツ同士をつなぐ
下部にスモークを漂わせる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC では中央に SP 幅に近い縦長のカラムを置き、左右は暗いグラデーションで埋める
見出し帯は横に伸ばし、X字は両端に固定する
ギミックパネルは PC で写真と説明を左右 2 カラムにしてもよい
動画は最大幅 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Dark Crimson Neon Hero Toy LP
description: 黒と深紅の地に、ピンク紫のネオン光線とX字の装飾を重ねたヒーロー玩具の紹介LP。斜体の極太見出し帯と商品の切り抜き写真をつなぎ、ギミックを順に見せていく。
colors:
  primary: '#750525'
  background: '#0B080A'
  dark-section: '#4F0306'
  accent-1: '#E0102A'
  accent-2: '#E86AB8'
  secondary: '#280820'
  tint-1: '#F0F0F0'
  on-dark: '#FFFFFF'
  accent-3: '#2A6FD8'
  surface: '#3C1F5A'
  text-muted: '#BBBBBB'
typography:
  display:
    fontFamily: Yuji Syuku
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Dela Gothic One
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.2
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.4
  accent:
    fontFamily: Dela Gothic One
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1.2
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  section-banner:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 48px
  neon-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 420px
  vertical-catch:
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 420px
  product-logo:
    textColor: '{colors.accent-3}'
    typography: '{typography.headline-lg}'
    height: 50px
  badge-bundle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 24px
  callout-bolt:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 36px
  note-caption:
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 12px
  credit-bar:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 20px
---

# DESIGN.md — 黒×深紅ネオンの変身玩具 LP（Dark Crimson Neon Hero Toy LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的
- **キーワード**: ダーク・ネオン光線・斜体極太・X字装飾・切り抜き商品・スモーク
- **地の質感**: 黒〜深紅の放射グラデーションに、霧・煙と光の筋を重ねた発光する質感
- **形**: 平行四辺形の見出し帯と左右のX字、細い赤ネオン枠で囲んだパネル
- **温度感**: 暗く熱い（赤と紫の発光）

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#750525` | 深紅のパネル地 | 20% | 画素の主要色に補正 |
| `background` | `#0B080A` | ページの黒地 | 25% | 画素の主要色に補正 |
| `dark-section` | `#4F0306` | 暗い赤黒のセクション地 | 15% | 画素の主要色に補正 |
| `accent-1` | `#E0102A` | 赤いネオン枠線 | 2% | 推定 |
| `accent-2` | `#E86AB8` | ネオンピンクの光線・X字 | 3% | 推定 |
| `secondary` | `#280820` | 見出し帯の濃紫 | 4% | 画素の主要色に補正 |
| `tint-1` | `#F0F0F0` | 見出し帯の白銀ハイライト | 2% | 推定 |
| `on-dark` | `#FFFFFF` | 暗地上の白文字 | 2% | 推定 |
| `accent-3` | `#2A6FD8` | 商品名ロゴの青み | 1% | 推定 |
| `surface` | `#3C1F5A` | フッターのクレジット帯 | 1% | 推定 |
| `text-muted` | `#BBBBBB` | 注釈の灰文字 | 0% | 推定 |

- 地は黒→深紅の放射グラデーションで中央を明るくする
- セクション見出し帯は濃紫地＋白銀の縁＋左右ピンクのX字
- 各ギミックのパネルは赤ネオンの細枠で囲む
- ネオンピンクの光線を斜めに走らせて動きを出す
- 文字は白が基本、注釈のみ灰色
- 明るい地の面は使わない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 縦書きの決め台詞（筆文字） | 手書き・筆 | Yuji Syuku | 700 | 44px | 1.1 | 0.0em |
| `headline-lg` | 商品名ロゴ（斜体の極太） | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.1 | -0.02em |
| `headline-md` | 見出し帯の文字（斜体・白） | 装飾・ディスプレイ | Dela Gothic One | 800 | 22px | 1.2 | 0.0em |
| `body-lg` | ギミック説明の太字 | ゴシック | Noto Sans JP | 900 | 16px | 1.4 | 0.0em |
| `body-md` | 短い説明文 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em |
| `note` | 別売り等の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.4 | 0.0em |
| `accent` | 技名の吹き出し文字 | 装飾・ディスプレイ | Dela Gothic One | 800 | 15px | 1.2 | 0.0em |

- 見出しは斜体の極太で勢いを出す
- 子ども向けに漢字へふりがなを振る
- 見出しの文字には白と黒の縁取りや影をつける
- 本文は短くし、2行以内で収める
- 注釈は写真の右下に小さく置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（写真が全幅）
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションごとに見出し帯→ネオン枠パネルの順で並べる
- パネルの中に商品写真を大きく斜めに置く
- テキストは写真の余白に重ねる
- 見出し帯は画面幅いっぱいに置き、X字を両端に添える
- 最後に動画埋め込みとクレジット帯を置く

## Elevation & Depth

- 影ではなく発光（グロー）で奥行きを出す
- 商品写真の背後に白いフラッシュの光を置く
- スモークや霧を下層に敷く

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品を背景なしで切り抜き、斜めに配置
- **セクション境界**: 平行四辺形の見出し帯と左右のX字で区切る
- 角丸は使わず、鋭い角と斜めの線で作る
- 枠の角は切り欠きのある直線にする
- 吹き出しは稲妻形・平行四辺形にする

## Components

- **X字付き見出し帯**（`section-banner`）: 濃紫の平行四辺形に白銀の縁、両端にネオンピンクのX字を置いた見出し
- **赤ネオン枠パネル**（`neon-panel`）: 深紅の地を赤く光る細い枠で囲み、角を切り欠いたパネル
- **縦書き決め台詞**（`vertical-catch`）: FV右側に筆文字で縦書きし、白の縁取りをつける
- **商品名ロゴ**（`product-logo`）: 斜体の極太で、青・白のメタリックな縁取りをつける
- **付属品バッジ**（`badge-bundle`）: 黒い平行四辺形に白文字、端に丸アイコンを添えたバッジ
- **技名の吹き出し**（`callout-bolt`）: 黒地の平行四辺形に白枠、稲妻形の尻尾をつけて技名を叫ぶ
- **別売り注釈**（`note-caption`）: 写真の右下に置く小さな注釈
- **クレジット帯**（`credit-bar`）: 最下部の紫の帯に権利表記を中央揃えで置く

## Do's and Don'ts

**Do**
- 黒と深紅の地にピンクのネオン光線を斜めに走らせる
- 見出しはすべて同じX字帯の部品で揃える
- 商品写真は切り抜いて大きく、斜めに配置する
- 漢字にふりがなを振る
- 別売りの物には必ず注釈をつける

**Don't**
- 白や淡い色の広い地を使わない
- 角丸やピル型のやわらかい形を使わない
- 長い文章を置かない
- ネオンの色を青や緑系に広げない
- フラットな単色の面だけで構成しない

## Page Structure

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

1. **ファーストビュー**（キャラクターと商品の世界観を一目で伝える）: キャラ写真と商品を大きく重ね、右に縦書きの決め台詞、下に商品名ロゴと付属品バッジを置く
2. **基本ギミック紹介**（別売り品とのセット方法を見せる）: X字見出し帯の下のネオン枠パネルに、手順の写真と短い説明を置く
3. **アクション紹介**（音声・発光ギミックを訴求する）: 商品を斜めに配置し、技名の吹き出しとキャラ写真を組み合わせる
4. **変形・合体**（別売り品との合体形態を見せる）: パーツが飛んで合体する写真を縦に並べ、ピンクの光線で背景を割る
5. **紹介動画**（動く様子で購買意欲を高める）: 見出し帯の下に動画を全幅で埋め込む
6. **クレジット**（権利表記）: 紫の帯に小さい白文字を置く

## Imagery

- 商品は背景なしで切り抜き、高コントラストで光沢を見せる
- 背景は赤い煙と星雲のようなテクスチャ
- ピンク・赤のレーザー光線を斜めに交差させる
- 商品の背後に白いフラッシュの光を置く
- 合体の流れは赤い光の帯でパーツ同士をつなぐ
- 下部にスモークを漂わせる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では中央に SP 幅に近い縦長のカラムを置き、左右は暗いグラデーションで埋める
- 見出し帯は横に伸ばし、X字は両端に固定する
- ギミックパネルは PC で写真と説明を左右 2 カラムにしてもよい
- 動画は最大幅 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-f446fadd`（元 LP の URL から採番）
- **元 LP**: https://p-bandai.jp/item/item-1000229838/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（0/11 色を画素から実測）、書体 中、余白 低
- **生成**: 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/item/item-1000229838/（公開状況により表示できない場合があります）
この 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