DESIGN.md — 水色×泡と紺キャラの遊べる啓発キャンペーンLP（Aqua Bubble Playful Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型
• キーワード: 水色の地・白い泡・波線の下線・紺のキャラ・データ図表・ターコイズ
• 地の質感: フラットな単色の面。白い円の泡と波形の区切りで水っぽさを出す
• 形: ピル型ボタン、角のない白カード、円グラフ、吹き出し楕円
• 温度感: 涼しく清潔。キャラクターの表情で親しみを足す

Colors

• 地は全編水色。情報カードと導入・団体紹介だけ白にする
• 主ボタンと図表タイトル帯はターコイズ1色に統一
• 紺はキャラクターと尾びれ装飾のみ。文字には使わない
• グラフはターコイズ主、明るい青・紫・黄緑を補助、残りはグレー
• 白い円の泡を水色地の余白に散らす
• 強い赤は動画再生アイコン以外で使わない
• button-primary は文字 #FFFFFF × 背景 #36B9CB のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#25818D、4.56:1）を使う。

Typography

• 見出しは中央揃えで、下に白い波線を敷く
• 導入文は字間を広くし、行間2.3でゆったり見せる
• 数値は大きく太く、%は小さく添える
• 英字見出しは太いジオメトリック系で2段組
• 注釈は小さく左揃え、調査期間を併記
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。データとプロフィールは PC で 2〜3 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 動画は横幅いっぱいに近く、縦動画は幅60%で中央
• 図表カードは幅約70〜90%の白地
• 見出し→説明2行→結論リード→図表の順で反復
• 知識パートは白帯の小見出しと水色帯の写真を交互に
• 泡とキャラは左右の端にはみ出させて置く

Elevation & Depth

• 影はほぼなし。白い面と水色地の差で立体感を出す
• 再生アイコンだけ小さな影
• 図表カードは枠線なしのフラット

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角。イラストは円形で切り抜く
• セクション境界: FV下の導入だけ白→水色を波形で区切る。ほかは平らに切り替え
• ボタンは完全なピル型で右端に＋か＞
• カード・動画枠は角丸なし
• 紹介見出しは吹き出しの白い楕円
• 泡は大小3つ組の白い円

Components

• ピル型主ボタン（button-primary）: ターコイズの塗り、白文字を中央に置き、右端に＞か＋
• 波線見出し（heading-wave）: 太字見出しの下に白い波線を敷く
• 吹き出しタイトル（speech-bubble-title）: 白い楕円の吹き出しにロゴ風の見出しを入れる
• 調査図表カード（data-card）: 上にターコイズのタイトル帯、白地に円グラフや棒グラフ、下に注釈
• 研究結果カード（result-card）: ターコイズの見出し帯、白地に要約2行とピルボタン
• メンバー紹介カード（profile-card）: 縦長の写真の下に白地で役職・名前・経歴・説明
• 歌詞フェードボックス（lyrics-fade）: 白い箱の下を水色へグラデで消し、続きは展開ボタンで見せる
• 紺キャラ装飾（mascot-deco）: 紺の魚キャラと尾びれを画面端に半分はみ出させて置く
• 知識の白帯小見出し（tip-band）: 全幅の白帯に太字を中央に置き、下に水色地の写真と説明

Do's and Don'ts

Do - 水色地と白カードの2層だけで画面を組む - セクション見出しには必ず波線を添える - 数字は太く大きく見せ、図表の前に結論を3行で書く - 泡とキャラで余白に遊びを入れる - ボタンは全部ターコイズのピル型にそろえる

Don't - 暗い背景や強いグラデーションを使わない - 紺を見出しやボタンに使わない - カードに濃い影や太い枠をつけない - 赤やオレンジを強調色にしない - 図表に多くの色を混ぜない

Page Structure

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

1. ファーストビュー（キャンペーンの世界観を一目で見せる）: 白い空間の集合写真を全面に置き、上部に白抜きの太いロゴ見出し
2. 導入メッセージ（企画の目的を伝える）: 白地に字間の広い6行の文を置き、下端を波形で水色へつなぐ
3. メイン動画と歌詞（MVを再生してもらう）: 波線見出し、16:9の動画、フェードする歌詞の箱、ピルボタン
4. メイキング動画（裏側を見せて共感を深める）: 小見出しと横長の動画
5. 出演者紹介（キャラクター性を伝える）: 吹き出しの見出し、集合写真と説明、写真カードのスライダー
6. ドキュメンタリー動画（体験談で魅力を伝える）: 英字の2段見出し、Vol.の見出し付きの縦動画を連続で並べる
7. 実態調査データ（数字で信頼性を出す）: 結論リードと白い図表カードを交互に繰り返し、最後に調査概要
8. 利用者の声（満足度を数字で示す）: 【】付きの小見出しと大きなドーナツグラフ、横棒グラフ
9. 解説動画（違いを分かりやすく示す）: 波線見出しとサムネイル動画
10. 豆知識（意外な事実を紹介する）: 白帯の小見出し、写真、1行の説明を3回繰り返す
11. 研究結果（根拠へ誘導する）: 研究結果カード2枚と、外部リンクのピルボタン
12. 使い方（操作方法を伝える）: 線画の操作パネルとアイコン、白枠のタップ指示、安心機能の説明
13. 団体紹介・フッター（発信元を示す）: 白地にピルボタン、線で区切った団体説明、会員ロゴ群、水色のフッターに尾びれ

Imagery

• 人物は白く明るいスタジオで、寒色の衣装を着せて俯瞰で撮る
• 縦動画のサムネは灰白の部屋の中央に一人座らせる
• 製品写真は白背景で水流を強調し、清潔感を出す
• イラストは水色の円の中に家電や水回りをフラットに描く
• 装飾は紺のポップな魚キャラ、尾びれ、白い泡
• 操作説明は黒の線画アイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約75%幅でまとめ、FV は横長の写真の左にロゴを置く
• 出演者カードは PC で3列＋2列のグリッド
• 縦動画は PC で2列×2段
• 調査図表は PC で2枚ずつ横に並べる
• キャラ装飾は 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 行書くと起動時に読み込まれる。