DESIGN.md — 空色×雲と漫画吹き出しのクイズ大会 LP（Sky Blue Manga Quiz Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 空色グラデーション・白い雲・漫画の吹き出し・冒険感・ピンクの CTA・イベント告知
• 地の質感: フラットな青のグラデーションに、白い雲と泡のような半透明の円を重ねる。漫画のコマを薄い青で敷いて紙面っぽさも出す
• 形: 雲形・泡形のもこもこした輪郭、ピル型ボタン、大きな角丸カード、ギザギザの漫画吹き出し
• 温度感: 明るく爽やかで少年漫画らしい高揚感

Colors

• ページ全体は空色から濃い青へのグラデーションを地にして、セクションの境目は白い雲で区切る
• 主 CTA はピンクのグラデーションだけにして、ほかの部品にはピンクを広く使わない
• サブ CTA（練習・模擬など）は水色のグラデーションのボタンにする
• 情報のカードは白地で、文字は濃紺か濃いグレーにして読みやすくする
• 賞品だけは濃紺のパネルに白文字とピンクのラベルを載せて特別感を出す
• 見出しの英字は青か白で塗り、地の色と反対の明るさを選ぶ
• button-primary は文字 #FFFFFF × 背景 #FB5B83 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA063F、4.57:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #67B2D9 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2A7DA8、4.57:1）を使う。
• accordion は文字 #36A0CD × 背景 #EFF7FA のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#26789A、4.57:1）を使う。

Typography

• 英字見出しは極太で、その下に白地か下線付きの日本語の小ラベルを添える
• 本文は太めで中央揃えにして、短い行で改行する
• 感嘆符を重ねて勢いを出す
• 吹き出しのセリフは縦書きの太い書体で、ふりがなを添える
• 詳細の項目は左揃えにして、項目名を太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。日程は 2 列（左が丸バッジ、右が説明）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは中央揃えで、英字見出し、日本語ラベル、本文の順に並べる
• キャラクターのイラストは左右の端に配置して、本文に重ねない
• 日程は丸いバッジを縦線でつないだタイムラインにする
• 詳細はアコーディオンを縦に並べ、カードの間は 12px あける
• セクションの間は雲や島のイラストでつなぐ

Elevation & Depth

• カードとアコーディオンには、ごく薄い青みの影をつける
• 雲と泡は影を使わず、白と半透明だけで重ねる
• 賞品パネルは厚みのある外枠で、筐体のような立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: キャラクターは切り抜いて背景を透過する。人物の写真は角丸の長方形、模擬画面は端末型の角丸フレームに入れる
• セクション境界: もこもこした雲の輪郭と、泡のような曲線で区切る
• ボタンはすべてピル型でグラデーションにする
• 日程のバッジは正円にする
• 吹き出しはギザギザか、角ばった漫画風の形にする
• 情報パネルは泡か雲のような不定形の輪郭にする

Components

• エントリーCTA（button-primary）: ピンクのグラデーションのピル型ボタン。白い太字で、下に締切の注記を添える
• 模擬試験ボタン（button-secondary）: 水色のグラデーションのピル型ボタン
• 英字見出しとラベル（section-title）: 極太の英字の下に、下線付きか白い帯の日本語の小ラベルを置く
• 漫画吹き出し（speech-bubble）: 白地に黒枠のギザギザ吹き出し。中に縦書きのセリフを入れ、キャラの横に置く
• 日程の丸バッジ（timeline-badge）: 濃紺の正円か白抜きの円に日付と曜日を入れ、縦線でつなぐ
• 泡状の情報パネル（bubble-panel）: 半透明の淡い水色で不定形のパネルにし、中に見出しと本文を入れる
• 賞品パネル（prize-panel）: 濃紺のパネルに賞品の写真を並べ、ピンクの番号ラベルと白い太字の名前をつける
• 詳細アコーディオン（accordion）: 白い角丸の帯に青い太字の項目名を置き、右端に丸い＋ボタンをつける
• SNSシェアバー（share-bar）: 白いピル型の帯に、SNS の丸いアイコンを 3 つ並べる

Do's and Don'ts

Do - 青のグラデーションと白い雲を、ページ全体を通して使う - セクションごとに漫画キャラと吹き出しを添えて、語りかける雰囲気にする - 主 CTA はファーストビュー、受験の流れ、練習問題の 3 か所に置く - 見出しは英字と日本語の 2 段にそろえる - 細かい規約はアコーディオンにたたんで、見た目をすっきり保つ

Don't - 黒や灰色の重い地を広く使わない（賞品の濃紺パネルは除く） - ボタンを角ばった四角にしない - ピンクを CTA 以外の大きな面に使わない - 細い明朝体を使って、元気な印象を弱めない - キャラを本文の上に重ねて、読みにくくしない

Page Structure

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

1. ファーストビュー（大会名と参加の入口を見せる）: 空と雲の中にロゴとキャラを配置し、水色とピンクのボタンを 2 つ横に並べる
2. 概要（大会の趣旨と、今年の変更点を伝える）: 英字見出しの下に青い大見出しを置き、中央揃えの本文の周りにキャラを散らす
3. 受験の流れ（エントリーから決勝までの日程を示す）: 漫画のコマを敷いた白いパネルにキャラ、吹き出し、CTA、タイムラインを入れる
4. 試験概要（問題数・ジャンル・形式・範囲を説明する）: 濃い青の地に泡状のパネルを並べ、模擬画面や書影を添える
5. 賞品（豪華な賞品で参加意欲を高める）: グレーの筐体のような枠の中に濃紺のパネルを置き、番号付きの賞品をスライドで見せる
6. 練習問題・CTA（練習を促し、エントリーへ誘導する）: 大きな白い雲の中にピンクの CTA、模擬試験ボタン、過去回のバナーを置く
7. 詳細（規約や注意事項をまとめる）: 空色の地に白いアコーディオンを縦に並べ、最初の 1 つだけ開いておく
8. シェア・フッター（拡散してもらい、関連先へ案内する）: キャラと吹き出しの下にシェアバーを置き、ヤシの木と海のイラストの上に関連バナーを並べる

Imagery

• キャラはフルカラーの切り抜きで、躍動感のあるポーズにする
• 背景には漫画のコマを、青か淡色の単色で薄く敷く
• 雲は白く、輪郭のはっきりしたアニメ調に描く
• 南国の島・ヤシの木・海を、フラットなイラストで描く
• 泡や水玉の半透明の円を散らして、海中のような雰囲気を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は PC 版でも中央が狭い 1 カラムで、SP でもほぼそのまま使える
• SP ではキャラを小さくして、見出しの左右に配置する
• ファーストビューの 2 つのボタンは、SP では縦に並べてもよい
• 賞品は SP では 1 枚ずつのスライドにする
• アコーディオンの幅は画面の 92% にする

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