DESIGN.md — 水色×青×蛍光イエローのSNS風お酒キャンペーンLP（Pop SNS Campaign Gacha LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: SNS投稿カード風・ギザギザ爆発バッジ・蛍光イエロー強調・ガチャ・レア度・ジグザグ区切り・方眼背景
• 地の質感: フラットなベタ塗りに、細い方眼グリッドと濃紺の硬い落ち影を重ねる。グラデーションはほぼ使わない
• 形: 角丸小さめのカード、ギザギザの星形、吹き出し、斜めカットのラベル、セクション境界はジグザグ
• 温度感: 明るく賑やかで若い。寒色ベースに蛍光色で熱量を足す

Colors

• 水色地と濃い青地のセクションを交互に置き、境目はジグザグで切り替える
• 青地の上は白と蛍光イエローの文字、水色地の上は青文字
• 数字・金額・キーワードは蛍光イエローの塗りか縁取りで強調
• ライムグリーンは見出しラベル帯と番号丸、装飾の曲線に使う
• ピンクは小さな装飾（ハート、曲線、価格）に限定
• カードには濃紺の落ち影を右下にずらして付ける
• FAQだけ生成り地とベージュ文字で落ち着かせる
• faq-item は文字 #AB9A75 × 背景 #FAFAFB のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#82724F、4.5:1）を使う。

Typography

• 数字は本文の3〜5倍に大きくし、単位は小さく添える
• 強調数字は白抜き＋青の太い縁取り＋濃紺の落ち影にする
• 1行の中で文字サイズと色を混ぜ、キーワードだけ大きくする
• 見出しは中央揃え、本文は短く左揃え
• SNSカード内のアカウント名は小さい太字の青
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品サムネイルだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 画面の左右端に細い青い縦ラインを引いて全体を枠で囲む
• SNSカードは左右に少しずつずらしてジグザグに重ねる
• 金額の段は爆発バッジを左、金額を右に並べる
• レア度の表は斜めカットの青ラベル＋白い横帯
• 特徴セクションは方眼地に、見出しラベル帯を写真の角に重ねる

Elevation & Depth

• カードとラベルに濃紺のぼかさない落ち影（右下4〜6px）
• ぼかしたドロップシャドウは使わない
• お客様の声の埋め込みカードだけ薄いグレー枠

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。商品は正方形サムネイル。ボトルは切り抜き横並び
• セクション境界: 細かいジグザグ（ノコギリ波）で色を切り替える
• CTAは角丸なしの長方形に落ち影
• 強調数字の背景はギザギザの星形
• 吹き出しは丸みのある角丸と小さなしっぽ
• 番号は丸の中に数字

Components

• 主CTAボタン（button-primary）: 蛍光イエローの長方形に青の太字、濃紺の落ち影と白い外枠
• SNS投稿風カード（sns-post-card）: 白地に青枠、左上に丸アイコンとアカウント名、下部にいいね等のアイコン列
• 爆発バッジ（burst-badge）: ギザギザの星形に巨大数字を重ねる
• 吹き出し（speech-bubble）: 白い角丸の吹き出しに当選確率や短い訴求
• 見出しラベル帯（label-band）: ライムグリーンの帯に濃い青枠と落ち影、写真の角に重ねる
• カウントダウン（countdown）: ライム地に白い小箱で数字を並べる
• レア度の帯（rarity-row）: 左に斜めカットの青ラベル、右に白帯と黄縁取りの金額
• FAQアコーディオン（faq-item）: 白いカードに赤いQ、ベージュの質問文、右端に＋

Do's and Don'ts

Do - 数字と金額をとにかく大きく、縁取りと落ち影を付ける - SNSの見た目（アカウント名・アイコン列）をカードに借りる - 曲線・稲妻・ハートなどの小さな装飾を余白に散らす - 青と水色の帯をジグザグで交互に切り替える - 注釈は小さく、必ず強調の近くに置く

Don't - くすんだ色や黒基調にしない - ぼかした影やグラデーションで高級感を出さない - 明朝体を使わない - 装飾のない大きな余白だけの静かな構成にしない - ピンクを大きな面に使わない

Page Structure

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

1. ファーストビュー（企画名と期間を一目で伝える）: スマホ画面とSNSカードのイラストに巨大数字、斜めの英字、方眼背景
2. カウントダウンと導入（締切と企画の趣旨を伝える）: ライムのカウントダウン帯、色違いの強調入り中央揃え文、黄色の枠付き帯
3. 商品説明（商品の仕組みを短く説明）: 青地に大見出し、大きなイラストの周りに白い吹き出しを3つ
4. 3つの魅力（購入メリットの提示）: 番号付きSNSカードを左右にずらして重ねる
5. 抽選特典（賞品の豪華さを訴求）: 青地に爆発バッジ＋金額＋当選確率の吹き出しを段で並べる
6. 商品例（入る商品のイメージ）: 暗い背景の商品写真を入れたSNSカードを重ねる
7. 達成特典（目標達成時の追加特典）: 数字パネルと特典の段階表（売切れ・近日表示はグレー被せ）、注釈
8. 担当者コメント・推移グラフ（親しみと応援の呼びかけ）: SNSカード内に本文、折れ線グラフをピンクで描く
9. プラン紹介とCTA（購入へ誘導）: ライム方眼地の商品写真パネルと割引バッジ、黄色CTA
10. お客様の声（実際の投稿で信頼を得る）: SNS埋め込みカードを横スクロール
11. レア度説明（ランクと価格帯を示す）: 斜めカットラベルの帯表、マスコット付き説明パネル、商品2カラム
12. 実績（販売数と満足度で安心感）: 青地に爆発バッジの数字、黄色の円グラフ
13. 品質の特徴（作り手と管理体制を伝える）: 方眼地に写真＋ライムのラベル帯＋短い本文を繰り返す
14. よくある質問（疑問の解消）: 生成り地に白いアコーディオンカードを縦に並べる

Imagery

• イラストは太い線のフラットな描画で、青・黄・ライム・ピンクだけを使う
• 稲妻・くるっとした曲線・ハート・星などの小さなパーツを散らす
• 絵文字風の表情アイコンを見出し末尾に添える
• 商品写真は暗い背景にスポット光で高級感を出す
• 人物写真は作業場や畑で働く自然なドキュメンタリー調
• ボトルを切り抜いて横一列に並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅（約 450px）のカラムを固定し、左右は水色地で埋める
• 左右の青い縦ラインはカラムの端に付ける
• PC では両脇にイラストの装飾や CTA を固定で置いてもよい
• 横スクロールの口コミは 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 行書くと起動時に読み込まれる。