DESIGN.md — 赤×金×黒の炎熱系ホビー玩具LP（Fiery Red and Gold Collectible Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク
• キーワード: 炎グラデーション・金の額縁・黒帯見出し・商品写真主役・番号付き特長・吹き出し
• 地の質感: 古代文様の薄いテクスチャを敷いた赤橙グラデーション。羊皮紙風のベージュ枠もある
• 形: 金の細線フレームと角の唐草装飾。ボタンは置かず、角が少し丸いカードと吹き出しで構成する
• 温度感: 非常に暖色。赤・橙・金が中心で、黒茶で締める

Colors

• 地は赤から橙の炎グラデーションにする。中央を明るく、端を暗く
• 番号見出しは黒茶の帯に、薄い金色の明朝で入れる
• 説明カードは黒茶の半透明面に金の細線をかける
• 明るい面は羊皮紙のベージュに限り、本文は焦げ茶にする
• 強調語は赤か黄だけにする。黄はバッジと数字に使う
• 青や緑などの寒色は使わない（商品のランプ部分を除く）
• page は文字 #FFFFFF × 背景 #DF7E37 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#B65E1D、4.56:1）を使う。
• percent-badge は文字 #C52709 × 背景 #F7D21E のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B12308、4.56:1）を使う。

Typography

• 見出しと本文は明朝を基本にして、重厚さを出す
• キャッチは白の極太ゴシックを斜体にし、黒い縁取りか影をつける
• 特長見出しの上には、斜体の番号を小さく置く
• 強調数字は大きくして赤か黄で塗る
• 注釈は白の小さな文字で、ブロック直下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。セリフ紹介のみ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 32px、基本単位 8px、カード内 14px（375px 幅換算）
• 特長は『番号＋黒帯見出し → 商品写真 → 説明』の順で繰り返す
• 商品写真は画面幅いっぱいに斜めに置く
• 説明カードは左に写真、右に金ラベルと本文の横並び
• 帯見出しの上下に金の唐草ラインを置く
• セクション間はグラデーション地をそのままつなげる

Elevation & Depth

• キャッチ文字に濃いドロップシャドウ
• 商品写真に赤い光彩を足して地から浮かせる
• カードには影をつけず、金の細線だけで区切る

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで配置。人物は角丸の矩形か切り抜き
• セクション境界: 黒帯の上下に金の装飾ラインを入れる。境界は直線
• 額縁は角に唐草装飾のついた金の二重線
• ラベルは金の面で、左右の端を少し切り欠く
• 吹き出しは金か白の角丸で、黒文字にしっぽをつける
• ％バッジは黄色のギザギザの星形

Components

• 番号付き黒帯見出し（numbered-band-heading）: 斜体の数字と、金の唐草ラインに挟まれた黒茶の帯。中に明朝の見出しを置く
• 羊皮紙リード枠（parchment-lead）: 金額縁のベージュ面。大きな赤明朝の一言と、短い導入文を入れる
• 金ラベル（gold-label）: アイコン付きの金色の小見出しタグ
• 暗色説明カード（dark-feature-card）: 金の細線枠の黒茶カード。写真・ラベル・白本文を横に並べる
• 星形数値バッジ（percent-badge）: ギザギザの黄色い星形に、赤明朝の数値を入れる
• セリフ吹き出し（speech-bubble）: 人物写真のまわりに散らす、金・白の角丸吹き出し
• 操作手順の注記（step-callout）: 丸数字と矢印で、商品の操作手順を写真上に示す
• 注釈（note-text）: ※から始まる白の小さな注意書き

Do's and Don'ts

Do - 商品写真をいちばん大きく、斜めに配置する - 特長には必ず番号付きの黒帯見出しをつける - 金の細線額縁で、情報ブロックの格を上げる - 雷や光のエフェクトで、クライマックスを盛り上げる

Don't - 白地や淡色の地を広く使わない - ピル型の丸いボタンなど、ポップな形は入れない - 寒色を基調にしない - 装飾のない平坦な見出しにしない

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: 金から赤のグラデーション地に人物と商品を重ね、ロゴ風タイトルと英字サブタイトルを置く
2. 導入リード（商品の概要を短く伝える）: 羊皮紙の額縁に、赤い一言と導入文を入れる
3. セット内容（同梱物を示す）: 金額縁の中に切り抜き写真を並べ、各アイテムに小さなラベルをつける
4. 特長1 サイズ（大きさを比較で訴求する）: 黒帯見出しの下に2つのサイズを並べ、星形の％バッジを置く
5. 特長2 付属品（限定付属品を説明する）: 暗色カードを縦に2枚並べ、白い斜体のキャッチと場面写真を添える
6. 遊び方（操作の流れを示す）: 商品写真に丸数字・矢印・吹き出しを重ね、横にキャラクターの切り抜きを置く
7. 特長3 音声（収録内容を伝える）: 人物2人を2列で並べ、まわりにセリフの吹き出しを散らす
8. 特長4 合体（別売り品との連動を訴求する）: 手順写真を矢印でつなぎ、合体後の姿を見せる
9. クロージング（余韻と迫力で締める）: 暗い地に雷エフェクト・キャラクター・商品を置き、斜体キャッチと権利表記を入れる

Imagery

• 商品は切り抜きにして、赤い光沢を強調する
• 人物は暗めの背景で撮り、赤いコスチュームを際立たせる
• 古代文様の薄いテクスチャを地に敷く
• クライマックスは赤い雷と放射光で演出する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に幅 750px 前後のカラムを置き、左右はグラデーションの地を伸ばす
• カードの横並びは PC でも維持し、余白だけ広げる
• セリフ紹介は PC でも 2 列のまま

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