DESIGN.md — 黒×深紅の特撮玩具ギミック紹介 LP（Dark Red Hero Toy Feature LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒地・深紅グラデ・極太明朝・虹色番号・擬音吹き出し・発光表現
• 地の質感: 黒地に赤いかすれ・煙・発光のテクスチャを重ねた、劇場風のドラマチックな質感
• 形: 角丸のない直線的な帯と枠。吹き出しはギザギザの爆発型や斜めに傾けた矩形
• 温度感: 暗く熱い。黒と深紅で緊張感を出し、白文字で強く打ち出す

Colors

• 地は黒を基本にして、機能セクションでは周辺から深紅のグラデーションと煙のテクスチャを重ねる
• 見出しは白帯に黒文字、または黒地に白文字にする。どちらも高コントラストで太く見せる
• 赤のベタ帯は要点の一行（収録数など）だけに使う
• CASE 番号は虹色（水色・緑・ピンク・紫）のグラデーションで塗り、暗い地から浮かせる
• 擬音ラベルは赤・黄の小さな矩形で、商品写真のそばに斜めに配置する
• 緑・橙・赤のラベルは段階やモードの違いを示すときだけ使う

Typography

• 見出しは極太の明朝体にして、迫力と格を出す
• 子ども向けなので、漢字にはふりがなを小さく振る
• 縦書きの見出しを写真の左右に置き、画面の端まで大きく使う
• 擬音は太いゴシックにして、末尾に「…!!」を付けて勢いを出す
• 本文は最小限にとどめ、短い宣言文の見出しで機能を伝える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書きコピーを左右に重ねて配置
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 各機能は「CASE 番号＋白帯見出し」から始め、写真と説明を続ける
• 商品の切り抜き写真は画面幅いっぱいに大きく置き、周りに吹き出しを散らす
• 縦書きコピーは写真の左右の余白に重ねる
• 図解パネルは赤枠で 2 つ横に並べる
• 要点の一文は全幅の赤帯にして区切る

Elevation & Depth

• 影はほとんど付けず、赤い発光（グロー）で商品を浮かせる
• 白帯見出しは黒の太い縁取りで強調する
• 吹き出しは白地に黒い縁取りを付け、平面的に重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。人物は背景と溶け込ませた合成
• セクション境界: 区切り線は使わず、黒から深紅へのグラデーションや煙のテクスチャで場面を切り替える
• 角丸は使わず、直線的でシャープにする
• 吹き出しはギザギザ型か、尾の付いた斜めの矩形にする
• ラベルは少し回転させて動きを出す

Components

• CASE 番号（case-number）: 縦書きの英字ラベルと、虹色グラデーションの巨大な数字を組み合わせたもの
• 白帯見出し（headline-band）: 白い矩形の中に黒の極太明朝。左右に横線を付けることもある
• 赤帯の要点（red-band）: 全幅の赤ベタ帯に白い明朝で、収録数などを強調する
• 擬音ラベル（sfx-label）: 赤や黄の小さな矩形に擬音を入れ、斜めに置く
• セリフ吹き出し（speech-bubble）: 白地に黒縁のギザギザ吹き出しで、キャラクターの音声を表す
• 図解パネル（diagram-panel）: 赤枠で囲んだ分解図・側面図。引き出し線と部位名を付ける
• モード切替フロー（mode-flow）: 緑・橙・赤のラベルを矢印でつなぎ、段階を示す

Do's and Don'ts

Do - 黒と深紅を主役にして、赤い発光で商品を目立たせる - 機能は CASE 番号で順番に区切る - 擬音や吹き出しを商品の周りに配置して、音や動きを可視化する - 漢字にはふりがなを付ける - 画像に関する注釈は小さく添える

Don't - 淡い色や白地中心の、明るい構成にしない - 角丸やピル型ボタンでやわらかくしない - 細いゴシックの長文で説明しない - CASE 番号を単色で塗らない - 写真を四角い枠に収めない（切り抜きを使う）

Page Structure

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

1. ファーストビュー（キャラクターと商品の魅力を一目で伝える）: 黒い煙の背景にキャラクターと人物を合成し、左右に縦書きコピー、手前に発光する商品、下部に商品ロゴを置く
2. 新規設計の紹介（本体のつくりの違いを示す）: CASE 0 と白帯見出しを置き、商品を 2 つ並べて比較する。縦書き説明を添える
3. 内部構造の図解（ギミックの仕組みを説明する）: 赤地の上に赤枠の図解パネルを 2 つ並べ、白い極太見出しを入れる
4. モードの紹介（音声モードの種類を見せる）: 白帯見出しの下に、色分けしたラベルを矢印フローでつなぐ
5. 機能 1（連動ギミック）（別売り商品との連動を訴求する）: 深紅の地に巨大な縦書きの機能名を置き、商品写真の周りに擬音ラベルと赤い説明ボックスを並べる
6. 機能 2（音声収録）（収録された音声を訴求する）: 商品の周りにセリフ吹き出しを散らし、赤帯で収録数を強調する
7. 機能 3（単体ギミック）（単体での遊び方を見せる）: CASE 3 と白帯見出し、擬音ラベル付きの商品写真で構成する
8. 機能 4（BGM 収録）（特典となる音源を訴求する）: 商品の大きな写真に音符の吹き出しを添え、赤帯で曲名と収録数を示す
9. 権利表記（著作権を表示する）: 深紅の地の最下部に、小さな白文字で中央揃えにする

Imagery

• 商品は背景を抜き、赤いグローを付けて暗い地から浮かせる
• キャラクターや人物は、煙やかすれと溶け込むように合成する
• 背景は黒地に赤い煙・炎・ブラシのかすれを重ねる
• 必殺技は光の筆記体の軌跡やスパークで表現する
• 引き出し線付きの CG 分解図で内部構造を見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC では中央に 600〜750px 幅でカラムを置き、左右は黒地で埋めることを推奨
• 縦書きコピーと写真の重なりは SP のまま保ち、全体を拡大する
• 図解パネルとモードフローは、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 行書くと起動時に読み込まれる。