DESIGN.md — ピンク縞×レモン黄のポップな酒巡りキャンペーンLP（Pop Pink Stripe & Lemon Yellow Stamp Rally Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、親しみ・手作り感
• キーワード: マゼンタ縞・レモンイエロー・黒線イラスト・スタンプラリー・抽選プレゼント・ご当地酒
• 地の質感: ピンクの縦ストライプと淡ピンクの斜めストライプ地。面は単色でフラット、写真は商品の切り抜き集合カット。
• 形: 角を斜めに落とした八角形パネル、ピル型ボタン、リボン型の見出し帯、丸数字。
• 温度感: 暖色寄りで高彩度。お祭りのような明るさと賑わい。

Colors

• 地は白を基本にし、ピンク縞帯とイエローのパネルで交互にリズムを作る。
• ピンクは見出し強調・ボタン・縞帯に使い、黄色の上の強調文字もピンクにする。
• 黄色パネル上の通常文字は黒。ピンク地の上の文字は白。
• 読み物セクションは淡ピンク斜め縞の外枠に白カードを載せる。
• サブ見出しは酒の種類ごとに色を変える（青緑・橙・ピンク・緑）。
• 注意事項の重要行だけ赤ピンク文字にする。
• button-primary は文字 #FFFFFF × 背景 #EA578F のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31E69、4.51:1）を使う。
• prize-row は文字 #E63082 × 背景 #FEFEFE のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11B74、4.52:1）を使う。

Typography

• 大見出しは太く丸みのある書体で、ピンクと黒を行ごとに切り替える。
• 抽選訴求の見出しは少し斜めに傾け、放射線と星の飾りを添える。
• 数字（個数・日付・名様）は文字より一回り大きく極太にする。
• 読み物の見出しは明朝体で落ち着かせ、ポップ部分と差をつける。
• 本文はゴシックで12〜15px、行間は広めにとる。
• 黄色パネルの説明文は中央揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算）
• FVはイラスト入りの全幅ビジュアル1枚。
• 黄パネル・白カードは左右4%の余白を残して中央に置く。
• 手順は「ステップ見出し帯＋淡クリーム説明」を積み、間に＋や↓の丸記号を挟む。
• 賞品一覧は1行ずつ「賞名・人数バッジ・内容」の横並びにする。
• 読み物は白カード内で項目ごとに細線で区切る。
• 締切ブロックはラベル箱と大きな日付を横並びにする。

Elevation & Depth

• ピル型ボタンは下方向に柔らかい影をつける。
• 白ボタン（資料案内）は上が白で下が淡いグレーのグラデーションに影をつける。
• 応募はがきの見本図には右下に落ち影。
• 黄パネル・カードは基本的にフラットで影なし。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜きの切り抜きで集合配置。人物はイラスト。
• セクション境界: 直線で切り替え。帯は縦ストライプ柄。黄パネルは四隅を斜めに落とす。
• 黄パネルは角を斜めにカットした八角形。
• 賞品紹介カードは太いピンク枠と角丸16px。
• 見出しリボンは両端を切り込んだ帯型。
• 番号は塗りつぶしの丸数字。
• リンクボタンは黒枠の角丸ボタンに外部リンクアイコン。

Components

• ピンクのピル型ボタン（button-primary）: 横幅いっぱいの丸ボタン。右端に＞の矢印、下に影。
• 角落とし黄色パネル（panel-yellow-octagon）: 四隅を斜めに切った黄色の面。説明文や抽選訴求を中央揃えで入れる。
• ピンク帯の見出しラベル（heading-pink-label）: 黄パネルの上端に載せる、角丸ピンクの見出し帯。文字は白。
• ダークの見出し帯（heading-dark-bar）: 両端を斜めに切ったダークグレーの帯に白の太字見出し。
• 手順ステップ（step-block）: 黄色帯に丸数字と大きな個数を入れ、下に淡クリームの説明を置く。間に＋や↓の丸記号。
• 賞品リスト行（prize-row）: 地域名＋ピンクの賞名、黄色の人数バッジ、黒文字の内容を1行に並べ、下線を引く。
• ピンク縞帯の案内エリア（stripe-band）: 縦ストライプのピンク地に、白いグラデーションボタンを2つ並べる。注釈は白文字。
• 地域の魅力読み物（article-section）: 丸アイコン＋明朝見出し、色付きサブ見出し、本文。そのあと淡黄ピル帯と黒枠リンクボタン。
• 締切表示（deadline-box）: ピンク塗りの四角ラベルと極太の日付を並べ、黄色の吹き出しで何回でも応募可能と伝える。

