--- version: alpha name: Neon Digital Toy Game LP description: 黒に近い濃紺の地に、左が緑・中央が赤・右が青のネオングラデーションを敷いた電子玩具の商品 LP。サイバー風の斜めカットのパネルと、黄色の太いイタリック見出し、グリッド状のデジタル背景で、ゲーム機能を順に見せていく情報量の多い構成。 colors: background: '#000000' primary: '#F5E61E' accent-1: '#2E9E3A' accent-2: '#B3151C' accent-3: '#1E5FC8' surface: '#0B0A11' dark-section: '#0B0A11' on-dark: '#FFFFFF' marker: '#F03C3C' line: '#5A646E' tint-1: '#FDFEFD' text-muted: '#D0CCC7' typography: display: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.35 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 900 lineHeight: 1.2 label-button: fontFamily: Montserrat fontSize: 10px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 14px section: 32px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' section-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 40px slant-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 32px cyber-panel: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px number-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 24px color-label: backgroundColor: '{colors.tint-1}' typography: '{typography.accent}' height: 22px callout-yellow-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 26px circle-screen: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px more-tag: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 20px --- # DESIGN.md — 黒地×緑赤青ネオンの電子玩具 LP（Neon Digital Toy Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、情報量多め・訴求型 - **キーワード**: ネオン・サイバー・3色カラー展開・斜めカット枠・ゲームUI風 - **地の質感**: 暗い地にデジタルの格子・ビル群・光の筋を重ね、発光するグラデーションを敷いている - **形**: 角を斜めに落としたパネル、平行四辺形の見出し帯、丸いゲーム画面 - **温度感**: 暗い地に寒色と暖色のネオンを混ぜた、高揚感のある温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の濃い地 | 35% | 画素の実測 | | `primary` | `#F5E61E` | 見出しの帯と強調に使う黄色 | 4% | 推定 | | `accent-1` | `#2E9E3A` | 左側のネオン緑 | 12% | 推定 | | `accent-2` | `#B3151C` | 中央のネオン赤 | 10% | 推定 | | `accent-3` | `#1E5FC8` | 右側のネオン青 | 10% | 推定 | | `surface` | `#0B0A11` | コンテンツパネルの面 | 20% | 画素の主要色に補正 | | `dark-section` | `#0B0A11` | セクション見出しのバー | 4% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の白文字 | 3% | 推定 | | `marker` | `#F03C3C` | 本文中で注目させる赤文字 | 0% | 推定 | | `line` | `#5A646E` | パネルの縁取り線 | 1% | 推定 | | `tint-1` | `#FDFEFD` | カラー名ラベルの白地 | 1% | 画素の実測 | | `text-muted` | `#D0CCC7` | 注釈の灰文字 | 0% | 画素の実測 | - 地はほぼ黒にして、左右の端から緑・赤・青のネオンを横方向のグラデーションで差し込む - 3色は商品の3カラーに対応させる。同じ3カラーの並びは常に緑・赤・青の順にする - 大見出しの文字と帯は黄色にする。白文字の小見出しは黄色の斜め帯に載せる - 本文は白。注目させたい1行だけを赤か黄色の文字にする - 注釈は灰色の小さい文字にし、パネルの下の端にまとめる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（斜体で太く、発光させる） | ゴシック | Dela Gothic One | 900 | 22px | 1.3 | 0.02em | | `headline-lg` | 黒いバーに置く中央揃えの見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.3 | 0.05em | | `headline-md` | 番号つき機能の小見出し（黄色） | ゴシック | Noto Sans JP | 900 | 15px | 1.35 | 0.0em | | `body-md` | 機能を説明する本文（白で太め） | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.0em | | `note` | 注釈（※から始める） | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | キャラ名・カラー名のラベル | ゴシック | Zen Kaku Gothic New | 900 | 11px | 1.2 | 0.0em | | `label-button` | 続きを示す小さなタグ | 欧文サンセリフ | Montserrat | 800 | 10px | 1.2 | 0.02em | - 見出しは極太のゴシックで斜体にし、黒の縁取りか発光を付ける - 大見出しは1行で言い切って、感嘆符で勢いを出す - 本文も太字にして、暗い地でも読めるようにする - 強調したい語は『』で囲むか色を変える。斜体は見出しだけに使う - 番号は斜体の黄色い数字をバッジにして見出しの頭に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードやアイコンは 3〜5 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 32px、基本単位 8px、カード内 14px（375px 幅換算） - 各セクションは画面幅いっぱいの黒いバーの見出しから始める - コンテンツは斜めカットのパネルに入れ、左右に3%ほど余白を取る - 機能の説明は番号つきのブロックを縦に積み、右に小さな画像を置く - 3カラーの比較は3列に並べる - 注釈はブロックの最後にまとめる ## Elevation & Depth - パネルは影ではなく、外側の発光と縁取り線で浮かせる - 見出しの文字には黒の縁取りと外側の発光を付ける - 商品写真には、それぞれのカラーの光を後ろから当てる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: ゲーム画面は円形に切り抜く。商品は切り抜き。カード画像は長方形のまま - **セクション境界**: 黒いバーの両端を斜めに落とし、ネオンの線で区切る - パネルの角は1〜2か所を斜めにカットする - ラベルは平行四辺形か、片側だけ斜めにした形にする - 角丸はほぼ使わない ## Components - **セクション見出しバー**（`section-bar`）: 画面幅いっぱいの黒いバー。両端を斜めにカットし、中央に白の極太文字を置く - **黄色の斜め見出し**（`slant-heading`）: 黄色の斜体の大見出し。黒の縁取りと発光を付ける - **サイバー枠パネル**（`cyber-panel`）: 暗い面に灰色の縁取りを付け、角を斜めに落としたパネル - **番号バッジ**（`number-badge`）: 黄色の斜体の数字。機能の小見出しの頭に置く - **カラー名ラベル**（`color-label`）: 白地に黒の太字。左端にカラーの色の斜めの帯を入れる - **黄色の帯の小見出し**（`callout-yellow-band`）: 黄色の平行四辺形の帯に、矢印記号と白抜きの見出しを置く - **円形のゲーム画面**（`circle-screen`）: 円形に切り抜いた画面画像。下に斜めのネームタグを付ける - **続きタグ**（`more-tag`）: 右下に置く黄色の小さなタグ。続きがあることを示す ## Do's and Don'ts **Do** - 地は必ず黒にして、ネオンの3色を左右の端から光らせる - 3カラーは同じ順番で並べ、それぞれ同じ色の光を添える - 見出しは極太の斜体で勢いを出す - 機能は番号を付けて分け、短い文で説明する - 注釈は省かずに、小さい灰色の文字で必ず載せる **Don't** - 白い地や淡い色の地にしない - 角丸を大きくしたり、ピル型を多用したりして柔らかくしない - 細い明朝体や細いゴシックを使わない - パネルの中に何色ものネオンを混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と、3カラーの商品を一目で伝える）: キャラ絵の前に商品3色を横に並べ、ロゴは発光させる。背景は都市とデジタルの格子 2. **動画**（商品の PV を見せる）: 見出しバーの下に、サイバー枠で囲んだ動画を置く 3. **セット内容**（カラーの種類と付属品を示す）: 3色を大きく並べ、下にカラー名ラベルを付ける 4. **外観・仕様**（サイズと機能部位を伝える）: 寸法線と引き出し線で注記する。最後に黄色の大見出しのまとめを置く 5. **付属カード一覧**（同梱物の量と価値を伝える）: カラーごとのパネルに、カード画像を5列のグリッドで並べ、下に名前を付ける 6. **ゲーム機能の紹介**（遊び方を順に伝える）: 番号つきのブロックを縦に積み、ドット絵や円形の画面を添える 7. **バトル・進化**（見どころの演出を見せる）: 横長の演出ビジュアルの下に、円形の画面を3列×3段で並べる 8. **スクープ情報**（隠し要素で期待を高める）: 黄色の帯の見出しと、2列の円形画像のパネル 9. **楽曲・ボイス**（収録内容の量を示す）: 暗いパネルに、箇条書きのリストを2列で入れる 10. **通信・連動**（他の商品と遊べることを伝える）: 左に文章、右に関連する商品の写真を置く 11. **特典と注釈**（特典の内容と注意事項を伝える）: 3色の列にアイテムの円形画像を並べ、最後に注釈と権利表記を置く ## Imagery - 商品は切り抜き写真にし、後ろからカラーの光を当てる - アニメ調のキャラクターイラストと、ドット絵のスプライトを使う - 背景は暗い都市のシルエット、デジタルの格子、光の筋を重ねる - ゲーム画面は円形に切り抜き、細い枠を付ける - 付属物は正面から撮った画像を同じサイズにそろえてグリッドに並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はない。PC では本文の幅を 960px ほどに制限し、背景のネオンは画面幅いっぱいに広げる - PC では付属カードを 7〜8 列、円形の画面を 3〜5 列に増やす - PC の機能ブロックは、左に文章、右に画像の2カラムにする - 見出しの文字サイズは PC で 1.5 倍ほどにする ## 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-ca6249ff`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000247738/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（3/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。