DESIGN.md — 金箔グラデと生成りの上品な紅茶飲料 LP（Golden Cream Elegant Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、ナチュラル、シンプル・ミニマル、清潔・爽やか
• キーワード: 金グラデーション・生成りクリーム・明朝体・木漏れ日の写真・細い罫線・余白多め
• 地の質感: 白〜淡いクリームの縦グラデーション地。ヘッダーとボタンにメタリックな金のグラデーションを使う。
• 形: 角丸なしの四角が基本。細い 1px の黒線と金の二重線の枠で区切る。
• 温度感: やや暖かい。淡い黄みのクリームと琥珀色の紅茶写真で温かみを出す。

Colors

• 地は白から淡いクリームへの縦グラデーションにする。
• 金は面にはグラデーション（濃い金→淡い金）で使い、ベタ塗りにしない。
• 商品カードは白面にして、クリーム地から浮かせる。
• 文字はほぼ黒。金茶は日本語の小見出しにだけ使う。
• 赤は法令系の注意書きとトップへ戻るボタンだけに使う。
• 大きな区切りは金色の細い横線で入れる。
• pagetop-button は文字 #1C0B00 × 背景 #E4011D のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#F6011F、4.5:1）を使う。

Typography

• 見出しも本文も明朝体で統一し、品の良さを出す。
• セクション見出しは日本語の小見出し（金茶）と大きな英字セリフを上下に組み、英字の下に細い下線を引く。
• 商品名の見出しは中央揃えにして、幅いっぱいの細い下線を引く。
• 本文は行間 2 倍以上でゆったり組む。
• ゴシック体はフッター周りの小さな文字だけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品を写真左・テキスト右の 2 カラムにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品カードは左右 16px 程度の余白をとって白で置き、写真は全幅で載せる。
• 商品ごとに写真→商品名→説明→ボタンの順に縦に積む。
• カード同士の間は 60px 程度空ける。
• 囲み枠セクションは金の二重線で、内側にコピー・ボタン・写真を入れる。
• フッター手前に戻るボタンを中央に置き、その上下を広く空ける。

Elevation & Depth

• 影はほぼ使わない。白カードとクリーム地の色の差で階層を出す。
• 金ボタンはグラデーションで立体感を出し、ドロップシャドウは付けない。
• トップへ戻る赤い丸ボタンだけ、軽い影で浮かせてよい。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。商品写真は横 4:3 程度で全幅に置く。
• セクション境界: 金色の細い横線（1〜3px）で直線的に区切る。
• ボタン・カード・枠はすべて角丸 0。
• 黒の細枠ボタンは 1px の線にする。
• 囲み枠は金の二重線（外側は太め、内側は細め）にする。
• 円形はトップへ戻るボタンと SNS アイコンだけにする。

Components

• 金グラデのヘッダー（header-gold）: 高さ 56px の金のグラデーション帯。左にロゴ、右に SNS アイコンとハンバーガーメニューを置く。
• 日英 2 段のセクション見出し（section-title）: 金茶の日本語小見出しの下に大きな英字セリフを置き、英字の下に細い黒線を引く。
• 商品カード（product-card）: 白面の上部に全幅の商品写真を載せ、下に下線付きの商品名、本文、枠線ボタンを並べる。
• 細枠の詳細ボタン（button-outline）: 白地に 1px の黒枠を付けたボタン。中央に文字、右端に「>」の矢印を置く。
• 金グラデの主ボタン（button-primary）: 左が濃い金、右が淡い金のグラデーション面に黒文字を載せ、右に矢印を置く。
• 金の二重線の囲み枠（gold-frame-box）: 金の二重線で囲んだ白い枠。中に中央揃えのコピー、本文、主ボタン、使用シーンの写真を入れる。
• シェアと注意書き（share-bar）: 灰色の文言の横に円形の SNS アイコンを並べ、その下に赤い小さな注意書きを置く。
• トップへ戻るボタン（pagetop-button）: 右下に固定した赤い円形ボタン。白い上向き矢印を入れる。

Do's and Don'ts

Do - 金はメタリックなグラデーションで表現する。 - 見出しと本文は明朝体でそろえ、ゆったりした行間にする。 - 商品写真は木漏れ日の差す自然光で、温かい琥珀色を見せる。 - 余白を大きくとり、1 画面に置く要素を絞る。 - 線は細く、黒か金の 2 種類に限る。

Don't - 角丸やピル型のボタンを使わない。 - ポップな原色やビビッドな色を広い面に使わない。 - 太いゴシック体で見出しを組まない。 - 濃い影や立体的な装飾を付けない。 - 1 枚のカードに情報を詰め込まない。

Page Structure

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

1. ヘッダー（ブランドの識別と SNS への導線）: 金グラデの帯に、ロゴ・SNS アイコン・メニューを置く。
2. ファーストビュー（商品の世界観を一目で伝える）: 木漏れ日の中のボトルとグラスの写真を全幅で置き、左上に白抜きのロゴを重ねる。下端に金線を引く。
3. 商品紹介の見出し（商品一覧の始まりを示す）: クリーム地に、日英 2 段の見出しと下線を中央に置く。
4. 商品カード（複数）（味のバリエーションごとに特長を説明する）: 白カードに写真・下線付きの商品名・2〜4 行の説明・枠線ボタンを入れ、同じ型を 3 回繰り返す。
5. 食事との相性の訴求（利用シーンを提案し、特設サイトへ誘導する）: 金線で区切った後、金の二重線の枠の中にコピー・本文・金ボタン・食卓の写真を入れる。
6. ブランドトップへの導線（サイト内を回遊させる）: 白地の中央に、左向き矢印付きの金グラデボタンを置く。
7. フッター（シェア・注意書き・パンくずを置く）: 小さな灰色文字と SNS アイコン、赤い注意書き、パンくず、右下にトップへ戻るボタンを置く。

Imagery

• 商品写真は木のテーブルに木漏れ日の影が落ちる屋外で、自然光で撮る。
• 氷入りのグラスとボトルを並べ、紅茶の琥珀色を逆光で透かせる。
• 背景はぼかして明るめにし、暖色寄りで低コントラストにする。
• 利用シーンは白いテーブルクロスに彩りのある料理を並べ、人物は手元だけを写す。
• イラストは使わない。装飾は金線と金グラデに限る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左にロゴ、右に写真の 2 分割にする。
• PC の商品カードは写真左・テキスト右の横並びにし、カード同士を縦に詰めて並べる。
• PC のコンテンツ幅は約 75%、中央寄せにする。
• PC の囲み枠はテキスト左・写真右の横並びにする。
• SP は 1 カラムで写真を全幅に置き、ボタンも全幅近くにする。

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