DESIGN.md — 青×ピンクの二色対比 アプリ登録キャンペーン LP（Blue and Pink Dual App Point Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: 二色対比・グラデーション罫線・ステップ解説・ずらし影カード・アプリ画面・ポイント訴求
• 地の質感: フラットな単色面に、青→ピンクのグラデーションを線と文字だけに使う。紙質感はなく、デジタルで清潔。
• 形: 大きめ角丸のカードと、右下に濃色のベタ影をずらした立体ボタン。ピル型ラベル。
• 温度感: やや涼しめ。青で信頼、ピンクで親しみを足した中間温度。

Colors

• 青とピンクを2つの対象（アプリ・特典）に割り当て、全編で色を混ぜない。
• 青系のステップは淡水色地、ピンク系は淡ピンク地の帯に置く。
• 青→ピンクのグラデーションはセクション見出し文字と上下の罫線、ピル型ラベルに限定する。
• 本文は白地に濃紺、ピンク帯内はピンク文字で統一する。
• 注意事項・免責は淡水色地の白カード上にグレー文字で控えめにする。
• フッターは濃青のグラデーション面に白文字。
• gradient-section-title は文字 #1FB0DC × 背景 #FFFFFF のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1680A0、4.54:1）を使う。

Typography

• 本文も含めほぼ全文を太字で組み、ポップで読みやすくする。
• 数値と単位はサイズ差をつけ、数値を大きく単位を小さくする。
• セクション見出しは青→ピンクのグラデーション文字で中央揃え。
• 末尾の「！」はイタリック体で勢いを出す。
• 注釈は「※」の後をぶら下げインデントにする。
• リンクは下線付きの同系色テキスト。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードとロゴ一覧のみ 2〜3 列
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション見出しは上下を全幅のグラデーション罫線で挟む。
• 罫線の中央にピル型ラベルを重ねて導入句を置く。
• ステップは左に番号と説明、右にアプリ画面を置く 2 分割。
• ステップ一覧は淡色帯の上の白い大きな角丸カードにまとめる。
• 段落の切れ目は 3 つの下向き三角で流れを示す。

Elevation & Depth

• 主要カードとボタンは右下に 8px 前後ずらした濃色ベタ影で立体にする（ぼかしなし）。
• 白カードは影なし、淡色帯との対比だけで浮かせる。
• アプリ画面は太い色枠の角丸フレームで囲む。
• 吹き出しバッジのみ小さな柔らかい影を使う。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いて枠からはみ出させる。アプリ画面は角丸フレームに入れる。
• セクション境界: 直線。全幅の青→ピンクグラデーション細線、または淡色帯への色の切り替え
• 特典カードは角丸 20px 前後、太枠またはベタ塗りにずらし影。
• ラベルと見出しバーは完全なピル型。
• 番号は円形の塗りバッジ。
• アイコンは角丸正方形のアプリアイコン型。

Components

• 特典ポイントカード（benefit-card）: 青またはピンクのベタ塗り角丸カードに大きな数値と下向き矢印。濃色のずらし影付きで 2 列に並べる。
• 枠線追加特典カード（outline-callout）: 白地に青の太枠と青のずらし影。右上に吹き出しバッジを重ねる。
• グラデーション見出し（gradient-section-title）: 上下の全幅グラデーション罫線で挟み、中央のピル型ラベルにグラデーション文字の大見出しを添える。
• ステップ番号バッジ（step-number）: 青またはピンクの円に白の 01/02 などの番号。
• ピル型見出しバー（pill-heading-bar）: 全幅に近いピル型の塗りバーに白文字。分岐や対象一覧の見出しに使う。
• エリア区分タグ（area-tag）: 白地に青の細枠のピル型タグ。ロゴ一覧の地域見出しに使う。
• Q&A 行（faq-item）: 大きな Q 番号は青、A 番号と回答はピンク。各項目はグラデーション細線で区切る。
• アプリストアボタン（store-badges）: 黒い角丸の公式ストアボタンを 2 つ横に並べる。
• 注意事項カード（notice-card）: 淡水色地に白の角丸カードを置き、青い丸点の箇条書きをグレー文字で並べる。

