DESIGN.md — ピンク×ラベンダーのキャラコラボ販促キャンペーン LP（Pastel Pink & Lavender Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パステル・2キャラ対比・リボン見出し・ドット柄・レース区切り・茶色縁取り
• 地の質感: クリーム地に薄いドット柄やストライプを敷き、小物イラストを散らして紙雑貨のような質感にしている
• 形: 角丸の大きいカード、ピル型ボタン、リボン帯、スカラップ（波形のレース）とリボンを並べた区切り
• 温度感: 暖かく甘い。ピンクを暖色、ラベンダーをやや涼しい色として対にする

Colors

• 地はクリーム（ドット柄）と淡い黄色を交互に使い、セクションを区切る
• ピンクとラベンダーは必ず対で使う。ボタンや見出しを交互に色分けする
• 文字と枠線は黒ではなくこげ茶に統一する
• 主CTAと店舗ボタンはピンクの面に白文字、第2グループはラベンダーで区別する
• 日付や期間の帯は淡い黄色かピンクの面に茶文字で置く
• ファーストビューは左右をピンクとラベンダーに塗り分ける
• button-primary は文字 #FEF9FC × 背景 #EB658D のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF1D57、4.53:1）を使う。
• button-secondary は文字 #FEF9FC × 背景 #7B6BB0 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7A69AF、4.52:1）を使う。
• ribbon-heading は文字 #E8618C × 背景 #FFE59E のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C81D54、4.51:1）を使う。
• number-badge は文字 #FEF9FC × 背景 #E8618C のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C81D54、4.58:1）を使う。

Typography

• 見出しはすべて極太の丸ゴシックにし、白フチやドロップシャドウで立体感を出す
• 大見出しは前半をピンク、後半を紫に塗り分け、きらめきの装飾を添える
• 本文は中央揃えで太めの字にし、文末にハートを添えてもよい
• 日付は数字を大きく、曜日は丸囲みで小さく入れ、区切りに矢印を使う
• 強調したい語はピンクの文字色で示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ボタン群と店舗リストは 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約90%で中央に置き、茶色の太枠で囲む
• カード上辺にリボン型の見出し帯をはみ出させて重ねる
• カード下部に淡い色の帯を敷き、期間や発売日を置く
• 期間が2つあるときは点線の縦線で左右に分ける
• セクションの間はレースとリボンを並べた区切りで仕切る
• 目次ボタンは3列＋2列＋1列の横長ボタンでピラミッド状に並べる

Elevation & Depth

• 影はほとんど使わず、茶色の太枠線で立体感を出す
• 見出し文字には白フチと薄い影を付ける
• カードは平らな白面で、枠線で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: グッズ写真は背景を切り抜いて白いカードの上に並べる。キャラクターは輪郭で切り抜く
• セクション境界: スカラップ状のレースにリボンのアイコンを並べた横帯
• ボタンはすべてピル型にし、右端に白丸の矢印アイコンを置く
• 見出しは両端が折り返ったリボン帯にする
• 番号バッジは花形（スカラップの円）にする
• アプリ会員向けの補足ボックスは茶色の点線で角丸に囲む
• ラベルは小さなピル型にする

Components

• ピンクのピル型CTA（button-primary）: ピンク地に白文字の2行テキスト。右端に白丸の矢印を置く
• ラベンダーのピル型ボタン（button-secondary）: 店舗リストや目次で、ピンクと交互に使う紫のボタン
• リボン帯見出し（ribbon-heading）: 黄色やピンクのリボン帯を茶色で縁取り、カードの上辺に重ねる
• 賞品カード（prize-card）: 白地に茶色の太枠を付けた角丸カード。下部の淡い色の帯に期間を置く
• 期間ピル（date-pill）: 淡い黄色のピルに日付を置く。曜日は丸囲み、区切りに矢印
• 花形の番号バッジ（number-badge）: スカラップの円に「コラボ＋数字」を入れ、リボン見出しの左に重ねる
• 小見出しラベル（label-chip）: 淡いピンクや紫のピル型の帯に茶色の太字を置く
• 点線の補足ボックス（dotted-info-box）: 茶色の点線で囲んだ淡いピンクのボックス。限定特典を説明する
• レース区切り（lace-divider）: 白いスカラップにピンクと紫のリボンを並べた区切り帯

Do's and Don'ts

Do - ピンクと紫は常にペアで配置し、2キャラの対比を表現する - 文字と枠線はこげ茶にそろえ、甘さの中にまとまりを出す - 背景には小物イラストやドットを散らして余白をにぎやかにする - セクションごとにリボン見出しとカードの型を繰り返す - ボタンにはすべて矢印アイコンを付け、タップできることを示す

Don't - 純黒の文字や細い線を使わない - 角の尖った四角いボタンや、彩度の高い原色を使わない - 明朝体や細いゴシックを見出しに使わない - 暗い地のセクションを入れない - 写真を背景いっぱいに敷かない。切り抜いて並べる

Page Structure

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

1. ファーストビュー（コラボとキャンペーン名を一目で伝える）: 左右をピンクと紫に塗り分け、2キャラを大きく配置する。極太タイトルを置き、下の波形の黄色帯に期間を入れる
2. キャンペーン目次（複数の施策へページ内で誘導する）: 2色で塗り分けた見出しの下に、ピンクと紫のピル型ボタンを3・2・1列で並べる
3. 抽選プレゼント（購入応募）（購入で応募できる賞品を見せる）: 大見出しの下にリボン見出し付きのカードを置き、切り抜いた賞品写真と期間帯を並べる
4. 抽選プレゼント（SNS応募）（SNSでの応募を促す）: 同じ型のカードを使い、期間を点線で2つに分ける
5. 購入特典（金額条件や対象商品で、もれなくもらえる特典を伝える）: レースで区切ったあと、リボン見出しのカードを2つ縦に並べる
6. 限定グッズ販売（店頭で販売するオリジナル商品を紹介する）: 斜めの限定バッジ付きのリボン見出しの下に、グッズ写真を並べ、下帯に発売日を置く
7. 体験企画（スタンプラリー）（来店を促す）: 黄色のストライプ地に変える。花形の番号バッジと、説明文、点線の補足ボックス、開催店舗ボタンを並べる
8. 体験企画（キャラクターパネル）（設置店舗を案内する）: 紫のリボン見出しにする。パネル写真を置き、紫ボタンの2列グリッドで店舗を並べる
9. 公式アプリ誘導（アプリのダウンロードを促す）: スマホの枠と2キャラのイラストを置き、ピンクの大きいピル型CTAを付ける
10. フッター（SNS共有と問い合わせ先を示す）: 黄色の地にハッシュタグとコピーボタン、SNSの丸アイコンを置き、白い角丸ボックスに電話番号を入れる

Imagery

• キャラクターは太い茶色の輪郭線を持つフラットなイラストにする
• 背景にはコスメ・小花・リボンなどの小物を小さく散らす
• グッズは正面から撮って切り抜き、少し重ねながら並べる
• 見出しの周りにきらめきやハートの装飾を添える
• パステル調で影の少ないイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の推奨のみ示す
• PC ではコンテンツ幅を最大 750px 程度にして中央に置き、左右はドット地を延ばす
• 店舗ボタンは PC では 3〜4 列にしてよい
• ファーストビューは左右の2色の塗り分けを画面幅いっぱいに広げる

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