DESIGN.md — 黄×チョコ茶のお菓子柄 親子ナゾトキ LP（Candy Pop Kids Puzzle Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: お菓子・ナゾトキ・親子・ダイヤ柄・極太縁取り文字・ビスケット
• 地の質感: 黄色の市松・斜めストライプにお菓子のシルエットを薄く散らした総柄背景。
• 形: 焦げ茶の太線と角丸を持つ白カード。ビスケット型の見出し台座。とろけたソース状の波形区切り。
• 温度感: 暖色中心で、甘く明るくにぎやか

Colors

• 地は常に黄色の総柄にする。白カードは焦げ茶の太枠で囲む。
• 区切りの帯は赤か紫の 1 色にし、とろける波形で黄色地につなぐ。
• 主 CTA はオレンジ、サブリンクは青やオレンジのピル型にする。
• 見出し文字は白や色ベタにし、焦げ茶の太い縁取りを付ける。
• 本文は焦げ茶で書く。純黒は使わない。
• フッターだけ青紫の地にして締める。
• button-primary は文字 #FFFFFF × 背景 #FDAC2C のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A86702、4.56:1）を使う。
• button-sub は文字 #FFFFFF × 背景 #0274FC のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#026FF2、4.61:1）を使う。

Typography

• 見出しは極太で、焦げ茶の縁取りと影を付ける。
• 見出し文字の色はセクションごとに変える（黄・緑・紫・水色・白）。
• 本文は中央揃えで短く改行する。
• 価格や日付は太字で大きくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンやキャラクターは 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは白カードを中央に 1 枚置き、その中にまとめる。
• 見出しはカードの上辺にかかるように重ねて置く。
• お菓子のイラストをカードの外側に浮かせて配置する。
• 手順は写真と番号付きの説明を左右に並べる。

Elevation & Depth

• カードには焦げ茶のずれ影を付ける（下方向に 6px・ぼかしなし）。
• ボタンにも下方向のベタ影を付ける。
• ぼかしの強いソフトシャドウは使わない。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角に焦げ茶の太枠。キャラクターは円形に切り抜く
• セクション境界: ソースが垂れたような波形
• 枠線は 4〜6px の焦げ茶にする。
• 見出しはビスケット型の台座に載せる。
• アイコンは円形の黄色い地に置く。

Components

• 購入 CTA（button-primary）: オレンジの角丸ボタン。左に商品画像、右に矢印、下に価格を入れる。
• サブリンクボタン（button-sub）: 青やオレンジのピル型ボタン。白文字で焦げ茶の縁を付ける。
• ビスケット見出し（heading-biscuit）: ビスケット形の台座の上に、縁取り付きの極太文字を置く。
• 太枠白カード（card-framed）: 白地に焦げ茶の太枠とずれ影を付けたカード。
• 番号付き手順（step-item）: 写真の右に、黒丸の数字・小見出し・説明文を置く。
• 情報アイコンカード（icon-feature）: 黄色の角丸カードに、ダイヤ柄の白枠とシルエットアイコン、短い説明を入れる。
• 茶帯ラベル（label-bar）: カード内の小見出しに使う、焦げ茶ベタの白文字帯。
• 開閉見出し（accordion）: 見出しの下に点線と下向き三角を置いた開閉部品。

Do's and Don'ts

Do - 背景は黄色のダイヤ柄・斜めストライプ・お菓子シルエットの総柄にする。 - カードと写真は焦げ茶の太枠とずれ影でまとめる。 - 見出しは極太の縁取り文字にし、セクションごとに色を変える。 - キャラクターやお菓子のイラストを余白に散らす。

Don't - 細い線や淡いグレーで上品にまとめない。 - 単色の無地背景を長く続けない。 - 細い明朝体や純黒の文字は使わない。 - ぼかしの強い影やグラデーションを多用しない。

Page Structure

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

1. ファーストビュー（親子で遊ぶ楽しさを一目で伝える）: 親子の写真の上にキャラクターとロゴを重ね、ソース状の波で赤帯へつなぐ。
2. キャッチ帯（商品の概要を伝える）: 赤地にハッシュタグ、黄色のピルラベル、大きな縁取りコピーを置く。
3. 購入 CTA（早めに購入へ誘導する）: 商品画像付きのオレンジボタンと価格を見せる。
4. ギャラリー（遊んでいる雰囲気を見せる）: 太枠で角丸の写真を 4 枚、横に並べる。
5. 遊び方（手順を説明する）: 番号付きの 3 ステップ、副 CTA、準備物の円形アイコンを並べる。
6. セット内容（同梱物を紹介する）: オレンジの太枠台座に、アイテムの画像と名前を縦に並べる。
7. 動画（CM を見せる）: 太枠の中に動画を埋め込む。
8. プレイ形式（人数・時間・対象年齢を伝える）: 紫帯の上に、黄色のアイコンカードを 3+2 個並べる。
9. ストーリー（世界観を伝える）: 白カードの中に、中央揃えで物語文を置く。
10. 販売情報・購入（販売期間と価格を伝える）: 日付入りの横長ボタン、注釈、価格を載せたカード。
11. キャラクター（登場キャラを紹介する）: 円形の切り抜きに名前ラベルを付け、3 列で並べる。
12. SNS・ニュース（最新情報を伝える）: 埋め込み枠を太枠カードに入れる。
13. 注意事項（規約を補足する）: 縁取り見出しと点線、下三角で開閉させる。
14. フッター（メルマガ登録と権利表記）: 青いメルマガバナーを置き、波形の下に青紫の地を敷いてロゴを並べる。

Imagery

• 親子が笑顔でガッツポーズする明るい室内写真を使う。
• アニメ調のキャラクターを全身で切り抜き、枠の外へはみ出させる。
• ドーナツ・キャンディ・団子などのお菓子イラストを、白フチ付きで浮かせる。
• アイコンは焦げ茶 1 色のシルエットにする。
• 商品は斜めに置き、オレンジの台座の上で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカード幅を約 65% に固定して中央に置き、左右には総柄を見せる。
• SP はカード幅 92%、写真ギャラリーは 2 列にする。
• 手順の写真と文は、SP では縦積みにしてもよい。
• アイコンカードは SP で 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 行書くと起動時に読み込まれる。