DESIGN.md — 橙×黒の特撮変身玩具 商品紹介LP（Tokusatsu Toy Product Hero Orange Black LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、ポップ・元気、情報量多め・訴求型
• キーワード: 特撮ヒーロー・変身ベルト・斜体極太・オレンジ枠・黒グリッド・ルビ付き
• 地の質感: 黒地に細いグリッド線と斜めの光の筋を入れたメカっぽい質感。明るい部分は淡いグレーに斜めのストライプを入れる
• 形: 角丸なしの四角いパネル、斜めにカットした帯、矢印（シェブロン）の装飾
• 温度感: オレンジと黒による熱い印象に、シアンで冷たさを足している

Colors

• 地は淡いグレー。商品パネルは黒グリッドの面をオレンジの太枠で囲む
• 見出しのキーワードはオレンジのグラデ文字に黒の縁取りをつける
• 番号付きの特長見出しは黒い帯にし、斜めに切った端をオレンジにする
• シアンはキャラクター色。吹き出しやアクセントの面だけに使う
• 注釈は小さい黒か白の文字にし、色はつけない

Typography

• 見出しはすべて極太にし、斜体ぎみにして勢いを出す
• 漢字には小さなルビを振り、子ども向けにする
• 大見出しには黒か白の太い縁取りとオレンジのグラデを重ねる
• 本文の長い文章は置かない。短いコピーだけで構成する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品の詳細は 2 カラムの分割パネルにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションごとにオレンジ枠の大きなパネルを置く
• 番号帯の見出しはパネルの直前に横幅いっぱいで置く
• 商品写真はパネルの中で中央に大きく配置する
• 詳細パネルは正面・側面・背面・セット内容のグリッドに分ける

Elevation & Depth

• 影はほぼ使わない。太枠と縁取りで立体感を出す
• キャラクターの写真はパネルの枠からはみ出させて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景を抜いた切り抜き写真。キャラクターは枠からはみ出させる
• セクション境界: 直線で区切る。パネルの角は斜めにカットした形にする
• 角丸は使わない
• 帯の端は斜めにカットしてシェブロンにする
• 矢印の装飾で動きを示す

Components

• オレンジ枠パネル（panel-frame）: 黒グリッドの地を太いオレンジ枠で囲んだ大きな展示パネル
• 番号付き特長帯（numbered-band）: 斜体の大きな数字に、黒地の白文字の見出し帯をつなげる。端はオレンジのシェブロン
• 斜めカットの吹き出し（speech-callout）: 白またはシアン地に、オレンジと黒の文字を載せた角張った吹き出し
• 写真ラベルのタブ（label-tab）: グリッドの各写真の左上に置く「正面」などの小さな黒いタブ
• 詳細写真グリッド（detail-grid）: 白枠で区切った 2 カラムのグリッド。角度別の写真と付属品を見せる
• 拡大部分のキャプション（zoom-caption）: 拡大写真の下に置く赤い帯の白文字ラベル
• ロゴ風の商品名（logo-title）: 縁取りしたオレンジのグラデ文字に、英字のサブタイトルを添える

Do's and Don'ts

Do - 商品写真はできるだけ大きく、切り抜きで見せる - オレンジ×黒を軸にし、シアンは差し色にとどめる - 見出しは極太の斜体にし、縁取りをつける - 漢字にルビを振る - 注釈は商品写真のすぐ下に小さく書く

Don't - 角丸やパステル調の柔らかい部品は使わない - 長い説明文を並べない - 細い明朝体を使わない - 白地だけで平坦に作らない（グリッドやストライプの質感を入れる）

Page Structure

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

1. ファーストビュー（商品の登場を告知し、装着後の姿を見せる）: 淡いストライプの地に、キャラクターと商品の切り抜きを置く。矢印で装着を示し、下にロゴ風の商品名と注釈を置く
2. 商品の概要（何ができる商品かを伝える）: オレンジ枠の黒パネルに、吹き出しのコピーと商品写真、はみ出したキャラクターを組み合わせる
3. 特長1（仕様のアップグレード点を示す）: 番号帯の見出しのあと、パネル内にラベル付きの写真グリッドを置く
4. 特長2（サイズの調整機能を示す）: 番号帯の見出しのあと、全体写真と、赤いキャプション付きの拡大写真を置く
5. フッター（権利表記）: グレー地の中央に小さなコピーライトを置く

Imagery

• 商品は白背景で撮った切り抜きにし、光沢や透明パーツの発色を強調する
• キャラクターはポーズをつけた全身か半身の切り抜きにし、枠からはみ出させる
• 背景には黒地のグリッドや斜めの光の筋を入れ、メカっぽさを出す
• 動きを示すために、曲がった大きな矢印やシェブロンを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央 750px 前後の 1 カラムを保ち、左右はグレー地にする
• 詳細グリッドは PC で 3〜4 カラムに広げてもよい
• 見出し帯は PC でも横幅いっぱいにし、斜体を保つ

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