DESIGN.md — 黒×深紅の筆文字が熱いホビーフィギュアLP（Black and Crimson Brush Impact Figure LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、和風、情報量多め・訴求型
• キーワード: 漆黒・深紅・筆文字・金属光沢・光の円・劇画調
• 地の質感: 黒地に金の火の粉や薄いグロー。赤パネルは墨のかすれ模様と大きな薄い漢字の透かし。
• 形: 角を斜めに切った黒帯ラベルと細い金の枠線。リンクバッジだけ角丸。
• 温度感: 熱い。赤・橙・金の暖色が黒い地の上で燃えているように見せる。

Colors

• 地は黒で統一し、セクションごとに深紅・金茶・緑のパネルを内側に敷く。
• 叫びの言葉はすべて赤の筆文字にし、黒地の上で発光させる。
• 見出しは暗灰色の帯に白文字で、深紅パネルの左上に重ねる。
• 青×赤のバッジはリンク誘導だけに使い、他の用途には使わない。
• 金の細線でパネルを縁取り、高級感を出す。

Typography

• 叫びの筆文字は写真にかぶせ、傾けたり縦に組んだりする。
• 筆文字には黒か赤の外側グローをつけて、背景から浮かせる。
• 技の名前には薄い大きな漢字を透かしで敷き、ふりがなを添える。
• 本文は12px前後で短く、半透明の暗いボックスに入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は2列のグリッドと、全幅の重ね配置を混ぜる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 10px（375px 幅換算）
• パネルは左右に約4%の黒い余白を残して置く。
• 写真とテキストを左右に分け、互い違いに配置する。
• 変形パターンは『本体写真＋光の円＋丸い指示線＋部品写真』を縦に繰り返す。
• 詳細写真は黒い枠の2列グリッドにし、下にキャプションを入れる。

Elevation & Depth

• 影は使わず、白・黄・赤の放射グローで手前感を出す。
• パネルには内側の暗いビネットで奥行きをつける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜きのフィギュアをはみ出させて配置。詳細写真は黒地の四角に入れる
• セクション境界: 直線。金の細線か斜めカットのラベルで区切る
• 見出しラベルの右端は斜めにカットする。
• リンクバッジだけ角丸12pxにして青い縁で囲む。
• 指示線は細い線の先に丸い輪をつける。

Components

• 斜めカット見出し帯（label-section）: 暗灰色の帯に白い太字。右端を斜めに切り、パネルの左上に重ねる
• 外部ストーリー誘導バッジ（badge-link）: 青い角丸の枠に白い明朝の見出しを入れ、中に白地の作品名と赤い帯ボタンを重ねる
• 筆文字の叫び（brush-shout）: 赤い筆文字を写真の上に大きく重ね、グローをつける
• 深紅の訴求パネル（panel-crimson）: 墨のかすれ模様が入った深紅の面。金の細い縁をつける
• 光の円＋指示線（glow-pointer）: 本体の背後に色付きの光の円を置き、丸い輪の付いた指示線で部品写真を指す
• 半透明の説明ボックス（caption-box）: 暗い半透明の四角に白い本文を入れ、写真の上に置く
• スタッフクレジット表（staff-table）: 暗い帯に役職ラベルと名前を並べた小さな表
• セリフ引用（quote-line）: 話者の名前を小さく書き、白い明朝のセリフをかぎ括弧で大きく見せる

Do's and Don'ts

Do - 写真は大きく、画面からはみ出すように見せる。 - 叫びの言葉は赤い筆文字で、斜めや縦に組んで勢いを出す。 - セクションごとにパネルの色（深紅・金茶・緑）を変えてテーマを分ける。 - 金の細線と火の粉で高級感と熱さを足す。 - 商品名ロゴは白で黒地の中央に置く。

Don't - 白や淡い色の明るい地を広く使わない。 - 丸ゴシックやパステル色でかわいく見せない。 - ボタンをピル型のフラットなものにしない。 - 筆文字を整った横組みだけにしない。 - 余白を取りすぎて静かな印象にしない。

Page Structure

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

1. ファーストビュー（商品の迫力と作品の熱さを一目で伝える）: 暖色の空に2体の立体写真を重ね、左右に赤い筆文字の縦書きの叫びを置く。左下にリンクバッジ
2. 商品ロゴ・クレジット（シリーズ名と監修者を示して信頼を得る）: 白いブランドロゴと商品名の明朝、その下に暗い帯のスタッフ表
3. ブランド紹介（シリーズのこだわりを説明する）: 黒地に斜めカットの見出し帯、写真2点と右寄せの白い本文
4. 新型機体の紹介（新しい仕様を伝える）: 深紅パネルに本体写真と半透明の説明ボックス、リンクバッジを置く
5. 変形・ギミックの解説（パーツの変形パターンを見せる）: 光の円の上の本体と、指示線で結んだ部品写真を縦に4〜5回繰り返す。薄い漢字の透かしを入れる
6. セリフ引用（作品の世界観を盛り上げる）: 白い明朝のセリフを大きく見せ、下にリンクバッジ
7. 既存機体の紹介（もう1体の詳細と可動性を見せる）: 金茶のパネルに大きな写真と詳細写真の2列グリッド。必殺技の部分だけ緑のグローにする
8. ディテール訴求（特徴的なパーツを強調する）: 黒地に炎の輪と赤い筆文字の叫び。小さな写真と説明文を添える
9. ビジュアルの締め（感情を最高潮に高める）: 2体の写真に赤い筆文字の叫びを何行も重ね、火の粉を散らす。中央に白いロゴ
10. 付属品一覧（セット内容を示す）: 金の細い枠の中に、グレーのグラデーションの上に並べた付属品写真
11. フッター（作品ロゴと権利表記を載せる）: 黒地の中央に作品ロゴ、小さな著作権表記と注記

Imagery

• 金属光沢のある立体物を切り抜き、斜めの躍動的なポーズで見せる。
• 背後に光の円や炎の輪のグラフィックを重ねる。
• 赤い筆文字の書き殴り、火の粉、墨のかすれを装飾に使う。
• アニメ風の大きな漢字を薄い透かしで背景に敷く。
• 詳細写真は黒い背景のスタジオ撮影で、部品に寄る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため推奨：PCでは中央に幅約750pxの列を置き、外側は黒い地にする。
• PCでは写真と説明を左右2カラムに広げる。
• 筆文字の叫びは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 行書くと起動時に読み込まれる。