DESIGN.md — 黒×白幾何学のSFプラモデル商品LP（Dark Sci-Fi Hobby Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: SFメカ・宇宙の暗がり・幾何学グリッド・斜めカット・発光エフェクト
• 地の質感: 白地に薄いグレーの三角形ワイヤーフレーム模様と同心円のHUD装飾。暗部は星雲・光芒のある宇宙背景
• 形: 直線と斜め45度のカット、角丸はほぼ使わない。円弧のHUDラインを背景に添える
• 温度感: 寒色寄りで無機質。マゼンタと青の発光が差し色

Colors

• 暗い宇宙背景のファーストビューと黒の締めセクションで、白グレー地の特長群を挟む
• セクション見出しは必ず黒帯に白の太字斜体
• マゼンタは欧文アウトラインロゴと品名だけに使う
• 青は購入CTAと光のエフェクトに限る
• 白地には薄いグレーの三角グリッドを敷き、真っ白な面は作らない
• 本文は黒、注釈はグレーの小さな文字
• button-primary は文字 #FFFFFE × 背景 #1E78DC のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1D76D8、4.53:1）を使う。

Typography

• 欧文の型番は角張った細いワイドフォントで、アウトラインかマゼンタの塗りにする
• 見出しは太いゴシックの斜体で疾走感を出す
• 情緒的なコピーは明朝の縦書きに、白フチと発光を付ける
• 説明文は11px前後で短く2〜3行に収める
• 注釈は※で始め、写真の右下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と説明文を左右に配置したり、重ねたりする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション同士は余白を空けず、黒帯見出しで区切る
• 商品写真は画面幅いっぱいに大きく置き、余白にはみ出させてもよい
• 説明文は写真の空いた側に、左寄せの短いブロックで置く
• 部位の解説は引き出し線で写真とつなぐ
• サブ写真は黒背景の矩形を2枚並べて添える

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 奥行きは発光（グロー）と光芒エフェクトで出す
• 縦書きコピーには外側の紫グローを付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで背景に溶け込ませる。サブ写真は角丸なしの矩形
• セクション境界: 黒帯の右端を斜めにカットし、白い斜線を添える
• 基本は直角で、斜めカットを多用する
• CTAだけ角丸4〜8pxのグラデーションボタンにする
• 背景に同心円のHUDラインを薄く重ねる

Components

• 斜めカット見出し帯（section-band）: 黒い全幅の帯に白い太字斜体の見出しを置く。右端は斜めに切り、白い斜線を入れる
• 欧文アウトラインロゴ（outline-logo）: 型番の欧文を2行で組み、マゼンタの線か塗りにする。各セクションの隅にあしらう
• スペックパネル（spec-panel）: 濃紺のグリッド地に、欧文の見出しと設定説明、型番・寸法・重量の一覧を置く
• 公式サイトボタン（button-sub）: 白い横長の矩形。中央にテキスト、右端に＞矢印を置く
• 引き出し線つき注記（callout-line）: 《》で囲んだ部位名と短い説明を、マゼンタ系の細線で写真の部位につなぐ
• 商品情報ブロック（product-info）: 黒背景に、シリーズロゴ・品名・価格・付属品リスト・注釈をまとめ、右に商品写真を置く
• 購入ボタン（button-primary）: 青のグラデーションで、角丸の矩形。白い太字で購入を促す
• 注釈（note-text）: ※から始まる小さなグレー文字。写真の右下に置く

Do's and Don'ts

Do - 暗い宇宙と白い幾何学地を交互に並べ、コントラストを強くする - 見出しは必ず黒の斜めカット帯で統一する - 商品写真は大きく、ポーズと角度を変えて何枚も見せる - 欧文の型番ロゴを各セクションに繰り返し入れて、一体感を出す - 光の線や発光エフェクトで動きを出す

Don't - パステルや暖色の地色を使わない - 大きな角丸やピル型のボタンを多用しない - 白地を無地のままにしない - 長文の段落を置かない - マゼンタと青をCTA以外の広い面に塗らない

Page Structure

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

1. ファーストビュー（作品の世界観と商品を一目で伝える）: 星雲の宇宙背景に、発光する商品写真を複数配置する。右に縦書きの明朝コピー、下に欧文ロゴと和文の品名を置く
2. リード文（商品概要を短く説明する）: 白地に黒文字の2〜3行で示す
3. 設定・スペック紹介（作品内での設定を伝える）: 濃紺のグリッドパネルに、左は全身写真、右は説明・スペック・サブ写真2枚・公式サイトボタンを置く
4. 特長1 造形再現（造形の再現度を訴求する）: 黒帯見出しの下に、前後の写真とアップ写真、短い説明を散らす
5. 特長2 付属武装（付属パーツの価値を示す）: 大きな商品写真に引き出し線で武装名と説明を付け、黒背景のアップ写真を添える
6. 特長3 エフェクトパーツ（演出パーツを見せる）: パーツ一覧の写真2枚と使用例を並べ、明朝の白フチコピーと注釈を入れる
7. 特長4 可動・ポージング（可動域の広さを示す）: 三角グリッドとHUDの円の上に、ダイナミックなポーズを大きく複数並べる
8. イメージビジュアル（作中の名場面を想起させる）: 暗い電脳空間で青い光線が交差する中に、複数体を並べた写真を置く
9. 商品情報・購入CTA（価格と付属品を示し、購入へ誘導する）: 黒背景に情報リストと商品写真を置き、最下部中央に青い購入ボタンを配置する

Imagery

• 商品は白背景で切り抜き、強いローアングルや斜めの構図で迫力を出す
• 暗部の背景は星雲・レンズフレア・青白い光芒のある宇宙表現にする
• 白地には薄いグレーの三角形ワイヤーフレームと同心円のHUDラインを敷く
• 発光パーツは赤・緑・青のグローを強調する
• 黒背景のディテールアップ写真を矩形で添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため、以下は推奨。PCではコンテンツ幅を約1000pxで中央寄せし、外側は黒またはグリッド地で埋める
• 特長セクションは写真と説明を左右2カラムにする
• 黒帯見出しは全幅のまま、文字サイズを24〜28pxに上げる
• スペックパネルは横並びのレイアウトを維持し、余白を広げる
• 購入ボタンは幅280px程度で中央に置く

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