--- version: alpha name: Deep Space Mecha Hobby Product LP description: 宇宙空間の濃紺〜黒を地にして、ロボット模型の切り抜き写真を大きく配置した縦長の商品紹介 LP。見出しは白い明朝体に赤いグロー縁取りを付ける。セクション見出しは左にオレンジの縦バーを置き、青いグリッド地で FRONT/REAR を並べて見せる。最後に商品情報とオレンジのグラデーションボタンで締める。 colors: background: '#040613' primary: '#113385' dark-section: '#02000C' background-alt: '#060F3B' on-dark: '#FFFFFF' accent-1: '#D8261C' accent-2: '#5FB4E8' secondary: '#F08A1C' cta: '#F59A10' on-cta: '#FFFFFF' text-muted: '#CCC6C2' surface: '#010101' cta-accessible: '#A76807' typography: display: fontFamily: Shippori Mincho B1 fontSize: 24px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Orbitron fontSize: 26px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Shippori Mincho B1 fontSize: 18px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px 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: 12px section: 40px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' glow-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 60px section-title-bar: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px model-number-outline: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 60px front-rear-label: textColor: '{colors.accent-2}' typography: '{typography.note}' height: 14px equipment-tag: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 24px detail-inset: backgroundColor: '{colors.surface}' height: 120px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px spec-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 300px --- # DESIGN.md — 宇宙紺×赤縁取り文字のプラモデル LP（Deep Space Mecha Hobby Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 宇宙背景・メカ切り抜き・赤グロー見出し・青グリッド・ダイナミック構図 - **地の質感**: 星雲や星が散る宇宙写真と、青い方眼グリッド＋円形 HUD 模様の背景 - **形**: 角丸のない直線。写真の囲みも角ばった四角 - **温度感**: 寒色が中心。赤とオレンジを熱い差し色に使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#040613` | 宇宙空間の濃紺黒の地 | 45% | 画素の実測 | | `primary` | `#113385` | 青グリッド地のセクション背景 | 18% | 画素の実測 | | `dark-section` | `#02000C` | 商品情報エリアの黒 | 15% | 画素の実測 | | `background-alt` | `#060F3B` | 見出し帯などの深い紺 | 8% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 見出し・本文の白文字 | 3% | 推定 | | `accent-1` | `#D8261C` | 見出しの赤いグロー縁取り | 1% | 推定 | | `accent-2` | `#5FB4E8` | 英字ロゴ型の水色アウトライン文字 | 1% | 推定 | | `secondary` | `#F08A1C` | セクション見出しのオレンジ縦バー・装備名の括弧 | 0% | 推定 | | `cta` | `#F59A10` | 購入ボタンのオレンジ | 0% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 推定 | | `text-muted` | `#CCC6C2` | 注釈の灰文字 | 0% | 画素の主要色に補正 | | `surface` | `#010101` | ディテール写真の囲み枠 | 2% | 画素の実測 | | `cta-accessible` | `#A76807` | AA を満たす補正値（計算） | | 計算 | - 地は宇宙写真の濃紺〜黒にする。白い面は使わない - FRONT/REAR を並べる比較セクションだけ、青いグリッド地に切り替える - キャッチ見出しは白文字に赤いグロー縁取りを付けて目立たせる - オレンジは見出しバー・装備名の括弧・購入ボタンだけに使う - 英字の型番は水色のアウトライン文字で表示する - 商品情報エリアは純黒に落とし、上から紺のグラデーションを重ねる - `button-primary` は文字 `#FFFFFF` × 背景 `#F59A10` のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A76807`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（2行、赤いグロー付き） | 明朝 | Shippori Mincho B1 | 800 | 24px | 1.4 | 0.02em | | `accent` | 英字の型番ロゴ | 装飾・ディスプレイ | Orbitron | 700 | 26px | 1.1 | 0.05em | | `headline-lg` | 商品名（スケール＋名称） | ゴシック | Noto Sans JP | 900 | 32px | 1.2 | 0.0em | | `headline-md` | 特徴を伝えるグロー見出し | 明朝 | Shippori Mincho B1 | 800 | 18px | 1.5 | 0.02em | | `headline-sm` | セクション見出しと装備名 | 明朝 | Noto Serif JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - キャッチは明朝の太字・斜体気味にし、赤いグローを付ける - 説明文はゴシックの太字で、短い行を左寄せかセンターで組む - 型番は英字のアウトライン文字で大きく横いっぱいに置く - 装備名は〈 〉の山括弧で囲み、括弧に赤オレンジのグローを付ける - 本文は 3〜4 行までにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストを左右交互に重ねる - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算） - 切り抜き写真は斜めに配置し、画面幅いっぱいに大きく見せる - 説明テキストは写真の余白に重ね、左右を交互に配置する - FRONT/REAR の比較は 2 体を横に並べ、英字ラベルを添える - ディテールは黒い四角の小窓に入れて、写真の隅に重ねる - 商品情報は左にテキスト、右に立ち姿の写真を置く ## Elevation & Depth - 影は付けず、見出し文字のグロー（外側発光）で奥行きを出す - 背景に光の粒子や放射状の光を入れる - CTA は上から下へのグラデーションで立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 製品は背景を除いた切り抜きにし、ディテールは四角い黒枠に入れる - **セクション境界**: 背景写真を直線で切り替える。グリッド地との境目もまっすぐ - カードやボックスに角丸を付けない - CTA は角丸 8px 程度の横長ボタン - 見出しの左に細い縦バーを置く ## Components - **グロー見出し**（`glow-heading`）: 白い明朝体に赤い発光縁取りを付け、2行でセンター配置する - **縦バー付きセクション見出し**（`section-title-bar`）: 左にオレンジの縦バーを置き、白い明朝体の見出しと小さなサブ文を並べる - **英字型番ロゴ**（`model-number-outline`）: 水色のアウトライン英字を 2 行で大きく置く - **FRONT/REAR ラベル**（`front-rear-label`）: 比較写真に添える水色の小さな英字ラベル - **装備名タグ**（`equipment-tag`）: 〈 〉で囲んだ装備名に、赤オレンジのグローを付ける - **ディテール小窓**（`detail-inset`）: 黒い四角枠にパーツの寄り写真や分解写真を入れる - **購入ボタン**（`button-primary`）: オレンジのグラデーションで白い太字。センターに置く - **商品スペック**（`spec-block`）: 商品名・価格・付属品の一覧と注釈を白文字でまとめる ## Do's and Don'ts **Do** - 地は宇宙の濃紺〜黒で統一する - 製品写真は切り抜きにし、斜めの動きのある構図で大きく見せる - 見出しにはグローを付けて発光感を出す - 比較の場面では青グリッドと円形 HUD 模様を背景に敷く - オレンジは CTA とアクセントだけに絞る **Don't** - 白や淡色の背景面を使わない - 角丸カードや柔らかい丸ゴシックを使わない - 長文の段落を置かない - パステルカラーを入れない - 写真を小さく整列したグリッドで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品の迫力を見せ、登場を告げる）: 宇宙背景にアクションポーズの写真を置き、赤グローのキャッチを 2 行入れる。右上にシリーズのロゴ 2. **商品名・概要**（原作・型番・商品名を伝える）: 作品ロゴの下に英字型番のアウトライン文字、大きな商品名、3 行の概要文を置く 3. **全身比較**（前後の造形を見せる）: 青グリッド地に FRONT/REAR の 2 体を並べ、縦書きの英字型番を添える 4. **可動・ギミック紹介**（可動域と新しい造形を訴求する）: 宇宙背景にポーズ写真を交互に配置し、グロー見出しと短い説明を重ねる。ディテールは小窓に入れる 5. **付属装備一覧**（フル装備の状態を見せる）: 青グリッド地に縦バー見出しを置き、フル装備の前後写真を並べる 6. **装備ごとの解説**（各武装の特徴を説明する）: 〈装備名〉タグと 2〜3 行の説明を、装備を構えた写真と左右交互に配置する 7. **付属品の全体写真**（付属品が多いことを示す）: グロー見出しの下に、黒い四角枠で本体とパーツを並べた写真を置く 8. **商品情報・CTA**（価格と仕様を伝え、購入へ導く）: 黒地にロゴ・商品名・価格・付属品リスト・注釈をまとめ、右に立ち姿の写真、下にオレンジの購入ボタンを置く ## Imagery - 製品は白背景で撮影して切り抜き、斜めの躍動的なポーズで見せる - 背景は星雲と星が散る宇宙空間。光の粒子を加える - 比較背景は青い方眼グリッドに水色の円形 HUD 模様を重ねる - ディテールは黒背景の寄り写真にする - 武器の可動は矢印アイコンで図解する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため推奨案。PC では中央 750px 程度の固定幅で SP の構成をそのまま見せる - 両側の余白は宇宙背景を延長して埋める - 比較写真は PC でも 2 体の横並びを保つ - 商品情報は PC では左右 2 カラムを広げて配置する ## 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-22971071`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/hobby/special-1000018930/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（4/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。