DESIGN.md — 黒×深緑グローの模型ホビー商品 LP（Dark Green Glow Hobby Model LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 漆黒背景・深緑の光彩・切り抜き写真・白抜き太字・緑の縦バー見出し・カタログ的説明
• 地の質感: 黒地に緑の放射状グローと煙のようなにじみ。フラットな面はほぼなく暗いグラデーション主体
• 形: 角ばった直線基調。見出しは左の細い縦バー、ボタンのみ小さな角丸
• 温度感: 冷たく硬質。緑の発光で緊張感と高揚感

Colors

• 地は常に黒。区切りの面色は作らず、緑のぼかしグローで奥行きを出す
• 文字は白が基本。説明の小文字は薄いグレーで階層を付ける
• 緑は見出しの縦バーと購入ボタンだけに使い、強調点を絞る
• 金はグレードロゴなど格付け要素だけに限定
• 商品自体の赤・青・白を主役にし、UIは無彩色＋緑に抑える
• button-primary は文字 #E8E8E5 × 背景 #2F9E3A のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#23772C、4.57:1）を使う。

Typography

• 説明文も太字で書き、黒地で潰れないようにする
• キャッチは縦書きで右端に置き、字間を広めにとる
• 欧文商品名は長体の太字で1行に収める
• 見出し文字に薄い黒の縁取り・影を付けて写真上でも読ませる
• 小文字の注釈は8px程度まで許容するカタログ的密度
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と説明を左右にずらして重ねる自由配置
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 8px（375px 幅換算）
• 本文は左右約3%の余白で端まで広げる
• 切り抜き写真は画面端からはみ出して配置し迫力を出す
• 説明文は写真の空いた余白に左寄せで差し込む
• 見出しは緑バー＋太字でセクション頭に置く
• 最下部に商品スペック行（ロゴ・名称・価格）とボタンを置く

Elevation & Depth

• 影の付いたカードは使わない
• 写真の背後に緑の外光グローを敷いて浮かせる
• 文字には黒のドロップシャドウで可読性を確保
• ボタンは緑のグラデーションで軽く立体感

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。付属品は明るい矩形台紙に並べる
• セクション境界: 境界線なし。黒と緑グローのにじみで連続させる
• 装飾は直線と縦バーのみ
• 丸や波形の区切りは使わない
• ボタンのみ小さな角丸と細い明るい縁

Components

• 縦書きキャッチ（hero-vertical-catch）: 右端に白の明朝を縦組みで大きく置き、写真と重ねる
• 商品名ブロック（product-title-block）: 欧文長体の大見出し＋和文名＋2〜3行のリード
• 緑縦バー見出し（heading-green-bar）: 左に幅6px程度の緑バー、右に白太字の訴求文1〜2行
• パーツ説明キャプション（part-caption）: 明朝の小見出し＋小さな説明3行を写真の脇に配置
• 付属品パネル（accessory-panel）: 明るいグレーや水色の矩形に付属品を並べ、下に白太字ラベル
• 商品スペック行（spec-row）: 金のグレードロゴ＋商品名＋価格、下に説明と付属品一覧
• 購入ボタン（button-primary）: 中央配置の緑グラデーション矩形、白太字で購入誘導
• 注釈（note-text）: ※付きの灰色小文字を2行程度

Do's and Don'ts

Do - 黒地＋緑グローを全編で一貫させる - 商品写真は大きく斜め・アクション構図で配置する - 見出しは緑縦バーで統一する - 説明文は短い機能説明を2〜3行で添える - 最後に価格と購入ボタンをまとめて置く

Don't - 白や明るい色の背景セクションを挟まない - パステルや丸い装飾を使わない - 緑以外の色をUIの強調に使わない - 写真を小さな枠に閉じ込めない - 細い文字で黒地に本文を書かない

Page Structure

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

1. ファーストビュー（商品の世界観と迫力を一目で伝える）: 黒地に煙状グロー、大きな切り抜き写真2点、右に縦書きキャッチ、右上にシリーズロゴ
2. 商品名とリード（商品名と概要を伝える）: 欧文長体大見出し＋和文名＋白太字のリード文
3. 特長1：新規パーツ（目玉パーツの再現度を訴求）: 緑バー見出し＋説明、パーツ写真と明朝キャプションを交互に配置
4. 特長2：可動・アクション（遊び方・ポージングの幅を見せる）: 緑バー見出し＋説明、アクション写真を複数重ねてジグザグ配置
5. 付属品紹介（同梱物を具体的に示す）: 明るい矩形パネルにデカールや付属品を並べ白太字ラベル
6. 商品スペック（価格と仕様をまとめる）: 金ロゴ＋商品名＋価格、説明文と付属品一覧、注釈
7. CTA（購入ページへ誘導）: 中央に緑グラデーションの購入ボタン

Imagery

• 商品は白背景で撮影し背景を抜いた切り抜きで使う
• 斜めのアクション構図や武器を振るポーズで動きを出す
• 背景に緑の放射光・煙状テクスチャを薄く敷く
• 背景に巨大な欧文ロゴを半透明で重ねて奥行きを作る
• エフェクトパーツの蛍光グリーンで背景色と呼応させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央固定幅（約750px）に同じ縦長構成を配置し左右は黒で埋める
• PC では写真と説明を左右2カラムに並べてもよい
• 文字サイズはPCで約1.3倍に拡大
• 縦書きキャッチは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 行書くと起動時に読み込まれる。