DESIGN.md — 桃色の泡とこげ茶明朝の軽いお酒 LP（Soft Peach Sparkling Drink LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、ナチュラル
• キーワード: ピーチグラデーション・炭酸の泡・こげ茶明朝・半透明カード・ふんわり写真・横スクロール
• 地の質感: 細かい炭酸の泡と淡いぼかしが重なる、柔らかく透け感のある質感
• 形: 小さめ角丸カード、細線の円、FV 下端のゆるいアーチ
• 温度感: 暖色寄りでほんのり甘い温度感

Colors

• 地は白とピーチ〜杏色のグラデーションを交互に使う
• 文字はすべてこげ茶で、黒は使わない
• 赤はスローガンと法定注意文だけに限る
• カードは半透明の淡ピンク面にして、下の泡が透けて見えるようにする
• 写真には白いもやを重ねて彩度を落とす

Typography

• メインコピーは助詞を小さくし、名詞を大きくして強弱をつける
• 見出しは明朝体の細めのウェイトで静かに置く
• 本文は小さめのゴシック体で、行間を広くとる
• 数字は細い欧文で大きくし、ラベルは太字の小文字サイズにする
• 装飾的な太字や縁取りは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、動画と商品は横スクロールカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 12px の余白を残して画面幅いっぱいに置く
• 動画サムネイルは次の 1 枚の端が見える幅で並べる
• コピーは中央揃え、リードと見出しは左揃え
• 写真ギャラリーは余白なしの非対称グリッドにする

Elevation & Depth

• 影はほぼ使わず、半透明の面と白の縁取りで重なりを出す
• カードは淡い白の 1px 線と、ごく弱い影
• 果物の写真をぼかして前後に浮かせ、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の矩形。ギャラリーだけ角丸なしで隙間なく並べる
• セクション境界: FV 下端は白いアーチ、ピンク面の上端はゆるい波形
• 矢印ボタンは細線の白い円
• 数値は細線の円を 2 つ重ねて囲む
• 鋭い角や太い枠は使わない

Components

• バナーカルーセル（banner-carousel）: FV 直下に横長バナーを 3 枚並べ、左右の円形矢印で切り替える
• 動画サムネイルカード（video-card）: 番号とタイトルの下に縦長サムネイルを置き、中央に白い円の再生アイコンを重ねる
• スクロール進捗バー（scroll-bar）: カルーセルの下に置く細い横線。進んだ分をこげ茶で、残りを薄グレーで示す
• POINT カード（point-card）: 上半分に写真と POINT 番号、下半分の淡ピンク面に明朝の見出し・本文・注釈を置く
• 数値サークル（stat-circle）: 細線の円を 2 つ重ね、中に大きな欧文セリフの数字と単位を入れる
• 商品カルーセル（product-carousel）: 中央の商品を大きく、左右の商品を小さく見切れさせ、下に商品名とテキストリンクを置く
• 下線テキストリンク（text-link）: 小さなこげ茶の文字に下線を引く。ボタン代わりに使う
• シェア行（share-row）: ラベルの横に SNS の丸アイコンを並べ、下に赤の年齢注意文を置く

Do's and Don'ts

Do - 地に炭酸の泡のテクスチャとピーチのグラデーションを敷く - 文字はこげ茶の明朝で静かに語る - 写真に白いもやを重ねて柔らかく見せる - 番号付きの POINT カードで特長を 3 つにまとめる - 飲酒に関する注意文を必ず入れる

Don't - 原色の大きな CTA ボタンを置かない - 黒文字や太いゴシック見出しを使わない - 強い影や太い枠線を使わない - 寒色を地色に使わない - 赤をスローガンと注意文以外に使わない

Page Structure

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

1. ファーストビュー（タレントとブランドの印象づけ）: 2 人の写真を左右に並べ、中央に縦書きの大きなロゴ。下端は白いアーチで区切る
2. バナー導線（商品情報やキャンペーンへの誘導）: 横長バナーのカルーセルに円形の矢印を付ける
3. 動画ギャラリー（CM や動画コンテンツの紹介）: もやをかけた写真とリード文のあと、カテゴリ別の動画カードを横スクロールで並べる
4. コンセプトコピー（商品の世界観を伝える）: グラスと泡のぼかし写真の上に、こげ茶明朝の 4 行コピーを中央揃えで置く
5. 特長（商品の特長を 3 点で訴える）: ピンクの泡の地に POINT カードを縦に積み、周りにぼかした果物を浮かせる
6. 商品情報（フレーバーごとの商品紹介）: 半透明カードの中に、商品画像のカルーセルと商品名・説明・リンクを置く
7. 写真ギャラリー（飲用シーンで共感を生む）: 赤いスローガンの下に、タレント写真を隙間なしのモザイクで並べる
8. フッター（シェアと注意喚起）: 白地の中央に SNS アイコンを並べ、赤の小さな注意文を置く

Imagery

• 自然光の屋外で撮った、淡い色の服のポートレート
• グラスの中の炭酸の泡と果物をマクロで撮った柔らかな写真
• 桃・柑橘・ぶどうなどの果物を手前にぼかして浮かせる
• 写真全体に白いもややハイキーな補正をかける
• ギャラリー写真は水色やラベンダーなどのパステル背景にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 60% 幅のコンテンツを置き、背景写真は全幅で敷く
• PC では POINT カードを 3 カラム横並びにする
• PC の動画は カテゴリを横に並べ、サムネイルを小さくする
• PC の商品カルーセルは商品名を縦書きで右に添える
• 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 行書くと起動時に読み込まれる。