DESIGN.md — 黒×金×深紅の豪華フィギュア商品LP（Black and Gold Royal Collectible Figure LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、上品・高級
• キーワード: 漆黒・黄金の煙・深紅の帯・金縁の額装・明朝の太字・王族感
• 地の質感: 黒地に金色の煙・炎のようなテクスチャと光の玉ボケ。帯やパネルは深紅のグラデーションに金の細線。
• 形: 角丸なしの矩形。四隅に金の唐草・トランプ風装飾を付けた額縁。帯の両端に金の菱形星飾り。
• 温度感: 暖色寄りの暗いトーン。黒と金が主で、赤が強調。

Colors

• 地は黒＋金の煙テクスチャで統一し、白や明るい地は使わない
• 見出しは深紅の帯に白または金の文字を載せる
• 本文は深紅パネルに白文字、強調語だけ金黄色にする
• 金は線・装飾・強調文字に使い、面は煙テクスチャで表現する
• キャラクター別の見出し帯はキャラのテーマ色（赤・緑）で塗り分ける

Typography

• 見出し・本文とも太い明朝で重厚感を出す
• 大見出しには金のグラデーションと黒い縁取り・影を付ける
• 見出し内の数字や重要語は一回り大きくする
• 末尾に!!を使い勢いを出す
• 注釈だけ小さいゴシックにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、詳細写真は 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は画面幅いっぱいに大きく配置
• 見出し帯は全幅、本文パネルは左右に約4%の余白
• 写真→説明パネル→次の見出し帯の順でリズムを作る
• キャラ名ラベルは写真の左右に交互に重ねる

Elevation & Depth

• 影は使わず、金の光彩・グローで浮かせる
• 見出し文字に黒いドロップシャドウ
• パネルは金の二重線枠で縁取る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜きで配置。詳細写真は黒背景の矩形で金の装飾額縁に収める
• セクション境界: 直線。全幅の深紅帯を上下に細い金線で挟む
• 角丸は使わない
• 四隅に金の唐草飾りを付けた額縁を使う
• 帯の両端に金の菱形星飾りを置く

Components

• 深紅の帯見出し（heading-band）: 全幅の深紅グラデーション帯、上下に金線、両端に金の星飾り、中央に白/金の明朝見出し
• 金枠の説明パネル（text-panel）: 深紅地に金の二重線枠、白い明朝本文で強調語を金黄色に
• キャラ名ラベル（character-label）: 写真に重ねる2行の名前ラベル。テーマ色の帯で片端をグラデーションで抜く
• 金額縁の詳細写真グリッド（ornate-photo-grid）: 2カラムのアップ写真を黒背景で並べ、各枠の四隅に金装飾
• 横長金額縁（ornate-frame-wide）: 集合写真や付属品写真を入れる全幅の金装飾フレーム
• セット内容リスト（set-list）: 深紅パネル内に中央揃えで内容物を／区切りで並べる
• 注釈（note-text）: 黒地に白の小さい※注記

Do's and Don'ts

Do - 黒地に金の煙・光粒テクスチャを常に敷く - 見出しは深紅帯＋金装飾で統一する - 商品写真は切り抜きで大きく見せ、ポーズ違いを縦に連ねる - 説明文は短く、強調語だけ金黄色にする

Don't - 白や淡色の背景セクションを入れない - 角丸やピル型ボタンなどカジュアルな形を使わない - 細いゴシック体を見出しに使わない - 金・赤・黒以外の色を広い面で使わない

Page Structure

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

1. ファーストビュー（商品の世界観と名前を一目で伝える）: 金の光ボケ背景に2体の切り抜き写真、ロゴ、明朝の商品名、右端に縦書きの大コピー
2. リード（商品化の概要を伝える）: 黒地に白い明朝で3行の中央揃え文
3. 特長見出し（一番の売りを宣言する）: 深紅帯の2行見出し、両端に金の星飾り
4. キャラ別紹介（各キャラの全身を見せる）: 煙テクスチャ上に大きな切り抜き写真と色分けの名前ラベル、下に金枠説明パネル
5. ディテール（造形の細部を見せる）: 2カラムのアップ写真を金額縁で囲んだグリッド＋説明パネル
6. 付属品紹介（付属パーツの魅力を伝える）: 深紅帯見出し→ポーズ違いの写真を左右交互に縦配置→説明パネル
7. セット内容（内容物を明示する）: 深紅帯見出しと金枠パネルに中央揃えのリスト
8. シリーズ連動（別売り品との組み合わせを訴求する）: 見出し帯＋注釈＋横長金額縁の集合写真＋説明パネル
9. 同時購入特典（まとめ買いを促す）: 金と赤の2段見出し、特典の写真を金額縁に、下に説明パネル

Imagery

• 商品はスタジオで撮影し背景を切り抜いた全身写真
• 背景は黒地に金色の煙・炎のテクスチャ
• FVは金の光の玉ボケで華やかに
• 細部写真は黒背景でライティングを強く当てて金属感を出す
• エフェクトは炎や光の軌跡で動きを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約750px幅のカラムで画像を並べ、左右は黒地で埋める
• ディテールグリッドはPCで3〜4カラムにしてよい
• 見出し帯は全幅のまま、文字サイズを1.3倍程度に
• 説明パネルは最大幅を決めて中央に置く

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