--- version: alpha name: Black Gold Premium Collectible Toy LP description: 漆黒の地に金の枠線と発光グロウを重ねた、大人向けの高級コレクション玩具 LP。商品の切り抜き写真を大きく見せ、POINT 番号付きの見出し帯で特長を順に解説する。注釈やボタン名の引き出し線で機能を図のように説明する。 colors: background: '#030303' dark-section: '#282623' primary: '#C9AD6F' line: '#C9AD6F' on-primary: '#FFFFFF' on-dark: '#EEEEEE' accent-1: '#F2C230' background-alt: '#F9F9FB' surface: '#F5EEDA' text: '#1B1914' accent-2: '#C8201E' secondary: '#7D6447' primary-accessible: '#8E7235' typography: display: fontFamily: Orbitron fontSize: 34px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho B1 fontSize: 17px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.4 label-button: fontFamily: Oswald fontSize: 22px fontWeight: 700 lineHeight: 1.0 rounded: sm: 0px md: 2px lg: 4px 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}' heading-gold-plate: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 26px heading-point-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 34px set-contents-frame: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 900px callout-label: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 30px banner-variant: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' height: 64px list-box: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 80px inset-photo: backgroundColor: '{colors.dark-section}' height: 120px --- # DESIGN.md — 黒×金の発光演出ホビー玩具 LP（Black Gold Premium Collectible Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 漆黒・金枠・発光グロウ・メタリック・特撮ホビー・スペック解説 - **地の質感**: 黒地に放射状の暗いグラデーションと金のにじむ光。金属・樹脂の光沢をそのまま見せる - **形**: 直角ベースの矩形枠。見出しは左右がとがった六角形の金プレートと、左端に縦書き POINT タグを付けた帯 - **温度感**: 冷たく重厚。金と赤のアクセントでわずかに熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#030303` | ページ全体の黒地 | 55% | 画素の実測 | | `dark-section` | `#282623` | セクション内の濃グレーグラデ地 | 15% | 画素の主要色に補正 | | `primary` | `#C9AD6F` | 金の枠線・見出しプレート | 7% | 画素の主要色に補正 | | `line` | `#C9AD6F` | セット内容の金枠線 | 2% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 金プレート上の白文字 | 1% | 推定 | | `on-dark` | `#EEEEEE` | 黒地上の本文白文字 | 3% | 画素の実測 | | `accent-1` | `#F2C230` | 本文中の強調語の黄色 | 0% | 推定 | | `background-alt` | `#F9F9FB` | ファーストビューの明るいグレー地 | 8% | 画素の実測 | | `surface` | `#F5EEDA` | 見出し帯の淡い生成り地 | 3% | 画素の主要色に補正 | | `text` | `#1B1914` | 見出し帯上の黒文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#C8201E` | 商品の差し色の赤 | 0% | 推定 | | `secondary` | `#7D6447` | 革ベルトのブラウン | 3% | 画素の主要色に補正 | | `primary-accessible` | `#8E7235` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全面を黒〜濃グレーにし、明るい地はファーストビューだけに限る - 装飾はすべて金。枠線・見出しプレート・光のにじみに使う - 本文は白、強調したい語だけ黄色にする - 赤は商品の差し色程度にとどめ、UI には使わない - 見出し帯は金の縁取り＋淡い生成りの面で黒文字にする - 金の周りには外側グロウを付けて発光して見せる - `heading-gold-plate` は文字 `#FFFFFF` × 背景 `#C9AD6F` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8E7235`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | シリーズロゴ風の欧文タイトル | 装飾・ディスプレイ | Orbitron | 900 | 34px | 1.1 | 0.05em | | `headline-lg` | POINT 見出し帯 | 明朝 | Shippori Mincho B1 | 800 | 17px | 1.3 | 0.02em | | `headline-md` | 金プレートのセクション見出し | ゴシック | Noto Sans JP | 900 | 15px | 1.3 | 0.08em | | `headline-sm` | セット内容のパーツ名 | ゴシック | Noto Sans JP | 700 | 10px | 1.3 | 0.0em | | `body-md` | 中央揃えの解説文 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `note` | 注釈・権利表記 | ゴシック | Noto Sans JP | 400 | 7px | 1.5 | 0.0em | | `accent` | 引き出し線のボタン名ラベル | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.0em | | `label-button` | POINT 番号 | 欧文サンセリフ | Oswald | 700 | 22px | 1.0 | 0.0em | - 見出し帯は太い明朝で重厚に、本文はゴシックにする - 本文は中央揃えで 4〜5 行の短い段落にまとめる - 強調語はかぎ括弧で囲み、黄色にする - POINT 番号は大きな欧文数字にして、縦書きの POINT と組み合わせる - 欧文ロゴは角ばった幾何学書体を使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。セット内容は 2 列グリッド、BGM リストは 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算） - 商品写真は画面幅いっぱい、または画面からはみ出すくらい大きく置く - 解説文は写真の上に中央揃えで置く - 機能説明は写真の左右に引き出し線とラベルを配置する - セット内容は金枠で囲み、その中に細線で仕切ったセルを並べる - 見出し帯は画面幅いっぱいに置き、左端に POINT タグを付ける ## Elevation & Depth - 影ではなく金色の外側グロウで浮かせる - 背景のロゴシンボルを金の光でにじませて置く - 商品写真には落ち影を付けず、切り抜きで暗い地に浮かべる ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 背景を抜いた商品の切り抜き、または細い白枠付きの矩形 - **セクション境界**: 直線。金の水平ラインとグロウで区切る - 角丸は使わず直角を基本にする - 見出しプレートは左右の端をとがらせた六角形にする - 枠線は 1〜3px の金線にする ## Components - **金プレート見出し**（`heading-gold-plate`）: 左右の端がとがった金のプレートに白太字。両側に金の光るラインを伸ばす - **POINT 見出し帯**（`heading-point-band`）: 画面幅いっぱいの金縁＋生成りの帯。左端に黒地の縦書き POINT と大きな数字を置く - **セット内容枠**（`set-contents-frame`）: 金のグロウ枠の中に、白い細線で仕切ったパーツ写真セルを 2 列に並べる。セル左上にパーツ名を書く - **引き出し線ラベル**（`callout-label`）: 商品写真から金の細線を伸ばし、白太字のボタン名と小さな説明を添える - **別バージョン誘導バナー**（`banner-variant`）: 明るい地にロゴと商品写真を横並びにした横長バナー - **収録リスト枠**（`list-box`）: 細い金線の枠に明朝の金見出しを付け、番号付きの項目を 2 列で並べる - **細部の拡大写真**（`inset-photo`）: 細い白枠の矩形で、メイン写真に重ねてディテールを見せる ## Do's and Don'ts **Do** - 地は黒、装飾は金という 2 色の構成を守る - 商品写真は大きな切り抜きで、画面からはみ出すくらい迫力を出す - 特長は POINT 番号付きの帯で順に区切る - 機能は引き出し線とラベルで図解する - 強調語は黄色、注釈は小さな白文字で添える **Don't** - 白や淡色の地を広く使わない - ピル型ボタンや丸いカードを使わない - パステル色やポップなイラストを入れない - 金以外の装飾色を増やさない - 本文を長い左揃えの段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品名を一目で伝える）: 上部に欧文ロゴの帯、明るいグレー地にキャラクター写真、下部にシリーズロゴを置く 2. **商品メインビジュアル**（商品全体の迫力を見せる）: 黒地に、金に光るシンボルを背景にしてベルトと付属品の切り抜きを配置する 3. **セット内容**（同梱物を一覧で見せる）: 金プレート見出し＋金グロウ枠の中に、パーツ名付きの写真セルを 2 列グリッドで並べる 4. **別バージョン誘導**（関連商品へ誘導する）: 金プレート見出しの下に横長バナーを置く 5. **特長 POINT1**（造形のこだわりを伝える）: POINT 帯、中央揃えの解説文、大きな商品写真、拡大写真、注釈を重ねる 6. **特長 POINT2**（音声ギミックを伝える）: 解説文の強調語を黄色にし、本体写真の周りに引き出し線でボタン機能を示す。その下に収録リスト枠を置く 7. **特長 POINT3**（付属品の機能を伝える）: 解説文と注釈の下に付属品を斜めに大きく配置し、ラベルを添える。最後に権利表記を入れる ## Imagery - 商品はスタジオで撮った切り抜き写真。金属の光沢とディテールがはっきり見える硬い光で撮る - 背景は黒〜濃グレーの放射グラデーションにする - ブランドのシンボルを金のネオン風グロウで背景に大きく描く - ファーストビューは明るい地にキャラクターを立たせ、淡い光の装飾を散らす - 動きを出したい箇所では商品を斜めに配置し、稲妻などのアイコンで動作を示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央に約 750px 幅の黒地の柱を置き、左右も黒で埋める - セット内容は PC で 3〜4 列に広げる - POINT セクションは PC で写真と解説文を左右 2 列にしてもよい - 金の見出し帯は柱の幅いっぱいを保つ ## 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-8d9d63a4`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000215119/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。