DESIGN.md — 蛍光黄×赤のマンガ調ゲームアプリ LP（Pop Yellow Comic Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 蛍光イエロー・赤の斜めラベル・極太手書き見出し・デフォルメキャラ・マンガの効果文字・スマホ写真
• 地の質感: フラットなベタ塗り。影はほぼなく、斜めに切ったラベルや手描き風の筆致で勢いを出す
• 形: 平行四辺形や斜めに傾いたラベル、ギザギザの丸バッジ、矢印形ボタン、円形に回る文字バッジ
• 温度感: 高温・にぎやか。明るい黄色と赤で元気な印象

Colors

• 地色は蛍光イエローと白・薄グレーを交互に切り替える
• 強調はすべて赤のベタ。黄色地の本文中のキーワードを赤ラベル白抜きで目立たせる
• 写真の上の見出しラベルは赤地白文字と黄地黒文字を交互に使う
• 青は告知帯だけに使い、多用しない
• 本文は黒〜濃グレーで白か薄グレーの上に置く
• FAQ の質問帯は赤ベタに白文字にする

Typography

• 見出しは手書き風の極太書体にし、字間をやや広めにとる
• 本文は普通のゴシックで、行間を 2.0 前後と広めにとる
• キーワードは赤ラベル白抜きにし、文中で文字サイズを大きくする
• CTA の主要語は大きく、助詞は小さくしてメリハリを出す
• POINT 番号は欧文のコミック書体を斜体にし、黄色の筆跡の上にのせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 24px
• 写真は全幅に近い横長にし、見出しラベルを上端にはみ出させて重ねる
• セクション見出しは中央揃えで大きく、上に円形の文字バッジを置く
• 黄色セクションには角丸パネルを片側だけはみ出させる配置も使う
• CTA は主要セクションの終わりごとに置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• CTA ボタンの下だけに濃い赤の厚みを出す影をつける
• グレーから黄へ切り替わる境目に薄いぼかし影をつけてもよい

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。キャラは円形の回転文字バッジに収める
• セクション境界: 直線で色を切り替える。角丸パネルを画面端からはみ出させる
• ラベルは平行四辺形や不規則な四角形で少し傾ける
• サブボタンは右端が矢印に尖った白地に赤枠
• バッジは赤のギザギザ円にする
• FAQ はキャラの吹き出しの尻尾を左につける

Components

• 矢印付き主CTA（button-primary）: 左に白地と赤い矢印アイコン、右は赤地に白い太字。下に濃い赤の厚み
• 矢印形サブボタン（button-arrow-outline）: 白地に赤枠。右端が尖った矢印形で、下に赤の厚みをつける
• 斜めラベル見出し（label-slant）: 傾けた不規則な四角に手書き見出しを置く。赤地白字と黄地黒字を交互に
• キーワード赤ラベル（keyword-highlight）: 文中の語を赤の矩形で白抜きにする
• POINT見出し（point-heading）: 黄色の筆跡の上に斜体の番号、右に小見出し、下に黄色の線
• 円形回転文字バッジ（badge-circle-text）: キャラの顔を英字が円周に沿って囲む。セクション境界に重ねる
• ギザギザ訴求バッジ（badge-burst）: 赤いギザギザ円に白文字で特典を2点並べる
• キャラ吹き出しFAQ（faq-bubble）: 左にキャラアイコン、右に赤い吹き出し帯と白い＋アイコン
• 告知帯（notice-bar）: 全幅の青帯に白い太字を中央揃えで置く

Do's and Don'ts

Do - 黄色地にキャラやアイテムのイラストを散らしてにぎやかにする - 見出しは手書き風の極太書体で大きく置く - 写真の上端に斜めラベル見出しを重ねる - 主CTAはセクションの区切りごとに同じデザインで繰り返す - 強調は赤ベタの白抜きに統一する

Don't - 淡いパステルや落ち着いた色を地色に使わない - 本文まで手書き書体にしない - 大きな角丸や影の強いカードにしない - 強調色を赤以外に増やさない - キャラを使わずに写真だけで構成しない

Page Structure

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

1. ファーストビュー（楽しさと手軽さを一目で伝え、無料プレイへ誘導する）: 黄地にキャラとアイテムを散らす。中央に極太の見出し3行、マンガの効果文字、赤のギザギザバッジ、矢印CTA、注釈
2. 告知帯（登録特典を知らせる）: 全幅の青帯に白い太字1行
3. 特長ポイント（魅力を3点にまとめて示す）: 薄グレー地。黄色ラベルの大見出しの下に、POINT番号・小見出し・2行の説明を3つ並べ、矢印形サブボタンで締める
4. サービス紹介（仕組みを感覚的に伝える）: 黄地に手書き風の文章を大きく置き、キーワードを赤ラベルにする。小さなイラストを添え、動画埋め込みと枠付きボタンを続ける
5. 遊び方の手順（プレイの流れを段階的に説明する）: 白地。スマホを持つ写真の上に斜めラベル見出しを重ね、下に本文を置く。これを4〜5回繰り返す
6. お客様の声（SNSの投稿で信頼感を出す）: 黄地に円形バッジと大見出し。白いパネルに投稿カードをスクロール表示し、下に主CTA
7. デモ画面（実際の画面を見せる）: スマホのモックの横に縦書きの大見出し。黄と白の境界にまたがせる
8. メディア掲載（第三者からの評判を示す）: 右端まで伸びる黄色の角丸パネルに見出しと動画サムネイルの横スライダーを置く
9. ニュース（お知らせを掲載する）: 白地。見出しの右に矢印ボタン。日付と1行タイトルを区切り線でリストにする
10. よくある質問（不安を解消する）: 黄地。キャラアイコンと赤い吹き出し帯のアコーディオンを5つ並べる
11. 最終CTA（プレイ開始を後押しする）: 黄地の中央に主CTAと注釈2行

Imagery

• デフォルメした2.5頭身のキャラを太い輪郭線とセル塗りで描く
• コイン・トロフィー・ボール・プレゼントなどのアイテムを周囲に散らす
• マンガの効果文字は白地のギザギザ枠に赤い太字で、斜めに置く
• 写真は明るい屋内外でスマホを持つ手元を撮り、画面を見せる
• キャラの顔を円形に切り抜き、周りを英字の回転テキストで囲む
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部右に赤背景のグローバルナビを固定する
• PC のファーストビューは横長にし、キャラを左右に広げて見出しを中央に置く
• PC の特長セクションは左に見出しとキャラ、右にポイント一覧の2カラムにする
• PC の手順セクションは写真と本文を左右交互に配置する
• PC の声セクションは投稿カードを3列のメイソンリーにする
• FAQ の帯は PC では横長の1行にする

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