Do's and Don'ts

Do - 2 つの対象を青とピンクに固定し、カード・帯・文字色をそろえる。 - 見出しの装飾はグラデーション罫線とピル型ラベルで統一する。 - 手順は番号バッジとアプリ画面のペアで見せる。 - 強調カードにはぼかしのない濃色ずらし影を付ける。 - 数値は欧文太字で大きく、単位は小さくする。

Don't - グラデーションを大きな面の塗りに使わない。 - 青とピンク以外の強い色を足さない。 - ぼかしの強いドロップシャドウを使わない。 - 細い字（Light 系）で本文を組まない。 - 手順を写真なしの文章だけで説明しない。

Page Structure

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

1. ファーストビュー（特典額と期間を一目で伝える）: 左右を青とピンクに分けた背景に人物 2 名と紙吹雪。縦書きの大コピーを置き、中央の白カードに大きなポイント数と期間を載せる。
2. 動画解説（参加方法を短時間で理解させる）: 波線付きの青い見出しの下に、縦長の角丸動画枠を置く。
3. サービス紹介（2 つのアプリの役割を示す）: 淡水色と淡ピンクの横長角丸カードを上下に置き、人物の切り抜きとアプリアイコンを添える。
4. キャンペーン概要（特典内容と条件をまとめる）: グラデーション見出しの下に、青・ピンクの特典カード 2 列と枠線の追加特典カードを置き、注釈を続ける。
5. 対象サービス案内（既存 ID で使えることを示す）: 白カードに関連サービスのロゴを 3 列で並べ、下線リンクを置く。
6. 登録手順（青）（1 つ目のアプリの登録を導く）: 淡水色帯の上の白い大カードに、番号・説明・アプリ画面のステップを並べる。下に三角矢印と完了見出しを置く。
7. 登録手順（ピンク）（2 つ目のアプリの登録を条件分岐で導く）: 淡ピンク帯で、分岐ボタン 2 つとピル型見出しバーで経路を分け、各経路のステップを続ける。
8. 対象店舗一覧（還元対象の場所を示す）: 青のピル型見出しバーの下に、エリアタグごとのロゴを 3 列で並べる。
9. 使い方（アプリ連携の流れを示す）: ピンクと水色の角丸ボックスを三角矢印でつなぎ、アイコンと画面で説明する。
10. よくある質問（不安を解消する）: Q を青、A をピンクの大きな番号で示し、グラデーション細線で区切る。最後に枠線ボタンを置く。
11. 注意事項（規約・免責を示す）: 淡水色地の白カードに箇条書きと下線リンクを置き、その下に小さな注釈を並べる。
12. ダウンロード CTA（両アプリのインストールを促す）: 青とピンクのベタ塗りカードにピル型の特典ラベル、ロゴ、説明、ストアボタンを置く。
13. フッター（関連リンクを提供する）: 濃青のグラデーション面に大きなロゴ、2 列のナビ、PDF タグ付きの規約リストを並べる。

Imagery

• 人物はブランド色の衣装とウィッグで色分けし、明るいスタジオ光の笑顔で撮る。
• FV には半透明の風船モチーフと二色の紙吹雪を散らす。
• アプリ画面のキャプチャは色枠の角丸フレームに入れ、操作箇所を水色の枠で強調する。
• 画面同士は丸に矢印のアイコンでつなぐ。
• 店舗ロゴは白地に余白を均等にとってグリッドに並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の 1000px 前後に収め、左右は淡色背景にする。
• 特典カードやステップの画面は PC で横並びを増やし、ロゴ一覧は 4〜6 列にする。
• FV は PC で横長にし、人物を左右に配置して中央に特典カードを置く。
• グラデーション罫線は 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 行書くと起動時に読み込まれる。