DESIGN.md — 桜ピンク×藤紫のキャラクター景品キャンペーンLP（Pastel Pink Character Present Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型
• キーワード: パステルピンク・藤紫・円形フレーム・星形バッジ・キャラクター・追従バナー
• 地の質感: フラットなパステル塗り。FVだけ斜めストライプと紙吹雪で装飾し、ほかはベタ面と細い枠線で構成する
• 形: 正円、角丸の枠、星形、リボン帯、吹き出しを多用した丸みのある形
• 温度感: 暖かく甘めの色調。後半の企業紹介はグレーで少し落ち着かせる

Colors

• 地は淡ピンク。来場特典の区画だけラベンダー地にして、生成りの枠を載せる
• 見出しと数字は藤紫に統一し、黒は使わない
• 濃ピンクは追従CTA・リボン帯・期間表示だけに使う
• 追加特典は濃紫のピル帯に白文字で見せる
• 企業紹介パートはライトグレー地と白カードにして、キャンペーン部と分ける
• 最終CTAに赤を使う場合は1か所に限る
• sticky-cta-bar は文字 #FFFFFF × 背景 #EE7FAC のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1206F、4.53:1）を使う。
• ribbon-period は文字 #FFFFFF × 背景 #EE7FAC のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1206F、4.53:1）を使う。

Typography

• 見出しは太い丸ゴシックで、文字間をやや広げる
• 景品名は円の中で縦書きにし、メーカー名はピンクの縦ラベルに入れる
• 数字だけを大きくし、名様・円分などの単位は小さく添える
• 見出しの両側にスラッシュ記号を付けて強調する
• 注釈は11px前後の灰色で、※から始める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では景品円を 2 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 景品は1つずつ画面幅いっぱい近くの正円に収める
• 賞ラベルの円は大円の左上に重ねてはみ出させる
• 星バッジは円の右下に置く
• 来場特典は二重線の角丸枠1つにまとめる
• 企業紹介は横スライダーのカードとドットページャーで見せる
• 画面下にCTA帯を常時追従させる

Elevation & Depth

• 影はほぼ使わずフラットにする
• CTA帯には下方向に淡い影を付けて浮かせる
• 切り抜いた景品写真に影は付けない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 景品は背景を抜いた切り抜き写真。住宅写真は長方形
• セクション境界: 直線で地の色を切り替える
• 景品の枠は正円で、淡ピンクの太線にする
• 賞ラベルはギザ縁の白い円にする
• 当選数は藤紫の星形に白数字で入れる
• リボン帯は端を折り返した形にする

Components

• 追従CTA帯（sticky-cta-bar）: 画面下に固定する濃ピンクの角丸帯。左にロゴ型のイラスト、右に白文字と矢印を置く
• 景品円カード（prize-circle）: 白い正円に淡ピンクの縁。景品の切り抜き写真・縦書きの商品名・キャッチを収める
• 賞ラベル（prize-label）: ギザ縁の白い円に、藤紫の大きな英字と小さな「賞」を入れる
• 当選数の星（star-badge）: 藤紫の星形に白い数字を入れ、下に人数の単位を添える
• 期間リボン（ribbon-period）: ピンクのリボン帯に、白文字で期間の日付を大きく入れる
• 追加特典帯（bonus-pill）: 濃紫のピル帯。左上に白い吹き出しタグを付け、右にカードの画像を置く
• 二重線枠ボックス（framed-box）: 生成り地に紫の二重線を引いた角丸枠。来場特典の内容をまとめる
• 家型ラベル（house-label）: カード上部に付ける、イエローの家型の吹き出し
• スライダーカード（slider-card）: 白い角丸カードに見出し・写真・本文を入れ、ドットページャーを付ける

Do's and Don'ts

Do - 景品は1つずつ円で囲み、賞・星・縦書きの3点セットで統一する - キャラクターイラストを区切りに散らす - 見出し・数字は藤紫に統一する - 注釈は各区画の下に小さくまとめる - 追従CTAを常に表示する

Don't - 原色の青や緑を面に使わない - 角張った四角いボタンにしない - 黒い太字の見出しにしない - 景品写真を背景付きの四角で配置しない - 濃い影やグラデーションを多用しない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝える）: ピンク地に斜めストライプを敷き、立体ロゴ・期間リボン・キャラ集合絵を置く
2. 参加方法（来場してクイズに答える流れと、全員にもらえる特典を示す）: 角丸枠の中に建物写真と、伏せた特典のボックスを並べる
3. 抽選景品一覧（豪華景品で期待を高める）: 大見出しの下に、A〜E賞の円カードを縦に並べる
4. ハズレ救済賞（外れても当たるもう一つのチャンスを示す）: リボン型の帯にカード画像と、紫の楕円に入れた人数を置く
5. 注釈（応募条件を補足する）: 小さい灰色文字を並べ、下に風船とキャラのイラストを置く
6. 来場プレゼント（参加賞と子ども向けの特典を伝える）: ラベンダー地に二重線枠を置き、リボン見出し・グッズ写真・追加特典の紫ピル帯を入れる
7. キッズ案内（子連れでも来場しやすいと伝える）: 家とキャラのイラストの間に、短い文を2行入れる
8. 企業の強み（住宅性能を訴求する）: 淡ピンク地に、家型ラベル付きの白カードを横スライダーで並べる
9. 商品ラインアップ（住宅の商品を紹介する）: グレー地に、写真・欧文の商品名・説明文のスライダーを置く
10. 相談CTA（展示場への来場を促す）: 中央揃えの見出しを置き、その下に大きな角丸ボタンを配置する
11. フッター（規約とSNSへの導線）: こげ茶地に、白い円のSNSアイコンを並べる

Imagery

• キャラクターは天使の羽とリボンを付けたパステル調のイラストにする
• 景品は白背景で切り抜いた製品写真にする
• 装飾は風船・ハート・月・紙吹雪・星
• 住宅は青空の下で撮った外観写真
• 家とマスコットのフラットなイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約900px幅に収め、左右は淡いラベンダーの余白にする
• PC では景品円を 2 列のグリッドに並べる
• FV はロゴを左、期間リボンを右に横並びにする
• 参加方法は横 1 行の枠にまとめる
• PC では追従CTAを右端の縦タブにし、最後に横長の大ボタンを置く

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