--- version: alpha name: Black and Gold Royal Collectible Figure LP description: 漆黒の地に金色の煙・光粒テクスチャを敷き、深紅の帯見出しと金枠のテキストパネルで重厚な王族感を演出する、可動フィギュア向けの縦長画像型LP。商品写真を大きく切り抜きで見せ、金の装飾枠付きグリッドで細部を見せる。 colors: background: '#0B0601' primary: '#B98020' secondary: '#6A0C0E' accent-1: '#D4A84A' accent-2: '#EBC75B' on-dark: '#FFFFFF' accent-3: '#143B1B' dark-section: '#120E0B' background-alt: '#3B2501' marker: '#EBC75B' typography: display: fontFamily: Shippori Mincho B1 fontSize: 34px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho B1 fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho B1 fontSize: 19px fontWeight: 800 lineHeight: 1.35 body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 600 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 0px lg: 0px 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}' heading-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 80px text-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 100px character-label: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 60px ornate-photo-grid: backgroundColor: '{colors.dark-section}' height: 220px ornate-frame-wide: backgroundColor: '{colors.dark-section}' height: 230px set-list: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-lg}' height: 120px note-text: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 黒×金×深紅の豪華フィギュア商品LP（Black and Gold Royal Collectible Figure LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、上品・高級 - **キーワード**: 漆黒・黄金の煙・深紅の帯・金縁の額装・明朝の太字・王族感 - **地の質感**: 黒地に金色の煙・炎のようなテクスチャと光の玉ボケ。帯やパネルは深紅のグラデーションに金の細線。 - **形**: 角丸なしの矩形。四隅に金の唐草・トランプ風装飾を付けた額縁。帯の両端に金の菱形星飾り。 - **温度感**: 暖色寄りの暗いトーン。黒と金が主で、赤が強調。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#0B0601` | ページ全体の漆黒の地 | 40% | 画素の主要色に補正 | | `primary` | `#B98020` | 金色の煙テクスチャ・ブランドの金 | 25% | 画素の主要色に補正 | | `secondary` | `#6A0C0E` | 深紅の帯見出し・テキストパネル地 | 8% | 画素の主要色に補正 | | `accent-1` | `#D4A84A` | 金枠・額縁の線 | 2% | 推定 | | `accent-2` | `#EBC75B` | 見出しの金色文字 | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地・赤帯上の白文字 | 2% | 推定 | | `accent-3` | `#143B1B` | キャラ見出し用の深緑帯 | 0% | 画素の実測 | | `dark-section` | `#120E0B` | 画像グリッド内の黒背景 | 8% | 画素の主要色に補正 | | `background-alt` | `#3B2501` | 煙テクスチャの暗い茶 | 7% | 画素の実測 | | `marker` | `#EBC75B` | 本文中の強調語の金黄色 | 0% | 画素の主要色に補正 | - 地は黒＋金の煙テクスチャで統一し、白や明るい地は使わない - 見出しは深紅の帯に白または金の文字を載せる - 本文は深紅パネルに白文字、強調語だけ金黄色にする - 金は線・装飾・強調文字に使い、面は煙テクスチャで表現する - キャラクター別の見出し帯はキャラのテーマ色（赤・緑）で塗り分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書き大見出し | 明朝 | Shippori Mincho B1 | 800 | 34px | 1.1 | 0.02em | | `headline-lg` | 深紅帯のセクション見出し | 明朝 | Shippori Mincho B1 | 800 | 26px | 1.3 | 0.02em | | `headline-md` | 商品名・キャラ名ラベル | 明朝 | Shippori Mincho B1 | 800 | 19px | 1.35 | 0.0em | | `body-lg` | リード文 | 明朝 | Noto Serif JP | 700 | 15px | 1.6 | 0.0em | | `body-md` | 深紅パネル内の説明文 | 明朝 | Noto Serif JP | 600 | 12px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | - 見出し・本文とも太い明朝で重厚感を出す - 大見出しには金のグラデーションと黒い縁取り・影を付ける - 見出し内の数字や重要語は一回り大きくする - 末尾に!!を使い勢いを出す - 注釈だけ小さいゴシックにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、詳細写真は 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 商品写真は画面幅いっぱいに大きく配置 - 見出し帯は全幅、本文パネルは左右に約4%の余白 - 写真→説明パネル→次の見出し帯の順でリズムを作る - キャラ名ラベルは写真の左右に交互に重ねる ## Elevation & Depth - 影は使わず、金の光彩・グローで浮かせる - 見出し文字に黒いドロップシャドウ - パネルは金の二重線枠で縁取る ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を抜いた切り抜きで配置。詳細写真は黒背景の矩形で金の装飾額縁に収める - **セクション境界**: 直線。全幅の深紅帯を上下に細い金線で挟む - 角丸は使わない - 四隅に金の唐草飾りを付けた額縁を使う - 帯の両端に金の菱形星飾りを置く ## Components - **深紅の帯見出し**（`heading-band`）: 全幅の深紅グラデーション帯、上下に金線、両端に金の星飾り、中央に白/金の明朝見出し - **金枠の説明パネル**（`text-panel`）: 深紅地に金の二重線枠、白い明朝本文で強調語を金黄色に - **キャラ名ラベル**（`character-label`）: 写真に重ねる2行の名前ラベル。テーマ色の帯で片端をグラデーションで抜く - **金額縁の詳細写真グリッド**（`ornate-photo-grid`）: 2カラムのアップ写真を黒背景で並べ、各枠の四隅に金装飾 - **横長金額縁**（`ornate-frame-wide`）: 集合写真や付属品写真を入れる全幅の金装飾フレーム - **セット内容リスト**（`set-list`）: 深紅パネル内に中央揃えで内容物を／区切りで並べる - **注釈**（`note-text`）: 黒地に白の小さい※注記 ## Do's and Don'ts **Do** - 黒地に金の煙・光粒テクスチャを常に敷く - 見出しは深紅帯＋金装飾で統一する - 商品写真は切り抜きで大きく見せ、ポーズ違いを縦に連ねる - 説明文は短く、強調語だけ金黄色にする **Don't** - 白や淡色の背景セクションを入れない - 角丸やピル型ボタンなどカジュアルな形を使わない - 細いゴシック体を見出しに使わない - 金・赤・黒以外の色を広い面で使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と名前を一目で伝える）: 金の光ボケ背景に2体の切り抜き写真、ロゴ、明朝の商品名、右端に縦書きの大コピー 2. **リード**（商品化の概要を伝える）: 黒地に白い明朝で3行の中央揃え文 3. **特長見出し**（一番の売りを宣言する）: 深紅帯の2行見出し、両端に金の星飾り 4. **キャラ別紹介**（各キャラの全身を見せる）: 煙テクスチャ上に大きな切り抜き写真と色分けの名前ラベル、下に金枠説明パネル 5. **ディテール**（造形の細部を見せる）: 2カラムのアップ写真を金額縁で囲んだグリッド＋説明パネル 6. **付属品紹介**（付属パーツの魅力を伝える）: 深紅帯見出し→ポーズ違いの写真を左右交互に縦配置→説明パネル 7. **セット内容**（内容物を明示する）: 深紅帯見出しと金枠パネルに中央揃えのリスト 8. **シリーズ連動**（別売り品との組み合わせを訴求する）: 見出し帯＋注釈＋横長金額縁の集合写真＋説明パネル 9. **同時購入特典**（まとめ買いを促す）: 金と赤の2段見出し、特典の写真を金額縁に、下に説明パネル ## Imagery - 商品はスタジオで撮影し背景を切り抜いた全身写真 - 背景は黒地に金色の煙・炎のテクスチャ - FVは金の光の玉ボケで華やかに - 細部写真は黒背景でライティングを強く当てて金属感を出す - エフェクトは炎や光の軌跡で動きを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約750px幅のカラムで画像を並べ、左右は黒地で埋める - ディテールグリッドはPCで3〜4カラムにしてよい - 見出し帯は全幅のまま、文字サイズを1.3倍程度に - 説明パネルは最大幅を決めて中央に置く ## 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-f6a1f548`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000239924/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（2/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。