DESIGN.md — 紺の電脳背景×黄色の玩具ボードゲームLP（Cyber Blue Board Game Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 電脳回路・極太フチ文字・玩具パッケージ感・集中線・時代旅行
• 地の質感: 濃紺の地に、細い回路線と光の筋が入ったデジタル背景。黄色エリアは放射状の集中線と横ストライプ。
• 形: 角丸の吹き出しラベル、ギザギザの爆発型吹き出し、斜めに傾けたカード。
• 温度感: 高彩度で熱量が高い。紺の地を黄・橙・ピンクで強く強調する。

Colors

• 上から順に、橙→黄のグラデ価格帯、濃紺の特長エリア、黄色の商品情報エリアの3つに地色を切り替える。
• 紺地の見出しは白文字に濃紺のフチと影を付ける。
• 見出しで一番大事な語だけピンクか黄色に変える。
• 購入ボタンは暖色の地に置く濃紺。PC版では橙のボタンも使う。
• 商品情報の本文は黄色地に黒文字で、読みやすさを優先する。
• price-band は文字 #FFFFFF × 背景 #F28E01 のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AB6401、4.61:1）を使う。
• info-heading は文字 #FFFFFF × 背景 #F39800 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#A66800、4.56:1）を使う。

Typography

• 見出しは極太にして、白か濃紺の太いフチとドロップシャドウを付ける。
• 見出しは少し斜めに傾けて、ゲームらしい勢いを出す。
• 子どもも読むので、難しい漢字にはルビを付ける。
• 数字は語の2倍ほどの大きさにして、単位は小さくする。
• 本文は太字のゴシックで、2〜3行ごとに段落を分ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の 1 カラムで、末尾だけ写真と情報の 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 50px、基本単位 8px、カード内 30px（375px 幅換算）
• ポイントは、番号ラベル→見出し→図版の順に縦に並べる。
• 図版は見出しの左右にずらして置き、ばらけた動きを出す。
• カードは3枚程度を少し傾けて重ねる。
• 価格帯は中央揃えで、価格・発売日・ボタンの3段にする。
• 商品情報は、左右に余白をとった左揃えのテキストブロックにする。

Elevation & Depth

• 見出し文字は濃紺のフチとドロップシャドウで浮かせる。
• カードには薄い影を付けて、少し傾ける。
• セクションの区切りに光の筋（グロー）を横に入れる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品の写真は背景を切り抜いて、地に直接置く。
• セクション境界: 直線で地色を切り替える。紺のエリア内は光のライン、黄色エリアには集中線を入れる。
• 購入ボタンは角丸が小さい長方形にする。
• ステージ名ラベルは、水色フチの白いピル型にする。
• 特に強く訴求したい場所は、ギザギザの黄色い吹き出しにする。
• 拡大表示の案内は、ピンクの角丸帯に虫眼鏡の丸アイコンを付ける。

Components

• 購入ボタン（button-primary）: 暖色の地に置く、濃紺で白文字の角丸長方形のボタン。
• 価格帯（price-band）: 橙から黄へのグラデーションに、白い極太数字で価格と発売日を出す。
• ポイント番号ラベル（point-label）: 時計型のアイコンで挟んだ、斜体・フチ付きの番号見出し。
• 爆発型の吹き出し（burst-bubble）: 黄色のギザギザに黒文字を載せ、引き出し線で図版とつなぐ。
• ステージ名ラベル（stage-tag）: 水色フチの白いピル型に、濃紺の2行の文字を入れる。
• 拡大の案内帯（zoom-hint）: マゼンタの角丸帯の左端に、白い丸の虫眼鏡アイコンを付ける。
• 商品情報見出し（info-heading）: 橙の角丸の地に、白フチの太文字を入れる。

Do's and Don'ts

Do - 見出しは必ず、極太・フチ・影の3点をセットで付ける。 - 紺のエリアには回路線と光の筋を入れる。 - 製品の写真は切り抜いて、大きく見せる。 - 最初と最後に価格と発売日を繰り返して出す。 - 強調色は黄・ピンク・橙の3色だけに絞る。

Don't - 淡いパステルや余白の多い上品な構成にしない。 - 細い明朝体を使わない。 - 紺地に強調色のないフチなし文字を長く並べない。 - 写真を四角い枠に閉じ込めない。

Page Structure

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

1. ファーストビュー（ロゴと製品の世界観を一目で伝える）: 街並みのイラストに製品写真を合成し、ロゴを大きく中央の上に置く。
2. 価格・CTA（価格と発売日を出して購入へ誘導する）: 橙から黄のグラデーションに白い極太数字を置き、その下に濃紺のボタン。
3. 特長1（遊びのコンセプトを示す）: 番号ラベルと2行の白見出しの下に、マス目とカードの図版を散らす。
4. 特長2（新しい仕掛けを訴求する）: 部品の大きな写真に爆発型の吹き出しを添える。
5. 特長3（盤面変化の楽しさを伝える）: ピンクの大きなコピーと盤面写真を組み、ステージ別のカード群をラベル付きで並べる。
6. 全体図（盤面全体を見せる）: ロゴと2行のキャッチの下に盤面の俯瞰図を置き、注記の吹き出しと拡大案内の帯を付ける。
7. 商品パッケージ（実物の内容を見せる）: 黄色の集中線を背景に、箱と付属品の写真を置く。
8. 商品情報（仕様の説明と価格をまとめる）: 横ストライプの黄色地に、橙の見出し、黒の本文、最後に価格と発売日。

Imagery

• 製品とパーツは白背景で撮って切り抜き、少しあおりの角度にする。
• カード類は斜めに重ねて、手に取ったような配置にする。
• 背景は濃紺のグラデーションに、細い水色の回路線と光の帯を入れる。
• 人物は明るいアニメ調のイラストで、喜ぶポーズにする。
• 黄色エリアは中心から放射状に広がる集中線にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央の 1 カラムで、図版は SP と同じ構成で拡大する。
• PC では価格帯を横1行に圧縮し、価格・発売日・ボタンを並べる。
• PC の商品情報は、左にパッケージ写真、右に本文の2カラムにする。
• 拡大の案内文は、SP の「ドラッグ」と 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 行書くと起動時に読み込まれる。