DESIGN.md — 黒宇宙背景×白機体の模型キットLP（Dark Space Mecha Model Kit LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 宇宙・メカ・切り抜き写真・黒背景・ディテール訴求
• 地の質感: 星屑と淡い光の粒が入った黒背景。写真の陰影がそのまま質感になる
• 形: 四角いフレームはほぼ使わない。切り抜いた機体を斜めに重ねて配置する
• 温度感: クールで硬質。差し色のオレンジとピンクだけが温かい

Colors

• 地は黒一色で通す。セクション境界で色を変えない
• 主役の色は写真の白い機体が担う。テキストは白だけにする
• 青は見出しの縦バーとロゴの縁取りだけに使う
• ピンクは最後の購入ボタンだけに限定する
• 注意書きは赤、補足注釈はグレーの小さい文字にする
• 商品名は白文字に濃い影や光彩を付けて、写真の上でも読めるようにする
• detail-thumb は文字 #888D8F × 背景 #3E4247 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• series-badge は文字 #E0303A × 背景 #C9A43A のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#FFFFFE、4.51:1）を使う。
• button-primary は文字 #E6EAEC × 背景 #E8559A のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C61B6B、4.6:1）を使う。

Typography

• 見出しはすべて極太のゴシックにする
• 本文も太字にして、写真の上でも読める強さを保つ
• 欧文の大文字ラベルの直下に、日本語の小ラベルを添える
• キャッチは字間を広げて、括弧で囲んだ1行にする
• 長い説明は段落にせず、短い行で改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と文字を左右交互に重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 30px、基本単位 4px、カード内 8px（375px 幅換算）
• 写真は画面からはみ出すほど大きく置き、文字はその余白に重ねる
• 見出しは左寄せにして、左端に青い縦バーを付ける
• 説明文は写真の左右どちらかの空きに寄せ、右寄せにしてもよい
• ディテール写真は2〜3枚の小さな四角を横に並べる
• 最後に商品スペックと価格、中央の購入ボタンを置く

Elevation & Depth

• カードの影は使わない
• 写真の上の文字には黒いドロップシャドウを付ける
• 商品名には青白い光彩を付けてもよい

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: メイン写真は背景を抜いた切り抜き。ディテール写真は角丸のない四角に細い白枠
• セクション境界: 区切りは置かず、黒背景のまま続ける
• フレームや囲みはほぼ使わない
• 購入ボタンだけは角丸の長方形にする

Components

• 青バー見出し（heading-bar）: 左に細い青の縦線を置き、白の極太文字を2行で組む
• 商品名ブロック（product-title）: 中央揃えのリード2行と、光彩付きの特大商品名
• 装備名ラベル（part-label）: 欧文大文字の下に日本語の小ラベルと説明文を添える
• ディテール写真枠（detail-thumb）: 白い細枠の四角い写真を横に並べ、下に注釈を付ける
• シリーズバッジ（series-badge）: 金のメタリック枠に赤文字のグレード表記
• 商品情報（spec-block）: 型番・商品名・税込価格・付属品を白文字で左寄せに並べる
• 購入ボタン（button-primary）: ピンクのグラデーションボタンに白の太字。中央に配置

Do's and Don'ts

Do - 背景は星の散る黒で統一する - 商品写真は大きく切り抜き、斜めや見切れで迫力を出す - 見出しは極太の白文字にして、青い縦バーを付ける - 装備ごとに欧文ラベルと短い説明をセットにする - 価格と付属品は最後にまとめる

Don't - 明るい背景のセクションを挟まない - 写真を角丸カードに収めて小さく並べない - ピンクを購入ボタン以外に使わない - 細い明朝体や丸ゴシックを使わない - 文字を写真の主要部分に重ねない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（作品世界とシリーズを示し、期待を高める）: 作品ロゴとグレードバッジを上に置き、機体を大きく切り抜いて重ねる。字間の広いキャッチを添える
2. 商品名紹介（スケールと商品名を明示する）: 中央揃えのリードと、光彩付きの特大商品名
3. 再現ポイント概要（新規造形の範囲を伝える）: 右寄せの太字リストを機体写真の横に並べる
4. 本体形状（外装と内部フレームを訴求する）: 青バー見出しと説明文。複数アングルの写真と線画図解を置く
5. ギミック紹介（可動や展開機構を見せる）: 小さな四角写真を2枚横に並べ、注釈を付ける
6. 武装紹介（付属武器を個別に紹介する）: 欧文ラベルの見出しと、武器を構えた写真を交互に並べる
7. 付属デカール（マーキングの付属を伝える）: 水色の台紙写真と拡大写真3枚を並べる
8. 商品情報（価格と付属品を確認させる）: グレードバッジ・型番・価格・説明・付属品を並べ、機体写真と大きな薄いエンブレムを添える
9. CTA（購入へ誘導する）: 中央にピンクの購入ボタンを置く

Imagery

• 模型は白背景で撮影して切り抜き、硬めの照明で陰影を強く出す
• 背景は黒地に小さな星屑と薄い光のにじみを描く
• 一部は線画の図解で構造を説明する
• 部隊エンブレムや欧文ロゴを半透明の大きな透かしとして敷く
• ポーズは斜めのアングルで、武器を構えた動きのある姿にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅750px前後のカラムを置き、左右も黒背景で埋める
• PCでは見出しと本文を1.3倍程度に拡大する
• PCではディテール写真を3〜4枚横に並べる
• 購入ボタンはPCでも中央に置き、幅は320px程度にする

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。