DESIGN.md — 紺夜空×黄色のパン懸賞キャンペーン LP（Midnight Navy Bakery Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、情報量多め・訴求型
• キーワード: 夜空・星のきらめき・紺と黄・白い皿・リボン見出し・レシート応募
• 地の質感: 紺地にうっすら紙のざらつきと、明るい紺の大きな丸いブロブ形を重ねる。応募パートは細い縦ストライプの水色地。
• 形: 角丸カード、ピル型ボタン、手描き風のリボン帯見出し、円形の皿、四芒星のきらめき
• 温度感: 落ち着いた夜の涼しさに、黄色の灯りで温かみを足す

Colors

• 賞品・対象商品・FAQ・問い合わせは紺の夜空地に白文字で組む。
• 応募方法から注意事項までは水色ストライプ地に白カードを敷き、紺文字にする。
• 黄色は賞品コース帯、FV の告知帯、CTA ボタンだけに使い、面積は小さく保つ。
• CTA は濃い山吹色に紺文字で、下に灰紺の影をずらして付ける。
• 赤は撮影時の必須項目や NG の × マークだけに使う。
• 紺地には明るい紺の丸いブロブと白・黄の四芒星を散らして奥行きを出す。

Typography

• ロゴ・セクション見出し・CTA は太い丸ゴシックで柔らかく見せる。
• 本文と規約はゴシックで、行間を 1.8 前後と広めにとる。
• 日付や金額の数字は本文より大きくし、単位や曜日は小さく添える。
• 見出しは中央揃え、本文は左揃えにする。
• 条件文は「＼ ／」で挟み、金額だけ黄色で大きくする。
• セクション見出しは字間を広くとり（0.15em 程度）ゆったり組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。対象商品だけ 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約 28px の余白をとり、水色地の上に置く。
• 対象商品は 2 列で、写真の下にキャプションを中央揃えで置く。
• STEP は 1 枚の長いカード内に縦に積み、それぞれに見出し・説明・線画を入れる。
• CTA は幅 85% 程度で、カードの外の地に置く。
• FAQ は全幅の区切り線リストで、右端に + を付ける。

Elevation & Depth

• CTA の下に灰紺のずれ影（0 6px 0）を付け、押せる立体感を出す。
• 賞品画像の箱にはふんわりした落ち影を付ける。
• 白カードには影を付けず、地の色との差だけで浮かせる。
• FV の告知帯（黄色）は傾けた矩形を重ね、わずかに影を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜きの切り抜き。料理は円い皿ごとの俯瞰で、画面端に半分はみ出させる
• セクション境界: FV の下端はゆるい波形。それ以外は直線で地の色を切り替える
• セクション見出しは手描き風の白いリボン帯に紺文字（紺地ではリボンを白線に）
• サブボタンは白地に紺枠のピル型で、右に ＞ を付ける
• NG 例は灰色の角丸パネルに赤い × を載せる
• 撮影項目の枠は紺の太線で囲む角丸ボックスにする

Components

• 応募 CTA ボタン（button-primary）: 山吹色のピル型ボタン。紺の太字を載せ、右端に紺丸の矢印アイコン。下に灰紺のずれ影。
• アウトラインボタン（button-secondary）: 白地に紺の 2px 枠のピル型。右に ＞ を付け、補足ページへ誘導する。
• リボン帯見出し（ribbon-heading）: 両端が切れ込んだ、波打つ白いリボン。上に星を 3 つ並べ、中に字間の広い丸ゴシックを入れる。
• コース名帯（course-band）: レモン黄の角丸横長帯に紺文字。上に「＼ ／」で挟んだ条件文を置く。
• 黄色丸バッジ（badge-circle）: 黄色の丸に紺字で、賞品数などを 2 行で書く。見出しの左上に重ねる。
• 白い情報カード（info-card）: 白い角丸カード。淡黄帯の小見出しと本文を交互に並べる。
• STEP 手順（step-block）: 中央に STEP 番号の太字、その下に説明文。淡い青円の背景に白黒の線画を載せる。
• FAQ アコーディオン（faq-item）: 紺地に白文字の質問。上下に細い紺線、右端に細い +。
• 規約スクロール枠（terms-scroll）: 紺地に細い白枠の矩形を置き、中の規約文はスクロールで読ませる。

