DESIGN.md — 水色→紫→ピンクのキャラコラボ菓子キャンペーンLP（Pastel Sky Gradient Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい
• キーワード: パステルグラデーション・雲の区切り・紙吹雪・立体ポップ文字・チョコ茶の線・キャラクター
• 地の質感: フラットなパステル塗りに雲と紙吹雪を重ねる。写真はほぼ使わず、商品パッケージとイラストが中心
• 形: 角丸カード、ずらした影のブロック、もこもこの雲、ピル型ボタン、片側が斜めに切れたリボン形ラベル
• 温度感: 明るく暖かい。甘いお菓子らしい軽さ

Colors

• 背景は上から空色→ラベンダー→ピンクへ途切れずにグラデーションさせる
• セクションの区切りや写真・画像の舞台には白い雲の面を使う
• 見出しの色は青と茶の2系統。説明文は茶色にする
• 黄色は見出しのマーカーとステップカードだけに使う
• 赤と青は良い例・悪い例の判定にだけ使う
• CTAは彩度の低いグレーの面に茶色の太い枠と文字をのせる
• notice-box は文字 #3E7CA7 × 背景 #DBE2ED のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#34698D、4.54:1）を使う。

Typography

• 見出しは白抜き文字にし、青やピンクの段差影を重ねて立体に見せる
• 本文はほぼ太字で中央揃えにする
• 小見出しは上下を青い点線で挟む
• 期間などの数字は茶色の太字で大きめに見せる
• ボタンは上に小さな補足文字、下に大きな動詞の2段で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。キャラ・壁紙・商品は横スライダーか2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しと本文は中央揃えにする
• セクションの境は雲のシルエットで区切る
• スライダーの左右に茶色の丸い矢印ボタンを置く
• ステップは淡い黄色の角丸カードを縦に並べる
• キャラクターのイラストを画面の端からはみ出させて配置する

Elevation & Depth

• キャラカードは右下へずらした青い単色の影（ぼかしなし）をつける
• ぼかしたドロップシャドウは使わない
• 雲や白のカードは影なしのフラットな面にする

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージや壁紙は長方形のまま。キャラは切り抜きで、白フチを付けてステッカー風にする
• セクション境界: もこもこの雲の曲線
• キャラカードは茶色の太枠＋角丸16px
• コース名のラベルは片側を斜めに切ったリボン形
• CTAは茶色の3px枠のピル型にし、右に矢印を置く
• 同意チェックボックスは茶色枠の大きな正方形

Components

• 応募ピルボタン（button-primary）: グレーの面に茶色の太枠。上段に小さな補足、下段に大きな動詞を置き、右端に矢印
• 立体ポップ見出し（heading-3d）: 白い文字に青・ピンクの段差影と黄色の縁取りを重ねる
• 点線挟み小見出し（heading-dotted）: 青い文字の上下を青い点線で挟む
• キャラ紹介カード（character-card）: キャラごとの色で塗り、茶色の枠と青いずらし影を付ける。上に名前、中にイラストと短い紹介文
• コース名リボン（ribbon-label）: 淡い黄色の帯の片側を斜めに切る。キャラ名を赤系・茶系の文字で入れる
• ステップカード（step-card）: 淡い黄色の角丸カード。STEP番号、説明、イラストを並べ、横の矢印で次へ進む
• 良い例・悪い例リスト（ok-ng-list）: 赤い○と青い×のアイコンに、色付きの箇条書きを添える
• 吹き出し型の注意（notice-box）: 淡い青の箱で、上に小さな三角を付ける。青の太字で中央揃え
• 規約アコーディオン（accordion）: 白地に茶色の枠。中央にタイトル、右に下向きの三角
• 丸矢印ボタン（slider-arrow）: 白地に茶色の枠と矢印の円形ボタン

Do's and Don'ts

Do - 背景は空色→ラベンダー→ピンクを途切れずにつなぐ - セクションの境には必ず雲を挟む - 紙吹雪や小さな旗を余白に散らす - 枠線は茶色の太線で統一する - キャラクターを端からはみ出させて動きを出す

Don't - 黒や濃いグレーの文字を使わない - ぼかした影やリアルな質感を入れない - 細い明朝体を使わない - 角のとがった四角いボタンを主CTAにしない - 濃い単色の背景セクションを挟まない

Page Structure

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

1. ファーストビュー（コラボの楽しさを一目で伝える）: 空色の地に立体ロゴ風コピー、手書き風の斜めリード文、キャラが乗った列車イラストを置き、下端を雲で区切る
2. コラボ表記（コラボの組み合わせを示す）: 白地に2つのロゴを×でつなぎ、中央に置く
3. キャラクター紹介（登場キャラに親しみを持ってもらう）: 立体見出しと青のリード文。色違いのカードを横スライダーで見せる
4. 特典の告知（全員がもらえる特典を訴求する）: 旗のバッジ、雲の上の立体見出し、黄色マーカーを引いた大きな特典名を置く
5. 応募期間（期限を明示する）: 点線挟み見出しの下に、茶色の太字で日時を書く
6. 特典の見本（もらえる壁紙を見せる）: 白い雲の舞台に縦長の画像をスライダーで並べ、下にリボンラベルを付ける
7. 対象商品（買う商品を特定させる）: パッケージを2列で並べ、リボンラベルと下線付きの商品名を添える
8. 応募方法（手順を理解させる）: 説明文と注釈のあとに、黄色のステップカードを並べる
9. 撮影の注意（無効な応募を防ぐ）: 白いカードに○×リストと吹き出し型の注意を入れる
10. 規約・応募CTA（同意をとって応募へ進ませる）: アコーディオン、チェックボックス、ピルボタン2つ、会員の説明文の順に置く

Imagery

• 太い茶色の主線でフラットに塗った、かわいいキャラクターのイラスト
• キャラは白フチを付けたステッカー風に切り抜く
• 四角と細長いリボンの紙吹雪を、黄・オレンジ・赤・紺で散らす
• 白いもこもこ雲を背景の端や区切りに置く
• スマホやPCは茶色の線で描いた簡単なアイコン風にする
• 壁紙はギンガムチェックの地にキャラと音符を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000px幅で置き、背景のグラデーションは画面幅いっぱいに広げる
• キャラカードはPCではスライダーをやめ、4列×2段のグリッドにする
• 壁紙と商品はPCで4列に並べる
• ステップカードはPCで3つを横並びにし、矢印形の帯でつなぐ
• 応募ボタン2つはPCで横並びにする
• FVのコピーはPCで横1行にし、リード文を右側へ置く

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