DESIGN.md — 黄色×泡ドットの炭酸チューハイ LP（Bold Yellow Sparkling Bubble Drink LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、清潔・爽やか
• キーワード: 炭酸の泡・黄色ベタ・黒太ゴシック・巨大英字・商品ごとの地色・線画イラスト
• 地の質感: フラットなベタ面に白や灰色の円ドットを散らして泡を表す。後半は紙っぽい質感のグラデーションと和中華風の装飾。
• 形: 真円・ピル型ボタン・不定形の色ブロブ。境界は直線でぱきっと切り替える。
• 温度感: 前半は明るく元気な暖色。中盤は落ち着いたグレー。後半は色が多く華やか。

Colors

• 前半のブランド紹介は黄色ベタ地と黒文字だけで強いコントラストを出す。
• 黄色地には白の真円ドットを大小ばらばらに散らし、泡に見せる。
• 商品ラインナップはグレーと白の地を交互にし、灰色の泡ドットを散らす。
• 商品名の背景には商品カラー（黄・赤・水色）の不定形ブロブを敷く。
• シリーズ商品はピンク→オレンジ→赤と商品ごとに地色を変え、文字は白にする。
• ボタンは地色に関係なく白（白地のときはグレー）のピル型、文字は黒にする。
• country-heading は文字 #FFFFFF × 背景 #FF661A のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D24600、4.55:1）を使う。

Typography

• 本文は太めのゴシックで書き、キーワードだけ1.5倍の大きさにして目立たせる。
• 強調語は太いダブルクォートで囲む。
• 英字見出しは画面幅いっぱい、または縦向きにはみ出させて大胆に置く。
• シリーズ商品だけ明朝見出しにし、英字国名を◆装飾ではさむ。
• 本文は基本中央揃え。ブランド紹介だけ左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。歴史セクションだけ縦見出し+本文の 2 列
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは全幅の色帯にして直線で切り替える。
• 商品ブロックは瓶写真→商品名ブロブ→説明文→ボタンの順に中央へ縦に積む。
• 楽しみ方は白い円の中にイラストを入れ、下に点線付きの見出しを置く。
• 本文の行間は広めにとり、上下にもたっぷり余白をとる。
• 上部に4項目のアンカーナビをグレー帯で置く。

Elevation & Depth

• 影は基本的に使わず、フラットな面で構成する。
• 商品瓶の写真だけ切り抜きで浮かせて見せる。
• シリーズ枠には細い装飾罫で囲んだ額縁を使う。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品瓶は背景を抜いた切り抜き。飲食店の写真は全幅の角なし横スクロール。イラストは真円の中に入れる。
• セクション境界: 直線で地色を切り替える
• 泡は大小の真円をランダムに配置する。
• 商品名の背景は手描き風の不定形ブロブにする。
• 吹き出しは黒線の角丸ラベルに、左下へしっぽを付ける。
• 歴史の年表は黒線の大きな円と、黒丸の矢印でつなぐ。

Components

• 商品情報ピルボタン（button-pill）: 白地に黒太字と▶を付けたピル型。中央に置き、幅は約55%。
• 巨大英字見出し（giant-en-heading）: 画面幅いっぱいの黒の英字。縦向きにして左端に置いてもよい。
• 吹き出しラベル（speech-label）: 白地に黒枠の角丸吹き出し。見出しの上に添える。
• 商品名ブロブ（name-blob）: 商品カラーの不定形ブロブに、商品名を小・大・小の3段で黒太字で組む。
• イラスト円カード（illust-circle）: 白い大きな円に線画イラストを入れ、下に字間を広げた見出しと点線を置く。
• 年表サークル（timeline-circle）: 黒い細線の大きな円の中に年と出来事を書き、黒丸の矢印でつなぐ。
• アンカーナビ（anchor-nav）: グレー帯に黒太字のメニュー4項目を横に並べる。
• 国名付き明朝見出し（country-heading）: ◆で装飾した英字国名の下に、白い明朝の商品名を3段で組む。

Do's and Don'ts

Do - 黄色地には必ず白の泡ドットを散らす。 - 見出しと本文は黒の太字で、強いコントラストを保つ。 - 商品ごとに地色を変えて、帯を切り替える。 - ボタンはどの帯でも同じ白のピル型にそろえる。 - 瓶は大きな切り抜き写真で中央に置く。

Don't - 黄色地に細い文字や淡い色の文字を置かない。 - グラデーションや影を多用しない（シリーズ部分は例外）。 - ボタンを角張った形や派手な色にしない。 - ページの前半で明朝体を使わない。 - 泡ドットを規則正しく並べない。

Page Structure

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

1. ナビ+ファーストビュー（ブランドと商品を一目で見せる）: グレー帯のナビの下に、白地の水しぶき写真。左にロゴ、右に瓶とグラス。
2. コンセプト（味と飲み方の魅力を伝える）: 黄色地に大きな見出し。キーワードを拡大した左揃えの本文と、泡ドットを置く。
3. 合言葉・飲食店紹介（親しみと実際に飲まれている場面を見せる）: 白地に吹き出しラベルとハート入りの大見出し。店の写真を横スクロールで並べる。
4. 歴史（長く愛されてきたことを示す）: 黄色地に巨大な英字、縦書き見出し+本文。網点風の旧瓶と年表サークルを置く。
5. 楽しみ方（飲み方を3つ提案する）: 薄グレー地に英字の小見出し。円イラストカードを3つ縦に並べる。
6. 商品ラインナップ（定番商品を紹介する）: 縦向きの巨大英字。グレーと白の帯を交互にし、瓶・ブロブ名・説明・ボタンを置く。
7. シリーズ紹介（限定シリーズの世界観を見せる）: ティールのグラデーション地に額縁、筆記体の英字、トランクとイラストを置く。
8. シリーズ各商品（各フレーバーを紹介する）: ピンク・オレンジ・赤の帯に、民族柄の装飾、白い明朝の商品名、白いピルボタン。
9. 関連バナー・フッター（他ブランドへの導線と法的表記）: 白地にバナーカルーセルとドットインジケーター。SNSアイコン、リンク、飲酒に関する注意書き。

Imagery

• 瓶は正面から撮り、背景を切り抜く。結露やきらめきを残す。
• ファーストビューは白背景に、水しぶきと氷入りグラスのモノクロ寄りの写真。
• 飲食店の写真は暖色の居酒屋の雰囲気で、料理と瓶を一緒に写す。
• イラストは黒の線画に、グレーと水色の2色だけで塗る。手や瓶を描く。
• 旧商品は黄色地に網点の黒1色で、レトロ印刷風にする。
• シリーズでは花・提灯・雲・パンダなど、その国のモチーフを平面イラストで散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文を中央の約70%幅に収め、色帯は全幅のまま。
• PCの商品ブロックは瓶と説明を左右2列にし、左右を交互に入れ替える。
• PCの楽しみ方は円カードを3つ横に並べる。
• PCの年表サークルは4つを横に並べ、矢印でつなぐ。
• 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 行書くと起動時に読み込まれる。