DESIGN.md — 紺×蛍光グリーンの熱血アニメコラボ玩具LP（Dark Blue Sports Anime Collab Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、スポーティ、情報量多め・訴求型
• キーワード: 濃紺・蛍光グリーンの発光・パズル片・ドット絵・かすれ極太文字・鎖
• 地の質感: グランジのかすれやノイズ、斜めのブラシストローク、ピッチのライン、鎖の写真を重ねたざらつきのある質感
• 形: 角ばった四角の枠と斜めの帯が基本。角丸はほとんど使わず、パズル片やギザギザの効果線を散らす
• 温度感: 冷たい青を主に、発光グリーンで熱量を足した高コントラスト

Colors

• 地は濃紺→黒→濃紺→明るいグレー→濃紺と交互に切り替え、リズムを付ける
• 蛍光グリーンは発光するもや・ラベル枠・英字サブタイトルに限って使う
• グループの区別には青系の濃淡とマゼンタ1色だけを使う
• 見出しは濃い地なら白、明るい地なら濃紺にし、黒い影やかすれを付ける
• 黄色は効果線や小さい吹き出しの強調だけに使う
• screen-tile は文字 #39E04A × 背景 #2A5D8E のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#25537E、4.56:1）を使う。

Typography

• 見出しは極太の和文ゴシックに、ずらした緑の英字スクリプトを重ねる
• キャッチは明朝の極太で、キーワードだけサイズを上げて緑に光らせる
• 本文は明朝の中央揃えで、白文字を短く改行する
• キャラ名は小さいゴシックを白い札に入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。キャラ一覧は3列のカード内でさらに2列、ゲーム画面は3〜4列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 10px（375px 幅換算）
• 各セクションは中央の見出しから始める
• セクション地は端まで塗り、中身は左右4%の余白に収める
• コメントは左右交互に寄せ、反対側にドット絵キャラを置く
• 場面写真は少し傾けてコラージュ状に重ねる
• 製品は2色を左右に並べ、中央にキャラを重ねる

Elevation & Depth

• 製品画像の背後に蛍光グリーンの発光をぼかして置く
• 場面写真には白枠と薄い影を付ける
• 見出しにかすれと黒いドロップシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り抜いて白枠を付け、少し傾ける。キャラは輪郭で切り抜く
• セクション境界: 直線の切り替えに、グランジのブラシ・パズル片・鎖を境目に重ねる
• 角丸は使わずシャープにする
• ラベルは緑の枠線を付けた四角いタグにする
• 斜めの白い帯を見出しの背景に敷く

Components

• 英字付き極太見出し（section-heading）: 極太の和文見出しの右下に、緑の英字スクリプトでPoint番号を重ねる
• グループ別キャラカード（group-card）: 縦長の色付きカードの上端に緑枠のラベルを付け、ドット絵キャラと名札を2列に並べる
• 緑枠ラベル（label-tag）: 濃い地に蛍光グリーンの枠と文字を入れた四角いタグ
• コメントボックス（comment-box）: 半透明の青い横長の箱に明朝の白文字を入れ、端にドット絵の顔アイコンと名前タグを付ける
• ゲーム画面タイル（screen-tile）: 白枠に入れたドット絵の画面と、その下の緑ラベルのキャプション
• 白帯カテゴリ見出し（band-title）: 画面幅いっぱいの斜めの白帯に濃紺の太字を入れたサブ見出し
• 効果線付き吹き出し（speech-callout）: 写真の間に置く白い吹き出しに太字を入れ、黄色や黒のギザギザの効果線を添える

Do's and Don'ts

Do - 濃紺と黒を主にして、発光は緑1色に絞る - パズル片・鎖・グランジを各セクションに少しずつ散らす - 遊びの内容はドット絵の画面をグリッドに並べて見せる - 見出しには必ず英字のサブタイトルを重ねる - 最後はFVと同じ型のキャッチで締める

Don't - パステル色や丸みの強いかわいい装飾は使わない - 大きな角丸やピル型のボタンを使わない - 緑を本文や広い面に使わない - 余白だらけの静かなミニマル構成にしない - 見出しを細いウェイトにしない

Page Structure

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

1. ファーストビュー（作品の世界観と製品2色を一目で伝える）: かすれた白い極太タイトル、中央にキャラ、左右に緑の発光をまとった製品、下に明朝のキャッチと注釈
2. 製品シリーズ紹介（ベースの製品シリーズを説明する）: 黒〜焦げ茶のグラデ地にカラフルなロゴと、中央揃えの明朝の白文字を3行
3. 特別コメント（原作者のコメントで信頼と特別感を出す）: 濃紺地に見出しを置き、コメントボックス2つを左右交互に並べ、ドット絵の顔を添える
4. 特長1 キャラクター一覧（収録キャラの多さを見せる）: 明るいグレー地に、色違いの縦長カード3列、ドット絵と名札のグリッド
5. 特長2 遊びの内容（お世話・ミニゲームの中身を紹介する）: 濃紺地に白帯のカテゴリ見出しを置き、画面タイルを3〜4列で並べ、キャラの立ち絵を端に配置
6. 特長3 特別演出（期間・日替わりの演出を訴求する）: 明るい地に、傾けた場面写真のコラージュ、中央に製品、吹き出しと効果線
7. 特長4 本体カラー選択（2色の本体を比べて選ばせる）: 濃紺〜青の地に緑の発光、2色の製品を大きく並べ、キーワードを強調したリード
8. 締めのキャッチ・権利表記（購買意欲を高めて終える）: 鎖とパズル片の上に明朝の大きなキャッチを置き、黒い帯に小さな権利表記

Imagery

• 製品は正面から切り抜き、背後に緑の煙状の発光を置く
• キャラはドット絵と、デフォルメした立ち絵を併用する
• 場面写真は白枠付きで傾けて重ねる
• 装飾は青いパズル片・太い鎖・グランジのブラシ・サッカーピッチのライン
• 背景にUIの図形やグラフを薄く透かした電子的なテクスチャを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央を最大幅約750pxにして、左右を濃紺のテクスチャで埋める
• キャラカード3列やタイルグリッドはPCでもそのまま拡大する
• PCではFVの製品とキャラの間隔を広げる
• 注釈文字は最小10pxを確保する

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