Do's and Don'ts

Do - 紺地には四芒星のきらめきと丸いブロブを必ず散らし、夜空らしさを出す。 - 黄色は帯・バッジ・CTA に限って使い、視線をそこへ集める。 - 応募手順は線画イラストと短い文で、段階ごとに区切る。 - 日付や金額は大きな数字で目立たせる。 - CTA は応募説明の後と注意事項の前の 2 か所に置く。

Don't - 黒や純粋なネイビー以外の暗色を地に使わない。 - CTA を角張った矩形や紺色にしない。 - 白カードに強い影や太い枠線を付けない。 - 紺地の上で、本文に黄色を多用しない。 - 写真に強いフィルターをかけたり、暗く加工したりしない。 - 明朝体を混ぜない。

Page Structure

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

1. ファーストビュー（キャンペーン名と賞品の魅力、期間を一目で伝える）: 紺の夜空の中央に大きな白い皿を置き、ロゴ文字と紺のリボンを載せる。周囲にパンと料理の写真、右上に吹き出し型の当選数バッジ。下に黄色の告知帯と、大きな数字の期間表示。
2. コンセプト導入（夜にパンを楽しむ提案で共感を得る）: 白地に円形のロゴマークと流れ星の線。紺の見出しの下に、中央揃えの短い詩的な文を数行並べる。
3. 賞品・応募コース（コースごとの条件と賞品を示す）: 紺地にリボン見出し。条件文、黄色のコース帯、賞品名と当選数を大きな白文字で、その下に賞品画像と※注釈。
4. 対象商品（購入すべき商品を知らせる）: 紺地に、商品の切り抜き写真と商品名を 2 列のグリッドで並べる。
5. 応募概要（期間・方法・発表方法を整理して伝える）: 水色ストライプ地に白カード。淡黄帯の小見出しで項目を区切り、カードの下に CTA。
6. 応募の流れ（3 段階の手順で迷わず応募できるようにする）: 白カードに STEP1〜3 を縦に並べ、それぞれに線画イラストとアウトラインボタン。
7. 撮影方法と NG 例（無効な応募を防ぐ）: 必須項目を紺枠ボックスに赤字で示し、レシート図には赤枠と番号を付ける。NG 例は灰色パネルに × を付けて並べる。
8. 注意事項・CTA（細かな条件を確認させ、応募へ誘導する）: CTA ボタンの後に、ストライプ地へ「・」の箇条書き。重要な部分は太字と下線で示す。
9. 応募規約（法的な条件を掲載する）: 紺地に星と白い見出し。白い細枠のスクロールボックスに規約を入れる。
10. よくある質問（疑問を解消する）: 紺地に、線で区切ったアコーディオンを並べる。
11. お問い合わせ・フッター（連絡先と関連情報を示す）: 連絡先と対応時間を白文字で載せ、その下に関連バナー 2 枚、SNS アイコン、ロゴ、コピーライト。

Imagery

• 料理は白い皿ごと真上から撮った俯瞰写真にし、画面の四隅に半分はみ出させて配置する。
• パンは焼き色が分かる明るい切り抜き写真にし、斜めに散らす。
• 商品パッケージは白背景の切り抜きで、正面から撮る。
• 手順のイラストは黒い線画に淡い青の円背景を合わせ、手とスマホのモチーフにする。
• 装飾には白・黄の四芒星のきらめきと流れ星の破線を使う。
• レシートの説明は白黒の模式図にし、赤枠と丸数字で示す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP を中心幅 480〜600px に収め、左右に紺の夜空地を広げる。
• PC では FV の皿の周りに料理写真を増やし、横長に配置する。
• 対象商品は PC で 3〜4 列にする。
• 白カードは最大幅 720px で中央に置く。
• NG 例は 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 行書くと起動時に読み込まれる。