---
version: alpha
name: Dark Purple Fantasy Scroll Collectible LP
description: 黒い岩肌テクスチャの地に、銀灰色の巻物型パネルを縦に積んだ構成です。魔法・ダークヒーローの世界観を、紫の発光と金の装飾で表します。各機能はPoint番号付きの巻物見出しで区切り、パネル内には黒紫の画像枠と吹き出しを配置しています。
colors:
  background: '#1A171E'
  primary: '#42005C'
  surface: '#D1D1CF'
  background-alt: '#A7AEB9'
  dark-section: '#020102'
  secondary: '#6B3A9A'
  accent-1: '#B420D0'
  accent-2: '#D9B35A'
  accent-3: '#2AA6B8'
  line: '#6A3A9A'
  text-body: '#040502'
  on-dark: '#F0EFF0'
typography:
  display:
    fontFamily: Shippori Mincho B1
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Antique
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Shippori Mincho B1
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0.02em
  accent:
    fontFamily: Great Vibes
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Cinzel
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 7px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  scroll-heading:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-lg}'
    height: 64px
  scroll-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 600px
  dark-image-frame:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 320px
  speech-tag:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 32px
  point-label:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 24px
  inset-callout:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 90px
  numbered-list-box:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 110px
  image-note:
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 12px
---

# DESIGN.md — 黒×紫の巻物フレーム玩具コレクション LP（Dark Purple Fantasy Scroll Collectible LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
- **キーワード**: ダークファンタジー・紫の発光・巻物フレーム・岩肌テクスチャ・金の装飾文字・コレクター向け
- **地の質感**: 背景は黒い岩・鱗状のざらついたテクスチャです。パネルは銀灰色で、紙やすりのようなかすれ感があります。
- **形**: 上下に巻物の軸が付いた横長パネルと、四隅に紫の唐草装飾を入れた角枠を使います。吹き出しは六角形のタグ型です。
- **温度感**: 冷たく妖しい。紫と黒が主体で、金がわずかに温度を足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#1A171E` | ページ地の黒い岩肌 | 28% | 画素の主要色に補正 |
| `primary` | `#42005C` | 世界観を担う濃紫（ファーストビュー・画像枠の地） | 14% | 画素の実測 |
| `surface` | `#D1D1CF` | 巻物パネルの銀灰色の地 | 22% | 画素の主要色に補正 |
| `background-alt` | `#A7AEB9` | 巻物の軸（上下ロール） | 6% | 画素の主要色に補正 |
| `dark-section` | `#020102` | パネル内の黒紫の画像枠 | 16% | 画素の実測 |
| `secondary` | `#6B3A9A` | 巻物上の紫グラデ小見出し | 1% | 推定 |
| `accent-1` | `#B420D0` | 吹き出し枠・発光ラインのマゼンタ | 1% | 画素の実測 |
| `accent-2` | `#D9B35A` | 商品名ロゴ風の金文字 | 2% | 画素の実測 |
| `accent-3` | `#2AA6B8` | 人名などのキーワード強調（青緑） | 0% | 推定 |
| `line` | `#6A3A9A` | 画像枠の紫の細線 | 1% | 推定 |
| `text-body` | `#040502` | パネル上の本文の黒文字 | 1% | 画素の主要色に補正 |
| `on-dark` | `#F0EFF0` | 黒紫の画像上の白文字 | 1% | 画素の実測 |

- ページの地は黒い岩肌テクスチャで統一し、内容はすべて銀灰色の巻物パネルの上に載せます。
- パネル内の画像エリアは黒〜濃紫の暗い枠に収め、四隅に紫の装飾を入れます。
- 見出しは紫グラデーションに白や紫の外光を付けます。黒地で光って見えるようにします。
- 金は商品名ロゴと商品写真の装飾だけに使い、本文には使いません。
- 強調語は青緑か紫に色を変えます。マゼンタは吹き出し枠と発光表現に限ります。
- 暖色の明るい面は使わず、寒色と黒で統一します。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho B1 | 800 | 44px | 1.1 | 0.02em |
| `headline-lg` | 巻物見出しのセクション名（紫の発光付き） | 装飾・ディスプレイ | Zen Antique | 400 | 32px | 1.2 | 0.08em |
| `headline-md` | パネル冒頭の紫グラデ2行見出し | 明朝 | Shippori Mincho B1 | 800 | 18px | 1.5 | 0.02em |
| `accent` | Point番号ラベルの筆記体 | 欧文スクリプト | Great Vibes | 400 | 16px | 1.2 | 0.0em |
| `headline-sm` | 商品名ロゴ風の金の欧文 | 欧文セリフ | Cinzel | 600 | 28px | 1.2 | 0.05em |
| `body-lg` | 画像上の白い説明文 | 明朝 | Noto Serif JP | 700 | 14px | 1.55 | 0.02em |
| `body-md` | パネル上の本文・吹き出しの台詞 | 明朝 | Noto Serif JP | 600 | 12px | 1.6 | 0.02em |
| `note` | 画像下の※注釈 | ゴシック | Noto Sans JP | 400 | 7px | 1.4 | 0.0em |

