--- version: alpha name: Dark Purple Tokusatsu Toy Product LP description: 黒い地にクラック模様の質感を敷き、紫とマゼンタの稲妻型帯と金枠のパネルで機能を順番に見せる子ども向け特撮玩具の LP。セリフ吹き出しとルビ付きの極太ゴシックで、劇中の熱量をそのまま伝える。 colors: background: '#020101' primary: '#7A1FA8' secondary: '#A94967' accent-1: '#C9A46A' dark-section: '#5B0134' accent-2: '#950D3B' on-dark: '#FFFFFF' surface: '#100D10' background-alt: '#EDE3F2' tint-1: '#F1E4D9' accent-3: '#5FD3F0' text-muted: '#BACBD1' typography: display: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 800 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 32px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' lightning-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 56px gold-frame-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 480px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 48px sound-tag: backgroundColor: '{colors.on-dark}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px emotion-chips: backgroundColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px mode-switch: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px set-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px footnote: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 黒×紫電の特撮玩具 商品紹介 LP（Dark Purple Tokusatsu Toy Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 黒地・紫の稲妻・金枠パネル・セリフ吹き出し・ルビ付き極太文字・番号付き機能紹介 - **地の質感**: 黒地にひび割れた岩肌やチョコが溶けたようなテクスチャ。パネル内は赤紫のグロー光 - **形**: ギザギザの稲妻帯、刺々しい吹き出し、細い金縁の四角パネル - **温度感**: 暗くて熱い。紫と赤の光で夜のヒーローっぽい高揚感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#020101` | ページ地の黒 | 30% | 画素の主要色に補正 | | `primary` | `#7A1FA8` | 紫の稲妻帯・見出し帯 | 6% | 推定 | | `secondary` | `#A94967` | マゼンタのグロー・吹き出し縁 | 6% | 画素の主要色に補正 | | `accent-1` | `#C9A46A` | パネルの金枠 | 1% | 推定 | | `dark-section` | `#5B0134` | 赤茶のパネル地 | 12% | 画素の実測 | | `accent-2` | `#950D3B` | 深い赤のパネル地 | 5% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地の白見出し文字 | 3% | 推定 | | `surface` | `#100D10` | 吹き出しの黒い面 | 3% | 画素の主要色に補正 | | `background-alt` | `#EDE3F2` | ラインナップの淡いラベンダー地 | 8% | 推定 | | `tint-1` | `#F1E4D9` | キャスト背景のベージュ | 4% | 画素の主要色に補正 | | `accent-3` | `#5FD3F0` | 強調数字・水色文字 | 1% | 推定 | | `text-muted` | `#BACBD1` | 注釈のグレー文字 | 1% | 画素の主要色に補正 | - 地は常に黒。セクション内は赤紫〜赤茶のグラデのパネルで囲む - 見出しは白文字で、背後に紫の稲妻帯を敷く - パネルは細い金色の線で縁取る - セリフ吹き出しは黒地に白文字、縁をマゼンタで光らせる - 商品一覧だけ淡いラベンダーの明るい地に切り替える - 数字やキャッチの強調は白文字＋紫や水色の太いフチ取り ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品セット名ロゴ風の見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.1 | 0.0em | | `headline-lg` | 番号付き機能見出し | ゴシック | Dela Gothic One | 900 | 22px | 1.3 | 0.0em | | `headline-md` | 写真の上に斜めに置く劇中セリフ | ゴシック | Noto Sans JP | 900 | 19px | 1.3 | 0.0em | | `headline-sm` | パネル内の小見出し・操作説明 | ゴシック | Noto Sans JP | 800 | 16px | 1.4 | 0.0em | | `body-md` | 吹き出し内セリフ・説明文 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `note` | 別売り・仕様の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字の予告コピー | 欧文セリフ | Playfair Display | 900 | 32px | 1.1 | 0.0em | | `label-button` | セット番号ラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.02em | - 見出しは極太で、白文字に黒や紫の太いフチ取りを付ける - 難しい漢字には小さいルビを振る - セリフは右上がりに少し傾けて躍動感を出す - 番号は金属っぽい質感の大きな数字にする - 本文の量は少なく、吹き出しの短い言葉で伝える - 注釈は小さく、パネル下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とアイテムはずらして重ねる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - 機能ごとに番号見出しと金枠パネルを 1 セットにする - パネルは左右 4% だけ余白を取って画面幅いっぱい近くまで広げる - キャラ写真とアイテム写真を対角に置いて重ねる - 吹き出しはアイテムや人物のそばに重ねる - 商品一覧は 2 個ずつ左右交互にジグザグで並べる ## Elevation & Depth - パネルには紫や赤の外側グローを付ける - アイテム切り抜き写真にはドロップシャドウと縁の光を付ける - 見出し文字は太いフチ取りで浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: アイテムとキャラは輪郭で切り抜く。キャスト写真は四角いまま背景に溶け込ませる - **セクション境界**: 紫の稲妻型の帯と細い紫ラインでセクションを区切る - パネルは角丸なしか小さめの角丸にする - 吹き出しはトゲのある形か、斜めにカットした平行四辺形にする - セット番号ラベルはピル型にする - ボタンを押す動きは青い矢印と英字の PUSH で示す ## Components - **番号付き稲妻見出し**（`lightning-heading`）: 大きな金属調の数字に、白い極太見出しを続ける。背後に紫のギザギザ帯を敷く - **金枠グローパネル**（`gold-frame-panel`）: 赤紫のグラデ地を細い金線で囲む。中に写真と吹き出しを重ねる - **セリフ吹き出し**（`speech-bubble`）: 黒地に白文字。縁はマゼンタで、斜めの平行四辺形かトゲのある形にする - **効果音タグ**（`sound-tag`）: 白地に赤い文字の斜めのタグ。マゼンタの縁取りを付ける - **感情ラベル列**（`emotion-chips`）: 白い地に黒文字の短い言葉を横に並べる。外側を濃いグレーの枠で囲む - **モード切替図**（`mode-switch`）: 2 つのモード名を紫の帯にして、左右向きの矢印でつなぐ - **セット番号ラベル**（`set-label`）: 商品の下に置くピル型ラベル。セットごとに色を変える - **注釈**（`footnote`）: パネル下に置く小さな ※ の注意書き ## Do's and Don'ts **Do** - 地は黒にして、テクスチャとグローで奥行きを出す - 見出しには必ず稲妻か紫の帯を添える - 劇中セリフは吹き出しや斜めの文字にして感情を見せる - 漢字にはルビを振って子どもでも読めるようにする - 機能は番号順に 1 つずつパネルで説明する **Don't** - 白い地でフラットな企業サイト風にしない - 細い明朝や細いゴシックを見出しに使わない - パステルを全体に使わない（一覧セクションだけにする） - 長い説明文の段落を置かない - パネルの金枠と紫グローを省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラとアイテムで世界観を一気に見せる）: 黒地にキャラとアイテムを 3 組、ジグザグに配置する。各組に吹き出しと斜めのセリフを添える 2. **商品メインビジュアル**（セット内容と出演キャストを見せる）: キャスト写真の手前にアイテム 3 個を並べる。縦書きの極太コピーとロゴ風の商品名を置く 3. **機能1 ボイス**（収録音声の楽しさを伝える）: 番号見出しの下に金枠パネルを置く。人物とアイテムを交互に並べ、セリフ吹き出し・感情ラベル・モード切替図を入れる 4. **機能2 自動モード**（遊び方の違いを見せる）: コミック風のドット背景の上にアイテムを並べ、ポップなロゴ見出しを置く 5. **機能3 BGM**（続報を予告する）: 紫カーテンを背景にキャラを置く。英字の予告コピーを水色の装飾文字で入れる 6. **機能4 連動遊び**（別売りアイテムとの組み合わせを見せる）: 操作手順を矢印・PUSH・効果音タグで図解する。別売りの注釈を添える 7. **シリーズ一覧**（ほかのセットも集めたくさせる）: 淡いラベンダーのドット地にする。2 個ずつジグザグに並べ、ピル型のセット番号を付ける ## Imagery - アイテムは輪郭で切り抜いた正面寄りの商品写真にし、ふちを光らせる - キャラは逆光気味のスチルにして、紫や赤の光を当てる - キャストは暗い背景のポートレートにする - 背景は岩のひび割れや溶けたチョコのような質感にし、暗く沈める - コミック風のドット模様や吹き出し、稲妻型の装飾を足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右は黒地のテクスチャで埋める - PC ではパネル内を写真と吹き出しの 2 カラムに広げてもよい - シリーズ一覧は PC で 3〜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-94580500`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000227825/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（1/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。