DESIGN.md — 真紅×カラフルハートの菓子キャンペーンLP（Pop Red Heart Snack Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: 真紅の地・ハートモチーフ・手描き落書き・カラータイル・丸窓写真・SNSシェア
• 地の質感: フラットな単色の面。手描きの白い線画とキラキラ装飾を散らす
• 形: ハート・円・大きな角丸パネル・ピル型。影はずらした赤い面で付ける
• 温度感: 暖色寄りで高彩度。明るく元気な印象

Colors

• 地は赤と白を大きく交互に切り替える
• 赤地では文字・線・番号の丸枠を白にする
• 主役の見出しは赤・緑・橙・桃など1文字ずつ色を変えたロゴ風にする
• 白パネルの下に、ずらした淡いピンクか赤の面を敷いて影にする
• カラフルなハートタイル帯で区切りと賑わいを出す
• ボタンは赤地に白文字。カードのラベル帯は焦げ茶
• ribbon-badge は文字 #FFFFFF × 背景 #5BC3DB のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#218096、4.57:1）を使う。
• panel-pink-cta は文字 #E70012 × 背景 #FF6773 のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FFF8F9、4.55:1）を使う。

Typography

• 見出しは極太。サブコピーは斜線「＼ ／」で挟む
• 英字の小見出しは赤い太字で、和文見出しの上に置く
• 本文は中央揃えで、短く改行する
• 強調したい数字は赤で大きくする
• 強調語は赤文字にし、下に波線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品とカードは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃えで組む
• 写真の丸窓は左右に互い違いに配置する
• 手順は番号の丸、円形画像、説明文を横に並べる
• 白い角丸の大パネルを赤地の上に浮かせる
• 装飾のハートや線画は余白にはみ出させる

Elevation & Depth

• ぼかしの影は使わない
• 白パネルの右下に淡いピンクの面をずらして重ね、影にする
• カードにはごく薄い影を付けてよい

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は円形または大きな角丸。商品は切り抜きで見せる
• セクション境界: 巨大な白ハート、カラーハートのタイル帯、赤と白の直線の切り替え
• 円とハートを主な形にする
• 大パネルは角丸28px前後
• 期間の表示や規約へのリンクはピル型
• 斜めの短いカラー線を角に散らす

Components

• ダウンロードボタン（button-download）: 赤い角丸の矩形に白文字を3行で入れ、下に小さなアイコンを置く
• 規約リンクのピル（button-pill-outline）: 赤地に白枠のピル型。右端に丸いプラスアイコンを置く
• 期間表示バー（period-pill）: 左に赤の見出しラベル、右に白いピル型の日付欄
• リボン見出し（ribbon-badge）: 水色のリボン型バッジに白文字。数を強調する
• 手順の丸窓（step-circle）: 白丸枠の番号と、ピンクの影付き円形画像のセット
• 作り方カード（recipe-card）: 上が白地の商品写真、下が焦げ茶の帯で名前と下向き矢印
• ハートタイル帯（heart-tile-band）: パステル地の正方形に、スティックとカラーハートを並べた横帯
• 誘導パネル（panel-pink-cta）: サーモン地の角丸パネルに、淡いピンクの2択ボタンと矢印

Do's and Don'ts

Do - 赤と白の切り替えでリズムを作る - ハートと手描きの落書きを余白に散らす - 写真は円形に切り抜き、ずらした影を付ける - 見出しは1文字ずつ色を変えたロゴ風にする - 注釈は小さく、本文の直下に置く

Don't - くすんだ色や暗いトーンを主役にしない - ぼかしの強いドロップシャドウを使わない - 明朝体など堅い書体を使わない - 角の尖った直線的なカードを多用しない - 赤地に黒文字を置かない

Page Structure

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

1. ファーストビュー（キャンペーンの第一印象をつくる）: 赤地に人物と商品の写真。周りにロゴ風見出しと手描き線画、カード型のハートを散らす。下に3分割のナビ帯
2. キャンペーン概要（企画の内容を伝える）: ハートタイルの背景に巨大な白ハートを置き、中に英字小見出し・サブコピー・本文。下に英字の大見出し
3. 利用シーン（一緒に撮る相手を例示する）: 丸窓写真を左右に互い違いに置き、円弧に沿った手書き風キャプションとハートカードを添える
4. メッセージ提案（デコして渡す使い方を提案する）: 縦長のピル型の赤い面に白文字と、メッセージカードの写真
5. 商品紹介（対象商品を一覧で見せる）: 見出し、赤の強調文、水色リボン。商品の切り抜きを横に並べる
6. AR機能紹介（体験の内容を見せる）: 赤地にロゴ風見出しと、スマホ画面のモック2枚を傾けて配置。期間のピルを置く
7. 対象商品とフィルター一覧（商品ごとの違いを示す）: 白の大パネル。上部の淡ピンク地に商品グリッド、下に番号付きのフィルター例を縦に並べる
8. 遊び方（手順を説明する）: 赤地に番号の丸と円形画像、白文字の説明。その後に撮影のコツを、角丸写真と波線付きの見出しで示す
9. デコレーション企画（作る楽しさを提案する）: 白地に英字小見出しと見出し。色地を背景にした作品写真を3×2のグリッドで並べる
10. 作り方ガイド（作り方の情報へ誘導する）: 誘導パネル、動画の埋め込み、2列の作り方カードとダウンロードボタン
11. コミュニティ誘導（投稿を促して締める）: 赤地に白文字の導入と、角丸の白枠で囲んだバナー

Imagery

• 人物は明るい自然光で撮り、笑顔と商品をはっきり見せる
• 写真は円形か角丸で切り抜き、ずらした色の影を付ける
• 白い手描きの線画（ハート・星・矢印・ペン）を散らす
• パステル地にビビッドなハートを並べたタイル柄を使う
• 商品は真正面の切り抜きで、白背景のグリッドに並べる
• 作品写真は単色やグラデーションの色地に中央配置で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の最大幅を約1000pxにして、左右を赤地か白地で埋める
• PCのFVは横長にし、人物を右、ロゴを左に置く
• 手順はPCで3列に横並び
• 作り方カードはPCで6列
• 誘導パネルと動画はPCで2列に並べる
• フィルター一覧は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 行書くと起動時に読み込まれる。