DESIGN.md — 炭酸泡とピンク×ミントのグラデ季節限定ドリンクLP（Fizzy Gradient Seasonal Drink Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、清潔・爽やか、かわいい
• キーワード: 炭酸の泡・縦グラデーション・商品ごとの色替え・夏の期間限定・ブラシ文字のオノマトペ
• 地の質感: 全面に細かな水滴と泡の写真テクスチャを薄く重ね、冷たくシュワっとした質感を出す
• 形: 角丸の帯や枠、吹き出し型の上辺、筆で塗ったような円形バッジ、斜めに傾けたテキスト帯
• 温度感: 涼しげで明るい。暖色ピンクと寒色ミントを並べて対比させる

Colors

• 地色は白→ピンク→紫→白→グリーン→水色と縦に連続グラデで繋ぐ
• 各商品セクションはテーマ色1色でバッジ・ポイント枠・カード見出しを統一する
• CTAボタンは全セクション共通の濃紺に固定し、テーマ色と競合させない
• 色地の上の本文は白、淡い地の上は濃紺かテーマ色で書く
• 見出し帯は水色→紫の横グラデーションを使う
• point-bubble は文字 #FEFEFE × 背景 #C3569D のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4995、4.55:1）を使う。
• flavor-card は文字 #C3569D × 背景 #F5E9F2 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4995、4.52:1）を使う。
• product-badge は文字 #FEFEFE × 背景 #C3569D のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4995、4.55:1）を使う。
• intro-band は文字 #FEFEFE × 背景 #039AC0 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#02809F、4.54:1）を使う。
• date-badge は文字 #FEFEFE × 背景 #C3569D のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4995、4.55:1）を使う。
• callout-label は文字 #C3569D × 背景 #F5E9F2 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE4995、4.52:1）を使う。

Typography

• オノマトペは画像化したブラシ文字で斜めに配置する
• キャッチは強調語だけ大きくテーマ色にし、波線の下線を付ける
• バッジ内の商品名は白の極太ゴシックで3行に組む
• 写真の注記ラベルは縦書きで細い枠に入れる
• 本文は中央寄せか左揃えの短い行で、白文字は色地のみに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は幅いっぱいの大きさで中央に置く
• 写真の左右に引き出し線付きの縦書きラベルを置く
• バッジとコピーは写真の左上・右上に重ねる
• ポイント枠→本文→おすすめカード→案内文→ボタンの順を商品ごとに繰り返す

Elevation & Depth

• おすすめカードは白い外側グローでふんわり浮かせる
• 商品写真に影を付けず、泡の背景に馴染ませる
• ボタンとポイント枠は影を付けないフラットな面

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた商品写真とアイスの切り抜きを重ねる
• セクション境界: 直線を使わず、地色のグラデーションと大きな曲線の色面で区切る
• ポイント枠は上辺に吹き出しの尖りと白い半円ラベルを付ける
• バッジは筆塗り風のギザギザ円
• 導入の帯は斜めにカットした横長の帯

Components

• 一覧ボタン（button-primary）: 濃紺のピル型ボタン。右端に＞矢印を付ける
• ポイント吹き出し枠（point-bubble）: テーマ色の角丸枠。上辺に吹き出しの尖りと白い半円のPointラベルを付け、中に白い見出しを置く
• おすすめカード（flavor-card）: 淡い地のカード。グラデの帯ラベル、テーマ色の商品名、説明を左に、アイスの写真を右に置く
• 商品名バッジ（product-badge）: 筆で塗ったような円に白抜きの商品名。上に赤い傾けた見出しを添える
• 導入グラデ帯（intro-band）: 水色→紫の横グラデーションの斜め帯に白の太字を置く
• 期間バッジ（date-badge）: 右上の紫の角丸面に開始日と終了日を縦に並べる
• 期間限定価格（price-label）: 濃紺の丸に期間限定の文字、横に大きな価格を置く
• 写真注記ラベル（callout-label）: 縦書きの小さな枠ラベルを細い引き出し線で写真と繋ぐ

Do's and Don'ts

Do - 商品ごとにテーマ色を決め、セクションの地・枠・バッジを揃える - 泡の質感テクスチャを全セクションに薄く重ねる - 同じ部品の並び順を商品ごとに繰り返す - CTAは全セクション共通の濃紺ピル型にする

Don't - 真っ白なフラット背景にしない - セクション間を硬い直線で区切らない - CTAにテーマ色を使わない - 暗い色や重いトーンを広い面に使わない - 本文を長く詰めて書かない

Page Structure

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

1. ファーストビュー（新作ドリンクと販売期間・価格を一目で伝える）: 2つのカップを斜めに重ね、ブラシ文字のオノマトペを上下に配置。右上に期間バッジ、左下に価格を置く
2. 導入コピー（商品コンセプトを3行で伝える）: グラデの斜め帯、色分け＋波線下線のキャッチ、もう1本の帯を縦に並べる
3. 商品紹介1（新作フレーバーの見た目と構成を見せる）: ピンク地に商品名バッジ、傾けたコピー、大きな写真と縦書きの注記ラベルを置く
4. ポイント・おすすめ1（味の特徴と組み合わせるアイスを提案する）: 紫のポイント吹き出し、白い本文、おすすめカード、濃紺の案内文と一覧ボタン
5. 商品紹介2（定番フレーバーを紹介する）: 白→緑の曲線の色面で切り替え、緑のバッジと写真、注記ラベルを置く
6. ポイント・おすすめ2（味の特徴とおすすめの組み合わせを伝える）: ティールのポイント吹き出し、おすすめカード、一覧ボタンを1品目と同じ型で並べる
7. 注釈（画像の扱いや販売条件を補足する）: 水色地の左下に濃紺の小さな文字で※付きの注釈を2行置く

Imagery

• 透明なカップに入ったかき氷状のソーダを真正面から撮り、背景を切り抜く
• カップの上にアイスを丸く盛り、果肉やトッピングの色をはっきり見せる
• 背景は水滴と気泡のマクロ写真を薄く敷く
• オノマトペはかすれたブラシ文字で、氷の質感を表すテクスチャを入れる
• おすすめのアイスは単体で真上から切り抜いて撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に最大幅 480〜600px の SP 版の列を置き、左右に泡テクスチャを広げる
• PC では商品紹介を写真と説明の 2 カラムにしてもよい
• グラデーションの地は全幅に引き伸ばし、色の順番は変えない
• ボタンは PC で幅 320px 前後に固定する

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