DESIGN.md — 柑橘イエロー×金枠の上品な紅茶飲料 LP（Citrus Gold Premium Tea Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、清潔・爽やか、ナチュラル
• キーワード: 柑橘・しずく・金の細枠・深緑の明朝・クラシック×フレッシュ
• 地の質感: 白地に水滴が散るテクスチャと、柑橘断面の黄色い写真背景。金はグラデーションで光沢を出す。
• 形: 角の立った長方形カードと金枠。ボタンも角丸なし。吹き出しだけ角丸。
• 温度感: 明るく暖かい黄色に、深緑と水色で涼しさを足した爽やかな温度感

Colors

• 地はしずく柄の白、セクション背景は柑橘写真の黄色にする
• 見出し・下線・番号はすべて深緑で統一する
• 金は細枠・ヘッダー帯・ボタンのグラデーションだけに使う
• フレーバーごとに水色・黄緑を割り当て、マーカーと吹き出しを同色にする
• 注意喚起の赤はフッター注記のみ

Typography

• 日本語は見出しも本文も明朝で統一する
• 本文は中央揃えで短く改行する
• 見出しの下に深緑の細い下線を引く
• フレーバー名は文字の下半分に色マーカーを敷く
• FV のコピーは縦書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 黄色背景の上に左右約 18px 余白で白カードを置く
• カード同士は 60〜70px 空けて背景写真を見せる
• 要素はすべて中央揃え
• 商品画像→名前→説明→果物写真→吹き出し→ボタンの順で縦に積む

Elevation & Depth

• 影はほぼ使わずフラットにする
• カードは金の 2px 細枠で区切る
• 商品・果物の切り抜き写真には接地影を薄く付ける

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品・果物・グラスは背景を抜いた切り抜き。FV は大きな半円アーチの中に人物を入れる
• セクション境界: 金グラデーションの細い横帯で直線に区切る
• ボタン・カードは角を立てる
• 吹き出しだけ角丸で上向きの三角を付ける
• 引き出し線は細い深緑で先端に点を付ける

Components

• 金グラデーションボタン（button-gold）: 左が濃い金で右が淡い金。黒の明朝文字と右に ＞ を付ける
• 金枠カード（card-gold-frame）: しずく柄の白地に金の細枠。黄色い写真背景の上に置く
• 下線付き見出し（heading-underline）: 深緑の明朝見出しの下に同色の細線を引く。2 行なら行ごとに付ける
• 色マーカーのフレーバー名（marker-label）: 文字の下半分にフレーバー色の帯を敷く
• 成分の吹き出し（speech-bubble）: 果物写真の下に置く角丸の吹き出し。上向きの三角を付ける
• 番号の引き出し線（callout-number）: 大きなセリフ数字から細い線を伸ばし、写真の部位を指す
• 金帯ヘッダー（header-gold）: 金グラデーションの帯にロゴ・SNS・メニューを置く
• ページトップボタン（pagetop）: 右下に固定する赤い円形ボタン

Do's and Don'ts

Do - 日本語は明朝、欧文はセリフ体で統一する - 黄色い背景には柑橘の断面写真をぼかして敷く - 白地にしずくのテクスチャを薄く散らす - フレーバーごとに色を固定してマーカーと吹き出しをそろえる - 金はグラデーションで光沢を出す

Don't - ゴシックの太字で見出しを作らない - ボタンをピル型や原色にしない - 濃い影や立体的なカードを使わない - 黄色の上に直接長い本文を載せない - 金を大面積の塗りに使わない

Page Structure

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

1. ヘッダー（ブランド表示と導線）: 金グラデーション帯にロゴ・SNS アイコン・ハンバーガーを置く
2. ファーストビュー（新商品の世界観を伝える）: 水色の半円アーチに人物とグラスの写真。縦書きコピー、New の筆記体、商品ボトル、大きな明朝ロゴを置く
3. ブランドメッセージ（開発の想いを語る）: しずく柄の白地に中央揃えの明朝本文を段落ごとに並べ、最後にロゴを置く
4. 商品セクションの見出し（商品紹介への切り替え）: 金帯で区切り、黄色い柑橘写真の背景に欧文セリフ見出しと下線を置く
5. こだわり（特長を 2 点で説明）: 金枠カードの中でグラス写真に番号の引き出し線を付け、下に番号付きの小見出しと説明を並べる
6. フレーバー紹介（各味の訴求）: ボトル→マーカー付きの名前→説明→果物写真→吹き出し→金ボタンを味の数だけ繰り返す
7. 味覚イメージ（味の流れを図で見せる）: 山形グラフ 2 つを重ね、番号の引き出し線と矢印の軸を付け、下に番号リストを置く
8. 戻る導線・フッター（ブランドトップへの回遊と共有）: 白地に金ボタン、SNS 共有アイコン、赤い注意文、パンくずを置く

Imagery

• 人物は明るい自然光で、淡い黄色の服を着て飲み物を注ぐ笑顔の場面にする
• グラスは柑橘の輪切りと氷を入れ、紅茶との二層を見せて切り抜く
• 果物は断面を見せた切り抜き写真にし、葉を添える
• 背景には柑橘断面をマクロで撮ってぼかした黄色の写真を使う
• 白地には細かい水滴のテクスチャを散らす
• グラフは淡いオレンジと朱色を半透明で重ねたフラットな図にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカード幅を約 70% に絞り、左右に黄色い背景を広く見せる
• PC の FV は人物を中央、商品を左、縦書きコピーとロゴを右に置く
• PC のブランドメッセージは本文を左、ロゴを右の 2 カラムにする
• 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 行書くと起動時に読み込まれる。