DESIGN.md — 濃紺岩肌×白文字のメカ模型紹介 LP（Dark Navy Mecha Model Kit Showcase LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: 濃紺・岩肌テクスチャ・切り抜き写真・斜体英字ラベル・ホビー・ギミック解説
• 地の質感: 濃紺〜紫紺の岩肌・石壁風テクスチャに斜めの光の筋を重ねる
• 形: 角丸なしの四角い写真枠に細い青線。ボタンだけ角丸
• 温度感: 寒色の暗い地。オレンジの差し色で温度を足す

Colors

• 地は濃紺のテクスチャで統一し、明るい面は使わない
• 見出しは白、本文は淡いグレーで階層をつける
• 見出しの左に紺青〜水色の縦線を付ける
• オレンジは装備名・可動矢印・購入ボタンだけに使う
• 締めの商品情報は黒地にして区切る
• 英字ラベルは薄紫の斜体で写真に重ねる
• button-primary は文字 #FDF5E4 × 背景 #F06A10 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BA520C、4.5:1）を使う。

Typography

• 見出しは極太ゴシックを 2 行で積む
• 英字ラベルは斜体太字で写真の角に重ねる
• 本文は小さめで行数を少なくする
• キャプションは写真の直下か横に右寄せで置く
• 可動部位は【】で囲んで部位名を示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に重ねたり 2〜3 分割で並べる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 8px（375px 幅換算）
• 切り抜き写真は左右にずらして重ね、動きを出す
• 詳細写真は四角い枠で 2 分割や縦積みにする
• 見出しは左寄せで、縦線から少し離す
• キャプションは写真の近くに小さく置く
• 最後は商品情報と購入ボタンを中央寄せで置く

Elevation & Depth

• 影は付けない。立体感は写真と暗い地のコントラストで出す
• 写真枠は細い青線だけで囲む
• 斜めの光の筋で奥行きを足す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 主役は背景を抜いた切り抜き、詳細は角丸なしの四角枠
• セクション境界: 区切り線は入れず、テクスチャの色調差でつなぐ
• 写真枠は角丸 0
• ボタンだけ角丸 6px 程度
• 可動の説明はオレンジの曲線矢印と丸い点で示す

Components

• 購入ボタン（button-primary）: オレンジのグラデーションに光沢を付けた横長ボタン。中央に置く
• 縦線付き見出し（heading-bar）: 左に紺青〜水色の縦線を付けた白の極太 2 行見出し
• 斜体英字ラベル（label-italic）: 機能名を薄紫の斜体英字で写真に重ねる
• 詳細写真枠（detail-frame）: 細い青線で囲んだ四角い拡大写真。下にキャプション
• 可動部位ラベル（gimmick-label）: 【部位】＋可動の種類を写真の下に添える
• 装備名小見出し（feature-name）: オレンジの太字で装備名を示し、下に説明を続ける
• 準備中ボックス（placeholder-box）: 濃紺の四角に青い英字で準備中と示す
• 商品情報ブロック（product-info）: 黒地にシリーズロゴ・商品名・価格・付属品を左に、完成写真を右に置く

Do's and Don'ts

Do - 地の濃紺テクスチャをページ全体で途切れさせない - 主役の写真は切り抜いて大きく、斜めや左右ずらしで置く - 可動部分は矢印や点で図解する - 英字の機能ラベルを各ブロックの目印にする - オレンジは要所だけに絞る

Don't - 白や明るい地のセクションを挟まない - 写真枠を角丸やカード影にしない - 本文を長くしない - 暖色を多く使わない - 細い明朝を見出しの主役にしない

Page Structure

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

1. ファーストビュー（作中の世界観で商品を印象づける）: 夕焼けの荒野に機体の合成写真を置き、斜めの白文字コピーと作品ロゴを重ねる
2. 商品名と概要（商品名と仕様の要点を伝える）: 大きな英字ロゴ、明朝の型番行、短い概要文を濃紺地に置く
3. 特長 1 造形（新しい造形と再現度を見せる）: 縦線付き見出しの下に FRONT/REAR の切り抜き写真と拡大枠を並べる
4. 特長 2 ポージング（作中のポーズを再現できることを示す）: 縦線付き見出しと斜体英字ラベル、複数の切り抜き写真
5. ギミック詳細（着脱や付属フィギュアを説明する）: 青線枠の写真を 2 分割で並べ、下にキャプション
6. 飛行・武装（回転や可動ギミックを図解する）: 英字ラベル＋オレンジ矢印入りの写真、装備名はオレンジ小見出し
7. 可動域（関節ごとの可動を一覧で見せる）: 中央に全身写真、周りに部位の拡大枠と【部位】ラベル
8. 付属品（同梱の小型メカを紹介する）: 黒い背景の撮影写真を青線枠で囲み、準備中ボックスを横に並べる
9. 商品情報と購入（価格を示して購入へ誘導する）: 黒地に商品情報と完成写真、注釈、中央にオレンジの購入ボタン

Imagery

• 模型は白背景で撮って切り抜き、暗い地で映えるようにする
• 詳細カットは黒やグレーの背景で寄って撮る
• 可動説明はオレンジの曲線矢印と丸い点を写真に重ねる
• 背景は濃紺の岩肌テクスチャに斜めの光の筋
• FV は作中の風景に爆炎などを合成した劇的な絵にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の固定幅で SP の構成を保ち、左右はテクスチャで埋める
• 詳細写真は PC で 3〜4 列に広げてもよい
• 可動域の図解は PC で中央写真を大きくし、左右に枠を置く
• 購入ボタンは 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 行書くと起動時に読み込まれる。