DESIGN.md — 桃×柑橘の淡いグラデ飲料 LP（Soft Fruit Gradient Non-Alcohol Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル
• キーワード: 淡いフルーツグラデ・欧文セリフ見出し・明朝の詩的コピー・広い余白・雑誌風の写真配置・大人の休日
• 地の質感: 水彩のようなぼかしグラデーションと光の差し込み、木目の写真背景
• 形: 角のない写真の矩形と細線のピル型ボタン。セクション境界はぼかしでつなぐ
• 温度感: 暖色寄りの淡いパステルで、柔らかく温かい

Colors

• 地は白をベースに、桃色・黄色・ミントを大きくぼかしたグラデーションで敷く
• セクションごとにグラデの重心を変え、境界は色が溶け合うようにつなぐ
• 深紅は商品ロゴの帯など、ブランドの要所だけに使う
• 文字は純黒を避け、焦げ茶寄りの黒で柔らかく見せる
• 濃紺は共通フッターと会員登録ボタンだけに限定する
• EC 誘導カードは白地で、背景から浮かせる

Typography

• セクション見出しは大きな欧文セリフと小さな和文を 2 段で組む
• 見出しの左寄せ・右寄せをセクションごとに切り替え、リズムを作る
• 本文は小さめの明朝を中央揃えにし、行間と字間を広く取る
• 共通ナビとフッターだけゴシックにする
• 縦書きの短いコピーを写真の横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで写真だけ左右にずらす。PC は中央寄せで、写真を周りに散らす
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 110px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション上下に 100px 前後の余白を取る
• 写真は大小を変え、左右交互にずらして雑誌風に置く
• 商品缶は 1 本ずつ中央に置き、下に説明・ボタンを縦に積む
• EC カードは横幅 80% で縦に等間隔に並べる

Elevation & Depth

• EC カードとバナーにごく薄い影をつけ、白地から浮かせる
• 商品缶の足元には鏡面の映り込みを入れる
• それ以外はフラットにし、ぼかしで奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形。商品は切り抜いて背景に浮かべる
• セクション境界: 直線の区切りを使わず、グラデのぼかしで切り替える
• ボタンは細い線のピル型で、右端に細い矢印を入れる
• 写真に枠線や角丸をつけない
• 丸いアイコンは細線で描く

Components

• 欧文＋和文の 2 段見出し（section-heading）: 大きな欧文セリフの下に小さな和文を添える。左右どちらかに寄せる
• 細線ピルボタン（button-outline-pill）: 白地に灰色の細線を引き、文字は中央、右端に細い矢印を置く
• 丸アイコンリンク 2 つ（icon-link-pair）: 細線の丸アイコンと 2 行のラベルを横に 2 つ並べる（購入・店舗検索）
• 深紅の帯ロゴ（brand-ribbon）: 筆文字を深紅の横帯に白抜きで載せ、両端をかすれさせる
• 動画カルーセル（video-carousel）: 中央にサムネと再生ボタン、左右に細い矢印。下にタイトルを小さく入れる
• EC ロゴカード（ec-card）: 白い横長カードの中央にストアのロゴを置き、薄い影をつける
• 紙質の特設バナー（paper-banner）: 方眼紙風の地に枠付きの明朝タイトルを置き、ベージュのタグで誘導する
• 濃紺の登録ボタン（button-primary）: 共通フッター内のピル型ボタン。白文字に右矢印を添える

Do's and Don'ts

Do - 淡い 3 色のグラデを大きくぼかし、余白を贅沢に取る - 欧文セリフと明朝で上品さを保つ - 写真は自然光の入る室内で、くつろぐ大人の女性を撮る - 購買導線は細線ボタンと白カードで控えめにまとめる - 年齢に関する注意表記をページ下部に入れる

Don't - 彩度の高いベタ塗りの面を広く使わない - 太い角ゴシックの大見出しを本文エリアに使わない - 写真に角丸・太い枠・ドロップシャドウをつけない - セクションを直線や色帯で硬く区切らない - 情報を詰め込まず、1 画面の要素を少なく保つ

Page Structure

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

1. ファーストビュー（新商品の世界観と商品を一目で伝える）: 明るい室内の写真に筆記体の新発売表記、明朝のロゴ、深紅の帯、オレンジのサブコピーを重ね、商品缶 2 本と果実を手前に置く
2. ムービー（CM で関心を高める）: 中央に欧文見出しを置き、その下に動画カルーセル、続けて紙質の特設サイトバナーを置く
3. ブランドコンセプト（商品の価値を情緒的に伝える）: 散らした写真と縦書きコピーの間に、中央揃えの明朝本文と商品ロゴを置く
4. 商品ラインアップ（味のバリエーションを紹介する）: 切り抜いた缶を中央に置き、説明文 3 行、細線ピルボタン、アイコンリンクを縦に並べる
5. スペシャルコンテンツ（タイアップ記事へ誘導する）: 欧文見出しの下に、写真と白抜き文字のバナーを 1 枚置く
6. オンラインストア（EC サイトで購入してもらう）: 木目の写真背景の上に、白い EC ロゴカードを 3 枚縦に並べる
7. 関連バナー・注意表記（関連サイトへ誘導し、法令上の表記を載せる）: 啓発バナーと黄色いバナーを置き、年齢注意の一文を入れる
8. 共通フッター（企業サイトへのリンクと SNS への誘導）: 白地に矢印付きのリンク一覧、淡い青のボックスに SNS とボタン、最下部に濃紺の帯を置く

Imagery

• 窓から自然光が入る北欧風の室内で、くつろぐ大人の女性をやや引きで撮る
• 間接照明のある夜の部屋など、暖色の静物カットを混ぜる
• 商品缶は水滴をつけて切り抜き、足元に映り込みを入れる
• 果実（柑橘・桃）を缶のそばに置き、味を連想させる
• 背景は水彩のようなパステルのぼかしと、木漏れ日の光
• ファーストビューのロゴ周りに筆記体と筆文字を組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長に圧縮し、ロゴと商品を横に並べる
• PC はファーストビュー下に、白いピル型のアンカーナビを置く
• PC の動画カルーセルは、左右の動画サムネも一部見せる
• PC のコンセプトは本文を中央に置き、写真を左右に散らす
• PC のラインアップは 2 列、EC カードは 3 列で横に並べる
• PC のフッターはリンク一覧と SNS ボックスを左右 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 行書くと起動時に読み込まれる。