DESIGN.md — 紫×オレンジ対比の特撮玩具 LP（Tokusatsu Hero Toy Impact LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 左右対比・切り抜き合成・番号帯・吹き出し・縁取り文字・グラデーション
• 地の質感: 紫やオレンジのグラデーション地に、薄い線画の模様を重ねる。立体的な装飾文字と光沢のある商品写真を組み合わせる。
• 形: 斜めや台形の帯、角丸の吹き出し、太い縁取りの見出し文字。
• 温度感: 暖色（オレンジ・赤）と寒色（紫・紺）の対比で温度差をはっきり出す。

Colors

• 左半分はオレンジ系、右半分は紫系にして、2 人のキャラクターを色で分ける
• 番号付きの機能説明は紫の帯に白い太字で書く
• 商品は赤が主役。背景に赤を広く使わない
• ロゴや決め文字は黄色と赤に黒い縁取りを付けて目立たせる
• セリフの吹き出しは、話し手の側の色（クリーム・マゼンタ・白）に合わせる
• summary-frame は文字 #BA4D81 × 背景 #FFE4FF のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AF4477、4.54:1）を使う。

Typography

• 見出しはすべて極太にし、白か黒の太い縁取りを付ける
• 難しい漢字や固有名詞にはルビを振る（子ども向け）
• キャッチは縦書きにして左右の端に配置する
• 番号は斜体の大きな数字にして、紫のグラデーションと白縁を付ける
• 本文の長文は使わない。1 文か 2 文で言い切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。絵の中は左右 2 分割の構図
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション間に余白を入れず、絵を縦につなげる
• 商品は中央に置き、左右にキャラクターを配置する
• 番号帯は画面幅いっぱいに横断させ、区切りにする
• 吹き出しはキャラクターの頭や肩の近くに重ねる

Elevation & Depth

• 商品の切り抜きにドロップシャドウを付けて浮かせる
• 見出し文字は縁取りと影の多重レイヤーで立体的にする
• 帯は光沢のあるグラデーションで質感を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物も商品も背景を抜いた切り抜きにし、帯や枠をはみ出させて重ねる
• セクション境界: 斜めの帯や台形の帯で区切る
• 吹き出しは角丸の四角にし、話し手に向けたしっぽを付ける
• 帯は端を斜めにカットする
• 囲み枠は二重線や光る縁で装飾する

Components

• 番号付き機能帯（number-band）: 紫グラデーションの横帯。左に大きな斜体数字、右に白い太字で 2 行の説明を置く
• クリームの吹き出し（speech-bubble-light）: 暖色側キャラクターのセリフ。黒の太い縁取りと黒文字
• マゼンタの吹き出し（speech-bubble-magenta）: 寒色側キャラクターのセリフ。白縁、地はマゼンタまたは白
• 商品ロゴ見出し（hero-logo）: 黄と赤の極太文字に黒縁を付け、下に英字ロゴとサブタイトルを添える
• 強調バナー（highlight-banner）: 光る縁取りの紺地のバナー。白文字で特別な機能を告知する
• まとめ枠（summary-frame）: マゼンタの縁の薄ピンク枠。手書き風の太字で締めの訴求をする
• ギミックバッジ（badge-sound）: ロゴの横に置く小さな吹き出し型バッジ。機能を短く示す
• 注釈（caption-note）: 右寄せの小さな注釈文

Do's and Don'ts

Do - 左右の色を対比させ、キャラクターと商品を大きく切り抜いて合成する - 機能説明は番号帯で 1 つずつ順に見せる - セリフの吹き出しで、遊んでいる場面が想像できるようにする - 子ども向けにルビを振る - 文字は縁取りを付けて、写真の上でも読めるようにする

Don't - 白地の多いシンプルな作りにしない - 細い文字や明朝体を使わない - 長い説明文を並べない - 商品を小さく扱わない - パステル一色の弱い配色にしない

Page Structure

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

1. ファーストビュー（商品と登場キャラクターを一目で伝える）: 左はオレンジ、右は紫の地。人物 2 体と大きな商品を合成し、縦書きのキャッチを左右の端に置く
2. 商品ロゴ（商品名と版の名前を示す）: 濃紺の帯に極太の装飾ロゴを置き、英字表記とサブタイトルを添える
3. 特長 1（主な遊び方を説明する）: 番号帯に続けて、左右のキャラクターと商品、各キャラクターの吹き出しを 2 つずつ置く
4. 特長 2（別売アイテムとの連動を示す）: 番号帯に続けて、複数の人物と吹き出しを並べ、強調バナーで締める
5. 特長 3（付属品の特別な機能を示す）: 番号帯と注釈を置き、下で付属品と商品の組み合わせ写真を見せる
6. セリフ紹介（収録されたメッセージの中身を体験させる）: キャラクターの切り抜きに、マゼンタの吹き出しを縦に 4 つ連ねる
7. まとめ・権利表記（訴求の締めと著作権の表記）: ピンクの枠に手書き風の太字で書き、最下部に小さな権利表記を置く

Imagery

• 人物はスタジオで撮影し、背景を抜いて上半身で使う
• 商品は正面からやや斜めのアングルで撮り、光沢を強調して切り抜く
• 背景は紫・オレンジのグラデーションに、薄い線画（食べ物や紋様）を重ねる
• 色分けしたキャラクターや怪人を大胆に画面の端で切る
• 光線やキラキラのエフェクトを控えめに足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では SP の縦長の絵を中央に幅 480〜750px で置き、左右は暗い紫の地で埋める
• PC で左右の分割構図を横に広げる場合は、キャラクターを左右の端、商品を中央に固定する
• 番号帯は PC でも 1 行の横帯のままにし、文字サイズを 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 行書くと起動時に読み込まれる。