--- version: alpha name: Dark Crimson Tokusatsu Toy Feature LP description: 黒地に深紅のグラデーションとデジタル回路模様を重ねた、ヒーロー変身玩具の機能紹介 LP。番号付きの斜めカット見出し帯でギミックを順番に見せる。商品写真に斜体の効果音吹き出しを重ねて、音と光の演出を伝える。 colors: primary: '#B71A20' background: '#000000' dark-section: '#78181E' secondary: '#78181E' surface: '#FDFDFD' background-alt: '#D2D6D9' text: '#101010' on-dark: '#FBFBFA' accent-1: '#B71A20' accent-2: '#FFE600' accent-3: '#D4E83A' text-muted: '#868880' typography: display: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Dela Gothic One fontSize: 16px fontWeight: 900 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.3 rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 12px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' step-heading-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px step-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px sfx-bubble: backgroundColor: '{colors.on-dark}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 32px sfx-bubble-highlight: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.accent}' height: 40px quote-bubble-en: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 34px pointer-arrow: backgroundColor: '{colors.accent-1}' height: 20px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 10px --- # DESIGN.md — 黒×深紅の変身玩具ギミック紹介 LP（Dark Crimson Tokusatsu Toy Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型 - **キーワード**: 黒×深紅・回路パターン・斜体の効果音・番号ステップ・商品の切り抜き写真 - **地の質感**: 黒地に赤い光のグロー、薄いデジタル回路線と放射状の光。パネル内は淡いグレーの斜めストライプ - **形**: 平行四辺形の見出し帯と吹き出し、角張った赤い枠線のパネル - **温度感**: 熱く暗い。赤い発光と黒のコントラストが強い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B71A20` | ブランドの深紅（枠線・帯） | 6% | 画素の主要色に補正 | | `background` | `#000000` | ページの黒地 | 30% | 画素の実測 | | `dark-section` | `#78181E` | FV上部の暗赤グラデ地 | 8% | 画素の主要色に補正 | | `secondary` | `#78181E` | 見出し帯の濃いワインレッド | 6% | 画素の主要色に補正 | | `surface` | `#FDFDFD` | ステップパネルの淡いグレー地 | 18% | 画素の実測 | | `background-alt` | `#D2D6D9` | パネル内の斜めストライプ | 8% | 画素の実測 | | `text` | `#101010` | パネル上の黒い見出し文字 | 2% | 画素の実測 | | `on-dark` | `#FBFBFA` | 黒地上の白文字 | 2% | 画素の実測 | | `accent-1` | `#B71A20` | 効果音吹き出しの赤 | 3% | 画素の主要色に補正 | | `accent-2` | `#FFE600` | 強調吹き出しの黄色 | 1% | 推定 | | `accent-3` | `#D4E83A` | 商品の蛍光イエローグリーン | 2% | 推定 | | `text-muted` | `#868880` | 注釈・権利表記 | 0% | 画素の主要色に補正 | - 地は黒。FV 上部だけ暗い赤から黒へ縦にグラデーションさせる - ステップの説明パネルは淡いグレー地に斜めストライプ。外側を深紅の太い枠線で囲む - 見出し帯は黒〜ワインレッド地に白い斜体文字 - 効果音吹き出しは白地に赤文字＋赤枠。決め台詞の 1 つだけ黄色地にする - 蛍光イエローグリーンは商品の色だけ。UI では使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名ロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.1 | 0.02em | | `headline-lg` | FV の斜め配置キャッチ | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.0em | | `headline-md` | 番号付きステップ見出し帯 | ゴシック | Noto Sans JP | 900 | 15px | 1.3 | 0.0em | | `headline-sm` | パネル内のリード文 | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0.0em | | `body-md` | 操作手順の短い説明 | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.0em | | `accent` | 効果音吹き出しの斜体文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 16px | 1.1 | 0.0em | | `note` | 別売り注釈・権利表記 | ゴシック | Noto Sans JP | 400 | 7px | 1.3 | 0.0em | - 見出しと効果音は極太で、右に傾ける（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 ```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-d5f298ff`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000213724/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。