DESIGN.md — 黒×電光ブルーのメカ系ホビー玩具 LP（Dark Tech Blue Collector Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: 漆黒・電光ブルー・メタリック・HUD風帯見出し・番号付き機能解説・台詞吹き出し
• 地の質感: 黒地に青い光のボケや粒子をうっすら散らす。製品は金属光沢の切り抜き写真。
• 形: 斜めカットの台形帯、シェブロン、矢印型の三角。角丸はほぼ使わない直線的な形。
• 温度感: 冷たい青寄り。黄色と赤は注記とアクセントだけに使う。

Colors

• 地は黒か濃紺だけにして、白い面はほとんど使わない。
• セクション見出しは電光ブルーの帯にし、発光するようなグラデーションをかける。
• 補足情報だけは明るいグレーのパネルに濃い文字で入れる。
• 黄色は注記ラベルと告知帯に、赤は台詞吹き出しと重要部位の指示だけに使う。
• 本文は黒地の上に白で中央揃えにする。

Typography

• 本文と見出しは明朝系にして、特撮作品らしい重い雰囲気を出す。
• 番号は太い斜体の欧文サンセリフを青で入れる。
• 本文は中央揃えにし、1行15〜25字で改行する。
• 大見出しには青い外側の光彩をつける。
• ラベルと注記は小さいゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 機能ごとに「帯見出し → 本文 → 製品写真 → 吹き出しや注記」の順で繰り返す。
• 製品写真は横幅いっぱいか、青線で囲んだ枠に入れる。
• 情報パネルは幅 85% で中央に置く。
• 人物写真は縦長で 2 列にし、下に名前を 2 行で入れる。
• 章の切り替えは下向きの三角を重ねて縦に流れを示す。

Elevation & Depth

• 影ではなく、青い光彩とグローで奥行きを出す。
• 製品の切り抜き写真には床への映り込みや暗い反射を入れる。
• パネルはフラットにし、影はつけない。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は背景を切り抜き、人物は縦長の長方形、使用シーンは青線の枠で囲む
• セクション境界: 両端を斜めにカットした青い台形の帯と、シェブロン模様
• 角丸は使わず直線と斜めカットで作る。
• 吹き出しは平行四辺形で、尾を鋭くとがらせる。
• 告知帯は左右を矢羽根型のシェブロンにする。
• 指示線は細い白線と矢印にする。

Components

• 番号付き帯見出し（section-band）: 横幅いっぱいの電光ブルー帯。中央に台形の濃紺面を置き、斜体の番号と明朝の見出しを入れる。
• 台詞吹き出し（speech-callout）: 白、赤、紺のいずれかの斜め吹き出し。音声の台詞を斜めに配置する。
• 部位ラベル（label-tag）: 製品の各部を指す黄色の小さいラベル。細い白線でつなぐ。
• 収録リストパネル（info-panel）: 紺から黄緑へのグラデーション見出しの下に、グレーの面で番号付きの 2 列リストを置く。
• 告知シェブロン帯（notice-chevron）: 黄色の帯の左右に矢羽根を重ね、今後の情報公開を告知する。
• 関連商品バナー（related-banner）: 赤い細枠の横長バナー。製品写真とロゴを並べ、右下に赤い矢印付きのリンクを置く。
• 人物カード（cast-card）: 縦長の写真の下に、役名と演者名を白い明朝で中央揃えにする。
• 章タイトル（chapter-title）: 青い台形帯の上に、光彩付きの大きな白い明朝を重ねる。下に三角の矢印を続ける。

Do's and Don'ts

Do - 黒地に青い光の演出を必ず入れる。 - 機能を番号付きの帯見出しで一つずつ区切る。 - 台詞や音声は吹き出しにして、製品写真に重ねる。 - 製品の各部は黄色ラベルと指示線で示す。 - リスト情報は明るいグレーのパネルにまとめる。

Don't - 白やパステルの広い背景を使わない。 - 丸いピル型のボタンややわらかい角丸を使わない。 - 丸ゴシックや手書き系の書体を使わない。 - 黄色や赤を見出し帯に使わない。 - 本文を左揃えで長く詰め込まない。

Page Structure

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

1. ファーストビュー（作品の世界観とキャラクターで一気に引き込む）: 黒地にキャラクターの集合写真と青い光線を入れ、下に商品ロゴと作品ロゴを並べる。
2. キャッチコピー（商品の意義を一言で示す）: 青く光る斜体の明朝 2 行を中央に置く。
3. セット内容（同梱物と製品の全体像を見せる）: 欧文の商品名、右に同梱リスト、製品の切り抜き写真、半透明の帯に入れた説明。
4. 関連商品バナー（単品販売への導線）: 赤枠の横長バナーに製品写真とリンク。
5. 機能紹介（1つ目の製品）（ギミックを番号順に解説する）: 章タイトル、製品の大写真、番号帯見出し、本文、操作写真、吹き出し、の順で繰り返す。
6. 収録キャラクターと BGM（収録内容の豊富さを示す）: グラデーション見出しの下に人物カードを 2 列、続けてグレーのリストパネル。
7. 今後の告知（続報への期待をつくる）: 黄色のシェブロン帯に 2 行のテキスト。
8. 換装の説明（パーツを差し替えて遊べることを示す）: 2 つの製品を赤い両矢印で結び、章タイトルと下向きの三角を重ねる。
9. 機能紹介（2つ目の製品）（もう一方のギミックを解説する）: 部位ラベル付きの製品写真、側面のアップ、番号帯見出し、人物グリッド、リスト、を同じ型で並べる。
10. 使用シーン（劇中の名場面を再現できることを伝える）: 青線で囲んだ再現写真と白い本文。
11. 作品告知（公開予定の作品を宣伝する）: 縦長のポスター画像と、公開日を大きな白い明朝で中央に入れる。

Imagery

• 製品は黒背景のスタジオ撮影で切り抜き、金属光沢と LED の発光を強調する。
• 背景には青い光の粒子やボケをうっすら散らす。
• 手で操作する写真は寄りで撮り、黄色の矢印で動作を示す。
• 人物写真は劇中衣装で、暗めのトーンのバストアップにする。
• メインビジュアルは青いライトと逆光で、ヒーローたちの集合構図にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の固定幅の列を置き、左右は黒い地で埋める。
• 帯見出しは画面幅いっぱいに伸ばし、中央の台形は固定幅にする。
• 人物グリッドは PC では 3〜4 列に増やす。
• 本文は PC でも中央揃えのままで、最大幅 640px 程度に抑える。

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