DESIGN.md — 宇宙紺×赤縁取り文字のプラモデル LP（Deep Space Mecha Hobby Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 宇宙背景・メカ切り抜き・赤グロー見出し・青グリッド・ダイナミック構図
• 地の質感: 星雲や星が散る宇宙写真と、青い方眼グリッド＋円形 HUD 模様の背景
• 形: 角丸のない直線。写真の囲みも角ばった四角
• 温度感: 寒色が中心。赤とオレンジを熱い差し色に使う

Colors

• 地は宇宙写真の濃紺〜黒にする。白い面は使わない
• FRONT/REAR を並べる比較セクションだけ、青いグリッド地に切り替える
• キャッチ見出しは白文字に赤いグロー縁取りを付けて目立たせる
• オレンジは見出しバー・装備名の括弧・購入ボタンだけに使う
• 英字の型番は水色のアウトライン文字で表示する
• 商品情報エリアは純黒に落とし、上から紺のグラデーションを重ねる
• button-primary は文字 #FFFFFF × 背景 #F59A10 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A76807、4.54:1）を使う。

Typography

• キャッチは明朝の太字・斜体気味にし、赤いグローを付ける
• 説明文はゴシックの太字で、短い行を左寄せかセンターで組む
• 型番は英字のアウトライン文字で大きく横いっぱいに置く
• 装備名は〈 〉の山括弧で囲み、括弧に赤オレンジのグローを付ける
• 本文は 3〜4 行までにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右交互に重ねる
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 切り抜き写真は斜めに配置し、画面幅いっぱいに大きく見せる
• 説明テキストは写真の余白に重ね、左右を交互に配置する
• FRONT/REAR の比較は 2 体を横に並べ、英字ラベルを添える
• ディテールは黒い四角の小窓に入れて、写真の隅に重ねる
• 商品情報は左にテキスト、右に立ち姿の写真を置く

Elevation & Depth

• 影は付けず、見出し文字のグロー（外側発光）で奥行きを出す
• 背景に光の粒子や放射状の光を入れる
• CTA は上から下へのグラデーションで立体感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は背景を除いた切り抜きにし、ディテールは四角い黒枠に入れる
• セクション境界: 背景写真を直線で切り替える。グリッド地との境目もまっすぐ
• カードやボックスに角丸を付けない
• CTA は角丸 8px 程度の横長ボタン
• 見出しの左に細い縦バーを置く

Components

• グロー見出し（glow-heading）: 白い明朝体に赤い発光縁取りを付け、2行でセンター配置する
• 縦バー付きセクション見出し（section-title-bar）: 左にオレンジの縦バーを置き、白い明朝体の見出しと小さなサブ文を並べる
• 英字型番ロゴ（model-number-outline）: 水色のアウトライン英字を 2 行で大きく置く
• FRONT/REAR ラベル（front-rear-label）: 比較写真に添える水色の小さな英字ラベル
• 装備名タグ（equipment-tag）: 〈 〉で囲んだ装備名に、赤オレンジのグローを付ける
• ディテール小窓（detail-inset）: 黒い四角枠にパーツの寄り写真や分解写真を入れる
• 購入ボタン（button-primary）: オレンジのグラデーションで白い太字。センターに置く
• 商品スペック（spec-block）: 商品名・価格・付属品の一覧と注釈を白文字でまとめる

Do's and Don'ts

Do - 地は宇宙の濃紺〜黒で統一する - 製品写真は切り抜きにし、斜めの動きのある構図で大きく見せる - 見出しにはグローを付けて発光感を出す - 比較の場面では青グリッドと円形 HUD 模様を背景に敷く - オレンジは CTA とアクセントだけに絞る

Don't - 白や淡色の背景面を使わない - 角丸カードや柔らかい丸ゴシックを使わない - 長文の段落を置かない - パステルカラーを入れない - 写真を小さく整列したグリッドで並べない

Page Structure

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

1. ファーストビュー（製品の迫力を見せ、登場を告げる）: 宇宙背景にアクションポーズの写真を置き、赤グローのキャッチを 2 行入れる。右上にシリーズのロゴ
2. 商品名・概要（原作・型番・商品名を伝える）: 作品ロゴの下に英字型番のアウトライン文字、大きな商品名、3 行の概要文を置く
3. 全身比較（前後の造形を見せる）: 青グリッド地に FRONT/REAR の 2 体を並べ、縦書きの英字型番を添える
4. 可動・ギミック紹介（可動域と新しい造形を訴求する）: 宇宙背景にポーズ写真を交互に配置し、グロー見出しと短い説明を重ねる。ディテールは小窓に入れる
5. 付属装備一覧（フル装備の状態を見せる）: 青グリッド地に縦バー見出しを置き、フル装備の前後写真を並べる
6. 装備ごとの解説（各武装の特徴を説明する）: 〈装備名〉タグと 2〜3 行の説明を、装備を構えた写真と左右交互に配置する
7. 付属品の全体写真（付属品が多いことを示す）: グロー見出しの下に、黒い四角枠で本体とパーツを並べた写真を置く
8. 商品情報・CTA（価格と仕様を伝え、購入へ導く）: 黒地にロゴ・商品名・価格・付属品リスト・注釈をまとめ、右に立ち姿の写真、下にオレンジの購入ボタンを置く

Imagery

• 製品は白背景で撮影して切り抜き、斜めの躍動的なポーズで見せる
• 背景は星雲と星が散る宇宙空間。光の粒子を加える
• 比較背景は青い方眼グリッドに水色の円形 HUD 模様を重ねる
• ディテールは黒背景の寄り写真にする
• 武器の可動は矢印アイコンで図解する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため推奨案。PC では中央 750px 程度の固定幅で SP の構成をそのまま見せる
• 両側の余白は宇宙背景を延長して埋める
• 比較写真は PC でも 2 体の横並びを保つ
• 商品情報は PC では左右 2 カラムを広げて配置する

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