DESIGN.md — 黄・青・緑の原色ゲームコラボ菓子LP（Vivid Game Collab Ice Cream Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: 原色・ゲーム風・切り抜き商品写真・白フチ極太見出し・価格ボックス・星モチーフ
• 地の質感: ベタ塗りの原色の面に、細かいドットや格子のパターンを薄く重ねる。キャラクター線画のシルエットを地に透かす。
• 形: 黒い太線で囲んだ角丸ボックス、ピル型ボタン、ギザギザの星形バッジ、弧状のセクション境界。
• 温度感: 明るく暑い夏の高温。子どもも大人も楽しめる元気さ。

Colors

• 商品ごとにセクションの地を黄→緑→青→黄の順で切り替え、境界は弧状にする。
• 価格ボックスは、地の色を淡くした色で塗り、黒の太線で囲む。
• 赤は特典ラベルとボタン文字だけに使う。
• 黄色地では本文を黒にし、緑地・青地では本文を白にする。
• 見出しは黒文字に白い太フチを付け、どの地の色でも読めるようにする。
• お得さを示すバッジは黄色地に青文字で目立たせる。
• button-primary は文字 #EA2313 × 背景 #FEFDFC のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E52213、4.52:1）を使う。
• badge-feature は文字 #FDE20C × 背景 #EA2313 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E52213、4.55:1）を使う。
• badge-burst は文字 #029CDB × 背景 #FED403 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01648D、4.56:1）を使う。
• count-tab は文字 #029CDB × 背景 #FEFDFC のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01648D、4.53:1）を使う。
• speech-bubble は文字 #EA2313 × 背景 #FEFDFC のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E52213、4.52:1）を使う。

Typography

• 見出しは極太ゴシックにし、黒文字に白い太フチと影を付ける。
• 価格の数字は特大にし、「各」や「スモール」などの補足は小さく添える。
• 本文は14px前後で、行間をゆったりとる。
• 注釈は※で始め、11px前後にする。
• 斜めに配置した短い吹き出し文字で、ひとことを補足する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。価格は 2 列で並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品1つにつき「見出し→切り抜き写真→特典ラベル→本文→価格ボックス→注釈」の順に並べる。
• 商品写真は画面幅いっぱいに大きく配置し、要素同士を重ねてよい。
• 価格ボックスは左右に約5%の余白をとって中央に置く。
• 特典ラベルは写真の上に斜めや重ねで配置する。
• セクションの切り替えは弧で区切り、上下に余白をとる。

Elevation & Depth

• 価格ボックスやボタンの下に、黒やトーンを落とした色で約3pxの影を付けて、立体感を出す。
• 切り抜き写真に白フチを付けて、シール風にする。
• 影のぼかしはほぼ使わず、フラットに保つ。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品やキャラクターは背景を切り抜き、白フチを付けたシール風にする。
• セクション境界: 上に凸の大きな弧で地の色を切り替える。
• 価格ボックスは角丸約8pxにし、黒の2〜3px線で囲む。
• バッジは星形のギザギザにする。
• 入数ラベルは左端を画面に付けた片側ピル型にする。
• 地には星や線画を薄く散らす。

Components

• 価格ボックス（price-box）: 黒の太線で囲んだ淡色の角丸箱。中にサイズ名と大きな価格を2列で並べ、下に白い帯を置く。
• 白ピル帯（pill-band）: 価格ボックス内の、選び方を案内する白いピル型の帯。
• 詳細ボタン（button-primary）: 白いピル型に赤文字。右端に赤い丸矢印を付け、下に黄色い影を置く。
• 特典ラベル（badge-feature）: 赤い角丸の板に黄色文字。ピン留め風のドットを付ける。
• お得バッジ（badge-burst）: 黄色のギザギザ星形に青文字で、お得感を示す。
• 白フチ見出し（heading-outline）: 黒文字に白い太フチを付けた、極太の商品名見出し。2行で中央に揃える。
• 入数タブ（count-tab）: 画面の左端から出る白い片側ピル型に、青文字で入数を書く。
• 吹き出し（speech-bubble）: 白い角丸の吹き出しに赤文字で、補足のひとことを書く。

Do's and Don'ts

Do - 商品ごとに地の色を切り替え、リズムを作る。 - 価格は特大の黒数字で、ひと目で読めるようにする。 - 切り抜き写真に白フチを付け、大胆に重ねる。 - 星やギザギザの装飾を散らして、賑やかにする。 - 注釈は価格ボックスの直下にまとめる。

Don't - くすんだ色やパステルだけで構成しない。 - 細い明朝体や繊細な書体を使わない。 - 価格ボックスから黒枠を外さない。 - グラデーションの多用やぼかし影で、フラット感を崩さない。 - 余白を広くとりすぎて、静かな印象にしない。

Page Structure

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

1. ファーストビュー（期間・コラボ・商品群を一度に伝える）: 空と芝生の背景にキャラクターを集合させる。弧状のロゴ帯を置き、下の黄色地に商品の切り抜き写真を並べる。
2. 新作の主力商品（目玉商品を訴求する）: 背景の上に商品を特大で置く。黄色の商品名ラベル、白文字の本文、詳細ボタンを添える。
3. 商品紹介（黄色地）（カップ商品の価格を案内する）: 白フチ見出し、写真、本文、価格ボックス、注釈の順に並べる。
4. 商品紹介（緑地）（サンデーの特典を訴求する）: 弧で緑地に切り替える。赤ラベル、吹き出し、白カードで特典を説明する。
5. 商品紹介（青地）（特典付き商品を紹介する）: 青地にキャラクターの線画を透かす。白カードにグッズの説明図を載せる。
6. テイクアウトセット（持ち帰り商品とおまけを訴求する）: 緑地に箱の写真を置く。入数バッジとグッズ写真を添える。
7. 入数別ボックス（サイズ別のお得さを比較させる）: 青地に箱の写真、入数タブ、お得バッジ、価格ボックスを繰り返す。
8. ケーキ紹介（予約商品へ誘導する）: 黄色地に号数のピルと価格を並べ、詳細ボタンを置く。
9. プレゼントキャンペーン（アプリ連動の特典を告知する）: 緑地に黄色の大見出しを置く。白カードに景品を4つ並べ、注釈とボタンを添える。
10. フッター注釈（注意事項と権利表記を示す）: 芝生と城の背景イラストの上に、白文字で注釈を並べる。

Imagery

• 商品は真正面からやや俯瞰で撮り、背景を切り抜く。
• キャラクターやグッズには白フチを付けて、シール風にする。
• 地には星や単色の線画を薄く散らす。
• 空・芝生・城のような明るいゲーム風の背景を使う。
• おまけのグッズは、使っている場面がわかる説明図にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP のカラムを中央に約750px幅で置き、左右は地の色で埋める。
• 価格ボックスの2列構成は PC でも維持する。
• PC では見出しを1.3倍程度まで拡大する。
• 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 行書くと起動時に読み込まれる。