DESIGN.md — 黒×紅×紫光の模型ホビー商品LP（Dark Cyber Mecha Model Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: ダーク背景・紫の放射光・紅いメカ・太明朝見出し・部位拡大写真・ギミック訴求
• 地の質感: 黒い地に紫のネオン状の光線とサイバーなグリッド。写真には光彩と影がつく
• 形: 角丸なしの矩形。細い枠線で囲んだ写真と、左に赤い縦線が付く見出し
• 温度感: 暗く冷たい地に、熱い紅と橙を差す

Colors

• 地は黒と濃紺のみ。白い面は使わない
• 紫の光線は背景装飾に限り、文字には使わない
• 見出しは白文字。左に紅の縦線、帯に濃赤から透明へのグラデを敷く
• 部位名など小見出しは橙文字で強調する
• CTAだけをオレンジの面にして一番目立たせる
• 本文は白か薄いグレーにして、暗い地の上で読めるようにする
• button-primary は文字 #FEF7EA × 背景 #E35303 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C54803、4.58:1）を使う。

Typography

• 見出しは太い明朝で、白文字に黒い影か光彩をつける
• キャッチは斜め配置の明朝で、橙や赤のグラデにしてもよい
• 本文は小さめの太ゴシックを詰めて組む
• 英字ラベルは角括弧で囲み、橙のサンセリフにする
• スペック数値は大きくして黄色や橙で強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に段違いで散らす
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 30px、基本単位 4px、カード内 4px（375px 幅換算）
• メイン写真は画面幅いっぱいに大きく置く
• 部位拡大写真は幅40%前後の枠で左右交互に重ねる
• 見出し帯は左端から画面の約2/3まで伸ばす
• キャプションは写真の直下に小さく置く
• 余白は狭くして、写真を重ね気味に並べる

Elevation & Depth

• 影ではなく光彩でメカの輪郭を浮かせる
• 写真枠は1pxの暗い赤の線で囲み、平らに見せる
• 見出し文字には黒いドロップシャドウをつける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜いたメカを背景に直接重ねる。部位写真は矩形でトリミングする
• セクション境界: 背景画像を切り替えるだけの直線の境界
• 角丸は基本使わない。CTAだけ角丸を少しつける
• 見出し帯は右端をグラデで透明にする
• 部位名ラベルは平行四辺形の赤帯にしてもよい

Components

• 赤縦線付き見出し（heading-bar）: 左に紅の縦線を置き、濃赤のグラデ帯に白い太明朝を2行で載せる
• 部位拡大写真カード（part-photo）: 細い枠で囲んだ矩形の写真。上に橙の小見出し、下に白いキャプションを置く
• 武装名リボン（label-ribbon）: 濃赤の斜め帯に白い明朝で武装名を入れる
• アングル英字タグ（view-tag）: [FRONT]のように角括弧付きの橙英字で、写真の向きを示す
• スペック強調コピー（spec-callout）: 斜めに置いた明朝で、数値を黄から橙のグラデで大きく見せる
• 準備中パネル（coming-soon）: 暗い赤のグラデ矩形の中央に、白い英字で準備中と表示する
• 購入ボタン（button-primary）: オレンジのグラデ矩形に白い太字。角を少し丸め、中央に置く

Do's and Don'ts

Do - 背景は黒〜濃紺にして、紫の放射光線を重ねる - メイン写真は大きく、斜めの躍動感のあるポーズにする - ギミックごとに部位写真と短いキャプションを付ける - 見出しは赤い縦線＋帯＋太明朝の型にそろえる - 最後に価格・付属品・注釈をまとめ、CTAを1つだけ置く

Don't - 白や明るい地のセクションを入れない - 丸ゴシックや、かわいい装飾を使わない - 大きな角丸カードや、ピル型のボタンにしない - CTA以外にオレンジの面を広く使わない - 写真の上に長い本文を重ねない

Page Structure

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

1. ファーストビュー（作品の世界観と商品の迫力を一目で伝える）: 宇宙空間とメカの大写真の上に、縦書きのキャッチを入れる。右上にロゴを置く
2. 商品名・概要（商品名と全体の特長を伝える）: 英字型番の下に、巨大な白い明朝のタイトルを置き、その下に詰めた本文を入れる
3. 特長1 造形と色分け（造形と色の再現度を見せる）: 赤帯見出しの下に、表・裏の全身写真と部位の拡大写真を交互に並べる
4. 特長2 可動（可動域の広さを伝える）: 紫の光線の背景にポーズ写真と関節の拡大写真を並べる
5. 特長3 付属パーツ（大型付属品とそのサイズを訴求する）: 翼を広げた写真に、斜めの数値強調コピーを添える
6. 武装紹介（各武装のギミックを順に紹介する）: 濃赤リボンの武装名、写真、短いキャプションを繰り返す
7. パッケージ・セット内容（箱と同梱物を見せる）: 2つの枠付きパネルを横に並べる
8. シリーズ連携（他の商品との組み合わせで、まとめ買いを促す）: 格納庫風の背景と空の背景で2機が対決するビジュアル。橙の明朝コピーを入れる
9. 価格・CTA（価格と注意事項を示して購入へ導く）: ロゴと価格、概要、注釈を並べ、中央にオレンジの購入ボタンを置く

Imagery

• メカやフィギュアは切り抜いて、斜めの動きのあるアングルで撮る
• 背景は黒い宇宙や電子グリッドに、紫のネオン光線を放射状に入れる
• 部位の拡大写真は黒背景のスタジオ撮影で、光沢を強調する
• 光の粒やエフェクトを散らして、劇中の雰囲気を出す
• 後半には空や格納庫を合成した情景写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅750px前後の縦長カラムを置き、左右は黒い地で埋める
• SP の画像主体の構成は、そのまま縮尺だけ変えて流用する
• 部位写真は PC で2〜3列に並べてもよい
• CTAは 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 行書くと起動時に読み込まれる。