--- version: alpha name: Tokusatsu Toy Comic Burst LP description: 明るいグレー地に黄色と黒の稲妻帯見出しを重ね、キャラクター写真と商品の切り抜きを大きく配置した玩具紹介 LP。漫画風の吹き出し、集中線、網点を多用して、にぎやかで勢いのある見た目にしている。機能を番号付きで順番に見せる構成。 colors: primary: '#FDD303' background: '#FEFFFD' surface: '#FDFDFD' dark-section: '#0A0701' on-dark: '#FDFDFD' secondary: '#E2BD6B' accent-1: '#E3201E' accent-2: '#2FA4E0' accent-3: '#E09946' tint-1: '#E6D9F0' text: '#080409' text-muted: '#444444' accent-2-accessible: '#1A7CAE' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: M PLUS 1p fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 accent: fontFamily: Dela Gothic One fontSize: 16px fontWeight: 400 lineHeight: 1.2 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 10px section: 50px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-bolt-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 70px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 480px speech-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 50px mode-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 24px big-number: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 36px note-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 14px set-tag: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 26px push-arrow: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 30px --- # DESIGN.md — 黄×黒の集中線で魅せる特撮玩具 LP（Tokusatsu Toy Comic Burst LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 集中線・黄×黒・漫画吹き出し・切り抜き商品・番号見出し・網点 - **地の質感**: 網点ハーフトーンと放射状の集中線、光のエフェクトを重ねたにぎやかな質感 - **形**: 斜めにギザギザした稲妻帯、角丸の小さい枠、爆発形の吹き出し - **温度感**: 暖色の黄が主役で、補色の水色と紫でアクセントを付けた高温・高彩度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDD303` | ブランドの黄（枠・帯・商品色） | 10% | 画素の実測 | | `background` | `#FEFFFD` | ページの地色（明るいグレー） | 30% | 画素の実測 | | `surface` | `#FDFDFD` | 機能説明の白い枠内 | 9% | 画素の主要色に補正 | | `dark-section` | `#0A0701` | 見出し帯・説明帯の黒 | 7% | 画素の実測 | | `on-dark` | `#FDFDFD` | 黒帯の上の白文字 | 2% | 画素の主要色に補正 | | `secondary` | `#E2BD6B` | サブの帯見出し（黄土色グラデ） | 4% | 画素の主要色に補正 | | `accent-1` | `#E3201E` | 強調文字の赤（数値・注意帯） | 2% | 推定 | | `accent-2` | `#2FA4E0` | 水色の吹き出し・強調文字 | 4% | 推定 | | `accent-3` | `#E09946` | オレンジの吹き出し | 4% | 画素の主要色に補正 | | `tint-1` | `#E6D9F0` | パステル紫の網点の地 | 5% | 推定 | | `text` | `#080409` | 見出し・本文の黒文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#444444` | 注釈のグレー文字 | 1% | 推定 | | `accent-2-accessible` | `#1A7CAE` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレーで統一し、カード枠と帯には黄色を使う - 見出し帯は黒地に白文字、番号だけ黄色の太字にする - 数値や重要な一文は赤文字に黒フチで強調する - キャラクターごとに黄・水色・紫の吹き出し色を使い分ける - 注釈帯だけ赤地に白文字を使う - カード内の地はパステルの網点や光のエフェクトでにぎやかにする - `speech-bubble` は文字 `#FDFDFD` × 背景 `#2FA4E0` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#1A7CAE`、4.55:1）を使う。 - `push-arrow` は文字 `#FDFDFD` × 背景 `#2FA4E0` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#1A7CAE`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のセリフ・大きなコピー（縦書きも可） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.15 | 0.0em | | `headline-lg` | 番号付きの機能見出し | ゴシック | M PLUS 1p | 900 | 24px | 1.3 | 0.0em | | `headline-md` | カード内の小見出し・強調文 | ゴシック | Noto Sans JP | 900 | 18px | 1.35 | 0.0em | | `headline-sm` | モード名などのラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `accent` | 吹き出しのセリフ・効果音 | 装飾・ディスプレイ | Dela Gothic One | 400 | 16px | 1.2 | 0.0em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - 見出しは極太ゴシックにして、白や黒の太いフチ取りを付ける - 漢字には小さくふりがなを振る（子ども向け） - 見出しは少し斜めにしたり、大小の文字を混ぜたりして勢いを出す - 数値は他の文字より 1.5 倍以上大きくする - 本文も太字を基本にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 50px、基本単位 8px、カード内 10px（375px 幅換算） - 機能ごとに稲妻帯の見出しと黄枠カードを 1 セットにする - カードは画面の左右端近くまで広げる - 写真と吹き出しを重ねて、余白を少なめにする - 見出し帯の右端に小さなキャラクターアイコンを置く - 注釈はカードの下端にまとめる ## Elevation & Depth - 影は使わず、太いフチ取りで立体感を出す - 文字には黒フチと光彩を付ける - 商品の周りに発光エフェクトを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物も商品も背景を切り抜き、カード枠からはみ出させる - **セクション境界**: ギザギザの稲妻形の黒帯と、斜めの集中線 - カード枠は黄色い太線で、角は直角か小さな角丸にする - 吹き出しは爆発形か、角丸に尖ったしっぽを付けた形にする - ラベルは平行四辺形や角丸の小札にする ## Components - **稲妻帯の番号見出し**（`heading-bolt-band`）: 黒と黄土色のギザギザ帯に、大きな黄色の番号と白い太字の見出しを載せる - **黄枠の機能カード**（`feature-card`）: 黄色の太い枠の中に、商品写真・吹き出し・説明をまとめる - **セリフ吹き出し**（`speech-bubble`）: オレンジや水色の吹き出しに、白抜き文字でセリフを入れる - **モード切替ラベル**（`mode-label`）: 黒帯の上に黄色と白のラベルを並べ、間に双方向の矢印を置く - **数値強調**（`big-number`）: 赤の極太文字に白フチを付けた数値訴求 - **赤い注釈帯**（`note-bar`）: カードの下端に置く、赤地に白の小さな注釈 - **シリーズ番号タグ**（`set-tag`）: シリーズごとに色を変えた角丸の札。白フチ付き - **PUSH 矢印**（`push-arrow`）: 水色の矢印と英字で、押す場所を示す ## Do's and Don'ts **Do** - 見出しには番号と稲妻帯を必ず付ける - 商品は切り抜き写真にして大きく見せる - セリフは吹き出しで、キャラクターの近くに置く - 背景に集中線や網点を入れて、動きを出す - 漢字にはふりがなを振る **Don't** - 余白の多い静かなレイアウトにしない - 細い明朝体や細字を使わない - くすんだ色や低彩度の配色にしない - フチのない文字を写真の上に直接置かない - 角の大きい柔らかなカードにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラクターと商品で、ひと目で期待感を高める）: 変身ヒーローの写真を 2 体斜めに重ね、セリフ吹き出しと極太のセリフ文字を配置する 2. **キービジュアル**（出演者と商品の訴求）: 黄色地に縦書きの大コピーを左右に置き、中央に人物と商品を置く。下に商品ロゴを置く 3. **特長1**（音声が鳴る機能の説明）: 稲妻帯の見出しと黄枠カード。セリフ吹き出し、モード切替ラベル、赤字の数値訴求を入れる 4. **特長2**（自動モードの説明）: 網点の地に爆発形の吹き出しを散らし、商品 2 点を左右に置く 5. **特長3**（収録曲の紹介）: キャラクターと商品を重ね、太字のコピーを白フチで載せる 6. **特長4**（別売の商品との連動）: 黒の斜め帯で区切り、PUSH 矢印付きの手順写真を縦に並べる 7. **シリーズ紹介**（他のセットへの誘導）: パステル網点の地に、商品と色違いのセットタグを 2 列で並べる 8. **フッター**（権利表記）: グレー地に小さな文字でコピーライトを中央に置く ## Imagery - キャラクターは劇中の写真を切り抜き、アクションポーズで斜めに配置する - 商品は正面か斜め上から撮り、白背景で切り抜く - 背景にハーフトーンの網点と放射状の集中線を入れる - 光の粒子、泡、発光でエネルギー感を出す - 背景にロゴや小さな商品をぼかして散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP の画像を中央 480〜750px 幅の 1 カラムで見せる - 左右の余白には背景の色や柄を延長する - 特長カードは PC でも縦積みのままにする - シリーズ紹介は PC では 4 列にしてもよい ## 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-7eff9aae`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000222829/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（3/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。