DESIGN.md — 黒地×朱橙の重厚ホビー模型 LP（Dark Cinematic Hobby Model Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 漆黒背景・朱橙の機体・切り抜き写真・巨大な欧文の透かし・ビームの緑発光・縦長の商品解説
• 地の質感: 暗い宇宙や煙のような背景に、赤茶色の光がにじむ。写真の立体感が主役になる。
• 形: ほぼ角丸なし。四角い挿入写真と、細い引き出し線で部位を説明する。
• 温度感: 暗い寒色の地に、熱い朱色を対比させる。

Colors

• 地は黒と、赤茶ににじむ暗色だけを使う。明るい地色は使わない。
• 朱橙は機体写真と見出しの縦バーに絞り、テーマ色として扱う。
• 文字は白を基本にし、装備名の上に付く小さなラベルだけ橙色にする。
• 緑の発光はビーム表現の写真の中だけで使う。
• 購入ボタンは赤のグラデーションに白文字とし、ページの最後に 1 つだけ置く。
• 背景の欧文の透かし文字は、暗い朱色で低いコントラストにする。

Typography

• 大見出しは極太ゴシックの白文字にし、黒の影で写真から浮かせる。
• 装備名はかぎ括弧で囲み、太い明朝体で重厚に見せる。
• ファーストビューのコピーは縦書きの明朝体で右端に置く。
• 本文は小さめにし、写真を主役にする。
• 背景に英字の名称を大きく敷き、透かし表現にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に自由配置し、文字と重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は画面幅いっぱいか、はみ出すほど大きく使う。
• 本文ブロックは左寄せで、写真の余白部分に重ねる。
• 部位の拡大写真は四角い小窓にして、引き出し線でつなぐ。
• 手順を見せる写真は 3 枚を横に並べ、矢印でつなぐ。
• 商品情報は、ロゴ・商品名・価格・付属品・注釈の順で左寄せにする。

Elevation & Depth

• カードの影は使わない。
• 文字に黒の外側グローを付けて読みやすくする。
• ボタンは縦のグラデーションと内側のハイライトで立体的に見せる。
• 機体の背景に赤茶の光をにじませて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 機体は切り抜いて背景に溶かし込む。部位の写真は角なしの四角い小窓にする。
• セクション境界: 区切り線を使わず、背景の暗いグラデーションで連続させる。
• 見出しの頭には細い橙色の縦バーを付ける。
• 部位の強調には青い円の囲みを使う。
• ボタンは角丸 8px 程度の横長にする。

Components

• 購入ボタン（button-primary）: 赤のグラデーションに白文字を載せた横長ボタン。ページ末尾の中央に置く。
• 縦バー見出し（heading-bar）: 左に朱橙のグラデーションの縦バーを付けた、白い極太見出し。2 行構成。
• 装備名ブロック（weapon-title）: 橙色の小ラベルの下に、かぎ括弧付きの明朝体で大きな名称を置き、その下に説明文を続ける。
• 部位の拡大小窓（detail-inset）: 灰色地の四角い写真。白い引き出し線と短い説明を添える。
• 3 枚の手順写真（step-photos）: 灰色地の写真を横に 3 枚並べ、赤い矢印で動きを示す。
• 欧文の透かし（watermark-text）: 装備名の英字を、暗い朱色の大きなセリフ体で背景に敷く。
• 商品情報ブロック（product-spec）: 黒地のロゴ枠・商品名・価格・説明・付属品・注釈を、写真の左に並べる。

Do's and Don'ts

Do - 背景は常に黒系にし、機体写真の朱色を最大限に目立たせる。 - 写真は大胆に斜めの構図で置き、画面からはみ出させる。 - 装備ごとに、ラベル・名称・説明・写真のセットを繰り返す。 - 細かい仕様は小窓の写真と引き出し線で示す。 - 購入ボタンは最後に 1 つだけ置き、赤く強く見せる。

Don't - 白や淡い色の背景セクションを入れない。 - 丸ゴシックやポップな装飾を使わない。 - カード型の枠で情報を囲みすぎない。 - 朱橙以外の鮮やかな色を、見出しの装飾に使わない。 - 本文を大きくして写真の迫力を下げない。

Page Structure

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

1. ファーストビュー（世界観と商品の存在感を一目で伝える）: 宇宙の写真を背景に、機体を大きく斜めに配置する。右に縦書きのコピー、上部にロゴを置く。
2. 商品名とリード（型番・名称と商品化の概要を伝える）: 白い極太ゴシックの 2 行見出しの下に、白文字の短いリード文を置く。
3. 再現度の特長（新規パーツと造形を見せる）: 縦バー見出しの下に、前後 2 体の写真と英字の透かしを置く。部位の小窓を引き出し線で示す。
4. 付属装備の紹介（装備を 1 つずつ詳しく見せる）: 装備名ブロックとアクション写真を交互に置く。背景に英字の透かしを敷く。
5. ギミックの解説（可動や展開の仕組みを見せる）: 3 枚の手順写真と矢印、短い注釈で構成する。
6. 付属シール（細部の付属品を訴求する）: 縦バー見出しと説明文の右に、エンブレムのイラストを置く。
7. 商品情報と CTA（価格と仕様を示し、購入へ誘導する）: ロゴ枠・商品名・価格・付属品を左に、全身写真を右に置く。最後に赤い購入ボタンを置く。

Imagery

• 模型を高解像度で撮影し、背景を切り抜いて黒い背景に合成する。
• 煽りの斜めの構図で迫力を出し、武器を画面の対角線に伸ばす。
• ビームのパーツは緑の発光で強調する。
• 部位の撮影は灰色の無地を背景にし、四角くトリミングする。
• 背景には宇宙や煙、赤茶色の光のにじみを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP 縦長の構成を基準にする。
• PC では中央 750px 程度の固定幅に縦長の画像を並べ、左右は黒で埋める。
• 装備紹介は、写真と文字の左右 2 カラムにしてもよい。
• 購入ボタンは PC でも中央の幅 360px 程度にする。

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