- 見出しも本文も明朝の太字を基本にし、中世ファンタジー感を出します。
- セクション見出しには紫の外光（グロー）とかすれた質感を付けます。
- 見出しの左に、筆記体のPoint番号を斜めに重ねます。
- 2行の小見出しは中央揃えにし、要所の数字を一回り大きくします。
- 画像上の文字は白にし、黒い影で可読性を保ちます。
- 注釈は極小サイズで、画像の右下に右揃えで置きます。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。画像内で2列グリッドを使う箇所がある
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
- 巻物パネルは左右に約5%の余白を残し、背景の岩肌をのぞかせます。
- 1セクションは「巻物見出し帯 → 小見出し → 黒紫の画像枠 → 注釈」の順に積みます。
- パネルの下端に巻物の軸を付けて閉じ、次のセクションの間に岩肌の隙間を作ります。
- キャラクターや商品の写真はパネルの枠からはみ出させ、立体感を出します。
- 説明文は画像の空いた側に寄せ、左揃えか右揃えで重ねます。

## Elevation & Depth

- 影ではなく、紫の外光（グロー）で要素を浮かせます。
- 巻物パネルには薄い暗色の影を付け、岩肌から少し浮かせます。
- 商品写真の輪郭に紫の発光を付け、黒地から際立たせます。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの矩形枠に入れ、四隅に唐草装飾を付けます。人物・商品は切り抜いて枠外にはみ出させます。
- **セクション境界**: 巻物の上下ロールと、黒い岩肌の隙間で区切ります。
- 吹き出しは左右の端を尖らせた六角形のタグ型にし、マゼンタの二重枠を付けます。
- 巻物見出しの両端には紫の唐草装飾を置きます。
- 丸みのある可愛い形は使いません。
- 番号は塗りつぶした丸に白数字で入れます。

## Components

- **巻物見出し帯**（`scroll-heading`）: 銀灰色の巻物の帯に、紫発光の見出しと筆記体のPoint番号を載せた部品です。両端に唐草装飾を付けます。
- **巻物パネル**（`scroll-panel`）: セクション本体を収める銀灰色の面です。下端に軸ロールを付けます。
- **黒紫の画像枠**（`dark-image-frame`）: 暗い紫グラデーションに細い紫線の枠を付け、四隅に装飾を入れます。中に商品写真と白文字を配置します。
- **六角タグ吹き出し**（`speech-tag`）: 暗い地にマゼンタの枠を付け、台詞や機能名を白文字で入れます。写真の上に斜めに散らして配置します。
- **Point番号ラベル**（`point-label`）: 紫の筆記体で番号を入れ、見出しの左上に重ねます。
- **補足ボックス**（`inset-callout`）: 紫の枠の横長ボックスです。左に部品写真、右に短い説明を並べます。
- **番号付きリスト枠**（`numbered-list-box`）: 濃紫の地に白い丸数字と曲名・項目名を並べます。写真の横に置きます。
- **画像注釈**（`image-note`）: 画像の右下に置く、極小の※注釈です。

## Do's and Don'ts

**Do**
- 地は黒い岩肌テクスチャ、内容は銀灰色の巻物パネルという二層構造を守ります。
- 見出しには必ず紫のグローとPoint番号を付けます。
- 商品写真は紫の発光で縁取り、パネルの枠からはみ出させます。
- 機能の説明は六角タグ吹き出しで写真の周りに散らします。
- 画像ごとに極小の注釈を右下に入れます。

**Don't**
- 白やパステル調の明るい背景を広く使わないでください。
- 丸ゴシックやポップな書体を使わないでください。
- 角丸カードやピル型ボタンで柔らかくしないでください。
- 金を本文や面の塗りに多用しないでください。
- 装飾のない平坦な四角枠だけで画像を並べないでください。

## Page Structure

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

1. **ファーストビュー**（世界観と商品を一目で伝える）: 濃紫〜黒の背景にキャラクターと商品を大きく配置します。縦書きの明朝キャッチを左右に置き、下部に金の商品名ロゴを入れます。
2. **商品紹介映像**（動画で遊び方を見せる）: 巻物見出しの下に16:9の動画を全幅で置き、軸ロールで閉じます。
3. **セット内容**（同梱物を明示する）: 黒紫の画像枠に商品写真を入れ、右下に同梱物の一覧を置き、注釈を添えます。
4. **特長1（音声認識機能）**（主機能を訴求する）: Point番号付きの見出し、紫グラデの2行小見出し、手持ち写真＋白文字の順に並べます。続けて補足ボックスと、吹き出しを散らした合成ビジュアルを置きます。
5. **特長2（収録音声）**（収録内容の魅力を伝える）: キャラクター写真の周りに台詞の六角吹き出しを3つ配置します。パーツ写真はパネル外へはみ出させます。
6. **特長3（造形仕様）**（変形や造形の細部を見せる）: 黒紫の枠の中に、番号付きキャプションの付いた3形態の写真を2列で並べます。発光部はパーツ図解で説明します。
7. **特長4（BGM収録）**（付加価値を伝える）: 左に説明文、右にキャラクター写真を置きます。左下には番号付きの濃紫のリスト枠を重ねます。
8. **フッター**（権利表記）: 黒地に小さな白文字で中央に配置します。

## Imagery

- 商品写真は黒〜紫の背景で撮り、輪郭に紫の発光を加えます。
- キャラクターは切り抜き、斜めの構図で迫力を出します。
- 背景には紫の霧や岩のような暗い抽象テクスチャを敷きます。
- 四隅の装飾は紫の唐草やゴシック調の曲線にします。
- 部品の図解は引き出し線と白い小ラベルで示します。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC画像がないため、PCでは巻物パネルを最大幅750px前後で中央に置き、左右は岩肌テクスチャで埋めることを推奨します。
- PCではファーストビューのビジュアルを横長にし、キャッチを左右に分けて配置します。
- 形態写真の2列グリッドは、PCでは3列にします。
- 吹き出しはPCでも写真に重ねた配置を保ちます。

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