DESIGN.md — レモン黄×銀灰の左右分割コラボ飲料 LP（Lemon Yellow Split Collab Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、力強い・インパクト、清潔・爽やか
• キーワード: 左右2色分割・レモン黄・水色見出し・黒帯告知・缶写真の羅列・炭酸の泡
• 地の質感: フラットな単色の面に、レモンの切り抜き写真と白い泡の円を散らして炭酸の爽快感を出す
• 形: 角のない長方形の帯とパネルが基本。バッジは正円、ボタンはピル型
• 温度感: 明るく暖かい黄色と、クールなグレーや水色を対比させる

Colors

• 背景はページ中央で縦に分け、左を黄色、右をシルバーグレーにする。2種類のパッケージの色に合わせる
• メインのコピーと小見出しは水色の極太ゴシックにして、黄色の地とはっきり対比させる
• 告知やキャンペーンは黒いパネルに黄色の大見出しと白文字で載せる
• 商品一覧は白いパネルを水色の太枠で囲み、背景から切り離す
• プロフィールなど読ませる部分は白地に黒文字だけにする
• フッターは黒の全幅帯で締める
• badge-circle は文字 #FFFFFF × 背景 #089EF3 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#067CBF、4.52:1）を使う。

Typography

• 見出しは太さ 700〜900 のゴシックだけを使い、明朝は使わない
• メインのコピーは 3〜4 行に分け、行ごとに中央揃えにする
• キーワードは鉤括弧で囲み、その部分だけ字を大きくする
• 本文は左揃えにし、13px 前後で行間 1.7 にする
• 英字の名前ラベルは大文字で、黒地に白文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。缶の一覧は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右分割の背景は全幅で、セクションをまたいで続ける
• 商品パネルは左右 8px の水色枠付きで、ほぼ全幅にする
• 缶は 2 本 1 組で並べ、その下に黒い名前ラベルを置く
• CTA 帯は全幅で、左に缶の画像、中央に文字、右に矢印アイコンを置く
• 権利表記はブロックの右下に小さく右揃えで入れる

Elevation & Depth

• 影はほとんど使わず、フラットな面で構成する
• 缶の切り抜き写真だけが立体感を担う
• レモン写真は前景に重ねて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 缶は背景を透過して切り抜く。人物の集合写真は全幅の長方形、顔写真は縦長の小さいサムネイル
• セクション境界: 直線で色を切り替える。左右分割は中央の縦線
• パネルと帯は角丸なしの長方形にする
• 数量バッジは水色の正円にする
• ボタンだけピル型にする
• SNS アイコンは正円にする

Components

• 左右分割のファーストビュー（split-hero）: 黄色とグレーの背景に缶を 2 本並べ、極太ロゴ、縦書きの発売日、円形バッジを配置する
• 数量の円形バッジ（badge-circle）: 水色の正円に白抜き文字で種類数を示す。缶の上に重ねる
• 水色枠の商品パネル（product-frame）: 白地を水色の太枠で囲み、中に缶の組を 2 列で並べる
• 黒の名前ラベル（name-label）: 缶の組の下に置く、黒地に白の英字ラベル
• 黒の告知パネル（campaign-panel）: 黒帯に黄色の大見出しを入れ、缶の画像を挟んで、下の黒帯に白文字とボタンを置く
• 白のピル型ボタン（button-pill）: 黒パネルの中に置く白いピル型ボタン。左に SNS アイコンを付ける
• 商品詳細への CTA 帯（cta-band）: 全幅の黄色またはグレーの帯に、缶の画像・太字の文字・丸囲みの矢印を置く
• SNS シェアアイコン（share-icons）: 見出しの下に、ブランド色の円形アイコンを 3 つ横に並べる

Do's and Don'ts

Do - 背景の左右分割は、ページの前半を通して保つ - レモンの写真と白い泡を背景の端に散らす - 見出しは水色の極太ゴシックにして、太さを強く出す - 缶の写真は大きく扱い、主役にする - 告知は黒いパネルで目立たせる

Don't - パステル調などのくすんだ色を足さない - パネルに角丸や影をつけない - 細い明朝体や手書き風の書体を使わない - 見出しの水色をグラデーションにしない - 本文エリアに装飾を置かない

Page Structure

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

1. ファーストビュー（コラボ缶の発売を一目で伝える）: 左右分割の背景に、大ロゴ、缶 2 本、縦書きの発売日、円形バッジ、ミニ缶の列を置く
2. リード（企画の概要を伝える）: 商品名を小見出しにし、その下に水色の極太コピーを 3〜4 行で中央揃えにする
3. 動画（CM や紹介映像を見せる）: 全幅の 16:9 埋め込み
4. 商品ラインナップ（全デザインを一覧で見せる）: 大きな缶 2 本と円形バッジの下に、水色枠の白パネルを置き、缶の組と名前ラベルを 2 列で並べる
5. キャンペーン告知（プレゼント企画へ誘導する）: 黒パネルに黄色の大見出し、缶の画像、白文字、ピル型ボタンを入れる
6. プロフィール（コラボ相手の紹介）: 白地にロゴと英字の見出し、実績の太字テキスト、全幅の集合写真、顔写真の列、長い本文を続ける
7. 商品詳細への CTA（商品ページへ送る）: 黄色とグレーの全幅帯を 2 段にし、缶の画像と矢印を付ける
8. シェア（拡散を促す）: 中央の見出しと円形の SNS アイコン 3 つ
9. フッター（企業情報とポリシー）: 黒の全幅帯に、白のロゴとリンクを横に並べる

Imagery

• 缶は正面から撮り、背景を透過して切り抜く。光沢を残す
• 丸ごと・断面のレモンをくっきり切り抜き、画面の端で見切れるように置く
• 背景に白い泡の円を小さく散らす
• 人物は明るい自然光で集合写真と個別の顔写真を撮る
• イラストは使わず、写真と単色の面だけで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も左右分割の背景を全幅で続け、中央に約 900px のコンテンツを置く
• PC の缶一覧は 4 列にする
• PC のキャンペーン告知は、左に缶の画像、右に黒パネルの横並びにする
• PC のプロフィールは、左に写真、右に本文の 2 カラムにする
• PC の CTA 帯 2 つは、左右に並べて半分ずつの幅にする

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