--- version: alpha name: Electric Shock Party Game Variety LP description: 漆黒の背景に青白い稲妻と黄色の極太文字を重ねた、テレビのバラエティ番組風の玩具 LP。遊び方を手順のフローで縦に並べ、ミントグリーンの説明枠・赤と青のプレイヤーラベル・黄色の矢印で順番に読ませる。 colors: background: '#020607' background-alt: '#010101' primary: '#EDDA24' text: '#020101' surface: '#9BCBCC' text-body: '#181B1D' accent-1: '#C8102E' accent-2: '#1565C0' accent-3: '#E0102A' line: '#ECE161' on-dark: '#E5EDF3' marker: '#FF2A2A' typography: display: fontFamily: Dela Gothic One fontSize: 80px fontWeight: 900 lineHeight: 1.05 headline-lg: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.2 headline-md: fontFamily: Dela Gothic One fontSize: 38px fontWeight: 900 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 10px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' warning-box: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px step-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px player-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 24px flow-arrow: backgroundColor: '{colors.primary}' height: 70px section-title-red: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px section-title-yellow: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 38px callout-tag: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 30px glow-headline: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 140px --- # DESIGN.md — 黒×稲妻×黄のバラエティ玩具 LP（Electric Shock Party Game Variety LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 稲妻・バラエティ番組・黒地に黄色・手順フロー・警告テープ・赤い発光 - **地の質感**: 黒地にうっすら装飾柄の縦帯を敷き、稲妻と赤い光の演出を重ねる。 - **形**: 角のある長方形の枠と斜めに切ったラベル、ジグザグの稲妻矢印。 - **温度感**: 暗く刺激的で、黄色と赤がギラつく高コントラスト。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#020607` | ページ全体の黒い地 | 45% | 画素の実測 | | `background-alt` | `#010101` | 装飾柄のある濃いグレーの縦帯 | 15% | 画素の実測 | | `primary` | `#EDDA24` | メイン見出し・ラベル・矢印の黄色 | 6% | 画素の実測 | | `text` | `#020101` | 黄色ラベル上の黒文字 | 1% | 画素の実測 | | `surface` | `#9BCBCC` | 手順説明のミントグリーン枠 | 8% | 画素の実測 | | `text-body` | `#181B1D` | 説明枠内の本文 | 1% | 画素の主要色に補正 | | `accent-1` | `#C8102E` | プレイヤー1ラベル・小見出し帯の赤 | 2% | 推定 | | `accent-2` | `#1565C0` | プレイヤー2ラベルの青 | 1% | 推定 | | `accent-3` | `#E0102A` | 強調語の赤文字 | 0% | 推定 | | `line` | `#ECE161` | 説明枠の黄色フチ | 0% | 画素の主要色に補正 | | `on-dark` | `#E5EDF3` | 黒地上の白文字・注釈 | 1% | 画素の主要色に補正 | | `marker` | `#FF2A2A` | 見出しの赤い発光グロー | 2% | 推定 | - 地は常に黒。縦帯の装飾柄は濃グレーで控えめにする。 - 主見出しは黄色の極太文字か、白文字に赤いグローをかける。 - 手順説明はミントグリーン地に黄色フチの枠で統一する。 - プレイヤーの区別は赤ラベルと青ラベルで色を分ける。 - 本文中のキーワードは赤文字で強調する。 - 黄色ラベルの上は黒文字にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書き風の巨大キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 80px | 1.05 | 0.0em | | `headline-lg` | 白に赤グローの訴求見出し | 明朝 | Shippori Mincho | 800 | 40px | 1.2 | 0.0em | | `headline-md` | 黄色極太の段階見出し | ゴシック | Dela Gothic One | 900 | 38px | 1.2 | 0.0em | | `headline-sm` | 赤帯・黄帯のセクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em | | `accent` | プレイヤーラベルの斜体太字 | ゴシック | Noto Sans JP | 900 | 18px | 1.2 | 0.0em | | `body-md` | 説明枠内の本文（中央揃え） | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.0em | | `note` | 注釈・電池等の補足 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - 見出しは極太で、黒い縁取りや影をつけて黒地から浮かせる。 - 訴求見出しは筆っぽい太明朝に赤い外側グローをかける。 - ラベル文字はやや斜体にして勢いを出す。 - 説明本文は小さめの太ゴシックで中央揃えにする。 - 見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-b28f37ab`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000243792/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。