DESIGN.md — 漆黒×紫グローのロボット模型 LP（Dark Purple Mecha Model Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒背景・紫グロー・切り抜き写真・大型欧文タイトル・ディテールグリッド
• 地の質感: 黒地に紫の光彩とモーションブラーを重ねた、つやのある暗い質感
• 形: 角張った見出しバーと四角い写真グリッド。角丸はボタンだけに控えめに使う
• 温度感: 冷たく妖しい寒色寄り

Colors

• 地はほぼ黒で統一し、明るい色の面は写真の中だけに出す
• 紫は見出しバー・グロー・CTAに限って使い、ブランドを表す色にする
• 見出しは白、本文は明るいグレー、注釈は灰色の 3 段階で明るさを落とす
• 大型タイトルは白から淡いラベンダーへのグラデーションで金属のように見せる
• 赤は注意書きの短い 1 行にだけ使う

Typography

• 商品名は詰めた縦長の欧文太字にし、画面幅いっぱいまで大きく置く
• 型番やスケールの表記は細めの欧文大文字で、タイトルの上下に添える
• 日本語の見出しは極太ゴシックで、左に紫の縦バーを付ける
• 本文は小さく詰めて組み、主役は写真に譲る
• 暗い背景の文字には黒い影や光彩を付けて読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の上に文字を重ね、ディテール写真は 2 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 左右の余白は約 10px と狭くし、写真は画面いっぱいまで使う
• 本文は左寄せで画面幅の 60% ほどに収め、右側に切り抜き写真を重ねる
• ディテール写真は 2 列 3 段の正方形に近いグリッドで並べる
• セクションの区切りは見出しバーと写真の重なりで示し、区切り線は使わない

Elevation & Depth

• 切り抜き写真の背後に紫のぼかしグローを敷く
• 文字には黒いドロップシャドウを付けて写真から浮かせる
• カードの影は使わず、暗い背景との明暗差で奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 主役の写真は背景を抜いて大きく重ね、ディテール写真は四角く切る
• セクション境界: 直線の境界をつくらず、黒地の上で写真をつなげる
• 見出しバーやロゴの枠は角を立てる
• CTA ボタンだけ角を小さく丸め、ベベル風の光沢を付ける
• 写真同士は重ねたりはみ出させたりして動きを出す

Components

• 縦書きキャッチ（hero-vertical-catch）: ファーストビューの右側に縦書きで 2 行置く。白文字に紫の光彩を付ける
• 大型タイトルブロック（product-title-block）: 上に型番、中央にグラデーションの欧文タイトル、下に区切り線とスケール表記を置く
• 紫バー見出し（heading-bar）: 左に紫の縦バーを置いた極太の白い見出し
• 写真のコメント（photo-callout）: 写真の空いたところに置く 2 行の白い太字コメント
• ディテール写真グリッド（detail-grid）: 灰色の地の部分アップ写真を 2 列 3 段で並べる
• シリーズロゴバッジ（series-badge）: 茶色の地に白い欧文を入れた四角いロゴ。商品名・価格の左に置く
• 購入ボタン（button-primary）: 中央に置く紫のボタン。上下に光沢グラデーションと明るい縁を付ける
• 注釈（note-text）: 灰色の小さな文字で、印の付いた注意書きを並べる

Do's and Don'ts

Do - 背景は黒で統一し、紫の光彩で商品の色とつなげる - 商品写真は大きく切り抜き、画面からはみ出させて迫力を出す - 見出しは紫バー付きの極太ゴシックにそろえる - 特長はひとつずつ、見出し・短い説明・写真の順で見せる - 最後に商品情報と価格をまとめ、そのすぐ下に CTA を 1 つ置く

Don't - 白や明るい色の背景セクションを入れない - パステルや暖色の CTA にしない - 丸っこい書体や手書き書体を使わない - 本文を大きくしすぎて写真の面積を削らない - カードに影や大きな角丸を付けて、やわらかい印象にしない

Page Structure

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

1. ファーストビュー（作品ロゴと主役の写真で、ひと目で世界観を伝える）: 暗い紫の背景に、ぶれた残像付きの写真を置く。左上に作品ロゴ、右上にシリーズロゴ、右に縦書きキャッチを置く
2. 商品タイトル（型番と商品名を強く印象づける）: 型番・グラデーションの大型欧文タイトル・区切り線・スケール表記を縦に積む
3. リード文（商品の要点を 3 行ほどで伝える）: 白い太字を左寄せで置き、右側に切り抜き写真を重ねる
4. 特長 1（武装）（付属パーツの魅力を見せる）: 紫バー見出し・小さな本文・小見出しを置き、複数の写真を重ねてコラージュにする
5. 特長 2（付属パーツ）（大型の付属品を見せる）: 小見出しと本文を左上に置き、写真 2 枚の間に白い太字のコメントを置く
6. 特長 3（造形）（細部の再現度を見せる）: 左に 2 列のディテール写真グリッド、右に全身の切り抜き写真を置く
7. 商品情報（商品名・価格・説明をまとめる）: シリーズロゴの横に商品名と価格を置き、下に説明・付属品・注釈を続ける。右に全身写真を置く
8. CTA（購入ページへ誘導する）: 中央に紫の光沢ボタンを 1 つ置く

Imagery

• 模型を暗い背景で撮り、紫と白の光を当てて切り抜く
• ポーズの違う写真を大小重ねて、コラージュのように並べる
• ファーストビューの写真には放射状のぶれや残像を入れて、スピード感を出す
• ディテールのアップはグレーの背景で撮り、四角く並べる
• 主役の写真の背後に紫のもやを敷き、黒い背景になじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に約 800px の固定幅の列を置き、左右は黒で埋めることを勧める
• PC では大型タイトルを幅いっぱいに保ち、リード文と写真を 2 カラムで並べる
• ディテールグリッドは PC では 3 列に広げてもよい
• SP の本文は 9px 前後と小さいので、実装では 12px 以上にして読みやすくする

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