DESIGN.md — 氷と紺青の爽快柑橘サワー LP（Icy Blue Citrus Sour LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、力強い・インパクト、信頼・誠実
• キーワード: 氷・紺青・柑橘・透明感・金のアクセント・シズル
• 地の質感: 氷塊・炭酸の泡・水しぶきの写真を全面に敷き、冷たく湿った質感を出す
• 形: 角丸はほぼ使わない直線的な四角。見出しは下線、円グラフなど幾何形を大きく使う
• 温度感: 寒色中心で冷涼。フレーバー色と金色でわずかに温度を足す

Colors

• 地は紺青→氷写真→白→紺の順で切り替え、冷たさを保つ
• 強調数字や品質バッジにだけ金色を使う
• 商品ごとにボタンと英字タイトルをフレーバー色に変える
• 暗い写真セクションでは白文字に絞る
• 購入導線は濃紺地に白カードで載せる
• badge-quality は文字 #B69E5F × 背景 #FFFFFF のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#88743E、4.55:1）を使う。
• stat-circle は文字 #B69E5F × 背景 #004F91 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• コンセプト文は中央揃えで字間を広く取る
• 実感訴求の見出しは極太で数字だけ金色にする
• 英字タイトルは大きく淡い色、和文商品名を直下に濃く置く
• ボタン文字は字間を大きく空けて三角矢印を添える
• 注釈は小さく 10px 程度で枠内や画像下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品を画像左・文字右の 2 カラム
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真セクションは全幅で敷く
• 本文ブロックは中央揃えで左右 10% 程度の余白
• 商品は缶 2 本→英字→説明→バッジ→ボタンの縦積み
• 購入先カードは画面幅いっぱいに近い白カードを縦に並べる

Elevation & Depth

• 影はほぼ使わずフラット
• 缶写真は切り抜きで浮かせ、氷や果物と重ねて奥行きを出す
• フッターのピル型ボタンに薄い影

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・缶・果物は切り抜き、背景は全幅の角版
• セクション境界: 直線で色地と写真を切り替える
• 主ボタンは角なしの長方形
• 品質バッジは金の細線で囲む四角
• セクション見出しは文字下に細い横線
• 数値訴求は大きな円で見せる

Components

• 商品詳細ボタン（button-primary）: フレーバー色のグラデ長方形、白文字と右向き三角
• 下線見出し（heading-underline）: 短い見出しの下に細い横線を引く
• 品質バッジ（badge-quality）: 金の細枠に二つの特長語と注釈
• 数値円グラフ（stat-circle）: 濃紺の大円に金色の大きな数字
• 動画カルーセル（video-carousel）: 暗い動画サムネに再生ボタンと左右矢印、ドット
• 購入先カード（shop-card）: 濃紺地に白カード、ロゴ中央と右下に外部リンクアイコン
• ナビ帯（nav-bar）: 濃紺の細帯にロゴとハンバーガー
• SNS ボックス（sns-box）: 淡青面にアイコン列とピル型ボタン 2 つ

Do's and Don'ts

Do - 氷・泡・水しぶきの写真で冷たさを常に見せる - フレーバーごとに色を一貫して切り替える - 金色は数字と品質バッジだけに使う - コンセプト文は中央揃えでゆったり組む - 最後に購入先への導線をまとめる

Don't - 暖色の地を広く使わない - ボタンを丸めすぎない - 金色を本文や広い面に使わない - 写真の上に細く暗い文字を置かない - 飲酒注意の表記を省かない

Page Structure

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

1. ファーストビュー（冷やして飲む提案を印象づける）: 紺青地に人物 2 名と氷塊の切り抜き、白い手書き風の大見出し、下部に一行コピー
2. ナビ（ページ内移動）: 濃紺の細帯にロゴとメニュー
3. コンセプト（こだわりを情緒的に伝える）: 淡い氷と柑橘の写真に紺文字を中央揃えで並べ、末尾にロゴ
4. CM 動画（広告世界観の共有）: 暗いバー写真に再生ボタンと大きな半透明ロゴ
5. こだわりのポイント（製法の説明）: 暗い素材写真の上に白文字。下線見出し→大見出し→短い段落
6. お客様の声（数値）（満足度の数値訴求）: 氷の写真地に極太見出しと濃紺の円グラフ、金の数字、下に注釈
7. 動画カルーセル（追加 CM の紹介）: 横スライドのサムネと矢印・ドット
8. 商品ラインナップ（フレーバー別の紹介）: 白地に泡と果物。缶 2 本、色付き英字、説明、金バッジ、色ボタンを繰り返す
9. 購入店舗・EC（購入へ誘導）: 濃紺グラデ地に白カードで店舗案内と EC ロゴを縦に並べる
10. フッター（企業リンク・SNS・注意表記）: 白地に 2 列リンク、淡青の SNS 箱、紺帯に注意表記

Imagery

• 透明な氷塊を白っぽい背景で明るく撮って切り抜く
• 柑橘の断面をみずみずしく写し、画面の端からはみ出させる
• 缶は正面の切り抜きで大小 2 本を並べる
• 炭酸の泡や水しぶきの写真を淡く背景に敷く
• 人物は白シャツとエプロンで笑顔、グラスを持たせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は人物 2 名と中央のグラスを横一列に配置
• PC のナビは横並びのテキストメニュー
• PC の商品は缶左・文字右の 2 カラム
• PC の数値訴求は見出し左・円グラフ右
• PC の EC カードは 3 列横並び、フッターはリンクと SNS を左右に

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