--- version: alpha name: Aqua Bubble Playful Campaign LP description: 淡い水色を地に、ターコイズのピル型ボタンと紺のキャラクター、白い泡の装飾でまとめた、業界団体の啓発キャンペーン LP。音楽・動画の遊び心と、調査データの白カードが並ぶ情報量を両立させる。 colors: background: '#C9E7F2' surface: '#FEFEFE' primary: '#36B9CB' cta: '#36B9CB' on-cta: '#FFFFFF' text: '#1A1A1A' text-muted: '#5C5D69' secondary: '#171C60' accent-1: '#05ACED' accent-2: '#9CC31E' accent-3: '#9695FC' line: '#FEFDFD' background-alt: '#FFFFFF' cta-accessible: '#25818D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.3 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px heading-wave: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px speech-bubble-title: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 160px data-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 300px result-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 210px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px lyrics-fade: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-lg}' height: 170px mascot-deco: backgroundColor: '{colors.secondary}' height: 60px tip-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px --- # DESIGN.md — 水色×泡と紺キャラの遊べる啓発キャンペーンLP（Aqua Bubble Playful Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 清潔・爽やか、ポップ・元気、情報量多め・訴求型 - **キーワード**: 水色の地・白い泡・波線の下線・紺のキャラ・データ図表・ターコイズ - **地の質感**: フラットな単色の面。白い円の泡と波形の区切りで水っぽさを出す - **形**: ピル型ボタン、角のない白カード、円グラフ、吹き出し楕円 - **温度感**: 涼しく清潔。キャラクターの表情で親しみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#C9E7F2` | ページ全体の水色の地 | 45% | 画素の実測 | | `surface` | `#FEFEFE` | カード・導入文の白い面 | 22% | 画素の実測 | | `primary` | `#36B9CB` | ボタン・図表見出し帯のターコイズ | 4% | 画素の実測 | | `cta` | `#36B9CB` | 主ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#1A1A1A` | 見出し・本文の黒 | 2% | 推定 | | `text-muted` | `#5C5D69` | 注釈・補足文のグレー | 1% | 画素の主要色に補正 | | `secondary` | `#171C60` | キャラクター・装飾の紺 | 2% | 画素の実測 | | `accent-1` | `#05ACED` | グラフ第2色の明るい青 | 0% | 画素の実測 | | `accent-2` | `#9CC31E` | 地図・グラフの黄緑 | 0% | 推定 | | `accent-3` | `#9695FC` | 地図・グラフの紫 | 0% | 画素の実測 | | `line` | `#FEFDFD` | 円グラフ残り・区切り線のグレー | 2% | 画素の実測 | | `background-alt` | `#FFFFFF` | ヘッダー・フッター手前の白帯 | 3% | 画素の実測 | | `cta-accessible` | `#25818D` | AA を満たす補正値（計算） | | 計算 | - 地は全編水色。情報カードと導入・団体紹介だけ白にする - 主ボタンと図表タイトル帯はターコイズ1色に統一 - 紺はキャラクターと尾びれ装飾のみ。文字には使わない - グラフはターコイズ主、明るい青・紫・黄緑を補助、残りはグレー - 白い円の泡を水色地の余白に散らす - 強い赤は動画再生アイコン以外で使わない - `button-primary` は文字 `#FFFFFF` × 背景 `#36B9CB` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#25818D`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の大見出し | 欧文サンセリフ | Zen Kaku Gothic New | 700 | 28px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（波線付き） | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `headline-md` | 図表前の結論リード（中央3行） | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.03em | | `headline-sm` | Vol.番号・知識の小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.02em | | `body-lg` | 導入メッセージ文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.3 | 0.12em | | `body-md` | 説明・プロフィール本文 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.8 | 0.04em | | `note` | 調査概要・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.0em | | `label-button` | ピルボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.0 | 0.05em | - 見出しは中央揃えで、下に白い波線を敷く - 導入文は字間を広くし、行間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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8000e0b8`（元 LP の URL から採番） - **元 LP**: https://www.sanitary-net.com/wash/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。