DESIGN.md — 青方眼×黄枠のポップなお菓子キャンペーンLP（Pop Blue Grid Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 方眼紙・リングノート・黒フチ・黄色ラベル・雲と星・市松模様
• 地の質感: 青地に白い細線の方眼グリッド。白カード内は薄いグレーの方眼。後半は無地のオレンジと生成り。
• 形: 黒く太いフチ線とずらした影がついたピル型ラベル。四角いカードはやや角丸。写真は円形に切り抜く。
• 温度感: 高彩度でにぎやか。青と黄・オレンジの補色対比が強い。

Colors

• 前半の訴求・応募エリアは青方眼の地に白カードを載せる。
• セクション見出しは黄色の地に黒フチをつけ、文字は黒にする。
• 強調語には白文字＋黒フチ、または赤ピンクで色を差す。
• 手順説明エリアはオレンジ地に生成りのパネルを置き、見出しはオレンジ文字にする。
• FAQだけは淡いクリーム地にして、黄色の下線で区切る。
• 黄緑はステップ番号バッジだけに使う。
• step-badge は文字 #FFFFFF × 背景 #8CC63F のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#5A8126、4.56:1）を使う。

Typography

• 見出しは極太のディスプレイ書体を使い、白文字＋黒フチで立体的に見せる。
• 日付は数字を大きく、年月日の字を小さくして強弱をつける。
• 本文は14px前後のゴシック。注釈は10〜11px。
• 手順エリアの見出しは丸ゴシックのオレンジ文字で、やわらかくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。商品一覧は3列のグリッド。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約7%ずつ青地を残して中央に置く。
• セクション見出しのラベルはカードの上辺に少し重ねる。
• 商品画像は3列グリッドに並べ、下に品名を2行で置く。
• 手順は番号付きのリストで縦に並べる。

Elevation & Depth

• ラベル・カード・ボタンには、ぼかしなしの黒い影を右下に4px程度ずらしてつける。
• ふわっとしたドロップシャドウは使わない。
• 手順写真の円には白いフチだけをつける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 手順写真は円形に切り抜く。商品画像は背景を抜いて置く。
• セクション境界: 直線で地色を切り替える。青からオレンジへ全幅で切り替える。
• 見出しラベルは黄色のピル型に黒の太フチ。
• ボタンは角をギザギザにしたラベル型で、右に丸い矢印アイコンを置く。
• カードの上辺にはリングノートの綴じ輪を並べる。
• 吹き出しは黒フチの角丸で、しっぽをつける。

Components

• 黄ピル見出し（section-label）: 黄地に黒の太フチと右下の影をつけ、極太の白黒文字を置くセクション見出し。
• ラベル型ボタン（button-primary）: 黄地に黒フチ。上段に小さく説明、下段に大きく行動を書き、右に黒丸の矢印を置く。
• リングノートカード（notebook-card）: 白い方眼地のカード。黒フチで、上辺に綴じ輪を並べる。
• グレー小見出し（sub-label）: カード内の区切りに使うグレーの角丸帯。文字は白。
• 吹き出し（speech-bubble）: クリーム地に黒フチの吹き出し。アプリなどの案内に使い、横にスマホのイラストを置く。
• 丸数字リスト（step-number）: 黄色の丸に黒数字を入れ、手順を縦に並べる。
• FAQ行（faq-item）: クリーム地に「Q.」付きの太字質問と回答を置き、黄色の下線で区切る。
• 葉型STEPバッジ（step-badge）: 黄緑の葉の形に白でSTEP番号を入れ、円形写真の左上に重ねる。
• 規約スクロール枠（scroll-terms）: 白地に細い枠線をつけ、固定の高さで中をスクロールさせる規約ボックス。
• 点線注意枠（dotted-note-box）: オレンジの点線で囲み、写真2枚と注釈を入れる枠。

Do's and Don'ts

Do - 青い方眼の地に、雲と星のイラストを散らす。 - 見出し・カード・ボタンには必ず黒の太フチと、ぼかしなしの影をつける。 - 応募期間は大きな数字で、時計アイコンと一緒に見せる。 - 手順説明はオレンジ地＋生成りパネルに切り替えて、読みやすくする。 - 商品は背景を抜いた画像をグリッドで並べる。

Don't - 淡いパステルや、グラデーションを主役にしない。 - ぼかしたソフトシャドウを使わない。 - 細い明朝体を使わない。 - フチなしのフラットなボタンにしない。 - 青エリアに長い本文を直に置かない。本文は必ず白カードに入れる。

Page Structure

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

1. ファーストビュー（コラボ企画と当選人数を伝える。）: ピンクのピルに当選数、極太のロゴ文字の組み合わせ。黒×黄の額縁の中に人物写真をグリッドで並べる。
2. 特典訴求（買うと賞品がもらえることを示す。）: 白黒フチの大見出しの下に、黄白の市松の床を敷き、商品と賞品を並べる。
3. 応募期間（期間を明示する。）: 黄ラベル見出しと時計アイコンの下に、黄の極太数字で日付を2行で書く。
4. 対象商品と賞品（対象商品と賞品を一覧で見せる。）: リングノートカードの中に、グレー帯の小見出し、3列の商品グリッド、ギザギザ形のバッジを置く。
5. 応募手順（アプリでの応募方法を案内する。）: 吹き出し＋スマホのイラスト、ラベル型ボタン、黒枠の中に丸数字のリストを置く。
6. 注意事項（条件を補足する。）: カードの下部に※付きの小さい注釈を並べる。
7. 応募規約（規約を掲載する。）: 白いスクロール枠に収める。
8. よくある質問（疑問を解消する。）: クリーム色のパネルに、Q太字の質問と黄色の下線を並べる。
9. 動画で解説（作り方を動画で見せる。）: オレンジ地にする。青フチのタブレット型の枠に動画を埋め込む。
10. ステップ解説（手順を写真で説明する。）: 生成りパネルに、円形写真＋葉型バッジ＋オレンジの見出し＋説明を置き、下向き三角でつなぐ。最後は点線の注意枠。

Imagery

• 商品パッケージは背景を抜いて、少し傾けて重ねて置く。
• 人物は明るい自然光で、食べている笑顔を撮る。色帯付きのグリッドに並べる。
• 白い雲（黒の細線つき）と黄色い星を、青地の余白に散らす。
• 手順写真は白背景で手元を真上から撮り、円形に切り抜く。
• スマホ・タブレット・時計は黒フチのフラットなイラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは、左にタイトル、右に額縁写真の2カラムにする。
• PCでは本文カードを中央に寄せ、幅は画面の約60%にする。左右の青地に雲を多く置く。
• PCの商品グリッドは5列に広げる。
• PCの手順ステップは、左に円形写真、右にテキストの横並びにする。
• 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 行書くと起動時に読み込まれる。