DESIGN.md — 鮮緑×黒の飲料キャンペーン LP（Vivid Green Botanical Beverage Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、シンプル・ミニマル、レトロ
• キーワード: 鮮やかな緑・黒の帯・唐草飾り・白の線枠・瓶の商品写真・大人の炭酸
• 地の質感: ほぼフラットな単色の面。背景に淡い緑の線画イラストとモザイク状の四角を透かして入れる。
• 形: 角のない白い線枠と、黒のピル型。区切りには小さな三角の矢印を使う。
• 温度感: 爽快で、少し刺激のあるクールな温度感

Colors

• 地はほぼ全面を単一の緑で塗る。セクションごとに地色を変えない。
• 黒はファーストビューのパネルとピル型ボタンだけに限定して使う。
• 文字は原則として白。緑の地の上で黒い文字は使わない。
• 黄色はテキストリンクの下線付き文字だけに使う。
• 金色は限定バッジ 1 か所だけのアクセントにする。
• 背景のイラストは地より少し明るい緑の線で、模様として目立たせない。
• step-card は文字 #FFFFFF × 背景 #019945 のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01873D、4.63:1）を使う。
• terms-block は文字 #FFFFFF × 背景 #009946 のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#00873E、4.63:1）を使う。

Typography

• 見出しは明朝、本文とボタンはゴシックに分ける。
• セクション見出しは中央揃えにし、左右に渦巻き状の唐草飾りを置く。
• 規約の小見出しは【】で囲んだ太字にする。
• STEP 番号は字間を広めにした欧文セリフで、手順名の上に置く。
• 本文は左揃え。行間を 1.7 以上取り、長文でも読みやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• STEP カードは左にテキスト、右にアイコンや写真を置く 2 分割にする。
• STEP カードは縦に積み、カードの間を下向きの三角でつなぐ。
• 商品写真はページの中央に大きく置く。
• 規約は余白の左右を約 18px にして、全幅で流し込む。

Elevation & Depth

• 影は使わず、すべてフラットにする。
• 奥行きは、黒パネルと緑の地のコントラストだけで出す。
• 商品の瓶写真だけは、切り抜きの立体感を残す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 瓶は背景を抜いた切り抜き写真にする。アイコンは黒の太線で描いた白塗りのピクトにする。
• セクション境界: 直線の境界は使わない。余白と見出しで区切る。ファーストビューは斜めにジグザグした分割にする。
• STEP 枠は角丸なしで、2px の白線にする。
• ボタンは完全なピル型にする。
• バッジは金色の円形にする。

Components

• 斜め分割のファーストビュー（hero-split）: 左上に黒いパネルを置いてキャンペーン訴求を書き、右側には緑の地に商品瓶と縦書きのコピーを置く。
• 限定バッジ（badge-limited）: 金色の円の中に、黒の太字で 2 行の限定表示を入れる。
• 唐草飾りの見出し（heading-ornament）: 白い明朝の見出しを、左右対称の唐草アイコンで挟む。
• STEP カード（step-card）: 白線で囲み、中は緑の地のまま。番号と手順名を置き、右にピクトを添える。カードの下に三角の矢印を付ける。
• 黒のピル型アコーディオン（accordion-pill）: 黒のピル型の中に、白い太字のラベル 2 行を中央に置く。右端に＋アイコンを付ける。
• 規約テキストブロック（terms-block）: 【】で囲んだ小見出しと本文、番号付きリストを白文字で流し込む。
• 黄色リンク（text-link）: 黄色の文字に下線を引いて、問い合わせや規約へのリンクにする。

Do's and Don'ts

Do - 緑一色の地を最後まで通し、統一感を保つ。 - 見出しは必ず明朝にして、唐草飾りで挟む。 - STEP は番号・手順名・ピクトの 3 点セットで作る。 - 黒は面積を絞り、効かせ色として使う。 - 注釈は ※ を付けた小さな文字で添える。

Don't - グラデーションのボタンや、影の強いカードを使わない。 - 緑以外の地色のセクションを挟まない。 - STEP 枠に角丸を付けない。 - 本文に黒や灰色の文字を使わない。 - 飾りやアイコンを多色にしない。

Page Structure

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

1. ファーストビュー（特典の内容と商品を一目で伝える。）: 黒パネルに特典の数字を特大で載せ、ロゴと限定バッジを添える。右側は緑の地に瓶の写真と縦書きのコピーを置く。
2. 商品紹介（商品の特徴を短く説明する。）: 中央に大きな瓶写真を置き、明朝の商品名と 3〜4 行の説明を続ける。背景には線画イラストを透かす。
3. 応募方法（参加手順を 3 ステップで示す。）: 白線枠の STEP カードを縦に並べ、カードの間を三角でつなぐ。
4. 対象店舗一覧（開始日ごとに対象店舗を開閉して見せる。）: 黒のピル型アコーディオンを 2 つ縦に並べる。
5. 応募要項・規約（期間・特典・注意事項を明示する。）: 【】の小見出しと番号付きリストで、白文字の長文を組む。
6. お問い合わせ（問い合わせ先へ誘導する。）: 最後に黄色の下線リンクを 1 行置く。

Imagery

• 茶色の瓶は背景を抜き、正面から撮った商品写真にする。
• 背景には、乾杯や注ぐ動作を描いた手描きの線画と英字の一言を、地より少し明るい緑で大きく敷く。
• ファーストビューの周囲には、斜めに流れるモザイク状の四角を散らす。
• ピクトは、スマホや用紙などを黒の太線と白塗りでシンプルに描く。
• 見出しの左右には渦巻きの唐草オーナメントを置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、黒パネルと瓶の構図をそのまま広げる。
• PC の商品紹介は、左に瓶、右にテキストを置く 2 カラムにする。
• PC の STEP カードは 3 枚を横並びにし、間を右向きの三角でつなぐ。
• PC のアコーディオンは 2 つを横に並べる。
• PC の規約は中央寄せの約 80% 幅にし、文字を小さめにする。

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