--- version: alpha name: Dark Purple Hero Toy Showcase LP description: 黒地にひび割れ質感、紫の稲妻帯と金縁フレームで変身玩具の機能を番号つきで紹介する、迫力重視の縦長画像型 LP。斜体の極太ゴシックにふりがなを添え、子どもにも読める作りにしている。 colors: background: '#030201' primary: '#5A1A8C' secondary: '#7F1455' accent-1: '#C9A85C' dark-section: '#281B27' on-dark: '#FFFFFF' accent-2: '#E0379A' accent-3: '#3FB6E8' background-alt: '#E6DCF0' surface: '#E5C9B7' line: '#A010A0' text-muted: '#BBBBBB' accent-3-accessible: '#157FAC' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.4 accent: fontFamily: Montserrat fontSize: 56px fontWeight: 900 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 headline-sm: fontFamily: Playfair Display fontSize: 30px fontWeight: 900 lineHeight: 1.1 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' numbered-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 64px gold-frame: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 600px speech-hex: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 44px slant-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 28px push-tag: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px emotion-tags: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 40px series-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 28px --- # DESIGN.md — 黒×紫×金の特撮玩具商品紹介 LP（Dark Purple Hero Toy Showcase LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型、ポップ・元気 - **キーワード**: 特撮・玩具・ダーク・稲妻・金縁フレーム・ふりがな - **地の質感**: 黒地に岩のひび割れ風テクスチャ、紫のネオン発光、網点ハーフトーン - **形**: 斜めに切った帯、稲妻形の見出し尾、六角形風の吹き出し、細い金縁の四角フレーム - **温度感**: 暗く妖しい寒色寄りに、金とマゼンタの熱を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#030201` | ページ地の黒 | 35% | 画素の実測 | | `primary` | `#5A1A8C` | 紫の見出し帯・稲妻 | 8% | 推定 | | `secondary` | `#7F1455` | マゼンタの差し色・吹き出し | 5% | 画素の主要色に補正 | | `accent-1` | `#C9A85C` | 金の番号・枠線 | 2% | 推定 | | `dark-section` | `#281B27` | フレーム内の濃紫地 | 10% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地上の白見出し | 3% | 画素の実測 | | `accent-2` | `#E0379A` | ピンクの強調数字 | 1% | 推定 | | `accent-3` | `#3FB6E8` | シアンのPUSH・発光 | 1% | 推定 | | `background-alt` | `#E6DCF0` | シリーズ一覧の淡いラベンダー地 | 10% | 推定 | | `surface` | `#E5C9B7` | 感情タグの生成り帯 | 1% | 画素の主要色に補正 | | `line` | `#A010A0` | ヘッダー下の紫ライン | 1% | 推定 | | `text-muted` | `#BBBBBB` | 注釈文字 | 1% | 推定 | | `accent-3-accessible` | `#157FAC` | AA を満たす補正値（計算） | | 計算 | - 地は黒で統一し、セクション内は金縁の濃紫フレームで区切る - 紫は見出しの稲妻帯と区切りライン専用にする - ピンク・マゼンタは数量や叫びなどの強調だけに使う - 商品一覧だけは淡いラベンダー＋網点で明るく切り替える - シアンはPUSHなど操作を示すラベルに限定する - `push-tag` は文字 `#FFFFFF` × 背景 `#3FB6E8` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#157FAC`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャラ台詞風の大コピー（縦組みも可） | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.2 | 0.0em | | `headline-lg` | 番号つき機能見出し | ゴシック | Dela Gothic One | 400 | 24px | 1.3 | 0.0em | | `headline-md` | フレーム内の小見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0.0em | | `accent` | 大きな金の番号 | 欧文サンセリフ | Montserrat | 900 | 56px | 1.0 | 0.0em | | `body-md` | 吹き出し内の台詞・説明 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `note` | 注釈・権利表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `headline-sm` | Coming soon等の欧文装飾 | 欧文セリフ | Playfair Display | 900 | 30px | 1.1 | 0.0em | - 見出しは右上がりの斜体にし、黒の太フチと紫の影をつける - 漢字にはふりがなを小さく振る - 大コピーは白文字＋紫の外側発光 - 番号は金のグラデーションで見出しの左に大きく置く - 本文は短い台詞調にとどめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。画像中心で縦に積む - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 各機能は番号見出し＋金縁フレームの1セット - フレーム内は写真と吹き出しを重ねて配置 - 人物と商品は斜めに重ねて奥行きを出す - 見出し右端に商品の小画像を添える - 一覧はジグザグに左右へ振る ## Elevation & Depth - キャラや商品にネオン色の外側発光 - 見出し文字は黒の太フチ＋ドロップシャドウ - フレームは影なしで金の細線のみ ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 背景を抜いた切り抜き写真をフレームからはみ出させる - **セクション境界**: 斜めに切った紫の稲妻帯とストライプ帯 - フレームは角丸なしの直角 - 吹き出しは六角形や角を切った形 - ラベルは斜めの平行四辺形 - 丸い柔らかな形は使わない ## Components - **番号つき見出し**（`numbered-heading`）: 金の大番号＋白の斜体見出し、右へ紫の稲妻尾が伸びる - **金縁フレーム**（`gold-frame`）: 濃紫地を細い金線で囲む機能紹介の枠 - **台詞吹き出し**（`speech-hex`）: 紫フチの角切り形吹き出しに白抜きで台詞 - **斜めラベル**（`slant-label`）: マゼンタや金の平行四辺形に音声名や商品名 - **PUSH矢印**（`push-tag`）: シアン矢印で押す場所を示す操作ラベル - **感情タグ帯**（`emotion-tags`）: 生成り帯の見出し下に黒地の小タグを横並び - **シリーズ番号バッジ**（`series-badge`）: 色違いの角丸ラベルで各セット番号を表示 ## Do's and Don'ts **Do** - 黒地と紫発光で暗い世界観を守る - 見出しは必ず斜体・太フチにする - 機能は番号順に1フレームずつ見せる - 漢字にふりがなを振る - 商品写真は大きく切り抜いて重ねる **Don't** - 白い余白の多いミニマル構成にしない - 細い明朝や丸文字を使わない - パステル色を一覧以外で使わない - 長い説明文を詰め込まない - 角丸の柔らかいカードにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラと商品の世界観を一撃で伝える）: 紫の稲妻背景にキャラと商品を大きく重ね、台詞を白フチ文字で配置 2. **キャスト訴求**（出演者ボイス収録をアピール）: 縦組みの大コピーを左右に、人物写真を手前に重ねる 3. **商品名ロゴ**（商品を確定させる）: 商品2点を並べ、紫の斜体ロゴを下に置く 4. **機能1 音声**（主機能を説明）: 金縁フレーム内に人物・吹き出し・モード切替図と強調数字 5. **機能2 自動モード**（遊び方の楽しさ）: 網点と吹き出し装飾のコミック調フレーム 6. **機能3 追加収録**（後日情報の予告）: キャラ写真に発光する欧文の予告文字 7. **機能4 連動**（別売り品との連動を示す）: 装着手順を矢印とPUSHラベルで図解、注釈を下に 8. **シリーズ一覧**（コレクション欲を刺激）: 淡いラベンダー網点地に全セットをジグザグ配置し番号バッジ 9. **権利表記**（法的表記）: 黒地に小さな白文字で中央揃え ## Imagery - 商品は白背景で撮り切り抜いて使う - キャラは斜め下からのあおりで迫力を出す - 背景は岩のひび割れや菓子の粒を暗く沈める - 紫やマゼンタの稲妻・発光エフェクトを重ねる - 網点ハーフトーンとコミック風爆発吹き出しを装飾に - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央固定幅約480〜950pxの画像列で左右は黒地 - SPでは同じ画像列を全幅表示 - 縦組み大コピーはSPでも維持し文字を22px以上に - 注釈はSPで10px以上を確保 ## 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-701133b2`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000232723/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（2/12 色を画素から実測）、書体 低、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。