DESIGN.md — 巻物見出しと多色ポップの家庭用ゲームLP（Playful Scroll-Banner Game Title LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、和風、親しみ・手作り感
• キーワード: 巻物バナー・和柄の青海波・多色セクション・ストライプ背景・宇宙の星空・横スライダー
• 地の質感: フラットな塗りが基本。星空や斜めストライプ、青海波などの柄の面を混ぜる
• 形: 大きめの角丸カード、ピル型ボタン、筒状の巻物見出し、雲形の曲名バッジ
• 温度感: 暖かく賑やか。生成り地に彩度の高い色をのせる

Colors

• 地は生成りにし、物語は宇宙の紺、遊び方は空色、キャラクターは斜めストライプと、セクションごとに背景をはっきり切り替える
• 巻物見出しはセクションごとに紫・緑・ピンク・青・ティールを使い分ける
• 小見出しのピルとキーワード強調はピンクに統一する
• 紺地では、キーワードを黄緑・ピンク・ティールで部分的に色付けする
• 表は紫の見出しセルとクリームのデータセルの2色で組む
• 購入はピンク、公式SNSは黒ボタンにして、2つの導線を並べる
• scroll-heading は文字 #DBDCE2 × 背景 #7D65A2 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6D578F、4.5:1）を使う。
• button-primary は文字 #FDF8F7 × 背景 #ED4290 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1570、4.52:1）を使う。
• pill-subheading は文字 #FDF8F7 × 背景 #ED4290 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1570、4.52:1）を使う。
• feature-card は文字 #DBDCE2 × 背景 #63C500 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#376E00、4.52:1）を使う。

Typography

• 見出しとリード文は太い丸ゴシックで統一し、遊び心を出す
• 本文は中央揃えにし、短い行で改行してリズムを作る
• 表と注釈だけは細めのゴシックにして読みやすくする
• キーワードは色だけで強調し、下線や太さの変化は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。スライダーは中央に1枚、左右の端に前後の画像を少し見せる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 巻物見出しはセクションの先頭中央に、幅約75%で置く
• セクションの背景は画面幅いっぱいに敷く
• スライダーは左右に矢印を重ね、画面幅いっぱいまではみ出させる
• カードは縦に並べ、カード間は約16px空ける
• 表は横スクロールで全幅に表示する

Elevation & Depth

• 影はほぼ使わず、フラットな面で見せる
• ボタンにだけ下方向の淡い影を付けてよい
• キャラクターの切り抜き画像は、白い縁取りで地から浮かせる

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: スクショは長方形の角なし、またはカード内に小さな角丸で収める。キャラクターは背景を透過して切り抜く
• セクション境界: 直線で背景色を切り替える。遊び方の下端だけ砂色の帯を付ける
• 見出しは両端が円筒になった巻物型にし、端に和柄の帯を入れる
• 小見出しはピンクのピル型にする
• 機能カードは上側の角を大きく丸め、見出し帯を付ける
• 曲名リストは雲形・花形の柄バッジに入れる

Components

• 巻物見出し（scroll-heading）: 両端に黒い軸と青海波の帯を持つ横長の巻物に、白文字の見出しを置く
• 購入ボタン（button-primary）: ピンクのピル型に白文字を置き、アイコン画像を添える
• 公式SNSボタン（button-sns）: 黒の角丸ボタンに白文字。購入ボタンの横に並べる
• ピンクのピル見出し（pill-subheading）: セクション内の小見出し。幅は約70%
• 機能カード（feature-card）: 黄緑の見出し帯にアイコン画像を重ね、深緑の本体にスクショと説明文を入れる
• 画像スライダー（carousel）: 中央に1枚を大きく出し、左右にピンクの矢印を重ねる
• 詳細ボタン（button-secondary）: 濃紺または白の角丸ボタンで、幅は約70%
• 仕様表（spec-table）: 紫の見出しセル（白文字）とクリームのデータセルで組み、細い紫の罫線を引く
• お知らせリスト（news-list）: 日付を紫の小さい文字で、項目を罫線で区切って並べる。左にキャラクターの画像を置く

Do's and Don'ts

Do - セクションの見出しは必ず巻物型にし、色はセクションごとに変える - キャラクターの切り抜き画像を余白に散らし、賑やかさを出す - 背景は紺・空色・ストライプ・生成りとリズムよく切り替える - 説明文は短い行に区切り、中央揃えにする

Don't - 細い明朝体や無彩色だけのミニマルな配色にしない - 濃い影やグラデーションのボタンを使わない - 文字を左揃えで長く詰め込まない - 見出しに巻物とピルを混在させず、階層ごとに使い分ける

Page Structure

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

1. ファーストビュー（作品の世界観と発売状況を伝える）: 全面のキービジュアルにロゴと発売バッジを重ね、下に対応機種のロゴを並べる
2. CTA帯（購入とSNSへ誘導する）: クリーム地に、ピンクの購入ボタンと黒のSNSボタンを2つ並べる
3. お知らせ（更新情報を伝える）: 日付付きのリストを罫線で区切り、紫の線で上下を挟む
4. ムービー（動画で魅力を伝える）: ゲームの場面を背景に巻物見出しを置き、動画を横スライダーで並べる
5. ものがたり（世界観を説明する）: 星空の紺地に、白の中央揃え本文を置き、キーワードを色文字にする。途中にスクショの帯を挟む
6. キャラクター（登場キャラの多さを見せる）: ピンクと水色の斜めストライプの地に、キャラを大量に散らす。新キャラには名前を添える
7. あそびかた（基本操作を一言で伝える）: 空色の地に、大見出しと巻き込まれるモノのイラストを置き、下端に砂色の帯を付ける
8. 特長・新要素（ステージ・アイテム・カスタムなどを紹介する）: ピンクのピル見出しにリード文を添え、スライダーか黄緑の機能カードで縦に並べる
9. 楽曲紹介（収録曲を見せる）: 柄入りの雲形バッジに曲名を入れて縦に散らし、キャラを添える。下に濃紺のボタンを置く
10. 製品一覧（エディションを比較し、購入へ誘導する）: 色違いの角丸カードを横スライダーで並べ、下に白の詳細ボタンを置く
11. スペック・比較表（仕様を伝える）: クリームの仕様枠と、紫×クリームの比較表を置く
12. フッター（権利表記とリンクを載せる）: 緑の帯に白の注記を置き、その下の薄いグレー地にリンクを並べる

Imagery

• ローポリ風で明るい3DCGのキャラやオブジェを、背景透過で切り抜いて使う
• ゲーム画面のスクショは横長16:9で、スライダーに入れる
• 背景には星空、斜めストライプ、青海波などの和柄を使う
• 四角い顔の小さなキャラを、余白のアクセントとして散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、ファーストビューで左下にロゴ・発売バッジ・ボタンを置き、キービジュアルを横長にする
• PCでは機能カードを2カラムにする
• PCでは楽曲バッジを3列と2列に並べる
• PCでは余白にキャラのイラストを多く配置する
• 仕様表は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 行書くと起動時に読み込まれる。