DESIGN.md — 黒×深紅の変身玩具ギミック紹介 LP（Dark Crimson Tokusatsu Toy Feature LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型
• キーワード: 黒×深紅・回路パターン・斜体の効果音・番号ステップ・商品の切り抜き写真
• 地の質感: 黒地に赤い光のグロー、薄いデジタル回路線と放射状の光。パネル内は淡いグレーの斜めストライプ
• 形: 平行四辺形の見出し帯と吹き出し、角張った赤い枠線のパネル
• 温度感: 熱く暗い。赤い発光と黒のコントラストが強い

Colors

• 地は黒。FV 上部だけ暗い赤から黒へ縦にグラデーションさせる
• ステップの説明パネルは淡いグレー地に斜めストライプ。外側を深紅の太い枠線で囲む
• 見出し帯は黒〜ワインレッド地に白い斜体文字
• 効果音吹き出しは白地に赤文字＋赤枠。決め台詞の 1 つだけ黄色地にする
• 蛍光イエローグリーンは商品の色だけ。UI では使わない

Typography

• 見出しと効果音は極太で、右に傾ける（skew -10° 前後）
• 効果音や英語の台詞は吹き出しの中に入れる
• ステップ番号は大きな斜体数字にし、赤い縁取りを付ける
• 本文は短い 1〜2 行。太字で操作の順番を書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。パネル内で商品とキャラクターを重ねて自由に配置する
• 本文ブロックの幅: 画面幅の約 96%
• 余白: セクション間 24px、基本単位 8px、カード内 12px（375px 幅換算）
• ステップごとに見出し帯とパネルを 1 セットにして縦に並べる
• パネルは画面の端から端近くまで広げる（左右に約 2% の余白）
• 説明は左に、キャラクター写真は右にはみ出して重ねる
• 注釈はパネルの右下に小さく置く

Elevation & Depth

• 影は使わず、赤いグロー（外側への光）で奥行きを出す
• 切り抜き写真の背後に放射状の光を置く
• 吹き出しは平面。枠線だけで浮かせる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品とキャラクターは背景を抜いた切り抜き。パネルの枠からはみ出させる
• セクション境界: 深紅の太い枠線と斜めカットの見出し帯で区切る
• 見出し帯や吹き出しは平行四辺形にする
• 角丸は使わない
• 矢印は太い三角や斜めの矢印で操作する場所を示す

Components

• 番号付き見出し帯（step-heading-band）: 左に大きな斜体の番号、右に斜体の白い見出し。黒〜ワインレッド地で右端を斜めにカットする
• ギミック説明パネル（step-panel）: 淡いグレーの斜めストライプ地を深紅の太枠で囲み、写真と吹き出しを重ねる
• 効果音吹き出し（sfx-bubble）: 白地に赤い斜体文字、赤い枠の平行四辺形。尖ったしっぽで商品を指す
• 決め台詞の強調吹き出し（sfx-bubble-highlight）: 黄色地に黒い極太斜体。赤い太枠で最後の決め台詞を強調する
• 英語の音声吹き出し（quote-bubble-en）: 白地に黒い斜体の英文。赤い枠でベルトの音声を表す
• 操作の矢印（pointer-arrow）: 赤い太い矢印で押す場所やスライドの方向を示す
• 別売り注釈（note-text）: パネル右下に置く小さな米印つきの注釈

Do's and Don'ts

Do - 黒と深紅を主役にし、赤く光らせてドラマチックにする - 効果音は必ず斜体の吹き出しにして商品の近くに置く - ステップは番号付きで、操作→反応の順に見せる - 商品は切り抜きで大きく、斜めの角度で迫力を出す - 背景に薄い回路線や放射光を入れる

Don't - パステルや丸い角を使わない - ボタンだらけのEC風レイアウトにしない - 長い説明文を書かない - 黄色の強調吹き出しを何個も使わない - 商品写真を四角い枠に入れて小さく並べない

Page Structure

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

1. ファーストビュー（キャラクターと商品で世界観を一気に伝える）: 暗赤から黒へのグラデ地に回路模様を重ねる。キャラ写真を上に、商品を手前に斜めに置き、斜めのキャッチと極太の商品名ロゴを添える
2. ギミック紹介①（変身）（操作の手順と変身の音声を順番に伝える）: 番号付き見出し帯の下にストライプパネル。3 段の操作説明と効果音吹き出し、右にキャラ写真、下に英語の音声吹き出しを置く
3. 注釈（別売りの品を知らせる）: パネル右下に小さな灰色の文字
4. ギミック紹介②（必殺技）（必殺技の演出の盛り上がりを伝える）: 同じ見出し帯とパネル。太字のリード文の下に商品を大きく置き、吹き出しを段々大きくして最後を黄色で決める
5. 権利表記（著作権を表示する）: ページ左下に小さな白文字

Imagery

• 商品は光る部分を点灯させて撮り、切り抜いて斜め 20〜30° に置く
• キャラクターはローアングル気味の正面で、黒背景に赤いリムライトを当てる
• 背景は暗い赤の光と細いデジタル回路線、放射状の光の筋
• パネル内は淡いグレーの斜めストライプ地
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央 750px 前後に同じ縦長の構成を置き、外側は黒地で埋める
• PC ではパネル内を左右 2 カラムにする（左に操作説明、右にキャラ）
• 吹き出しや見出しは画像として拡大し、斜めの角度は変えない

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