DESIGN.md — 黄×マゼンタのポップな親子向け懸賞 LP（Pop Yellow Family Prize Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感
• キーワード: ビビッドイエロー・斜めリボン見出し・ギザギザ当選数バッジ・ドット柄パステルカード・アコーディオン規約・キラキラ装飾
• 地の質感: ベタ塗りの原色地に、白ドットの淡いピンクや淡い緑の面と細い斜線ストライプを重ねる。全体はフラットで、ボタンだけ下に濃い影を落とす。
• 形: 角丸の白・パステルカード、少し傾けた平行四辺形のリボン見出し、星形ギザギザバッジ、ピル型ボタン
• 温度感: 暖かく明るい。にぎやかで子ども向けの楽しさがある

Colors

• 地色は全面イエローで固定する。セクションごとの色分けは中のカードで行う
• マゼンタは上部帯・ナビ帯・主CTAに使い、ブランドの顔にする
• セクション見出しのリボンはマゼンタ・緑・青・オレンジを順番に切り替える
• 2つの選択肢は緑（WEB・第1期）と青（ハガキ・第2期）で対にする
• 規約などの事務的な情報はえんじ色のバーにまとめ、＋アイコンだけ黄色にする
• 当選人数や「3点以上」のような強調は赤の太字で大きくする
• ribbon-heading は文字 #FEF7ED × 背景 #E50984 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB097E、4.54:1）を使う。
• burst-badge は文字 #FEF7ED × 背景 #EB0313 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E30312、4.6:1）を使う。
• button-primary は文字 #FEF7ED × 背景 #EA2474 のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1566、4.51:1）を使う。
• button-link は文字 #FEF7ED × 背景 #EB0313 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E30312、4.6:1）を使う。
• tab-pair は文字 #FEF7ED × 背景 #01A141 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#018335、4.59:1）を使う。
• point-label は文字 #FEF7ED × 背景 #01A141 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#018335、4.59:1）を使う。
• nav-grid は文字 #FEF7ED × 背景 #E50984 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB097E、4.54:1）を使う。

Typography

• 本文もほぼ太字にして、黄色の地でも読めるようにする
• 数字（人数・日付）は単位の約1.5倍の大きさにする
• 見出しは極太の丸ゴシックにし、リボン上では白抜き文字にする
• 注釈は小さい※付きの文で、カードの下にまとめる
• 日付の強調はマゼンタ、当選数の強調は赤にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビと選択肢ボタンだけ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約4%の余白を取り、黄色の地を額縁のように見せる
• セクションの先頭には中央寄せのリボン見出しを置く
• 賞品カードの左上角にギザギザバッジをはみ出させて重ねる
• 応募の手順は 2 列に並べ、番号と線画アイコンを縦につなぐ
• 規約は同じ高さのバーを 8px 間隔で縦に並べる

Elevation & Depth

• ボタンとアコーディオンには下方向にぼかしのない濃い影（約4px）を付ける
• カードは影なしのフラットにし、角丸と色の差だけで区切る
• 写真は白枠付きで、少し傾けて貼る

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は白フチ付きの四角形で、少し傾ける。商品は切り抜きにする
• セクション境界: 境界線は使わない。黄色の地の上に角丸カードを置いて区切る
• リボン見出しは斜めにした平行四辺形で、斜線ストライプを入れる
• 当選数は星形ギザギザバッジに入れる（赤または緑）
• 主CTAとリンクボタンはピル型にする
• アコーディオンは角丸8pxで、右端に＋/−を付ける

Components

