DESIGN.md — 黒×稲妻×黄のバラエティ玩具 LP（Electric Shock Party Game Variety LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 稲妻・バラエティ番組・黒地に黄色・手順フロー・警告テープ・赤い発光
• 地の質感: 黒地にうっすら装飾柄の縦帯を敷き、稲妻と赤い光の演出を重ねる。
• 形: 角のある長方形の枠と斜めに切ったラベル、ジグザグの稲妻矢印。
• 温度感: 暗く刺激的で、黄色と赤がギラつく高コントラスト。

Colors

• 地は常に黒。縦帯の装飾柄は濃グレーで控えめにする。
• 主見出しは黄色の極太文字か、白文字に赤いグローをかける。
• 手順説明はミントグリーン地に黄色フチの枠で統一する。
• プレイヤーの区別は赤ラベルと青ラベルで色を分ける。
• 本文中のキーワードは赤文字で強調する。
• 黄色ラベルの上は黒文字にする。

Typography

• 見出しは極太で、黒い縁取りや影をつけて黒地から浮かせる。
• 訴求見出しは筆っぽい太明朝に赤い外側グローをかける。
• ラベル文字はやや斜体にして勢いを出す。
• 説明本文は小さめの太ゴシックで中央揃えにする。
• 見出しは 2〜3 行に改行し、行ごとに文字の大きさを変える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで縦一列
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 48px、基本単位 8px、カード内 10px（375px 幅換算）
• 商品写真は画面幅いっぱいに大きく見せる。
• 手順は写真→ラベル→説明枠→矢印の順に繰り返す。
• 説明枠は左右 9% ほど余白をとって中央に置く。
• 部位の注釈は写真の上に指差しアイコンと黄色ラベルで重ねる。

Elevation & Depth

• 影は使わず、発光（グロー）で奥行きを出す。
• 見出し文字には黒の太い縁取りとドロップシャドウをつける。
• 切り抜き写真は黒地にそのまま置き、稲妻や赤い光線を背後に重ねる。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と手は背景を抜いた切り抜き。人物の場面写真だけ長方形。
• セクション境界: 区切り線は使わず、黒地のまま見出しと矢印でつなぐ。
• 枠は角丸なしの長方形にする。
• ラベルは平行四辺形にして右上がりの勢いを出す。
• 注意書きは黄黒の警告テープ柄で囲む。
• 矢印は黄色のジグザグ稲妻と下向き三角で描く。

Components

• 警告テープ枠（warning-box）: 黄色地の上下に黄黒ストライプを入れた注意書きボックス。
• 手順説明枠（step-box）: ミントグリーン地に黄色の二重フチ。本文は中央揃え。
• プレイヤーラベル（player-label）: 説明枠の左上に重なる赤または青の斜体ラベル。
• 稲妻矢印（flow-arrow）: 手順の間に置く黄色の稲妻と下向き三角の矢印。
• 赤帯見出し（section-title-red）: 赤い長方形の帯に白い極太文字。ルール系の見出しに使う。
• 黄帯見出し（section-title-yellow）: 黄色の帯に黒い太字。セット内容の見出しやアイテム名に使う。
• 部位注釈タグ（callout-tag）: 指差しイラストと黄色の小ラベルで商品の各部を指し示す。
• 発光見出し（glow-headline）: 白い太明朝に赤いネオングロー。訴求の決めの一言に使う。

Do's and Don'ts

Do - 黒地で統一し、黄色と赤で刺激を出す。 - 手順は写真と説明枠を交互に置き、矢印でつなぐ。 - 見出しには縁取りかグローを必ずつける。 - 安全上の注意はページ冒頭の警告テープ枠にまとめる。 - 強調語は赤文字で一部だけ目立たせる。

Don't - 白やパステルの明るい地を広く使わない。 - 角丸の柔らかいカードやピル型ボタンにしない。 - 細い文字の見出しを使わない。 - 説明枠の色を手順ごとに変えない。 - 稲妻の演出を本文の上に重ねて読みにくくしない。

Page Structure

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

1. 注意喚起（使用できない人を最初に知らせる）: 黄黒の警告テープ枠を最上部の中央に置く。
2. ファーストビュー（番組企画を家で遊べる驚きを伝える）: 黒地に稲妻を走らせ、黄色の極太キャッチを左右にずらして配置。ロゴと商品写真で締める。
3. 商品紹介（再現度と各部の機能を示す）: 出典の白い帯ラベル、赤グロー見出し、商品写真に注釈タグを重ねる。
4. 遊び方フロー（ゲームの手順を順番に理解させる）: 黄色の段階見出しのあと、写真・プレイヤーラベル・説明枠・稲妻矢印を繰り返す。
5. クライマックス演出（電流が流れる瞬間の緊張感を見せる）: 赤い稲妻を背景に、結果を二択で示すバッジと商品写真を置く。
6. ルール説明（得点と勝敗の条件を伝える）: 赤帯見出しの下に説明枠を置き、条件は赤い丸記号で箇条書きにする。
7. 利用シーン（大人数で盛り上がる様子を見せる）: 人物の場面写真を横長で置き、赤グローのまとめ見出しを続ける。
8. セット内容（同梱物を明示する）: 黄帯見出し、切り抜き商品写真、黄色のアイテム名帯、注釈を順に並べる。
9. フッター（権利表記）: 黒地に小さな白文字を中央に置き、左右に指差しアイコンを添える。

Imagery

• 商品は白背景で撮って切り抜き、黒地に置く。
• 手が押す・差し込む動きをアップで切り抜いて重ねる。
• 青白い稲妻のブラシ素材を背景全体に走らせる。
• 盛り上がる場面は赤い電撃ラインと発光で演出する。
• 人物写真は明るい室内で、大人数が笑いながら囲む構図にする。
• 背景に暗い装飾柄の縦帯を等間隔に入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は提供されていない。PC では 480〜600px 幅の中央カラムに SP をそのまま表示し、左右は黒地で埋める。
• 稲妻の背景は左右の余白まで広げて没入感を保つ。
• 手順フローは PC でも縦一列のままにする。
• 説明本文は PC で 14px 程度まで大きくする。

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