DESIGN.md — ライムグリーンの爽快ノンアル飲料 LP（Fresh Lime Green Non-Alcohol Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、ポップ・元気、ナチュラル、信頼・誠実
• キーワード: ライムグリーン・水しぶき・グラデーション・白い円バッジ・吹き出し・円形写真
• 地の質感: FV は鮮やかな緑のグラデーションに水滴と泡を散らす。本文は単色フラットな面。
• 形: 白い正円のバッジ、角丸の吹き出し、円形トリミングの写真、ピル型ボタン。
• 温度感: 涼しく明るい。緑の爽快感に、金色の CTA で温かみを少し足す。

Colors

• 前半の商品訴求は緑系、後半の FAQ・ラインナップは白地に紺と使い分ける。
• FV は左上の黄緑から右下の深緑へ斜めのグラデーションにする。
• セクション見出しの帯は、左の濃い緑から右の黄緑へ横グラデーションにする。
• 購入 CTA だけは金色のグラデーションにして、緑の中で目立たせる。
• 声の強調は緑かオレンジの太字で交互に変える。
• 容量表記や英字見出しの上のラベルには金茶を使う。
• heading-band は文字 #FFFFFF × 背景 #019403 のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#018A03、4.53:1）を使う。

Typography

• FV のキャッチは極太ゴシックの白文字にして、手書き風のサブロゴを重ねる。
• 声は 1 フレーズだけ大きく太くして強調する。
• 英字見出しの上には、日本語の小さな金茶ラベルを置く。
• 字間は広めの 0.05〜0.1em にする。
• キャプションと説明は中央揃えで短く改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。声・ゼロのバッジは 4 つ横並び、商品は 2〜4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの帯は画面幅の 90% で左右に余白をとる。
• 利用シーンは深緑の角丸パネルの中に、写真とキャプションを縦に積む。
• こだわりは円形写真・小見出し・説明を中央揃えで縦に並べる。
• 声の吹き出しは左右に交互にずらして配置する。
• ラインナップはボタンを 2 つ横並びにする（塗り＋線）。

Elevation & Depth

• 吹き出しには弱いドロップシャドウ（0 2px 8px 程度の薄い灰色）を付ける。
• FV の商品画像は水しぶきで立体感を出す。
• それ以外の面はフラットで影なし。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: こだわりは正円、利用シーンは角なしの長方形、商品は切り抜き
• セクション境界: 直線で地色を切り替える。見出しは横グラデーションの帯
• 数値の訴求は正円のバッジに入れる（FV は白地に緑文字、本文は緑地に白文字）。
• FAQ は細い紺線の円の中に大きな「？」を添える。
• 購入 CTA は角丸の小さな長方形で、右端に丸い矢印アイコンを付ける。
• 紺のサブボタンはピル型。塗りと白地＋紺線の 2 種類を用意する。

Components

• 通販 CTA（button-cta）: 金色グラデーションに濃紺のセリフ英字、右に丸い矢印
• ゼロ訴求の円バッジ（badge-zero）: 4 つの正円を横並びにし、太字 2 行で数値を訴求
• グラデ帯の見出し（heading-band）: 濃い緑から黄緑の横グラデーションの帯に白の太字を中央揃え
• スラッシュ見出し（heading-slash）: 見出しの左右を斜線で挟む緑の太字見出し
• お客様の声の吹き出し（voice-bubble）: 白い角丸の吹き出し。下に尾、薄い影、末尾に年代を添える
• 利用シーンのパネル（scene-panel）: 深緑の角丸パネルに、白の小見出し・写真・キャプションを繰り返す
• FAQ の円カード（faq-circle）: 紺の細線の円に大きな「？」、質問文、小さなグラスのイラストを入れる
• 紺のピルボタン（button-secondary）: 紺の塗りに白文字、または白地に紺線のピル型ボタン
• 商品カテゴリの帯（category-band）: 薄い灰色の帯に黒の太字見出しを中央揃え

Do's and Don'ts

Do - FV は黄緑から深緑のグラデーションにして、商品と水しぶきを中央に大きく置く。 - 数値の訴求は正円のバッジを 4 つ横並びにする。 - 購入 CTA は金色で統一する。 - 後半の情報パートは白地と紺で落ち着かせる。 - 写真は明るい屋外の自然光のものを選ぶ。

Don't - 緑の面に彩度の高い赤や紫を足さない。 - CTA を緑にして背景に埋もれさせない。 - 角の鋭い四角いボタンだけで構成しない。 - 吹き出しに濃い影を付けない。 - 説明文を長い段落にしない。

Page Structure

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

1. ファーストビュー（新しさと爽快感を伝える）: 緑のグラデーションの上に、斜めの青いリボン、極太の白キャッチ、手書き風サブロゴ、商品＋グラス＋水しぶき、ゼロのバッジ 4 つ、金色の CTA を順に置く
2. お客様の声（味の評価で共感を得る）: グラデ帯の見出しの下に白い吹き出しを 3 つ、左右交互に配置し、グラスとライムを添える
3. 利用シーン（飲む場面を提案する）: スラッシュ見出しの下に深緑のパネルを置き、4 シーンの写真とキャプションを並べる
4. 原材料へのこだわり（品質を伝える）: 円形写真 3 点に、色分けした小見出しと灰色の説明を付ける
5. ゼロ訴求（機能価値をまとめる）: 放射線装飾付きの大きな数字の見出しと矢印線、緑の円バッジ 4 つ、短い説明
6. CTA（通販へ誘導する）: 深緑の帯に白文字、金色のボタン、右に商品画像
7. よくある質問（不安を解消する）: 白地に英字見出し、紺線の円カード 3 つ、紺のピルボタン
8. ラインナップ（商品の一覧を見せる）: 切り抜きの商品画像に紺の商品名と金茶の容量、ボタン 2 種。灰色の帯でカテゴリを分ける
9. フッター（企業情報と注意喚起）: アコーディオン式のメニュー、淡い青灰色の地にバナー、飲酒の注意表示

Imagery

• 商品は切り抜きにし、水滴と水しぶきで冷たさを表現する。
• グラスのビールは白い泡が立った状態で、商品の横に添える。
• 利用シーンは自然光の屋外で、笑顔の 30〜40 代男女を写す。
• 原材料は麦・ホップ・渓流などの素材を寄りで撮り、円形に切り抜く。
• FAQ には小さなグラスのイラストと紺の小さな丸を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は横長にし、左に商品、右にキャッチ・バッジ・CTA を置く。
• PC の声は 2 列で、吹き出しを散らして配置する。
• PC の利用シーンは 2×2 のグリッドにする。
• PC のこだわりと FAQ は 3 列横並びにする。
• 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 行書くと起動時に読み込まれる。