--- version: alpha name: Dark Red Hero Toy Feature LP description: 黒地に深紅のグラデーションと赤い発光表現を重ねた、特撮ヒーロー玩具のギミックを紹介する縦長 LP。極太の明朝見出しを白帯に黒文字で置き、虹色グラデーションの「CASE 番号」で機能を順番に見せる。擬音の吹き出しと切り抜き商品写真で、迫力と情報量を両立させている。 colors: background: '#000000' primary: '#5C0101' accent-1: '#DF0305' surface: '#FEFEFE' text: '#000000' on-dark: '#F7F7FB' dark-section: '#21232A' secondary: '#32414B' accent-2: '#1F8A2A' accent-3: '#F07A0A' tint-1: '#BBD2CA' marker: '#F5D21E' typography: display: fontFamily: Shippori Mincho B1 fontSize: 44px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 34px fontWeight: 800 lineHeight: 1.2 headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 80px fontWeight: 900 lineHeight: 1.0 body-md: fontFamily: Dela Gothic One fontSize: 13px fontWeight: 400 lineHeight: 1.3 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 8px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' case-number: textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 90px headline-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 44px red-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px sfx-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 20px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px diagram-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 160px mode-flow: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 60px --- # DESIGN.md — 黒×深紅の特撮玩具ギミック紹介 LP（Dark Red Hero Toy Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 黒地・深紅グラデ・極太明朝・虹色番号・擬音吹き出し・発光表現 - **地の質感**: 黒地に赤いかすれ・煙・発光のテクスチャを重ねた、劇場風のドラマチックな質感 - **形**: 角丸のない直線的な帯と枠。吹き出しはギザギザの爆発型や斜めに傾けた矩形 - **温度感**: 暗く熱い。黒と深紅で緊張感を出し、白文字で強く打ち出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの地色（黒） | 30% | 画素の主要色に補正 | | `primary` | `#5C0101` | 機能セクションの深紅グラデーションの地 | 25% | 画素の実測 | | `accent-1` | `#DF0305` | 赤帯・赤枠・強調ラベルの赤 | 6% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 見出しの白帯 | 6% | 画素の実測 | | `text` | `#000000` | 白帯上の見出し文字 | 3% | 画素の実測 | | `on-dark` | `#F7F7FB` | 黒地上の白い見出し・本文 | 5% | 画素の実測 | | `dark-section` | `#21232A` | 商品比較パートの濃グレー地 | 12% | 画素の主要色に補正 | | `secondary` | `#32414B` | 図解パネル内の濃紺地 | 3% | 画素の主要色に補正 | | `accent-2` | `#1F8A2A` | モード表示の緑ラベル | 1% | 推定 | | `accent-3` | `#F07A0A` | モード表示の橙ラベル | 1% | 推定 | | `tint-1` | `#BBD2CA` | CASE 番号の虹色グラデーションの淡色 | 2% | 画素の主要色に補正 | | `marker` | `#F5D21E` | 擬音ラベルの黄色 | 1% | 推定 | - 地は黒を基本にして、機能セクションでは周辺から深紅のグラデーションと煙のテクスチャを重ねる - 見出しは白帯に黒文字、または黒地に白文字にする。どちらも高コントラストで太く見せる - 赤のベタ帯は要点の一行（収録数など）だけに使う - CASE 番号は虹色（水色・緑・ピンク・紫）のグラデーションで塗り、暗い地から浮かせる - 擬音ラベルは赤・黄の小さな矩形で、商品写真のそばに斜めに配置する - 緑・橙・赤のラベルは段階やモードの違いを示すときだけ使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きの大きな訴求コピー・機能名の巨大文字 | 明朝 | Shippori Mincho B1 | 800 | 44px | 1.1 | 0.0em | | `headline-lg` | 白帯の中の機能見出し | 明朝 | Shippori Mincho B1 | 800 | 34px | 1.2 | 0.0em | | `headline-md` | 黒地上の白い見出し | 明朝 | Noto Serif JP | 900 | 24px | 1.3 | 0.0em | | `headline-sm` | 写真横の縦書き説明 | 明朝 | Noto Serif JP | 800 | 20px | 1.3 | 0.02em | | `accent` | CASE 番号の数字・英字ラベル | 欧文セリフ | Playfair Display | 900 | 80px | 1.0 | 0.0em | | `body-md` | 擬音・吹き出し内のセリフ | ゴシック | Dela Gothic One | 400 | 13px | 1.3 | 0.0em | | `note` | 画像キャプション・注釈・権利表記 | ゴシック | Noto Sans JP | 500 | 9px | 1.4 | 0.0em | - 見出しは極太の明朝体にして、迫力と格を出す - 子ども向けなので、漢字にはふりがなを小さく振る - 縦書きの見出しを写真の左右に置き、画面の端まで大きく使う - 擬音は太いゴシックにして、末尾に「…!!」を付けて勢いを出す - 本文は最小限にとどめ、短い宣言文の見出しで機能を伝える - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-a9ebf78a`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000239262/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（4/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。