Do's and Don'ts

Do - ピンクと黄色の高彩度2色を主役にして、白で一息つかせる。 - 抽選訴求は放射線・星の飾りと傾けた文字で賑やかにする。 - 応募手順は図（はがき見本）と番号で視覚化する。 - 数値・日付は極太で大きく表示する。 - 後半の読み物は白カードと明朝見出しで落ち着かせる。 - 注意事項は白カードの中に箇条書きでまとめる。

Don't - くすんだ色やパステルだけでまとめない。 - 黄色の上に白文字を置かない。 - 写真の人物を主役にしない（イラストで統一）。 - 角丸の小さいボタンや細いボタンにしない。 - 読み物部分まで装飾を過剰にしない。 - 応募条件を本文中に埋もれさせない。

Page Structure

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

1. ファーストビュー（企画名と開催期間を伝える）: ピンク縞地に手書き風の大タイトル、黒線の人物イラスト、酒種の丸バッジ、下部に建物と列車のシルエット、期間を大きな数字で。
2. 企画の説明（造語・企画の意味を伝える）: 角落とし黄パネルの上端にピンク見出しラベル。中央揃えの本文と、ピンクの一文で締める。
3. プレゼント訴求（応募の動機づけ）: 白地に黒とピンクの大見出し。左右に放射線と星の飾り。
4. 参加方法（応募の流れを説明）: ダーク見出し帯、ピンク強調入り説明、はがき見本の図、黄帯のステップを＋↓でつなぐ。
5. 抽選訴求パネル（賞の種類と条件をまとめる）: 大きな黄パネルに傾けたピンク大見出し、条件文、ピンク文字の賞の列挙を角括弧で囲む。
6. 賞品紹介（賞ごとの当選数と内容を見せる）: ピンク枠カードにリボン見出し、賞品リスト行、下部に商品の集合写真と黄色地。
7. 誘導ボタン群（詳細ページへ誘導）: ピンクのピル型ボタン2つと、緑のお得情報バナー。
8. 資料案内（パンフレット・はがき印刷へ誘導）: ピンク縞帯に白のグラデーションボタン2つと白文字の注釈。
9. 地域の魅力読み物（酒の種類ごとの魅力を紹介）: 淡ピンク斜め縞地に白カード。項目ごとに丸アイコン＋明朝見出し、色付きサブ見出し、本文、外部リンク。
10. 注意事項と締切（応募条件と期限を明示）: ピンク縞地の白カードに箇条書き、締切ラベルと大きな日付、黄吹き出し、発送時期。下に白文字で飲酒の注意。
11. 主催・協賛（運営元を示す）: 白地に中央揃えで、小さなピンクのラベルと黒の小文字。
12. フッター（サイト共通ナビ）: グリーン地にアコーディオンメニューとリンク一覧、最下部は黒帯。

Imagery

• 人物は黒の太い線とピンク・黒・ベージュ・淡紫だけで塗ったフラットなイラスト。乾杯して走るような動きのあるポーズ。
• 背景の建物・列車は黒のシルエットにピンクの窓。
• 酒種は黒丸に黄色の手書き文字のバッジにする。
• 商品写真は瓶・パックを白抜きにして、すき間なく集合させる。
• 装飾は星・放射線・丸点などの線画を黒で入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央固定幅（約1000px）で、FVイラストを横に広げる。
• PCでは手順がステップ列とはがき図の2カラムになる。
• PCの賞品リストは2カラムのグリッドになる。
• PCの資料ボタンは横に2つ並べる。
• PCの注意事項は2カラム、締切ブロックは1行に横並び。
• ボタンはPCでは幅を約60%に縮めて中央に置く。

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