--- version: alpha name: Dark Crimson Gold Hobby Figure LP description: 夜空の紫紺と深紅の暗い地に、金と黒のメタリックな模型写真を大きく置いたホビー商品の縦長 LP。金色のセリフ体で型番ロゴを入れ、白い太ゴシック見出しには紫に光る縁取りを付ける。ギミックは並べた写真と短い注釈で見せる。最後に価格情報と青いピル型の購入ボタンを置く。 colors: primary: '#C5A46A' background: '#320315' dark-section: '#0A0205' secondary: '#1D1949' text: '#FFFFFF' accent-1: '#5A2DB0' accent-2: '#D4A84A' surface: '#3A3A3E' tint-1: '#1D1949' cta: '#1E5BD8' on-cta: '#ECFBFE' line: '#7A5A3A' text-muted: '#D8C9C8' typography: display: fontFamily: Cinzel fontSize: 60px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 800 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px 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-glow-bar: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px model-logo: textColor: '{colors.primary}' typography: '{typography.display}' height: 110px gimmick-pair: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 150px view-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 20px coming-soon-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 110px price-block: textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px --- # DESIGN.md — 漆黒×深紅×金のホビー模型 LP（Dark Crimson Gold Hobby Figure LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 漆黒・深紅のビロード・金メタリック・夜空・発光・ドラマチック - **地の質感**: 暗い背景に赤や紫の光がにじむグラデーション。模型は光沢のある黒と金の質感で見せる - **形**: 写真は角丸なしの矩形。見出しは左に縦線を付けた帯にする - **温度感**: 暗くて温かみのある色調。ところどころに冷たい紫と青の光を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C5A46A` | 型番ロゴや金の装飾 | 3% | 推定 | | `background` | `#320315` | 深紅の主背景 | 35% | 画素の主要色に補正 | | `dark-section` | `#0A0205` | ほぼ黒の帯背景 | 15% | 画素の実測 | | `secondary` | `#1D1949` | 夜空の紫紺背景 | 12% | 画素の主要色に補正 | | `text` | `#FFFFFF` | 本文や見出しの白文字 | 2% | 推定 | | `accent-1` | `#5A2DB0` | 見出しの紫色の発光縁取り | 1% | 推定 | | `accent-2` | `#D4A84A` | 見出し左の金色の縦線 | 0% | 推定 | | `surface` | `#3A3A3E` | ギミック写真のグレー地 | 6% | 推定 | | `tint-1` | `#1D1949` | 近日公開枠の紫のグラデーション | 2% | 画素の主要色に補正 | | `cta` | `#1E5BD8` | 購入ボタン | 0% | 推定 | | `on-cta` | `#ECFBFE` | ボタンの文字 | 0% | 画素の実測 | | `line` | `#7A5A3A` | 写真枠の茶金の細線 | 0% | 推定 | | `text-muted` | `#D8C9C8` | 注釈の小さな文字 | 0% | 画素の実測 | - 地は深紅・紫紺・黒の 3 色だけ。セクションごとに暗いグラデーションで切り替える - 金は型番ロゴと見出しの装飾に限り、商品の色に合わせる - 文字は白を基本にし、見出しには紫の外側発光を付ける - 鮮やかな色を使うのは購入ボタンの青だけ - ギミック写真は中立のグレー地にして、模型の質感を見せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 型番の大きなロゴ | 欧文セリフ | Cinzel | 700 | 60px | 1.0 | 0.04em | | `headline-lg` | FV の縦書きキャッチ | 明朝 | Shippori Mincho | 800 | 28px | 1.2 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.0em | | `body-md` | 商品説明 | ゴシック | Noto Sans JP | 700 | 10px | 1.6 | 0.0em | | `note` | 写真の注釈 | ゴシック | Noto Sans JP | 500 | 8px | 1.5 | 0.0em | | `accent` | FRONT・REAR などのラベル | 欧文セリフ | Playfair Display | 400 | 13px | 1.2 | 0.05em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 12px | 1.0 | 0.02em | - 型番ロゴは金のグラデーションと影を付けた大きなセリフ体にする - 見出しは白の極太ゴシックにし、紫の外側発光を付ける - 見出しは 2 行までにし、左に金の縦線を置く - 注釈は 8px 前後の小さな白文字で写真の直下に置く - 背景に型番ロゴを半透明で大きく重ねてもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ギミック写真だけ 2 列に並べる - **本文ブロックの幅**: 画面幅の約 96% - **余白**: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算） - 模型写真は画面幅いっぱいか、はみ出すほど大きく置く - 説明は見出し・一言・写真の順で短くまとめる - before/after は 2 枚を横に並べ、間に赤い矢印を置く - 写真は左右 8px 程度の余白で揃える - 価格情報は左に文字、右に写真を置く ## Elevation & Depth - 影は使わず、光のにじみで奥行きを出す - 見出しの文字に紫の外側発光を付ける - 型番ロゴにはドロップシャドウを付ける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 矩形に切り抜くか、模型を切り抜いて背景に直接重ねる - **セクション境界**: 直線を引かず、背景のグラデーションで溶け込ませる - 写真枠は角丸なしにし、茶金の細い枠線を付ける - 丸い形は購入ボタンだけに使う - 模型の切り抜きはセクションの境界をまたいで置いてよい ## Components - **発光見出し**（`heading-glow-bar`）: 左に金の縦線、白の極太文字に紫の発光を付けた見出し - **型番ロゴ**（`model-logo`）: 金色の大きなセリフ体ロゴ。背景に半透明で重ねても使う - **ギミック比較写真**（`gimmick-pair`）: グレー地の写真 2 枚の間に赤い矢印を置き、下に注釈を付ける - **アングルラベル**（`view-label`）: 写真の上に重ねる細いセリフ体の英字ラベル - **近日公開枠**（`coming-soon-box`）: 紫のグラデーションに細い枠線を付け、中央に英字を置く - **価格情報**（`price-block`）: ロゴ、商品名、税込価格、説明、付属品を並べたブロック - **購入ボタン**（`button-primary`）: 中央に置く青いピル型ボタン。光沢のあるグラデーションを付ける ## Do's and Don'ts **Do** - 模型写真をできるだけ大きく、ドラマチックな角度で見せる - 暗い背景に赤・紫・緑の光の点やエフェクトを散らす - ギミックは写真と短い注釈で 1 つずつ見せる - 金色は商品の配色に合わせて使う - セクションの終わりに型番ロゴを繰り返し入れる **Don't** - 白や明るい背景のセクションを作らない - 角丸のカードやパステル調の装飾を使わない - 長い本文を何段も続けない - 購入ボタン以外に鮮やかな色の面を使わない - 細いゴシック体で見出しを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の存在感で一目で引き込む）: 夜空の背景に大きな模型を置き、縦書きキャッチと金の型番ロゴを重ねる 2. **商品概要**（商品の位置づけを伝える）: 黒帯の上に白の小さな文字で数行の説明を置く 3. **造形の特長**（新規造形と色分けを訴求する）: 深紅の背景に発光見出しを置き、前後 2 方向の写真とアップ写真を並べる 4. **武装・可動**（ギミックと可動域を見せる）: アクション写真の下に 2 列の比較写真と注釈を置く 5. **情景ショット**（劇中の世界観を再現する）: 建物と煙の背景に、ポーズを付けた模型を全幅で置く 6. **ポージング**（可動の自由度を伝える）: 比較写真と発光見出しの下に、複数のポーズ写真を重ねる 7. **セット内容**（付属品とパッケージを示す）: 写真枠と近日公開枠を左右にずらして置く 8. **シリーズ比較**（同じスケールの関連商品と並べて見せる）: 紫紺の背景に 3 体を横に並べ、上下にイタリックの発光見出しを置く 9. **価格・購入**（購入へ導く）: 価格情報、注釈、青いピル型の購入ボタンの順に置く ## Imagery - 光沢のある模型をスタジオで撮り、切り抜いて合成する - 背景は夜空・星・赤い光球、または洋館と煙の情景にする - ギミック写真はグレーのグラデーション地で撮り、赤や緑の矢印で動きを示す - 背景にビロードのような深紅のグラデーションを敷く - ビームや刃先に緑の発光エフェクトを加える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 750〜800px 幅の縦長の帯を置き、両側を暗い背景で埋める - PC の比較写真は 3〜4 列まで広げてよい - PC の型番ロゴと見出しは 1.5 倍程度に拡大する - SP では文字を画像に埋め込む前提で、最小 8px まで許容する ## 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-444520ee`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/hobby/special-1000016828/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（3/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。