DESIGN.md — 漆黒×発光オレンジのメカ模型 LP（Dark Mecha Orange Glow Model Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト
• キーワード: 漆黒・発光オレンジ・メカ・斜めカット・HUD風ライン・ミリタリーSF
• 地の質感: マットな黒地に、ネオン発光の線とグリッドや走査線の背景をうっすら重ねる
• 形: 平行四辺形や斜めに切った面、細い直線と斜線を組み合わせた見出しの下線
• 温度感: 暗くて冷たい地に、熱を感じるオレンジを差す

Colors

• 地は常に純黒。白い地のセクションは作らない
• オレンジは発光させて使う。区切り線や見出しの外側に光彩を付ける
• 錆色の面は斜めに切った平行四辺形にし、機能紹介の背景にだけ使う
• 機体写真の背景には明るいグレーを斜めの面で敷く
• 本文は白、注釈はグレー。色付きの本文は使わない
• 白く塗りつぶすのはスケッチの台紙と販売ボタンだけ

Typography

• 英字見出しは細長いコンデンス体で字間を広げ、下に細い線と斜線を添える
• 機能名の英字は太い斜体にする
• コピーは明朝を大きく組み、一部の漢字だけオレンジの縁取りにして光らせる
• オレンジの文字には外側にぼかした光彩を付ける
• 本文はゴシックで、白を14px前後にする
• スペックは項目と値をオレンジの太字で縦に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の比較だけ 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの境目に、横幅いっぱいの発光オレンジラインを引く
• 英字見出しは左に寄せ、本文は少し内側に下げる
• 機体写真は画面幅いっぱいに大きく見せる
• 機能紹介は、斜めの錆色パネルに見出し・説明・写真を重ねる
• ギャラリーはサムネイルを 5 列に並べる

Elevation & Depth

• 影は使わない。奥行きはオレンジの光彩で出す
• 区切り線と見出しの文字に外側の光彩を付ける
• 写真枠はグレーの 1px 線だけにする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 機体は切り抜きで見せる。背景のグレー面と錆色の面は、角を斜めに落とした平行四辺形にする
• セクション境界: 横幅いっぱいに引く発光オレンジの細線
• 角は直角か斜めのカットにする
• ラベルの帯は端を斜めに切り、下に白い斜線を添える
• 販売ボタンだけ白いピル型にする

Components

• HUD 風の英字見出し（section-title-hud）: 細長い英字に、細い下線と斜めに折れる線を添える
• 特長ラベル（feature-label）: 斜めに切った茶オレンジの帯に明朝の白文字を載せ、2 列に並べる
• 発光区切り線（glow-divider）: 横幅いっぱいのオレンジ線に光彩を付ける
• 機能紹介パネル（feature-panel）: 斜めの錆色面に、斜体の英字見出し・説明・写真 2 枚を重ねる。右上には製品名の小さいタグを置く
• 角度ラベル付きの写真（angle-photo）: 斜めのグレー面に機体を置き、オレンジの英字で向きを示す
• スペック一覧（spec-list）: オレンジの太字で縦に並べ、機体の図に部位の注釈線を引く
• 商品情報ブロック（product-box）: 型番を枠で囲み、発光英字で商品名、続けて発売日と価格を中央に揃える
• 販売サイトへのボタン（button-primary）: 白いピル型で、ラベルと販売店ロゴを縦線で区切る

Do's and Don'ts

Do - 地は純黒を保つ - オレンジは光らせて、線と強調にだけ使う - 機体写真は切り抜いて大きく見せる - 英字見出しには HUD 風の線を添える - 面は斜めに切ってスピード感を出す

Don't - 角丸のカードや柔らかいパステル色は使わない - 白地のセクションは作らない - オレンジを広い面にベタ塗りしない（錆色の面は可） - 丸ゴシックやポップな書体は使わない - ドロップシャドウで立体感を出さない

Page Structure

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

1. ファーストビュー（世界観と発売時期を伝える）: 左にアニメの場面ビジュアル、右の黒地に斜めカットでロゴ・型番・発売月を大きく置く
2. シリーズ紹介（シリーズのコンセプトを伝える）: グレーから黒へのグラデーションの帯に、ロゴ・見出し・本文を中央に揃える
3. コンセプト（製品の価値を印象づける）: 機体写真の上に巨大な明朝コピーを重ね、一部の字を発光させる。特長ラベルを並べる
4. デザイン（設計の考え方を見せる）: 白い台紙に線画のスケッチ。続けて正面・側面・背面の写真を斜めのグレー面に置く
5. 機能紹介（可動や付属品の魅力を見せる）: 錆色の斜めパネルを 5 つ重ね、それぞれに見出し・説明・写真を載せる
6. スペック（設定上の数値を見せる）: グリッド背景にオレンジの数値を並べ、図に注釈線を引く
7. ギャラリー（多くの角度から見せる）: 大きい写真 1 枚と、サムネイルのグリッドを組み合わせる
8. 商品情報とCTA（発売情報を伝えて購入へ誘導する）: 機体の写真、ロゴ、発光英字の商品名、日付と価格、注釈、白いピル型ボタンを順に並べる

Imagery

• 白・グレー・黒の機体を切り抜いた製品写真を、斜め前から撮る
• アニメの場面ビジュアルに、筆文字風の白いコピーを重ねる
• 背景にオレンジや赤の走査線、グリッド、データ風の模様を薄く敷く
• 設計スケッチは白地にグレーの線画で見せる
• 比較写真は黒背景で、グレーの細枠を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に寄せた 1 カラムのまま、写真を大きく見せる
• PC ではシリーズ紹介をロゴ左・本文右の横並びにする
• PC ではコンセプトの見出しを縦書きにし、機体写真を右に置く
• PC ではデザイン写真を、大きい 1 枚と小さい 2 枚の組み合わせにする
• PC では商品情報を写真左・文字右の横並びにし、ギャラリーのサムネイルは右側に寄せる

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