DESIGN.md — 黒×金の発光見出しホビー模型LP（Black and Gold Mecha Model Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒・金の発光文字・斜めストライプ・メタリック・製品写真主役
• 地の質感: 黒の地に、ザラついた金色の斜め帯がうっすら重なる。見出しの文字はオレンジ金色に光る
• 形: 基本は直線と四角。区切りは斜めの帯と細い線で、角丸はほとんど使わない
• 温度感: 暗くて冷たい黒に、金の暖色がアクセントとして入る

Colors

• 地は全面を純黒にし、明るい背景のセクションは作らない
• 見出しは金からオレンジのグラデーションで塗り、外側にぼんやり光らせる
• 金色の斜め帯は透明度を下げて背景に重ね、写真の後ろに置く
• 本文は白から薄いグレーにする
• 青は購入ボタンにだけ使う
• パネルは黒より少し明るいグレーで面を分ける
• button-primary は文字 #F4EEE2 × 背景 #1E7FE0 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A6DC1、4.54:1）を使う。

Typography

• 見出しはすべて極太にし、金のグラデーションと外側への光をつける
• 英字の大見出しは縦長のコンデンス書体を使い、画面の幅いっぱいに置く
• 本文は小さめのサイズで3〜6行の短い段落にまとめる
• 日本語の見出しは2行に分け、1行目は短く感嘆符で締める
• 本文の左右揃えは中央か左にし、写真の余白に重ねてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面幅いっぱいに置き、文字は左上か余白に重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 8px（375px 幅換算）
• 写真は画面の端からはみ出させ、隣の写真と少し重ねて続ける
• 特長の見出しは左に寄せ、左端に金の四角を付ける
• 説明文は写真の空いている部分に重ねて置く
• パーツ一覧は2列のパネルに並べる
• セクション間は大きな余白ではなく、写真の流れでつなぐ

Elevation & Depth

• 影は使わず、見出しの文字だけを光らせて浮き上がらせる
• パネルはグレーの細い枠線と少し明るい面で区切る
• 製品写真は切り抜いて、黒い地に直接置く

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は背景を切り抜いて置く。細部の写真は四角い枠に入れる
• セクション境界: 直線の区切りはなく、斜めの金帯と写真の重なりで区切る
• 角は基本直角にし、パネルだけ小さく角丸にする
• 斜めの帯は45度前後の角度で、左下から右上へ走らせる
• 購入ボタンは角を小さく丸めた四角にする

Components

• 発光大見出し（glow-display-title）: 型番の英字を画面幅いっぱいに置き、金からオレンジのグラデーションで塗って光らせる
• 金四角付き見出し（feature-heading）: 左に金色のザラついた四角を置き、白い極太文字で2行の見出しを並べる
• 英字ラベル帯（view-label）: FRONTやREARのような英字ラベルを、左から右へ消えていく暗い金の帯に載せる
• 設定リンク枠（spec-link-box）: ファーストビューの右下に置く。黒い半透明の箱に金の枠線を付け、商品名と誘導文を載せる
• 細部写真グリッド（detail-thumb-grid）: グレーの枠を付けた四角い写真を2×2に並べ、メイン写真に重ねる
• パーツ一覧パネル（parts-panel）: グレーの枠を付けた2列のパネル。中にパーツの写真を並べ、下に光る金の見出しを置く
• 購入ボタン（button-primary）: 青のグラデーションで塗った横長の四角ボタン。白い太字を載せ、ページ最下部の中央に置く
• 商品情報ブロック（product-info）: 左にロゴ、左側に商品名・価格・説明・セット内容を置き、右に製品写真を配置する

Do's and Don'ts

Do - 地は純黒にし、金を見出しと斜め帯に限って使う - 製品写真は大きく切り抜き、画面の端からはみ出させて迫力を出す - 見出しは光る金の文字か、白文字に金の四角を付けたものにする - 特長は「見出し→短文→大きな写真」の順で繰り返す - パーツは一覧パネルにまとめて、何が付いてくるかを見せる

Don't - 白やパステルの明るい背景のセクションを入れない - 丸いピル型のボタンや柔らかいイラストを使わない - 見出しに細い書体や明朝体を使わない - 青をボタン以外の場所に使わない - 写真を小さな均等グリッドだけで並べない

Page Structure

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

1. ファーストビュー（シリーズの世界観を伝える）: 上に金のシリーズ名と短い導入文を置く。下に戦場のキービジュアル、右下に設定リンク枠を置く
2. 商品名と概要（商品を特定して全体像を伝える）: 発光する英字の大見出しの下に、金の商品名と5行ほどの概要文を置く
3. 特長1：監修と新規造形（デザイン面の価値を示す）: 金四角付きの見出しの下に、正面と背面の大きな写真をラベル帯付きで並べる
4. 付属パーツ（おまけの価値を示す）: 小さな四角い写真の横に短い説明文を置く
5. 特長2：専用カラー（配色の特別感を伝える）: 見出しの下に、ポーズを取った写真と細部写真グリッドを重ねて置き、写真を縦に連続させる
6. 特長3：カスタマイズ（遊び方の幅を示す）: 見出しと中央揃えの説明文の下に、2列のパーツ一覧パネルを置く
7. 商品情報（価格と内容を確認させる）: ロゴ・商品名・価格・説明・セット内容を左に、写真を右に置く。最後に注釈を添える
8. CTA（購入ページへ誘導する）: 細い線で区切ったあと、青い購入ボタンを中央に1つだけ置く

Imagery

• 製品はグレーと金のメタリックな質感が出るように、硬めのライティングで撮る
• 背景を切り抜いて黒い地に置き、ダイナミックな斜めの構図で並べる
• ファーストビューは炎や煙の戦場を背景にしたキービジュアルで世界観を作る
• 金の斜め帯にはザラついたかすれの質感を付けて重ねる
• パーツ写真は暗いパネルの上に整列させて置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約750pxの固定幅でSPと同じ構成を表示し、左右を黒で埋める案を推奨
• 斜め帯は画面幅いっぱいまで伸ばす
• PC ではパーツパネルや商品情報を横並びのまま広げる
• PC の大見出しは最大で約80pxにとどめる

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