DESIGN.md — 漆黒×発光グリーンと金のホビー模型LP（Dark Neon Green Hobby Model LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒背景・発光グリーン・金の差し色・写真主体・メカの重厚感・映画的コピー
• 地の質感: 光沢のあるプラスチックやメタリック表面の写真に、グリーンのグロー（発光）を重ねる。背景はフラットな黒。
• 形: 角張った直線が基本。見出しの頭に斜めの白バーを付け、ラベルは角ばった四角形にする。
• 温度感: 寒色寄りのダーク。金で温度を少し足す。

Colors

• 地は全面黒にする。グラデーションや色付きの帯は使わない。
• グリーンは写真の発光部分と主見出しのグロー、CTAだけに使う。
• 金は欧文の商品名ロゴとロゴマークだけに使う。
• 本文は白にし、注釈はグレーで小さくする。
• 装甲のダークティールを写真全体のトーンとしてそろえる。
• placeholder-box は文字 #AAAAAA × 背景 #717171 のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• button-primary は文字 #FFFFFF × 背景 #22B573 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#198655、4.58:1）を使う。

Typography

• 感情に訴えるコピーは字間を広く取った明朝にし、緑のグローを付ける。
• 商品名は欧文の縦長サンセリフを金で大きく組む。
• 説明文は白ゴシックで小さく、2〜3行に収める。
• 見出しは左揃えにし、行頭に斜めの白バーを置く。
• 注釈は※付きのグレーで極小サイズにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（写真は全幅で重ねて配置）
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 24px、基本単位 8px、カード内 8px（375px 幅換算）
• 写真は余白なしで縦に連続させ、セクション同士を重ねる。
• テキストは左右約12pxの余白で左揃えにする。
• 見出しと説明は写真の横の暗い部分に重ねる。
• 最後に商品情報ブロックとCTAを中央に置く。

Elevation & Depth

• 影は使わない。奥行きは写真の重なりと発光で出す。
• 見出しコピーには緑の外側グローを付ける。
• CTAには上下方向の微妙な光沢グラデーションを付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜いた立体物を黒背景に溶け込ませ、画面からはみ出すほど大きく配置する。
• セクション境界: 境界線は引かず、写真のフェードと重なりでつなぐ。
• ラベルは角ばった四角形にする。
• 見出し前の装飾は平行四辺形の白バーにする。
• CTAだけ角を小さく丸める。

Components

• グレード表記ラベル（grade-label）: 白地に黒の太い欧文を入れた角ばったラベル。FVの右上と商品情報の頭に置く。
• 発光キャッチコピー（glow-catch）: 写真の上に重ねる明朝の白文字で、緑のグローを付ける。
• 斜めバー見出し（slash-heading）: 白い斜めバーの後に太ゴシック2行を置き、下に小さな説明文を添える。
• 別売り注記バッジ（note-badge）: 白枠の小さな角丸ボックス。写真の端に置き、オプション品を使った例であることを示す。
• 準備中パッケージ（placeholder-box）: グレーの立方体イラストに、欧文で「準備中」を表す表記を添える。
• 商品情報ブロック（product-info）: 商品名、税込価格、説明、付属品をスラッシュ区切りで白ゴシックの左揃えに並べる。
• 購入CTA（button-primary）: 中央に置く緑のボタン。白い太字で、光沢感を出す。

Do's and Don'ts

Do - 黒い地に写真を大きく敷き詰め、没入感を優先する。 - 発光グリーンは光る部分にだけ使い、希少性を保つ。 - コピーは短い2行の明朝にし、映画のような調子を出す。 - 仕様の注釈は必ず小さなグレーの※付きで書く。

Don't - 白や明るい背景のセクションを入れない。 - ピンクや赤などテーマと関係のない色を使わない。 - 丸みの強いポップな装飾やイラストを使わない。 - 長い本文を写真の上に置いて読みにくくしない。

Page Structure

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

1. ファーストビュー（作品ロゴとグレード表記で世界観を示す）: 全幅のキービジュアルの上にロゴを左上、ラベルを右上に置き、中央に発光する明朝コピーを重ねる。
2. 商品名ロゴ（商品を特定する）: ロゴマークの下に金の欧文で商品名を3段組み、英語サブタイトルを添える。
3. 導入文（商品化の概要を伝える）: 白の明朝3行と、太ゴシック2行の補足を置く。
4. ビジュアル訴求（仕上がりの迫力を見せる）: 全身写真に明朝の中見出し2行を重ね、注記バッジを付ける。
5. 特長（仕様のポイントを説明する）: 斜めバー見出しと小さな説明文を左に、写真を右に置き、付属品の写真をサムネイルで添える。
6. ギャラリー（形態の違いを見せる）: 複数の写真を重ねてコラージュし、欧文セリフでモード名を入れる。
7. パッケージ（外箱の情報を伝える）: 見出しの下にグレーの準備中ボックスを置く。
8. 商品情報・CTA（価格と仕様を示し購入につなげる）: グレードラベル、商品名、価格、説明、付属品、注釈を並べ、写真を右に置き、下に緑のボタンを置く。

Imagery

• 暗いスタジオで撮った立体物を黒背景で切り抜く。
• クリアパーツの内側から緑が光るような演出にする。
• アオリやクローズアップの構図で、画面からはみ出すように大きく配置する。
• 背景に半透明の大きな紋章シルエットを暗い緑で置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央を幅約750pxにし、左右は黒で埋める。
• PCではコラージュ写真を横に広げ、テキストを左右に振り分ける。
• SPでは本文が10px程度と小さいので、実装時は12px以上を推奨する。

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