DESIGN.md — 原色ブロックと果物柄の夏のアイスキャンペーン LP（Vivid Summer Fruit Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 原色ブロック・夏の果物・キャラクター・切り抜き商品写真・白抜き価格・斜め境界
• 地の質感: ベタ塗りの面に小さなドット柄と、薄い果物シルエットの透かしを重ねる。キラキラ星を散らす
• 形: 角丸カード、ピル型ボタン、円形バッジ、ジグザグ縁のラベル、斜めのセクション境界
• 温度感: 暖色寄りの高彩度。夏らしく明るくにぎやか

Colors

• 商品ごとにセクションの地色を変え、ピンク→山吹→水色→オレンジ→黄緑と原色でブロック分けする
• ベタ面の上の本文・価格は白文字に統一する
• 商品名ラベルは地色の淡いトーンか同系の濃色で塗り、少し濃いピンクの文字にする
• 価格の前のサイズ表記は濃い同系色の丸バッジに白文字
• プレゼント告知は黄色の帯と水色の大きな文字で目立たせる
• グラデーションは使わず、すべてベタ塗りにする
• menu-tile は文字 #E4237A × 背景 #FDF202 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD196A、4.53:1）を使う。
• button-secondary は文字 #E4237A × 背景 #FDFDFE のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD196A、4.55:1）を使う。
• product-label は文字 #E4237A × 背景 #F6C3CA のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD196A、4.56:1）を使う。
• size-badge は文字 #FCFDFE × 背景 #E4237A のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD196A、4.54:1）を使う。
• present-box は文字 #00A8E9 × 背景 #E4237A のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• bonus-card は文字 #FCFDFE × 背景 #00A8E9 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#007CAC、4.6:1）を使う。
• deal-tag は文字 #E4237A × 背景 #FFF231 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD196A、4.56:1）を使う。

Typography

• 見出しと価格は極太の丸ゴシックにする
• 価格の数字は本文の2.5倍以上の大きさにする
• 大見出しは白フチやドロップシャドウを付けて立体的に見せる
• 本文は中央揃えにせず左揃えで3〜4行にまとめる
• 注記は※付きで小さく、地色上は白を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューだけ 2 列グリッド、プレゼント一覧は 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は画面幅いっぱいか、端からはみ出すくらい大きく置く
• 商品名ラベルは右か左に寄せ、写真と重ねる
• 価格行は『サイズバッジ＋価格』を2組横に並べる
• 説明→点線→価格→注記の順番をそろえる
• セクションの切り替えは斜めの境界にする

Elevation & Depth

• カード・ボタンには下方向に濃いめの影を短く落とす（0 4px 0 rgba(0,0,0,.15)）
• 切り抜き写真には柔らかいドロップシャドウ
• ラベルは右下に影を付けて浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜いて置き、付属品は円形に切り抜く
• セクション境界: 斜めの直線で区切る。FV下とフッター前は果物イラストの帯
• サイズ表記・お得表記は円形バッジにする
• 商品名ラベルは四角形で、上下の縁をジグザグにすることもある
• NEWバッジはギザギザの円にする
• 囲みカードは角丸20px程度で、太い縁を付ける

Components

• メニュータイル（menu-tile）: 黄色の角丸カード。左に商品の切り抜き、中央に商品名、右に下向き三角を置く。2列で並べる
• 詳細ボタン（button-secondary）: 白いピル型。ピンク文字の右に三角を付け、下に影を落とす
• 商品名ラベル（product-label）: 淡色の四角に太字の商品名。影付きで、上下の縁をジグザグにする場合もある
• サイズ丸バッジ（size-badge）: 直径40px前後の円に白文字でサイズ名。右に大きな白抜き価格を置く
• プレゼント告知ボックス（present-box）: 濃いピンクの角丸ボックス。上部に三角の吹き出しを付け、黄色の帯見出し、水色の大きな文字、景品のグリッドを入れる
• 付属品紹介カード（bonus-card）: 水色の角丸カードを白縁で囲む。白抜きの大きな見出しに、ピンク文字と白フチを付ける
• お得表記タグ（deal-tag）: 黄色い円の『○コ分おトク』と、白い枠に色帯を付けた個数タグを組み合わせる
• SNSシェアボタン（sns-buttons）: 白縁の円形アイコンを3つ横に並べる

Do's and Don'ts

Do - 商品ごとに地色を変え、色でブロックを区別する - 価格は白抜きの極太数字で大きく出す - 星のキラキラや果物のシルエットを地に散らす - 説明・価格・注記は同じ並びを繰り返す

Don't - くすんだ色や低彩度の色を使わない - 細い明朝体や細字を見出しに使わない - ベタ面に長文を詰め込まない - 写真を四角いまま並べない（切り抜きを基本にする）

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝える）: 黄色のドット地にロゴ風の大見出しを置く。キャラクターを集合させ、期間は円形バッジ、縦書きのコピーを添え、下端に果物の帯を入れる
2. メニューナビ（各商品へ移動させる）: 水色のドット地に黄色カードを2列×4段で並べる。CMへの誘導はピンクのカードにする
3. 新作商品（目玉の新商品を訴求する）: 山吹色の地に巨大な切り抜き写真を置き、newの丸バッジ、商品名ラベル、詳細ボタンを付ける
4. 商品紹介（カップ）（種類と価格を示す）: ピンクの地に3種類の写真をA/B/Cバッジ付きで斜めに配置する。説明、点線、価格2組、注記の順に並べる
5. 購入特典（プレゼントで購入を後押しする）: 濃いピンクのボックスに大きな見出しを入れ、景品を3列グリッドで一覧にする
6. セット商品（まとめ買い商品を訴求する）: 箱の写真に付属バッグの白カードを添え、価格を2組並べる
7. 付属品紹介（おまけの付属品を訴求する）: 水色の囲みカードに白抜きの大見出しと付属品の写真を入れる
8. 持ち帰り商品・ドリンク（その他の商品を紹介する）: 山吹色、水色の順に地色を変え、斜めの境界でつなぐ。付属品は円形の切り抜き
9. サイズ別ボックス（個数ごとのお得さを比較させる）: オレンジの地に箱を4段並べ、点線で区切る。お得タグと価格行をそれぞれ付ける
10. ケーキ（予約商品へ誘導する）: 黄緑の地にジグザグのラベルを置き、緑のカードに商品名、白いピル型の詳細ボタン、価格を並べる
11. 動画・SNS・注記（CM視聴、拡散、法的な注記）: 果物の帯の下を黄色の地にし、動画埋め込み、円形のSNSアイコン、黒文字の注記を並べる

Imagery

• 商品は真上やや斜めから明るく撮り、背景を切り抜いて影を付ける
• 果物（みかん・いちご・レモン輪切り）をフラットなイラストで帯状に並べる
• 地には同系色の濃淡で果物や星のシルエットを大きく透かす
• 白い四芒星のキラキラを余白に散らす
• キャラクターは太い線のアニメ調で、元気なポーズを集合させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に幅480px前後のSPレイアウトを置き、左右を地色かドット柄で埋める
• PCでもセクションの地色は横幅いっぱいに伸ばす
• メニューはPCでは4列にしてもよい
• プレゼント一覧は4〜5列に広げてもよい

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