DESIGN.md — 青×クリームの二択型菓子キャンペーンLP（Blue and Cream Dual Product Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: 二択の対比・青とクリーム・金の額縁・飾り罫・レシート応募・中央カラム
• 地の質感: グラデーション背景とマットな生成り面。紙のような柔らかい質感
• 形: 四角を基本に、角丸は小さめ。巻物風の紙カードとリボン型のラベルを使う
• 温度感: 青の涼しさとクリームの温かさを半分ずつ

Colors

• 左はクリーム、右は青のグラデーションにして、2商品の対比を背景で表す
• 中央カラムの地は生成り色。白いカードを重ねて情報をまとめる
• 見出しは濃紺で統一し、強調したい数字だけコーラルピンクにする
• OKはピンク、NGは水色の帯で色分けする
• 主ボタンはコーラル。会員登録だけロイヤルブルーで区別する
• 金色は枠線と飾り罫、キーワードの文字に限って使う
• button-primary は文字 #FFFFFF × 背景 #EF8383 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E32929、4.55:1）を使う。
• badge-round は文字 #FFFFFF × 背景 #438ACF のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3179C0、4.54:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで使い分ける
• FVのリード文は中央揃えにし、短い行で改行して詩のように読ませる
• 数字や「第◯弾」は大きくして目立たせる
• 応募期間などの日付は、上下を細い罫線で挟んで中央揃えにする
• 注釈は「※」から始め、小さい文字で書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介だけ 2 カラムで左右に対比させる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• PC でも中央 375px 前後の縦長カラムを保つ
• 見出しのすぐ下に飾り罫を入れ、その後に内容を続ける
• 手順は縦に並べ、STEPラベル→説明→線画の順で繰り返す
• 応募方法は白いカードにまとめ、影を付けて浮かせる
• 問い合わせ欄は上下を濃紺の太線で挟む

Elevation & Depth

• 白いカードには薄い影（0 2px 8px rgba(0,0,0,0.1)）を付ける
• 中央カラム全体の左右に金の太い枠線を引く
• ボタンは影なしのフラットにする

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角丸の長方形。商品は切り抜きで配置する
• セクション境界: 直線のまま。セクションの切り替えは飾り罫と地色の変化で表す
• ボタンは角丸が小さい長方形にする
• 「第◯弾」は円形バッジにする
• STEPラベルはリボン型の枠に入れる
• プロフィールは上下を丸めた巻物風の紙カードにする

Components

• 規約確認ボタン（button-primary）: 全幅のコーラル色ボタン。文字は白
• 会員登録ボタン（button-register）: ロイヤルブルーのボタン。2行の文字を入れる
• ブランドサイトへのボタン（button-outline）: 白地に細い枠線と矢印を付けた小さいボタン
• 飾り罫の見出し（heading-ornament）: 明朝の見出しの下に、渦巻き模様の細い罫線を入れる
• 第◯弾の円形バッジ（badge-round）: 青い円の中に白文字で数字を入れる。左右に罫線を伸ばす
• STEPリボン（step-ribbon）: 白地に濃紺の枠線を付けたリボン型のラベル
• OK/NGの帯リスト（list-band）: 細い色帯を1項目ずつ縦に並べる
• 商品の丸ラベル（product-label）: 商品ごとに、濃紺または金の円形ラベルを付ける

Do's and Don'ts

Do - 左右の色を対にして、二択の楽しさを出す - 見出しには必ず飾り罫を添える - 手順は白黒の線画イラストでわかりやすく描く - 期間や条件は罫線で区切り、中央揃えで見せる

Don't - 原色の赤や黄を広い面に使わない - 中央カラムを PC で広げすぎない - 見出しをポップな丸ゴシックにしない - 影を強くしすぎない

Page Structure

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

1. ファーストビュー（キャンペーンの告知と、2商品の世界観を伝える）: 上部にロゴ枠、続いて円形バッジ2つ。濃紺の地に詩のようなリード文を中央揃えで置く
2. 動画（CMで興味を引く）: 縦長の動画を全幅で置き、下に横長の動画を2本並べる
3. 出演者プロフィール（起用タレントに親近感を持ってもらう）: 巻物風の白いカードに、写真・名前・経歴を入れる
4. 商品情報（2商品を対比して見せる）: 左右2カラムで、青とクリームの地を分ける。丸ラベル・商品写真・説明・ボタンの順に並べる
5. キャンペーン概要（応募条件と賞品を伝える）: 大きな強調文字、枠囲みの補足、第1弾バッジ、賞品画像、期間を順に置く
6. 応募方法（手順を説明する）: 白いカードの中にSTEP1〜3。ベージュの地の上に線画イラストを入れる
7. 撮影の注意点（不備による応募を減らす）: OKはピンク帯、NGは水色帯で並べ、レシートの図解を添える
8. 応募フォーム（応募へ導く）: 規約ボタン、同意チェック、無効状態のボタン、会員登録ボタンを縦に並べる
9. お問い合わせ（事務局の連絡先を示す）: 上下を濃紺の線で挟み、中央揃えでテキストを並べる

Imagery

• 人物は明るい自然光で撮り、商品を手に持って笑顔の構図にする
• 写真の背景は青系かベージュ系にそろえ、2商品と色を対応させる
• 商品は切り抜いて大きく見せる
• 手順は黒の線画で、グレーを少し使ったイラストにする
• 写真に手書き風の白文字を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央にスマホ幅のカラムを置き、左右を背景エリアにする
• PC の左右には、人物と商品のビジュアルを固定で配置する
• PC の背景は左がクリーム、右が青のグラデーション
• SP では中央カラムだけを全幅で表示する

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