DESIGN.md — 黄×コーラルの漫画調SaaSキャンペーンLP（Pop Manga Coral Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型
• キーワード: 漫画調イラスト・集中線・ハート見出し・雲形境界・白カード・コーラル赤
• 地の質感: フラットな面に、FVだけ集中線と和柄の波模様。カードには薄い影。
• 形: 角丸カード、二重線の枠、ギザギザ星バッジ、雲形・大きなR形のセクション境界
• 温度感: 暖色寄りで明るく賑やか

Colors

• コーラル赤を見出し前のハート・小見出し・番号丸・カード枠に一貫して使う
• 主CTAは濃い赤の塗りに白文字、下に濃い影線で立体に見せる
• サブCTAは白地にコーラル枠とコーラル文字
• セクション地は白→ミント→淡い黄→白→グレーと切り替える
• 黄色の濃い面はFVと最終CTAだけに使う
• 賞品・特典名はオレンジ文字で強調する
• フッターは濃いグレー地に、ティールの見出しを置く
• button-primary は文字 #FFF5F2 × 背景 #E52D2B のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE1D1B、4.56:1）を使う。
• button-secondary は文字 #FD644A × 背景 #FFFFFF のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E62403、4.55:1）を使う。
• pill-label は文字 #FFF5F2 × 背景 #FD644A のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E62403、4.59:1）を使う。
• countdown-box は文字 #FD644A × 背景 #FFFFFF のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E62403、4.55:1）を使う。

Typography

• 見出しは中央揃えで、ハート→コーラルの小見出し→黒の太字の3段にする
• 日付やカウントダウンの数字はコーラルの極太で大きく見せる
• 本文は黒の中太字。細いウェイトは使わない
• FVのタイトルは縁取りと影付きの漫画風ロゴにする
• 強調はコーラルかオレンジの文字色で行い、マーカーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品と見本サンプルは横スライダー
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは見出しブロックから始め、中央に寄せる
• ステップは縦に並べ、間に下向きの三角を挟む
• 流れは左に番号丸と縦線、右に白いカードのタイムライン
• CTAは参加方法・スケジュールの後と最終セクションに置く
• 賞品カードは左上に人数バッジをはみ出させる

Elevation & Depth

• 白カードには薄くぼかした影(0 2px 8px rgba(0,0,0,.08))
• CTAボタンの下には濃い色の影線を4pxずらして立体感を出す
• カルーセルの矢印は赤い丸に影を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形。キャプチャ画像はカード上部いっぱいに配置する
• セクション境界: 雲形の白い波と、大きな角丸で地色を切り替える
• 概要とスケジュールはコーラルの二重線枠
• 人数バッジはギザギザの星形
• Q/Aは丸アイコン(Qは塗り、Aは枠線)
• 見出し上に小さなハートを置く

Components

• 主CTAボタン（button-primary）: 赤いピル型ボタン。外部リンクアイコンと下影線付き
• サブボタン（button-secondary）: 白地にコーラルの太枠を付けたピル型ボタン
• ハート付き見出し（heading-heart）: ハート、コーラルの小見出し、黒の太い大見出しを縦に積む
• ラベル帯（pill-label）: コーラルのピルに白抜きのハートと文字
• ステップカード（step-card）: 白カードの上部にキャプチャ、左上にコーラルのSTEPタブ、下に太字の説明
• 賞品カード（prize-card）: 写真の右下に白いロゴ札。左上に星形の人数バッジ。下に賞名とオレンジの賞品名
• 流れタイムライン（timeline-item）: コーラルの番号丸をグレーの縦線でつなぎ、右に白カード
• FAQカード（faq-card）: Qは塗りの丸とコーラルの質問文、Aは枠線の丸と黒の回答文
• 日程とカウントダウン枠（countdown-box）: 二重線の枠に日付を大きく表示。残り日数はコーラルの角丸タイルで1桁ずつ見せる

Do's and Don'ts

Do - 見出しは必ずハート付きの3段構成にする - イラストは太い線の漫画調で、表情を大げさに描く - 地色はセクションごとに淡い色へ切り替え、境界は雲形か大きなRにする - CTAは赤いピル型に下影を付けてそろえる - 賞品は星形の人数バッジで数を目立たせる

Don't - 寒色や暗い色をメインにしない(フッター以外) - 細い明朝体や細ウェイトを使わない - 角の尖ったカードや影の強いボタンにしない - コーラル以外の色を見出しのアクセントに混ぜない - 濃い黄色を本文セクションの地に広く使わない

Page Structure

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

1. ファーストビュー（記念企画の告知と参加を促す）: 黄色い集中線の背景に漫画調のキャラ2人とロゴ風タイトル。中央にUIキャプチャ、下にCTAを2つ
2. 企画概要（仕組みを一言で伝える）: ミント地に二重線枠のカード。キャッチの下にアイコンで流れ図を描く
3. 参加方法（3ステップで簡単だと示す）: STEPタブ付きのカードを三角でつなぎ、安心の注釈とサブCTAを置く
4. サンプル紹介（投稿のイメージを持たせる）: 淡い黄色地に白パネル。ラベル帯と矢印付きのカルーセル
5. 投稿の見本（書き方の迷いをなくす）: コーラル枠のキャプチャを横スクロールで並べ、ロゴで届け先を示す。雲形で区切る
6. 賞・プレゼント（賞品で動機をつくる）: 写真付きの白カードを縦に並べ、色違いの星形人数バッジを付ける
7. 企画の流れ（投稿後の流れを透明にする）: 淡いクリーム地に5段のタイムラインカード
8. 企画の目的（想いを伝えて共感を得る）: コーラルの中央揃えの文章に、作業するキャラのイラストとカラフルな吹き出しの雲
9. 開催スケジュール（締切を意識させる）: 二重線の枠に日付とカウントダウンのタイル、下に主CTA
10. よくある質問（不安を解消する）: グレー地にQ&Aの白カードを4つ
11. 最終CTA（最後のひと押し）: FVと同じ黄色い集中線とキャラ、ロゴ風コピー、赤いCTA
12. フッター（サービスへの導線）: 濃いグレー地に5列のリンク、3色のボタン、認証ロゴ

Imagery

• 太い黒線にベタ塗りの漫画調おじさんキャラで、大げさなポーズをとらせる
• 背景に黄色の集中線、和柄の青海波、手紙・キーボードなどの小物を散らす
• 製品UIのキャプチャは角丸の枠で切り抜いて見せる
• 賞品写真は白〜木目の明るい背景で、単体を物撮りする
• パステルの吹き出しや雲の形を重ねて背景を飾る
• シンプルな線のアイコンで仕組みの図を作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約1000pxに収めて中央に置く
• 参加方法は3カラムに横並びし、三角の矢印で区切る
• 賞品カードは2カラムで互い違い(千鳥)に並べる
• PCではヘッダーにナビとCTAボタンを3つ並べる
• フッターは5列のリンクと右側のボタン列にする
• FVは横長にしてキャラを左右に広げる

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