--- version: alpha name: Cosmic Black Gold Hobby Model Product LP description: 黒い宇宙背景に、金メッキのプラモデル写真を大きく並べた縦長の商品紹介 LP。見出しは金色の発光文字と白い明朝体。赤い枠で囲んだ拡大写真と、青い光沢の購入ボタンで締めくくる。 colors: background: '#000000' dark-section: '#121D2F' primary: '#E8D188' accent-1: '#D9A520' text: '#FFFFFF' text-muted: '#BBBBBB' line: '#C8102E' accent-2: '#2F6FE0' marker: '#F0A030' cta: '#1E7FE0' on-cta: '#FFFFFF' surface: '#393839' cta-accessible: '#1C77D3' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 800 lineHeight: 1.4 accent: fontFamily: Orbitron fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 8px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 30px heading-bar: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px glow-model-title: textColor: '{colors.primary}' typography: '{typography.accent}' height: 45px detail-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 90px part-callout: textColor: '{colors.text}' typography: '{typography.note}' height: 16px vertical-catch: textColor: '{colors.text}' typography: '{typography.display}' height: 420px spec-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px --- # DESIGN.md — 漆黒×金メッキの宇宙系模型ホビー LP（Cosmic Black Gold Hobby Model Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: 宇宙空間・金メッキ光沢・メカ・発光文字・赤枠ディテール・黒地 - **地の質感**: 星雲が入った黒〜紺の宇宙写真を地に使う。金属の鏡面反射とグロー（発光）を強めに出す - **形**: 四角が基本。赤い細枠の角丸なし写真パネル、左端に金色の縦バーを付けた見出し、角丸の光沢ボタン - **温度感**: 寒色の宇宙に、暖色の金を差す高コントラスト ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ地の漆黒 | 45% | 画素の実測 | | `dark-section` | `#121D2F` | 宇宙・星雲の紺 | 20% | 画素の主要色に補正 | | `primary` | `#E8D188` | 金メッキ・発光見出しの金 | 12% | 画素の主要色に補正 | | `accent-1` | `#D9A520` | 見出し縦バーの金 | 0% | 推定 | | `text` | `#FFFFFF` | 見出し・本文の白 | 2% | 推定 | | `text-muted` | `#BBBBBB` | 英字サブ・注釈のグレー | 0% | 推定 | | `line` | `#C8102E` | 写真パネルの赤枠 | 0% | 推定 | | `accent-2` | `#2F6FE0` | 見出し縦バーの青・矢印 | 0% | 推定 | | `marker` | `#F0A030` | 注意書きの強調オレンジ | 0% | 推定 | | `cta` | `#1E7FE0` | 購入ボタンの青 | 0% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタン文字 | 0% | 推定 | | `surface` | `#393839` | 商品一覧パネルの濃灰 | 3% | 画素の主要色に補正 | | `cta-accessible` | `#1C77D3` | AA を満たす補正値（計算） | | 計算 | - 地は漆黒と宇宙写真だけにする。白い背景の面は作らない - 金は商品写真と英字見出しのグローに限って使う - 写真の拡大パネルや比較パネルは赤い細枠で囲む - 見出しの左端には金→青のグラデーションの縦バーを付ける - 注意書きの強調はオレンジ、購入ボタンは青の光沢グラデーション - `button-primary` は文字 `#FFFFFF` × 背景 `#1E7FE0` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1C77D3`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV 縦書きキャッチ（白文字＋紺の縁取り） | 明朝 | Shippori Mincho | 800 | 30px | 1.2 | 0.05em | | `headline-lg` | 商品名タイトル | 明朝 | Noto Serif JP | 900 | 20px | 1.3 | 0.0em | | `headline-md` | 縦バー付きの機能見出し | 明朝 | Noto Serif JP | 800 | 17px | 1.4 | 0.0em | | `accent` | 金色に発光する英字の型番見出し | 欧文サンセリフ | Orbitron | 500 | 18px | 1.2 | 0.02em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `note` | 注釈・パーツ名ラベル | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - 和文の見出しは太い明朝にして重厚に見せる - 英字の型番は細めのサンセリフにし、金色の外側グローを付ける - 本文は白のゴシックで小さめ。行間は狭めにする - パーツ名は細い引き出し線と小さなラベルで示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は斜めや左右にずらして重ねて配置 - **本文ブロックの幅**: 画面幅の約 95% - **余白**: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算） - 商品写真は画面幅いっぱいか、はみ出すほど大きく置く - テキストは左寄せ。左右の余白は約8px - 大きな写真の背後に、薄暗いシルエット写真を重ねて奥行きを出す - 拡大写真は赤枠の小パネルにして、隅に添える ## Elevation & Depth - 影は使わず、発光（グロー）で前後関係を出す - 英字見出しには金色の外側グローを付ける - ボタンは上が明るい光沢グラデーションにし、立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を切り抜いて宇宙背景に合成する。拡大写真は四角 - **セクション境界**: 区切り線は使わず、背景写真の切り替えで区切る - パネルは角丸なしの赤い細枠 - ボタンだけ角丸8px - 矢印は青い二重シェブロン ## Components - **購入ボタン**（`button-primary`）: 中央寄せの青い光沢ボタン。白い太字 - **縦バー見出し**（`heading-bar`）: 左端に金または青の縦バーを置いた、白い明朝の2行見出し - **発光型番見出し**（`glow-model-title`）: 金色に光る英字の型番2行 - **赤枠ディテールパネル**（`detail-panel`）: 拡大写真や変形前後の比較を、赤い細枠で囲む - **パーツ名引き出し**（`part-callout`）: 細い白線で写真の一部を指し、小さなラベルで名前を示す - **縦書きキャッチ**（`vertical-catch`）: FV の右側に置く縦書きの白い明朝。紺の太い縁取り付き - **商品情報ブロック**（`spec-block`）: ロゴと商品名、価格、本文、セット内容、オレンジの注意書きを縦に並べる ## Do's and Don'ts **Do** - 商品写真を主役にして、画面の大半を占めさせる - 宇宙・星雲の背景で世界観を統一する - 型番は英字の発光見出しで繰り返し入れる - 付属パーツや別売品の注記は、正確に小さな文字で添える **Don't** - 白や明るい色の背景セクションを入れない - 丸ゴシックやパステル色を使わない - 写真を小さなサムネイルの格子に並べない - 金以外の暖色を多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品の迫力を一目で伝える）: 戦闘シーンの合成写真に縦書きキャッチを重ね、上部にロゴを並べる 2. **商品概要**（商品名と概要を伝える）: 明朝の商品名と英字サブを並べ、白い本文と注釈を置く 3. **特長1 造形**（造形の再現度を見せる）: 縦バー見出しを置き、前後の写真を大きく、ずらして配置する 4. **特長2 ギミック**（変形・可動を見せる）: 形態ごとの写真、赤枠の拡大パネル、発光型番見出しで構成する 5. **展開ポーズ**（遊び方を伝える）: 台座付きの写真と、赤枠の変形前後比較（青い矢印付き）を並べる 6. **特長3 組み合わせ**（別売品との連携を見せる）: 青い縦バーの見出しに、パーツの赤枠パネルと装着写真を並べる 7. **セット内容**（同梱物を一覧で見せる）: 赤枠の濃灰パネルに、部品を並べて撮った写真を入れる 8. **イメージビジュアル**（最後に世界観を盛り上げる）: 画面幅いっぱいの戦闘シーンの CG 9. **商品情報・CTA**（価格を示し購入へ誘導する）: ロゴ、価格、セット内容、オレンジの注意書きを並べ、最後に青い購入ボタンを置く ## Imagery - 切り抜いた商品写真を宇宙背景に合成し、ビームや発光のエフェクトを加える - 金メッキの鏡面反射が映えるよう、強いハイライトで撮る - 大きな写真の背後に、暗く沈めた同じ商品のシルエットを重ねる - 部品は平置きで整列させて撮り、暗い灰色の背景に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため推奨を書く。PC では中央に幅約750pxのカラムを置き、左右は宇宙背景で埋める - 写真の重ね構図は SP と同じ比率のまま拡大する - PC では本文を14px程度に上げる ## 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-03db5fa5`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/hobby/special-1000017711/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（1/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。