• 斜めリボン見出し（ribbon-heading）: 傾けた平行四辺形に斜線ストライプを入れ、白抜きの極太文字を載せる。色はセクションごとに替える
• 当選数ギザギザバッジ（burst-badge）: 星形の赤い爆発形に、白い大きな数字と小さな「名様」を入れる
• 応募ピルボタン（button-primary）: マゼンタのピル型で、白い太字と右端に黄色い▶を付け、下に影を落とす
• 詳細リンクボタン（button-link）: 赤のピル型で、白い2行の文字を入れる。カード内の中央に置く
• 規約アコーディオン（accordion-dark）: えんじ色のバーで、ラベルは中央の白い太字、右端に黄色の＋を付ける
• 2択タブカード（tab-pair）: 緑と青の角丸カードを並べ、白い太字の見出しと日付、下に▼を付ける
• ドット柄賞品カード（prize-card）: 淡いピンク地に白ドットを散らした大きな角丸カード。写真・ロゴ・リボン帯を重ねる
• ポイントラベル（point-label）: 緑または青の小さな斜め帯に「ポイント＋番号」を白文字で入れる
• マゼンタのアンカーナビ（nav-grid）: マゼンタの帯を2列のグリッドに分け、白文字と黄色の▼を入れる。区切りは細い線
• 問い合わせ枠（contact-box）: 黄色の地に細い茶色の枠線を引き、四隅を斜めに切り落とす。電話番号は特大の太字

Do's and Don'ts

Do - 地色は全面ビビッドイエローにし、カードとリボンで情報を区切る - 当選数・点数・期間は大きな数字で目立たせる - キラキラ・音符・紙吹雪のアイコンを余白に散らす - 2つの選択肢は緑と青の色で対にする - 規約は最初は閉じたアコーディオンにして、ページを短く保つ

Don't - くすんだ色や落ち着いたグレー系を使わない - 細い明朝体やフォーマルな書体を使わない - カードに大きなドロップシャドウを付けない - 長文の規約を開いたまま並べない - 黄色の地に黄色系の文字を置かない

Page Structure

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

1. 上部告知帯（応募条件と総当選数を最初に伝える）: マゼンタの細い帯に、白と黄色の太字で応募条件と当選数を入れる
2. ファーストビュー（キャンペーン名と目玉の賞品を見せる）: カラフルな装飾ロゴ、傾けた家族写真、ギザギザバッジ、緑と青のリボンで賞品名を見せる
3. 期間・応募方法の要約（応募期間と2通りの応募方法を一目で示す）: 白い角丸カードに日付を大きく入れ、2列の番号付き手順と線画アイコンで方法を示す
4. アンカーナビ（ページ内の各セクションへ移動させる）: マゼンタの2列グリッドにし、SNSシェアの丸アイコンも置く
5. キャンペーン概要（応募条件と総当選数を伝える）: 白カードに中央寄せの太字を入れ、赤の大きな数字の周りに紙吹雪を散らす
6. メイン賞品（賞品の魅力をポイントで説明する）: ピンクのドット柄カードに、写真・リボン・ポイントラベル・イラストを配置する
7. Wチャンス賞（外れた人への賞品を伝える）: 淡い緑のドット柄カードに、緑の極太コピーと商品の切り抜き写真を置く
8. 対象商品（期間ごとの対象商品を示す）: 緑と青のタブで切り替え、展開パネル内に商品グリッドとオレンジのラベル帯を入れる
9. 応募方法（WEB応募とハガキ応募の手順を説明する）: 緑と青のピル型タブと、展開できるバーを並べる
10. 応募規約（法的な事項をまとめる）: 導入文の下に、えんじ色のアコーディオンを縦に並べる
11. 問い合わせ・CTA（問い合わせ先を示し、応募へ誘導する）: 四隅を切り落とした枠に電話番号を入れ、下にマゼンタのピル型CTAを置く

Imagery

• 家族写真は淡いピンクの背景で、白い服を着た笑顔の家族を撮る。白フチを付けて少し傾ける
• 商品は切り抜き写真にして、斜めに重ねて動きを出す
• 赤ちゃんなどのキャラクターは、太い線と淡い色で描く手描き風イラストにする
• 装飾は黄色いキラキラ、音符、紙吹雪、集中線をフラットに描く
• 手順の説明には、カゴ・スマホ・ハガキなどの単色の線画アイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約900pxの固定幅にし、両側は黄色の地にする
• PC のナビはマゼンタ帯の1行横並びにする
• PC の応募手順は、各方法内の番号と手順を横並びにする
• PC の賞品カードは、写真とテキストを左右に配置する
• PC の商品グリッドは3列、アコーディオンは幅を狭めて中央に置く

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