DESIGN.md — 黒×炎オレンジの特撮玩具コレクター LP（Dark Flame Collector Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 漆黒・炎・発光・比較・メカディテール・コレクター
• 地の質感: 黒地に炎写真・グロー光・ネオンライン。物撮りはスタジオライティングで光沢を強調
• 形: 角丸なしの直線的な矩形とオレンジ細枠、斜めカットの色帯、ネオン回路線の区切り
• 温度感: 暗く熱い。黒の冷たさとオレンジの熱を対比

Colors

• 地は基本漆黒。中盤のキャラ台詞だけ明るいグレー地に切り替えて緩急をつける
• オレンジは発光表現として使い、見出し・ラベル・細枠・ネオンラインに限定
• 比較カードは黒〜焦げ茶のグラデ地にオレンジ1px枠
• 黄色は注釈と固有名詞の強調にだけ使う
• キャラ別ブロックはオレンジ・青・ピンクのテーマ色で帯と斜め色面を統一
• 白カード内は黒文字＋オレンジの四角リスト記号
• version-label は文字 #E2E2E2 × 背景 #E8580F のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AC410B、4.61:1）を使う。
• character-band は文字 #E2E2E2 × 背景 #00B0E0 のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#006C89、4.62:1）を使う。

Typography

• 本文と台詞は明朝体で重厚に、ラベルは太ゴシックで
• 発光見出しはオレンジ文字に外側グロー（text-shadow）
• 見出しの背後に半透明の巨大英字を2行重ねる
• 台詞は行ごとに左右へずらして配置し会話感を出す
• 本文は中央揃え、比較カード内は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、比較は写真2枚の段違いグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 比較カードは大写真左・説明右上・小写真右下の段違い
• 写真ブロックは左右に7%余白を残す
• セクション境界はネオン回路線で区切る
• キャラブロックは帯見出し＋人物写真＋台詞の非対称構成
• リストカードは帯見出しと白地本体を一体化

Elevation & Depth

• 影は使わず光（グロー）で奥行きを出す
• 見出しとネオン線にオレンジの外光
• 物撮りは下からの反射光で浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形トリミング、人物は切り抜きで斜め色面と重ねる
• セクション境界: 二重のオレンジネオン回路線（段差付き水平線）
• 角丸は使わない
• 枠は1pxオレンジ線
• 斜め45度前後の色帯でキャラ色を表現
• ラベルは左上に矩形で貼る

Components

• 発光ポイント見出し（glow-point-heading）: 背後に巨大英字2行、手前にPoint番号と見出しをオレンジ発光で重ねる
• 新旧比較カード（compare-card）: オレンジ枠の大写真に新版ラベル、右下に旧版の小写真と説明文
• 版ラベル（version-label）: 写真の角に付くオレンジ地白文字の小タグ
• ネオン区切り線（neon-divider）: 段差のある二重オレンジ光線
• キャラ帯見出し（character-band）: テーマ色から黒へのグラデ帯に白明朝のキャラ名
• 仕様リストカード（spec-list-card）: オレンジ帯見出し＋白地に四角記号の箇条書き
• 黄色強調ボックス（marker-note）: 黄色地に濃色文字で補足仕様を中央揃え
• 関連記事バナー（banner-link）: 黒地の横長バナーに人物写真と見出し、右下に詳細リンク
• 機能ボタン注記（button-tag）: 写真上の部位に丸印と引出線、黒地白枠のタグ

Do's and Don'ts

Do - 黒地を基本にオレンジ発光を要所だけに使う - 物撮りは黒背景で光沢とディテールを強調 - 比較は同アングルの写真を並べ差分を説明する - 台詞・セリフは発光文字や明朝で演出する - 最後に暗転から次の発表を見せる演出で締める

Don't - 角丸やパステル調を使わない - オレンジを広い面で塗らない - 白地セクションを多用しない - 説明文を長文にしない（3〜4行まで） - フラットなイラストで物を表現しない

Page Structure

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

1. ファーストビュー（周年感とキャラの迫力で引き込む）: 炎背景にキャラ集合写真、上に周年ロゴ、下に商品ロゴと物撮り
2. リード（発売の意義を一言で伝える）: 黒地に白明朝2行中央揃え
3. 紹介動画（動きと音で商品を見せる）: 全幅の動画埋め込み
4. セット内容（同梱物を一望させる）: 英字見出し＋右上に内容リスト、暗いスタジオ物撮り
5. 特長1 外観の進化（旧版との差を見せる）: 発光ポイント見出し＋新旧比較カードを縦に繰り返す
6. 特長2 モード選択（キャラ別の音声を伝える）: グレー地に切替、黄色注記とキャラ帯＋人物＋台詞を3ブロック
7. 関連バナー（インタビュー記事へ誘導）: ネオン線下の横長バナー
8. 特長3 音声ギミック（収録音を一覧で示す）: 部位写真にボタン注記、白リストカード2枚、黄強調入り本文
9. キャラ台詞演出（作品世界への没入）: キャラ写真の横に発光する台詞を段違い配置、斜めの暗色帯
10. 次回告知（関連商品の発表で期待を高める）: 黒地に光る円環、ロゴ、発光の大見出しとコピーライト

Imagery

• 商品は黒背景でリム光を当てた高精細の物撮り
• 人物は白〜明るい背景で切り抜き、テーマ色の斜め帯と重ねる
• 炎・火の粉の写真を背景テクスチャに使う
• アイテムを円環状に並べ各色でネオン発光させる
• 見出し背景に薄い紋章ラインを透かす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約750pxに固定し左右を黒地で埋める
• 比較カードは PC で写真と説明を横並びに拡張
• 巨大英字見出しは PC で120px程度に拡大
• キャラブロックは PC で人物と台詞を左右2分割
• 動画は最大幅720pxで中央配置

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