DESIGN.md — 漆黒×青光の模型キット製品 LP（Dark Cosmic Scale Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト
• キーワード: 漆黒の背景・青い発光・宇宙・星雲・製品写真を主役に・明朝の白見出し・注釈つきディテール
• 地の質感: 黒地に紫紺の星雲と光のにじみ。写真は切り抜いて黒に溶けこませる
• 形: 角のない四角。写真枠に細いグレーの線。ボタンだけ角丸
• 温度感: 冷たく硬質。青い光で緊張感を出す

Colors

• 地はほぼ黒で通し、白い面は使わない
• 強調は青の発光だけ。暖色は小さなロゴの金にとどめる
• 大見出しは白文字に青い外側グローをかける
• 帯見出しは左右に青い短線をつけ、水色の文字で中央に置く
• 宇宙の場面だけ紫紺の星雲を背景に敷く
• 購入ボタンだけ彩度の高い青でベタ塗りにする

Typography

• 見出しと説明は明朝で重厚に見せる
• 英字の製品名は細いサンセリフを横幅いっぱいに大きく置く
• 大見出しは 2〜4 行に改行し、青いグローで光らせる
• 価格・スペック・注記はゴシックで小さく
• 文字は白〜グレーだけ。色文字はラベルの水色に限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と注釈を左右に重ねる自由配置
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 30px、基本単位 4px、カード内 8px（375px 幅換算）
• 写真は画面端まで大きく、ほかの写真と重ねてよい
• 見出しは写真の上に重ねて左寄せ
• 注釈テキストは写真の余白に置き、細い引き出し線でパーツとつなぐ
• 比較画像は枠付きの縦 2 枚に矢印をはさむ
• 価格ブロックは左にテキスト、右に製品全身

Elevation & Depth

• 影ではなく、文字と製品のまわりの青い発光で立体感を出す
• 写真は黒背景に溶けこませ、境界をぼかす
• カードの浮き上がりは使わない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜き写真か、黒地の四角に細い枠線
• セクション境界: 直線で区切らず、黒〜星雲のグラデーションでつなぐ
• 装飾の角丸はボタンだけ
• 枠線は 1px のダークグレー
• 帯見出しの左右に短い青い線

Components

• FV 製品キービジュアル（hero-product-visual）: 黒地に製品の切り抜き写真を大小重ね、下に英字の製品名と細い英文補足を置く
• 青線つき帯見出し（band-heading）: 左右に青い短線をつけ、中央に水色の明朝文字を置くキャッチ帯
• グロー大見出し（glow-headline）: 白い明朝の太字に青い外側発光をかけ、写真の上に重ねる
• パーツ注釈（callout-annotation）: 水色のパーツ名と白い短文の説明を写真の横に置き、細い線でパーツとつなぐ
• 枠付き比較画像（framed-compare）: 細い枠の写真を縦に 2 枚並べ、間に青い下向き矢印を入れて変形を見せる
• シリーズロゴバッジ（brand-badge）: 金のロゴ風プレートを説明文の左に置く
• 価格情報ブロック（price-block）: ロゴ、製品名、税込価格、概要文、付属品リスト、注記を左寄せで縦に並べる
• 購入ボタン（button-primary）: 中央に置く青いベタ塗りボタン。角は少し丸く、白い太字で購入を促す

Do's and Don'ts

Do - 製品写真を最大のサイズで見せ、画面端からはみ出させる - 見出しには青い発光をかけて暗い背景から浮かせる - パーツ単位の注釈で細かいつくりを解説する - 宇宙・星雲の背景で場面に没入させる - 注記は小さなグレー文字でまとめる

Don't - 白や明るい背景のセクションを入れない - 赤やオレンジの派手な CTA を使わない - 丸ゴシックやポップなイラストを使わない - 写真を小さなカードに収めて並べない - 影の強いカード UI を使わない

Page Structure

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

1. ファーストビュー（製品の存在感とシリーズ名を一目で伝える）: 黒地に切り抜き写真を大小重ね、右上にロゴ、下に英字の大きな製品名
2. キャッチ帯と概要（作品の背景と商品化の内容を短く紹介する）: 青線つき帯見出しの下に、金ロゴと白い概要文を横並びにする
3. 特長 1：外装の再現（造形の細かさを見せる）: グロー見出しと本文、写真 2 枚、パーツ注釈 3 点
4. 特長 2：武装ギミック（付属武装と変形ギミックを見せる）: 枠付きの比較画像と矢印、大きな写真に注釈ラベル
5. 特長 3：可動とアクション（ポーズの自由度を印象づける）: 星雲背景にポーズ写真を重ね、右に大きなグロー見出し
6. 付属品紹介（デカールやフィギュアなどの付属物を伝える）: 小さな写真の横に白い明朝の短文を段差をつけて置く
7. 価格・仕様（購入判断の情報をまとめる）: 左にロゴ、価格、説明、付属品、注記、右に製品の全身写真
8. CTA（購入ページへ誘導する）: 中央に青い角丸ボタンを 1 つ置く

Imagery

• 製品は真っ黒な背景でスタジオ撮影し、輪郭に冷たいリムライトを当てる
• 斜め下からのアオリでスケール感を出す
• アクションの場面は紫紺の星雲背景に合成する
• 部分のアップを多用し、パーツの段差や面の構成を見せる
• 背景は暗いまま、見出しまわりに青い光のにじみを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750〜800px 幅の固定カラムを置き、左右は黒で埋める
• PC では見出しと写真を横並びにしてもよいが、写真の重なりは残す
• PC の本文は 14〜16px に上げる
• ボタンは PC で横幅 300px 程度まで広げる

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 行書くと起動時に読み込まれる。