--- version: alpha name: Blue and Pink Dual App Point Campaign LP description: 青とピンクの二色を左右・上下で対比させ、2 つのアプリの登録手順をステップで見せるポイント還元キャンペーン LP。白地に淡い水色・淡いピンクの帯、青→ピンクのグラデーション罫線と見出し、ずらし影付きの角丸カードが特徴。 colors: primary: '#0174C3' secondary: '#E64291' dark-section: '#0065B5' on-dark: '#F4FEFF' background: '#FFFFFF' background-alt: '#E4F1FA' tint-1: '#FBE5F2' cta: '#0174C2' on-cta: '#EDFEFE' accent-1: '#1FB0DC' accent-2: '#CE5C8E' text: '#02529B' text-muted: '#6E6E6E' line: '#CCD5DC' accent-1-accessible: '#1680A0' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.55 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.65 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' benefit-card: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 200px outline-callout: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 120px gradient-section-title: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 140px step-number: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px pill-heading-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px area-tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 32px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px store-badges: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px notice-card: textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.md}' height: 800px --- # DESIGN.md — 青×ピンクの二色対比 アプリ登録キャンペーン LP（Blue and Pink Dual App Point Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、清潔・爽やか、情報量多め・訴求型、信頼・誠実 - **キーワード**: 二色対比・グラデーション罫線・ステップ解説・ずらし影カード・アプリ画面・ポイント訴求 - **地の質感**: フラットな単色面に、青→ピンクのグラデーションを線と文字だけに使う。紙質感はなく、デジタルで清潔。 - **形**: 大きめ角丸のカードと、右下に濃色のベタ影をずらした立体ボタン。ピル型ラベル。 - **温度感**: やや涼しめ。青で信頼、ピンクで親しみを足した中間温度。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0174C3` | ブランド青（カード・見出し文字） | 6% | 画素の実測 | | `secondary` | `#E64291` | ブランドピンク（第二アプリ・カード） | 6% | 画素の実測 | | `dark-section` | `#0065B5` | フッター濃青 | 4% | 画素の実測 | | `on-dark` | `#F4FEFF` | 濃色面上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 46% | 画素の実測 | | `background-alt` | `#E4F1FA` | 青系ステップ帯の淡水色 | 8% | 画素の実測 | | `tint-1` | `#FBE5F2` | ピンク系ステップ帯の淡ピンク | 7% | 画素の実測 | | `cta` | `#0174C2` | ピル型見出しボタンの青 | 5% | 画素の実測 | | `on-cta` | `#EDFEFE` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#1FB0DC` | グラデーション始点の水色 | 3% | 画素の実測 | | `accent-2` | `#CE5C8E` | ピンク系強調文字・回答 | 2% | 画素の実測 | | `text` | `#02529B` | 本文の濃紺文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#6E6E6E` | 注意事項のグレー文字 | 2% | 推定 | | `line` | `#CCD5DC` | カード枠・区切り線の淡グレー | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#1680A0` | AA を満たす補正値（計算） | | 計算 | - 青とピンクを2つの対象（アプリ・特典）に割り当て、全編で色を混ぜない。 - 青系のステップは淡水色地、ピンク系は淡ピンク地の帯に置く。 - 青→ピンクのグラデーションはセクション見出し文字と上下の罫線、ピル型ラベルに限定する。 - 本文は白地に濃紺、ピンク帯内はピンク文字で統一する。 - 注意事項・免責は淡水色地の白カード上にグレー文字で控えめにする。 - フッターは濃青のグラデーション面に白文字。 - `gradient-section-title` は文字 `#1FB0DC` × 背景 `#FFFFFF` のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1680A0`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の特典数値 | 欧文サンセリフ | Montserrat | 800 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（グラデーション文字） | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.35 | 0.02em | | `headline-md` | 特典カード・完了見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.0em | | `headline-sm` | ステップ説明・Q の文 | ゴシック | Noto Sans JP | 700 | 16px | 1.55 | 0.0em | | `body-md` | 本文・回答文 | ゴシック | Noto Sans JP | 700 | 13px | 1.65 | 0.0em | | `note` | ※注釈・注意事項 | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.0em | | `accent` | Q1/A1 や 01 などの番号 | 欧文サンセリフ | Montserrat | 700 | 24px | 1.1 | 0.0em | | `label-button` | ピル型ラベル・ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.03em | - 本文も含めほぼ全文を太字で組み、ポップで読みやすくする。 - 数値と単位はサイズ差をつけ、数値を大きく単位を小さくする。 - セクション見出しは青→ピンクのグラデーション文字で中央揃え。 - 末尾の「！」はイタリック体で勢いを出す。 - 注釈は「※」の後をぶら下げインデントにする。 - リンクは下線付きの同系色テキスト。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-312f9c87`（元 LP の URL から採番） - **元 LP**: https://wester.jr-odekake.net/wesmo/cp/user/wesmo-wespo-campaign/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。