--- version: alpha name: Dark Cyber Mecha Model Kit LP description: 黒と濃紺の宇宙的な背景に、紫の放射光線と紅いメカ写真を大きく重ねた、ホビー模型の商品紹介LP。赤帯付きの太い明朝見出しと、細枠の部位拡大写真で可動ギミックを順に見せ、最後にオレンジのボタンで購入へ導く。 colors: background: '#000001' background-alt: '#091441' primary: '#B73939' secondary: '#7B0B17' accent-1: '#8A3FD0' accent-2: '#F0A030' cta: '#E35303' on-cta: '#FEF7EA' text: '#FFFFFF' line: '#7B0B17' dark-section: '#270B25' accent-3: '#E89A3A' cta-accessible: '#C54803' typography: display: fontFamily: Shippori Mincho B1 fontSize: 44px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho B1 fontSize: 20px fontWeight: 800 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Oswald fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 4px full: 999px spacing: unit: 4px card: 4px section: 30px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 48px part-photo: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.note}' height: 110px label-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 26px view-tag: textColor: '{colors.accent-3}' typography: '{typography.accent}' height: 16px spec-callout: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 50px coming-soon: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px --- # DESIGN.md — 黒×紅×紫光の模型ホビー商品LP（Dark Cyber Mecha Model Kit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: ダーク背景・紫の放射光・紅いメカ・太明朝見出し・部位拡大写真・ギミック訴求 - **地の質感**: 黒い地に紫のネオン状の光線とサイバーなグリッド。写真には光彩と影がつく - **形**: 角丸なしの矩形。細い枠線で囲んだ写真と、左に赤い縦線が付く見出し - **温度感**: 暗く冷たい地に、熱い紅と橙を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000001` | ページ全体の黒地 | 45% | 画素の主要色に補正 | | `background-alt` | `#091441` | 濃紺のサイバー地 | 20% | 画素の主要色に補正 | | `primary` | `#B73939` | 見出しの紅・メカの主色 | 8% | 画素の主要色に補正 | | `secondary` | `#7B0B17` | 見出し帯の濃い赤 | 4% | 画素の主要色に補正 | | `accent-1` | `#8A3FD0` | 放射光線の紫 | 5% | 推定 | | `accent-2` | `#F0A030` | 小見出しの橙文字 | 1% | 推定 | | `cta` | `#E35303` | 購入ボタン | 0% | 画素の実測 | | `on-cta` | `#FEF7EA` | ボタン文字 | 0% | 画素の実測 | | `text` | `#FFFFFF` | 見出し・本文の白 | 3% | 推定 | | `line` | `#7B0B17` | 写真枠の細線 | 0% | 画素の主要色に補正 | | `dark-section` | `#270B25` | 写真の台となる暗いパネル | 2% | 画素の主要色に補正 | | `accent-3` | `#E89A3A` | 英字ラベルの橙 | 0% | 推定 | | `cta-accessible` | `#C54803` | AA を満たす補正値（計算） | | 計算 | - 地は黒と濃紺のみ。白い面は使わない - 紫の光線は背景装飾に限り、文字には使わない - 見出しは白文字。左に紅の縦線、帯に濃赤から透明へのグラデを敷く - 部位名など小見出しは橙文字で強調する - CTAだけをオレンジの面にして一番目立たせる - 本文は白か薄いグレーにして、暗い地の上で読めるようにする - `button-primary` は文字 `#FEF7EA` × 背景 `#E35303` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C54803`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大タイトル | 明朝 | Shippori Mincho B1 | 800 | 44px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho B1 | 800 | 20px | 1.3 | 0.0em | | `headline-sm` | 部位名の小見出し | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 700 | 10px | 1.6 | 0.0em | | `note` | 写真キャプション・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 英字の型番・FRONTなどのラベル | 欧文サンセリフ | Oswald | 600 | 13px | 1.2 | 0.03em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.05em | - 見出しは太い明朝で、白文字に黒い影か光彩をつける - キャッチは斜め配置の明朝で、橙や赤のグラデにしてもよい - 本文は小さめの太ゴシックを詰めて組む - 英字ラベルは角括弧で囲み、橙のサンセリフにする - スペック数値は大きくして黄色や橙で強調する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に段違いで散らす - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 30px、基本単位 4px、カード内 4px（375px 幅換算） - メイン写真は画面幅いっぱいに大きく置く - 部位拡大写真は幅40%前後の枠で左右交互に重ねる - 見出し帯は左端から画面の約2/3まで伸ばす - キャプションは写真の直下に小さく置く - 余白は狭くして、写真を重ね気味に並べる ## Elevation & Depth - 影ではなく光彩でメカの輪郭を浮かせる - 写真枠は1pxの暗い赤の線で囲み、平らに見せる - 見出し文字には黒いドロップシャドウをつける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 切り抜いたメカを背景に直接重ねる。部位写真は矩形でトリミングする - **セクション境界**: 背景画像を切り替えるだけの直線の境界 - 角丸は基本使わない。CTAだけ角丸を少しつける - 見出し帯は右端をグラデで透明にする - 部位名ラベルは平行四辺形の赤帯にしてもよい ## Components - **赤縦線付き見出し**（`heading-bar`）: 左に紅の縦線を置き、濃赤のグラデ帯に白い太明朝を2行で載せる - **部位拡大写真カード**（`part-photo`）: 細い枠で囲んだ矩形の写真。上に橙の小見出し、下に白いキャプションを置く - **武装名リボン**（`label-ribbon`）: 濃赤の斜め帯に白い明朝で武装名を入れる - **アングル英字タグ**（`view-tag`）: [FRONT]のように角括弧付きの橙英字で、写真の向きを示す - **スペック強調コピー**（`spec-callout`）: 斜めに置いた明朝で、数値を黄から橙のグラデで大きく見せる - **準備中パネル**（`coming-soon`）: 暗い赤のグラデ矩形の中央に、白い英字で準備中と表示する - **購入ボタン**（`button-primary`）: オレンジのグラデ矩形に白い太字。角を少し丸め、中央に置く ## Do's and Don'ts **Do** - 背景は黒〜濃紺にして、紫の放射光線を重ねる - メイン写真は大きく、斜めの躍動感のあるポーズにする - ギミックごとに部位写真と短いキャプションを付ける - 見出しは赤い縦線＋帯＋太明朝の型にそろえる - 最後に価格・付属品・注釈をまとめ、CTAを1つだけ置く **Don't** - 白や明るい地のセクションを入れない - 丸ゴシックや、かわいい装飾を使わない - 大きな角丸カードや、ピル型のボタンにしない - CTA以外にオレンジの面を広く使わない - 写真の上に長い本文を重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と商品の迫力を一目で伝える）: 宇宙空間とメカの大写真の上に、縦書きのキャッチを入れる。右上にロゴを置く 2. **商品名・概要**（商品名と全体の特長を伝える）: 英字型番の下に、巨大な白い明朝のタイトルを置き、その下に詰めた本文を入れる 3. **特長1 造形と色分け**（造形と色の再現度を見せる）: 赤帯見出しの下に、表・裏の全身写真と部位の拡大写真を交互に並べる 4. **特長2 可動**（可動域の広さを伝える）: 紫の光線の背景にポーズ写真と関節の拡大写真を並べる 5. **特長3 付属パーツ**（大型付属品とそのサイズを訴求する）: 翼を広げた写真に、斜めの数値強調コピーを添える 6. **武装紹介**（各武装のギミックを順に紹介する）: 濃赤リボンの武装名、写真、短いキャプションを繰り返す 7. **パッケージ・セット内容**（箱と同梱物を見せる）: 2つの枠付きパネルを横に並べる 8. **シリーズ連携**（他の商品との組み合わせで、まとめ買いを促す）: 格納庫風の背景と空の背景で2機が対決するビジュアル。橙の明朝コピーを入れる 9. **価格・CTA**（価格と注意事項を示して購入へ導く）: ロゴと価格、概要、注釈を並べ、中央にオレンジの購入ボタンを置く ## Imagery - メカやフィギュアは切り抜いて、斜めの動きのあるアングルで撮る - 背景は黒い宇宙や電子グリッドに、紫のネオン光線を放射状に入れる - 部位の拡大写真は黒背景のスタジオ撮影で、光沢を強調する - 光の粒やエフェクトを散らして、劇中の雰囲気を出す - 後半には空や格納庫を合成した情景写真を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅750px前後の縦長カラムを置き、左右は黒い地で埋める - SP の画像主体の構成は、そのまま縮尺だけ変えて流用する - 部位写真は PC で2〜3列に並べてもよい - CTAは PC で幅300px前後にして中央に置く ## 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-5bb28720`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/hobby/special-1000015465/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（2/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。