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

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

Overview

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

Colors

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

Typography

• 見出しも本文も明朝の太字を基本にし、中世ファンタジー感を出します。
• セクション見出しには紫の外光（グロー）とかすれた質感を付けます。
• 見出しの左に、筆記体の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

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

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