--- version: alpha name: Dark Cinematic Hobby Model Product LP description: 漆黒の宇宙調背景に、朱橙の機体写真を大きく切り抜いて配置した縦長の商品紹介 LP。白文字の太いゴシック見出しと、オレンジの縦バー付き見出しで装備や仕様を順に見せる。最後に赤いグラデーションの購入ボタンで締める。 colors: background: '#010101' dark-section: '#210C03' primary: '#DB653C' secondary: '#B13519' text: '#FCF5F2' text-body: '#EBE9E6' text-muted: '#BBBBBB' surface: '#6B6157' cta: '#B13519' on-cta: '#FFFFFF' accent-1: '#7CE04A' accent-2: '#F08A3C' line: '#DDDDDD' on-dark: '#08070A' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 800 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.md}' height: 40px heading-bar: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px weapon-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px detail-inset: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 110px step-photos: backgroundColor: '{colors.surface}' height: 60px watermark-text: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 80px product-spec: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px --- # DESIGN.md — 黒地×朱橙の重厚ホビー模型 LP（Dark Cinematic Hobby Model Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: 漆黒背景・朱橙の機体・切り抜き写真・巨大な欧文の透かし・ビームの緑発光・縦長の商品解説 - **地の質感**: 暗い宇宙や煙のような背景に、赤茶色の光がにじむ。写真の立体感が主役になる。 - **形**: ほぼ角丸なし。四角い挿入写真と、細い引き出し線で部位を説明する。 - **温度感**: 暗い寒色の地に、熱い朱色を対比させる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#010101` | ページの地（漆黒） | 45% | 画素の実測 | | `dark-section` | `#210C03` | 赤茶ににじむ暗い背景 | 20% | 画素の主要色に補正 | | `primary` | `#DB653C` | 機体と見出しバーの朱橙 | 12% | 画素の主要色に補正 | | `secondary` | `#B13519` | 深い朱赤の陰影 | 6% | 画素の主要色に補正 | | `text` | `#FCF5F2` | 見出し・本文の白文字 | 3% | 画素の実測 | | `text-body` | `#EBE9E6` | 説明文の白文字 | 2% | 画素の実測 | | `text-muted` | `#BBBBBB` | 注釈の灰文字 | 0% | 推定 | | `surface` | `#6B6157` | 挿入写真の灰色背景 | 4% | 画素の主要色に補正 | | `cta` | `#B13519` | 購入ボタンの赤 | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | 購入ボタンの白文字 | 0% | 推定 | | `accent-1` | `#7CE04A` | ビーム刀の発光グリーン | 2% | 推定 | | `accent-2` | `#F08A3C` | 装備名の上ラベルの橙文字 | 0% | 推定 | | `line` | `#DDDDDD` | 引き出し線・枠の白線 | 0% | 推定 | | `on-dark` | `#08070A` | ロゴ枠の黒地 | 0% | 画素の主要色に補正 | - 地は黒と、赤茶ににじむ暗色だけを使う。明るい地色は使わない。 - 朱橙は機体写真と見出しの縦バーに絞り、テーマ色として扱う。 - 文字は白を基本にし、装備名の上に付く小さなラベルだけ橙色にする。 - 緑の発光はビーム表現の写真の中だけで使う。 - 購入ボタンは赤のグラデーションに白文字とし、ページの最後に 1 つだけ置く。 - 背景の欧文の透かし文字は、暗い朱色で低いコントラストにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 型番と商品名の大見出し | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | 装備名（かぎ括弧付き） | 明朝 | Shippori Mincho | 800 | 24px | 1.3 | 0.0em | | `headline-md` | 縦バー付きのセクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.35 | 0.0em | | `headline-sm` | 装備名の上に付く小さなラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `note` | 注釈・部位の説明 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 背景の欧文の透かし・縦書きコピー | 欧文セリフ | Playfair Display | 700 | 40px | 1.1 | 0.0em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | - 大見出しは極太ゴシックの白文字にし、黒の影で写真から浮かせる。 - 装備名はかぎ括弧で囲み、太い明朝体で重厚に見せる。 - ファーストビューのコピーは縦書きの明朝体で右端に置く。 - 本文は小さめにし、写真を主役にする。 - 背景に英字の名称を大きく敷き、透かし表現にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に自由配置し、文字と重ねる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算） - 写真は画面幅いっぱいか、はみ出すほど大きく使う。 - 本文ブロックは左寄せで、写真の余白部分に重ねる。 - 部位の拡大写真は四角い小窓にして、引き出し線でつなぐ。 - 手順を見せる写真は 3 枚を横に並べ、矢印でつなぐ。 - 商品情報は、ロゴ・商品名・価格・付属品・注釈の順で左寄せにする。 ## Elevation & Depth - カードの影は使わない。 - 文字に黒の外側グローを付けて読みやすくする。 - ボタンは縦のグラデーションと内側のハイライトで立体的に見せる。 - 機体の背景に赤茶の光をにじませて奥行きを出す。 ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 機体は切り抜いて背景に溶かし込む。部位の写真は角なしの四角い小窓にする。 - **セクション境界**: 区切り線を使わず、背景の暗いグラデーションで連続させる。 - 見出しの頭には細い橙色の縦バーを付ける。 - 部位の強調には青い円の囲みを使う。 - ボタンは角丸 8px 程度の横長にする。 ## Components - **購入ボタン**（`button-primary`）: 赤のグラデーションに白文字を載せた横長ボタン。ページ末尾の中央に置く。 - **縦バー見出し**（`heading-bar`）: 左に朱橙のグラデーションの縦バーを付けた、白い極太見出し。2 行構成。 - **装備名ブロック**（`weapon-title`）: 橙色の小ラベルの下に、かぎ括弧付きの明朝体で大きな名称を置き、その下に説明文を続ける。 - **部位の拡大小窓**（`detail-inset`）: 灰色地の四角い写真。白い引き出し線と短い説明を添える。 - **3 枚の手順写真**（`step-photos`）: 灰色地の写真を横に 3 枚並べ、赤い矢印で動きを示す。 - **欧文の透かし**（`watermark-text`）: 装備名の英字を、暗い朱色の大きなセリフ体で背景に敷く。 - **商品情報ブロック**（`product-spec`）: 黒地のロゴ枠・商品名・価格・説明・付属品・注釈を、写真の左に並べる。 ## Do's and Don'ts **Do** - 背景は常に黒系にし、機体写真の朱色を最大限に目立たせる。 - 写真は大胆に斜めの構図で置き、画面からはみ出させる。 - 装備ごとに、ラベル・名称・説明・写真のセットを繰り返す。 - 細かい仕様は小窓の写真と引き出し線で示す。 - 購入ボタンは最後に 1 つだけ置き、赤く強く見せる。 **Don't** - 白や淡い色の背景セクションを入れない。 - 丸ゴシックやポップな装飾を使わない。 - カード型の枠で情報を囲みすぎない。 - 朱橙以外の鮮やかな色を、見出しの装飾に使わない。 - 本文を大きくして写真の迫力を下げない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品の存在感を一目で伝える）: 宇宙の写真を背景に、機体を大きく斜めに配置する。右に縦書きのコピー、上部にロゴを置く。 2. **商品名とリード**（型番・名称と商品化の概要を伝える）: 白い極太ゴシックの 2 行見出しの下に、白文字の短いリード文を置く。 3. **再現度の特長**（新規パーツと造形を見せる）: 縦バー見出しの下に、前後 2 体の写真と英字の透かしを置く。部位の小窓を引き出し線で示す。 4. **付属装備の紹介**（装備を 1 つずつ詳しく見せる）: 装備名ブロックとアクション写真を交互に置く。背景に英字の透かしを敷く。 5. **ギミックの解説**（可動や展開の仕組みを見せる）: 3 枚の手順写真と矢印、短い注釈で構成する。 6. **付属シール**（細部の付属品を訴求する）: 縦バー見出しと説明文の右に、エンブレムのイラストを置く。 7. **商品情報と CTA**（価格と仕様を示し、購入へ誘導する）: ロゴ枠・商品名・価格・付属品を左に、全身写真を右に置く。最後に赤い購入ボタンを置く。 ## Imagery - 模型を高解像度で撮影し、背景を切り抜いて黒い背景に合成する。 - 煽りの斜めの構図で迫力を出し、武器を画面の対角線に伸ばす。 - ビームのパーツは緑の発光で強調する。 - 部位の撮影は灰色の無地を背景にし、四角くトリミングする。 - 背景には宇宙や煙、赤茶色の光のにじみを敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP 縦長の構成を基準にする。 - PC では中央 750px 程度の固定幅に縦長の画像を並べ、左右は黒で埋める。 - 装備紹介は、写真と文字の左右 2 カラムにしてもよい。 - 購入ボタンは PC でも中央の幅 360px 程度にする。 ## 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-e7fbce35`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/hobby/special-1000016826/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。