DESIGN.md — 黒×赤メタリックの特撮玩具 LP（Dark Metallic Hero Toy Feature LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型
• キーワード: 漆黒の地・赤いスポット光・メタリック・透かし英字・POINT番号・劇中再現
• 地の質感: 黒地に放射状の赤・青・金のグロー。ヘアライン状の銀色の横線と、金属・発光パーツの写真
• 形: 角丸なしの直線的な帯とボックス。吹き出しは鋭角のしっぽ付き
• 温度感: 暗くて熱い。赤は熱気、青は冷たい光、金は高揚感を担う

Colors

• 黒地を基本に、セクションごとにテーマ色（赤・青・金）の光を一色だけ使う
• 明るい区画はグレー地で、細部写真やリストをまとめて読ませる
• 見出しバーは黒帯にして、右端か全面をテーマ色にする
• 強調の赤は POINT 番号、リストの四角マーカー、通し番号に限る
• 透かし英字はテーマ色を暗く・淡くして見出しの後ろに置く
• 発光表現は写真やグローで見せる。ベタ塗りのグラデーションは避ける
• point-label は文字 #DBDADA × 背景 #CC0402 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C20402、4.54:1）を使う。
• combo-header は文字 #DBDADA × 背景 #CC0402 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C20402、4.54:1）を使う。

Typography

• 和文の見出しと本文は明朝の太字で、重厚な劇場感を出す
• POINT番号と透かし英字は、縦長で太いコンデンス体にする
• 本文は中央揃えにし、短く改行する
• 台詞の引用は右揃えにして赤いグローを付ける
• 帯見出しはダッシュで挟み、字間を広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。細部写真は 2 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 各 POINT は番号帯＋メタリックラインから始める
• 見出しの後ろに透かし英字を重ねる
• 写真は全幅か 2 列のタイルで大きく見せる
• リストは枠付きのボックスにまとめ、上に黒い帯タイトルを付ける
• 説明の囲みは写真と本文を左右に重ねる

Elevation & Depth

• 影は使わない。奥行きは光のグローで表現する
• 写真の背後に放射状のスポット光を置く
• ボックスは細い枠線か半透明の暗い面にする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで光の上に置く。細部は四角いトリミング
• セクション境界: 直線で地の色を切り替える。POINT帯と横の銀ラインが境界になる
• 角丸は使わない
• 吹き出しは鋭角のしっぽ付きの台形・四角にする
• ラベルはテーマ色の矩形に白文字で載せる

Components

• POINT番号帯（point-label）: 左端の色付き四角と POINT:番号に、右へ伸びる銀色の二重ラインを付ける
• 透かし英字見出し（watermark-heading）: 巨大な英字 2 行の上に、明朝の和文見出しを中央に重ねる
• 帯見出し（band-title）: 黒からテーマ色へ切り替わる横帯に、白抜きの明朝で見出しを載せる
• 仕様リストボックス（list-box）: 白い枠に赤い四角マーカーの箇条書き。上に黒帯のタイトルを付ける
• 音声の吹き出し（speech-bubble）: 商品の横に、発声される音声を示すテーマ色の吹き出しを置く
• パーツ名タグ（photo-tag）: 写真の角に、黒地に白文字・細枠のラベルを置く
• 組み合わせ見出し（combo-header）: 2 つの商品名の黒帯と赤帯を×印でつなぐ
• 台詞リスト（glow-quote）: 人物写真の横に、赤く光る白文字の台詞を右揃えで並べる

Do's and Don'ts

Do - 地は黒を基本に、セクションのテーマ色の光を一色だけ使う - POINT番号帯と透かし英字を、各セクションで同じ型にそろえる - ギミックは写真・吹き出し・タグの 3 点で説明する - 明朝の太字で重厚さを保つ - 細部写真の面は角丸なしの直線で区切る

Don't - 角丸やパステル色を使わない - 丸ゴシックや手書きの書体を使わない - 1 セクションに複数のテーマ色を混ぜない - 影付きのフラットなカード UI にしない - 写真を小さく並べすぎない

Page Structure

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

1. ファーストビュー（キャラクターと商品の世界観で惹きつける）: 人物と商品の全面写真。下部にロゴと商品名を置く
2. 動画・販売概要（紹介動画と予約期間・価格を伝える）: 埋め込み動画のサムネイルに、受付期間と価格を重ねる
3. 同梱内容（セット内容を示す）: グレーのグラデーション地に英字タイトルと品目リスト、商品写真
4. コンセプトリード（商品の進化を宣言する）: 黒地に明朝 3 行の中央リード。赤く光る商品写真
5. POINT1 音声収録（収録された台詞を訴求する）: 赤い透かし英字と、人物写真の横に赤く光る台詞リスト
6. POINT2 造形とギミック（細部の造形とボタン機能を見せる）: グレー地に細部写真のグリッド、タグ付き写真、リストボックス
7. POINT3 付属アイテム（遊び方を段階的に紹介する）: 青いグローの黒地に青帯の見出し、吹き出し付きの商品写真
8. POINT4 拡張パーツ（アダプターの機能を紹介する）: 金色の透かし英字と淡い金地。金帯見出しのボックス
9. POINT5 連動（他の商品との組み合わせを訴求する）: 黒地に×でつないだ組み合わせ見出しのボックスを 3 つ縦に並べる
10. フッター（権利表記）: 黒地に小さな白文字を中央に置く

Imagery

• 商品は黒背景に置き、背後から赤・青・金のスポット光を当てる
• 金属の光沢と LED の発光が見える接写にする
• 人物は全身か腰上で、キャラクターの衣装を強いコントラストで撮る
• 細部の写真は斜めのアングルで、立体感を強調する
• 手で持った使用シーンで、サイズ感を見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 幅のカラムを置き、左右は黒地にする
• 透かし英字と光の演出は、PC で横に広げてもよい
• 細部写真のグリッドは、PC で 3〜4 列にできる

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