DESIGN.md — 黒×紫電の特撮玩具 商品紹介 LP（Dark Purple Tokusatsu Toy Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒地・紫の稲妻・金枠パネル・セリフ吹き出し・ルビ付き極太文字・番号付き機能紹介
• 地の質感: 黒地にひび割れた岩肌やチョコが溶けたようなテクスチャ。パネル内は赤紫のグロー光
• 形: ギザギザの稲妻帯、刺々しい吹き出し、細い金縁の四角パネル
• 温度感: 暗くて熱い。紫と赤の光で夜のヒーローっぽい高揚感

Colors

• 地は常に黒。セクション内は赤紫〜赤茶のグラデのパネルで囲む
• 見出しは白文字で、背後に紫の稲妻帯を敷く
• パネルは細い金色の線で縁取る
• セリフ吹き出しは黒地に白文字、縁をマゼンタで光らせる
• 商品一覧だけ淡いラベンダーの明るい地に切り替える
• 数字やキャッチの強調は白文字＋紫や水色の太いフチ取り

Typography

• 見出しは極太で、白文字に黒や紫の太いフチ取りを付ける
• 難しい漢字には小さいルビを振る
• セリフは右上がりに少し傾けて躍動感を出す
• 番号は金属っぽい質感の大きな数字にする
• 本文の量は少なく、吹き出しの短い言葉で伝える
• 注釈は小さく、パネル下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とアイテムはずらして重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 機能ごとに番号見出しと金枠パネルを 1 セットにする
• パネルは左右 4% だけ余白を取って画面幅いっぱい近くまで広げる
• キャラ写真とアイテム写真を対角に置いて重ねる
• 吹き出しはアイテムや人物のそばに重ねる
• 商品一覧は 2 個ずつ左右交互にジグザグで並べる

Elevation & Depth

• パネルには紫や赤の外側グローを付ける
• アイテム切り抜き写真にはドロップシャドウと縁の光を付ける
• 見出し文字は太いフチ取りで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: アイテムとキャラは輪郭で切り抜く。キャスト写真は四角いまま背景に溶け込ませる
• セクション境界: 紫の稲妻型の帯と細い紫ラインでセクションを区切る
• パネルは角丸なしか小さめの角丸にする
• 吹き出しはトゲのある形か、斜めにカットした平行四辺形にする
• セット番号ラベルはピル型にする
• ボタンを押す動きは青い矢印と英字の PUSH で示す

Components

• 番号付き稲妻見出し（lightning-heading）: 大きな金属調の数字に、白い極太見出しを続ける。背後に紫のギザギザ帯を敷く
• 金枠グローパネル（gold-frame-panel）: 赤紫のグラデ地を細い金線で囲む。中に写真と吹き出しを重ねる
• セリフ吹き出し（speech-bubble）: 黒地に白文字。縁はマゼンタで、斜めの平行四辺形かトゲのある形にする
• 効果音タグ（sound-tag）: 白地に赤い文字の斜めのタグ。マゼンタの縁取りを付ける
• 感情ラベル列（emotion-chips）: 白い地に黒文字の短い言葉を横に並べる。外側を濃いグレーの枠で囲む
• モード切替図（mode-switch）: 2 つのモード名を紫の帯にして、左右向きの矢印でつなぐ
• セット番号ラベル（set-label）: 商品の下に置くピル型ラベル。セットごとに色を変える
• 注釈（footnote）: パネル下に置く小さな ※ の注意書き

Do's and Don'ts

Do - 地は黒にして、テクスチャとグローで奥行きを出す - 見出しには必ず稲妻か紫の帯を添える - 劇中セリフは吹き出しや斜めの文字にして感情を見せる - 漢字にはルビを振って子どもでも読めるようにする - 機能は番号順に 1 つずつパネルで説明する

Don't - 白い地でフラットな企業サイト風にしない - 細い明朝や細いゴシックを見出しに使わない - パステルを全体に使わない（一覧セクションだけにする） - 長い説明文の段落を置かない - パネルの金枠と紫グローを省かない

Page Structure

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

1. ファーストビュー（キャラとアイテムで世界観を一気に見せる）: 黒地にキャラとアイテムを 3 組、ジグザグに配置する。各組に吹き出しと斜めのセリフを添える
2. 商品メインビジュアル（セット内容と出演キャストを見せる）: キャスト写真の手前にアイテム 3 個を並べる。縦書きの極太コピーとロゴ風の商品名を置く
3. 機能1 ボイス（収録音声の楽しさを伝える）: 番号見出しの下に金枠パネルを置く。人物とアイテムを交互に並べ、セリフ吹き出し・感情ラベル・モード切替図を入れる
4. 機能2 自動モード（遊び方の違いを見せる）: コミック風のドット背景の上にアイテムを並べ、ポップなロゴ見出しを置く
5. 機能3 BGM（続報を予告する）: 紫カーテンを背景にキャラを置く。英字の予告コピーを水色の装飾文字で入れる
6. 機能4 連動遊び（別売りアイテムとの組み合わせを見せる）: 操作手順を矢印・PUSH・効果音タグで図解する。別売りの注釈を添える
7. シリーズ一覧（ほかのセットも集めたくさせる）: 淡いラベンダーのドット地にする。2 個ずつジグザグに並べ、ピル型のセット番号を付ける

Imagery

• アイテムは輪郭で切り抜いた正面寄りの商品写真にし、ふちを光らせる
• キャラは逆光気味のスチルにして、紫や赤の光を当てる
• キャストは暗い背景のポートレートにする
• 背景は岩のひび割れや溶けたチョコのような質感にし、暗く沈める
• コミック風のドット模様や吹き出し、稲妻型の装飾を足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 750px）のカラムを置き、左右は黒地のテクスチャで埋める
• PC ではパネル内を写真と吹き出しの 2 カラムに広げてもよい
• シリーズ一覧は PC で 3〜4 列のグリッドにする
• 見出しの稲妻帯はカラム幅に合わせて伸ばす

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 行書くと起動時に読み込まれる。