DESIGN.md — ピンク×水色ストライプのキャラ懸賞キャンペーンLP（Pastel Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型
• キーワード: パステル・ストライプ地・ハート枠・立体ぷっくり文字・キャラクター・キラキラ
• 地の質感: 縦ストライプやキャラ柄の地紋に星・ハート・光のきらめきを散らす。ボタンはグラデーションとハイライトで光沢を出す
• 形: 大きなハート型の白い枠、ピル型ボタン、丸いシール型バッジ、雲形の境界
• 温度感: 明るく甘い。ピンクと水色が交互に出てくる、温かみのある配色

Colors

• セクションごとに地の色を水色・ピンク・クリームで交互に切り替える
• 賞品カテゴリに合わせてボタン色（水色・ピンク・オレンジ）を揃える
• ハート枠の線とボタンは、地の色より濃い同系色にする
• 見出しは白い太縁とグラデーション塗りで立体的にする
• 本文はグレーではなく紺（#3D5C9A）にして柔らかくする
• フッターはクリームから白にして落ち着かせる
• nav-pill-button は文字 #F1FEFE × 背景 #2E9BD6 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#217AAA、4.59:1）を使う。
• button-primary は文字 #F1FEFE × 背景 #B86AA0 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AE5593、4.5:1）を使う。
• heart-frame は文字 #B86AA0 × 背景 #FFFFFF のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AE5593、4.55:1）を使う。
• detail-circle は文字 #F1FEFE × 背景 #2E9BD6 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#217AAA、4.59:1）を使う。
• limited-badge は文字 #F1FEFE × 背景 #B86AA0 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AE5593、4.5:1）を使う。
• period-band は文字 #2E9BD6 × 背景 #FFF596 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#217AAA、4.59:1）を使う。
• sns-share は文字 #415F94 × 背景 #F2A9C7 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#F8CFE0、4.56:1）を使う。

Typography

• 大見出しは白い太縁＋色の縁取り＋グラデーション塗りの3層にする
• 見出しは画像として書き出すか、text-strokeと多重shadowで再現する
• テキストはすべて中央揃えにする
• ボタンのラベルは2〜3行まで改行してもよい
• 期間表示は数字を大きく、曜日は丸囲みにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品は1カテゴリにつき1つのハート枠に入れ、縦に並べる
• ハート枠の右下に丸い「詳しく見る」ボタンを重ねる
• ハート枠の脇にキャラクターをはみ出させて配置する
• ナビボタンは2×3のグリッドで間隔12px
• セクションの見出しは地の上に直接置き、上下にゆとりを取る

Elevation & Depth

• ボタンは下側に濃い色の影をつけ、上部に白いハイライトを入れて光沢を出す
• ハート枠は太い色付きの線（約6px）で影はつけない
• 画像カードには弱いドロップシャドウ
• 見出し文字に濃い色のドロップシャドウ

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 賞品は切り抜きにしてハート枠内に散らして置く。キャラクターも切り抜き
• セクション境界: 背景の柄を切り替える直線のほか、フッター前は雲形の波
• ナビボタンとCTAはピル型にし、右端に▶または▼を入れる
• 「詳しく見る」は直径約90pxの円
• 限定バッジは花形の多角シール
• COPYボタンは小さなピル型

Components

• キャンペーン一覧ボタン（nav-pill-button）: 白縁のついたツヤのあるピル型ボタン。右に▼。色はカテゴリ別
• ピンクCTAボタン（button-primary）: 店舗リンクやアプリDLに使うピンクのグラデーションのピル型。右に▶
• ハート型の賞品枠（heart-frame）: 白地に太い色線のハート。上部にカテゴリ名、中に賞品の切り抜き
• 詳しく見るボタン（detail-circle）: 白縁のついた濃い色の円形ボタン。白文字2行
• 限定シールバッジ（limited-badge）: ピンクの花形シール。白縁つきでハート枠の左上に傾けて重ねる
• 実施期間帯（period-band）: 黄色の帯に大きな日付と丸囲みの曜日。開始と終了の間に▶
• SNSシェア（sns-share）: ハッシュタグとCOPYピル、その下にSNSの丸アイコンを4つ並べる

Do's and Don'ts

Do - 地の色と柄をセクションごとに切り替えてリズムを作る - 賞品はハート枠でまとめ、キャラを枠からはみ出させる - ボタンはすべて光沢のあるピル型か円形にする - 星・ハート・キラキラを地紋として散らす - 見出しは縁取りのある立体文字にする

Don't - 四角い無彩色のカードを使わない - 黒文字や細い明朝体を使わない - フラットで影のないボタンにしない - 濃色や暗い背景を使わない - 賞品を整然とした表に並べない

Page Structure

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

1. ファーストビュー（コラボの世界観とキャンペーン名を伝える）: ピンクの部屋風イラストにキャラを集合させ、ぷっくりロゴを置く
2. 実施期間（開催期間を示す）: 黄色の波形の帯に大きな日付
3. キャンペーン一覧（応募方法ごとにページ内リンクする）: 淡いピンクのキャラ柄地に、2列×3段のカラーピルボタン
4. 抽選賞品（抽選の賞品を応募方法別に見せる）: 水色ストライプ地に、ハート枠を3つ縦に並べる
5. 先着賞品（購入特典を見せる）: ピンクストライプ地にハート枠を2つ
6. 販売グッズ（店頭限定グッズを紹介する）: クリームとオレンジのストライプ地に、オレンジ枠のハート
7. 店舗ラッピング（対象店舗を案内する）: 水色キャラ柄地に、期間帯・説明文・ピンクピルを2列
8. 公式アプリ（アプリDLへ誘導する）: イラストのカードとピンクの横長CTA
9. SNSシェア（ハッシュタグの拡散）: 雲形の境界の下にクリーム地、ハッシュタグとSNSアイコン
10. お問い合わせ・フッター（問い合わせ先と権利表記を示す）: 白地に紺の大きな電話番号と小さな注記

Imagery

• 二頭身のキャラクターイラストを、太い輪郭線とビビッドなパステルで描く
• 賞品は白背景の切り抜き写真にし、少し傾けて散らす
• 地紋はキャラの顔・星・ハートを淡色で敷き詰める
• 十字のキラキラと光の粒を見出しやハート枠の周りに置く
• 網点（ハーフトーン）で奥行きを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はない。PCでは中央を幅480〜750px程度に固定し、左右に背景柄を延ばす
• ナビボタンはPCで3列にしてもよい
• ハート枠はPCでも縦1列のまま拡大しすぎない
• ファーストビューは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 行書くと起動時に読み込まれる。