DESIGN.md — 紺×ピンクの祭り風お酒ガチャ LP（Festive Gacha Carnival Liquor LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、和風
• キーワード: カーニバル・ガチャ・縁日・グラデーション文字・コイン紙吹雪・市松模様
• 地の質感: 紺の面にうっすら市松模様を敷く。ピンクから水色へのグラデーションと、光沢のある立体文字を使う
• 形: 角丸カードと角丸のタブ見出し。斜めの帯リボンと和柄の雲を添える
• 温度感: 暖色と寒色が強くぶつかる、お祭りらしい高揚感

Colors

• 外側は水色で埋め、中央の細いカラムだけに中身を置く
• 特典を紹介するブロックは濃紺の面に白文字で組む
• ピンクから水色へのグラデーションは見出しの文字と帯にだけ使う
• CTA は必ず赤に白文字。周りに金色のコインを散らす
• こだわりの紹介は赤の面に切り替えて、見え方に変化をつける
• FAQ は生成りの地に白い行を並べ、色を抑える
• page は文字 #8A6A3E × 背景 #92CBE6 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#EBF6FA、4.53:1）を使う。
• button-primary は文字 #FFFEFD × 背景 #EA2F49 のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E81835、4.52:1）を使う。
• button-sub は文字 #8A6A3E × 背景 #F2C94C のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6C5331、4.53:1）を使う。
• countdown は文字 #FFFEFD × 背景 #EA3B85 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E1186D、4.58:1）を使う。

Typography

• 見出しは極太の書体に白いフチ取りと影をつけ、立体的に見せる
• 強調したい語だけをピンクのグラデーションにする
• 数字は本文の 3 倍以上の大きさにし、単位は小さく添える
• 縦書きのラベルを斜めに置いて、動きを出す
• FAQ は細めのゴシックで落ち着かせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央に約 480px のカラムを置き、左右の水色の余白にロゴを飾る
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに角丸の色ブロックを置き、ブロックの間に生成りの地を見せる
• 見出しはブロック上辺にかかるタブとして配置する
• 特典は「その1〜3」の順に、1 つずつ大きなブロックで見せる
• CTA は特典紹介の後とページの中ほどに繰り返し置く
• FAQ は全幅の行を縦に積み重ねる

Elevation & Depth

• カードには影をつけず、色の面で区切る
• 見出しの文字にだけ濃い影とフチ取りをつけて立体感を出す
• CTA ボタンの下に濃い色の影をつけ、押せそうに見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品ボトルは切り抜いて斜めに並べる。体験談の写真は角丸の四角で切る
• セクション境界: 角丸のブロックを積み重ね、ところどころに斜めの帯やギザギザのリボンを挟む
• タブ見出しは両端を丸めたピル型にする
• 番号ラベルは小さなピル型で見出しの左に置く
• チェックボックス風の四角でジャンルの選択を表す

Components

• 赤い CTA ボタン（button-primary）: 赤のピル型ボタンに白文字と矢印を入れる。金色のコインを周りに添える
• 金色のサブボタン（button-sub）: 一覧表などへ移る金色のピル型ボタン。黒い右矢印をつける
• タブ見出し（tab-heading）: 淡いピンクのピル型に番号ラベルと太字の見出しを並べ、ブロック上辺にかける
• 特典の一覧帯（benefit-list）: 紺の面の上に、番号と短い特典名を書いたピンクのピル型を 3 段重ねる
• カウントダウン帯（countdown）: ピンクの帯の上に、残りの日・時・分・秒を白い小箱で並べる
• SNS 投稿カード（sns-card）: 白いカードに投稿の本文と写真を載せ、横スクロールで並べる
• 番号バッジ（number-badge）: 赤の面に白抜きの大きな 2 桁番号を入れる
• FAQ アコーディオン（faq-item）: 白い行の先頭に赤い Q、右端に＋を置き、本文は茶色の文字で書く

Do's and Don'ts

Do - 見出しは極太の書体にグラデーションとフチ取りを重ねる - コインと紙吹雪をブロックの角に散らし、賑やかさを出す - 特典は番号をつけて 1 つずつ大きなブロックで見せる - 水色の外側背景と生成りの中央カラムの対比を保つ - CTA を 2 回以上繰り返して置く

Don't - 細い明朝体や、くすんだ色で上品にまとめない - CTA を赤以外の色にしない - 中央カラムを全幅に広げない - FAQ にまで装飾を入れすぎない - 写真を角張った無装飾の枠に入れない

Page Structure

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

1. ファーストビュー（企画の楽しさと開催期間を伝える）: ピンクのグラデーション背景に、ロゴ風の見出しとボトルを扇状に並べる。日付を大きく入れ、下にカウントダウン帯を置く
2. 企画の紹介（企画の概要と特典 3 つの全体像を見せる）: 紺のブロックに大きな数字の訴求を入れ、斜めの帯の下に特典の一覧帯を 3 段並べる
3. 特典その1（お得さを金額で示す）: 紺の面にボトルを斜めに並べ、グラデーションの大きな金額を置く
4. 特典その2（ジャンルを選べることを伝える）: ピンクの面に白いカードを置き、ボトルの線画とチェック欄を横に並べる
5. 特典その3（当たりの期待感を高める）: 紺の面に集中線を入れ、倍率と最大額を立体的な大きな文字で見せる
6. CTA（購入へ誘導する）: 上に割引の帯を置き、ボトル写真と赤いピル型ボタンを並べる
7. レア度の紹介（ランクの仕組みを見せる）: 暗い面にランクを書いたボトルをスポットライト風に並べ、金色のボタンを置く
8. お試しプラン（気軽に試せる選択肢を示す）: ピンクから水色へのグラデーションの帯に、大きな数字の見出しと赤い CTA を置く
9. お客様の声（体験談で安心感を与える）: 紺の帯の上で、SNS 投稿カードを横スクロールで並べる
10. こだわり（品質を裏づける）: 赤い市松模様の面に番号バッジと写真を入れ、白文字で説明する
11. よくある質問（不安を取り除く）: 生成りの地に中央揃えの見出しを置き、白いアコーディオンの行を縦に積む

Imagery

• カラフルなボトルを切り抜き、扇状や斜めに並べる
• 金色のコイン、紙吹雪、紅白の雲の和柄を装飾として散らす
• ガチャのカプセルや招き猫風の小さなイラストを添える
• 体験談の写真は自宅のテーブルに置いた商品を自然光で撮る
• 製造の現場は温かみのある実写で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では中央カラムを画面幅いっぱいに広げ、余白は 12px 程度にする
• PC は約 480px の中央カラムのまま、左右の水色の余白にロゴと雲の和柄を飾る
• SNS 投稿カードはどの画面幅でも横スクロールにする
• 大きな数字の見出しは SP で 36〜44px に収める

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