DESIGN.md — 漆黒×発光ブルーのハイエンド模型 LP（Dark Cyber Blue Glow Hobby Model LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: 漆黒・発光ブルー・メカ・重厚・欧文ロゴ・写真主役
• 地の質感: 黒〜濃紺のグラデーション背景に、うっすらとグリッドや星屑、半透明の紋章を重ねている
• 形: 角の立った矩形が基本で、斜めスラッシュの見出しマークを使う。ボタンだけはピル型
• 温度感: 寒色で冷たく、硬質

Colors

• 地は黒〜濃紺のみで統一し、明るい面は使わない
• 強調は青系の発光色に限る。欧文ロゴや光の表現に使う
• 文字は白か淡いグレーにする。注釈だけ中間のグレーにする
• 赤は紋章やデカールなど、ワンポイントのアクセントだけに使う
• CTA は青いグラデーションのピル型ボタン1色にする
• button-primary は文字 #FFFFFF × 背景 #4E7BAB のコントラスト比が 4.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#4C78A7、4.61:1）を使う。

Typography

• 欧文の大見出しは青か白にし、外側にグロー（発光）を付ける
• 日本語の見出しは極太ゴシックの白にする
• 本文は小さめで行間 1.6 前後にし、写真の暗い部分に置く
• リード文は明朝で中央揃えにし、青白く光らせる
• 注釈は 8px 程度のグレーで、写真の直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の上に、左右どちらかへ寄せたテキストを重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は画面幅いっぱい、またははみ出して配置する
• テキストは写真の空いている側に左寄せで重ねる
• ギミックの説明は、欧文ロゴ→日本語見出し→本文の順に縦に並べる
• 比較写真は 2 列に並べ、上に欧文ラベルを付ける
• サムネイル写真は 3 枚を横に並べる

Elevation & Depth

• 影は使わない。光（グロー）で立体感を出す
• 写真の背後に半透明の紋章や巨大な文字を敷き、奥行きを出す
• 図解パネルは背景より一段明るいダークグレーにする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 切り抜き写真を背景に溶け込ませる。サムネイルは角の立った矩形
• セクション境界: 境界線は引かない。グラデーションの暗部でつなぐ
• カードやボタン以外は角丸を付けない
• 見出しの頭には白い斜めスラッシュを置く
• シリーズ名は黒地に白枠の矩形バッジにする

Components

• シリーズ名バッジ（series-badge）: 黒地に白枠と白の欧文太字を入れた矩形ラベル。FV の左上と価格ブロックに置く
• スラッシュ見出し（slash-heading）: 白い斜め線のあとに、2行の極太ゴシック見出しを続ける
• 発光欧文ロゴ（glow-logo）: 斜体の極太欧文ロゴに、カナのルビを重ねる。青に白フチを付ける
• 別売り表記タグ（option-tag）: 写真の角に置く、白枠の小さな注記ラベル
• 変形図解パネル（diagram-panel）: ダークグレーの矩形に、パーツ写真と白い矢印を配置して手順を見せる
• サムネ3連（thumb-row）: ディテール写真を3枚、横に並べる
• 価格ブロック（price-block）: バッジ・商品名・価格・説明・付属品を左カラムにまとめ、右に商品写真を置く
• 購入ボタン（button-primary）: 青いグラデーションのピル型ボタン。白い太字を中央に置く

Do's and Don'ts

Do - 背景は常に黒〜濃紺にする - 商品写真を主役として大きく使う - 青い発光表現で統一感を出す - 欧文ロゴと日本語の極太見出しを組み合わせる - 別売りやイメージに関する注記を写真の近くに置く

Don't - 白や明るい色の背景セクションを入れない - 暖色を強調に使わない（赤は紋章などのアクセントのみ） - 丸ゴシックや手書き書体を使わない - カードに影や大きな角丸を付けない - 文字を写真の明るい部分に重ねない

Page Structure

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

1. ファーストビュー（圧倒的な存在感で商品を見せる）: 発光する商品写真を全面に置き、明朝の発光リード文と欧文の巨大な商品名を重ねる
2. 商品コンセプト（商品化の背景を伝える）: 中央揃えの白い明朝体で数行の説明を置く
3. 特長1：発光フレーム（素材と発光の魅力を見せる）: スラッシュ見出しと本文に、ディテールのサムネ3連を添える
4. 特長2：付属装備一覧（付属装備の豊富さを訴求する）: 全身写真に、極太ゴシックのキャッチを2つ重ねる
5. 装備ごとの解説（各ギミックを詳しく説明する）: 発光欧文ロゴ、見出し、本文、図解パネルを、装備ごとに繰り返す
6. 形態比較（2つの形態を見比べさせる）: 2列に並べた写真の上に欧文ラベルを付け、背後に紋章を敷く
7. 付属品・パッケージ（付加価値を伝える）: デカールとパッケージの写真を2列に置き、注釈を添える
8. 価格・購入CTA（購入を促す）: バッジ、商品名、価格、付属品一覧を置き、最下部の中央に青いピル型ボタンを配置する

Imagery

• 黒背景で撮った白い模型に、青い内部発光を強調する
• 下からあおる迫力のあるアングルで、画面からはみ出させて配置する
• 背景に宇宙・グリッド・粒子の光を薄く重ねる
• 半透明の巨大な紋章や欧文の刻印を背面に敷く
• パーツの切り抜き写真と白い矢印で、変形の流れを図解する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 750px の固定幅カラムを置き、左右を黒背景で埋める
• PC では写真とテキストを左右に分けた 2 カラムにしてもよい
• 欧文ロゴは PC では 1.5 倍程度に拡大する
• CTA ボタンは 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 行書くと起動時に読み込まれる。