DESIGN.md — 金×チョコ褐色の高級感ある季節ドリンク LP（Golden Chocolate Luxury Seasonal Beverage LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク
• キーワード: チョコレートの波紋・金箔の欧文・縦書き明朝コピー・円形の写真・シズル感・暗いグラデーション
• 地の質感: とろりと光るチョコの液面を写した写真とグラデーションの地。金文字にはメタリックなグラデーションをかける
• 形: 正円の写真フレームと細い金線の四角い枠。ボタンはピル型
• 温度感: 暖色。焦げ茶から金色へのグラデーションで、暗くて濃厚

Colors

• 地は焦げ茶から金茶へのグラデーションだけで作り、白やパステルの面は使わない
• 見出しの欧文はメタリックな金のグラデーションにする
• 白文字は商品名や価格など、読ませたい情報だけに使う
• 塗りのある主ボタンはキャメル色にし、文字は焦げ茶にする
• サブボタンは金線のアウトラインで、文字も金色にする
• 写真の枠や囲みには 1px の金線を使う

Typography

• 情緒的なコピーは明朝、情報はゴシックの太字と使い分ける
• FV のキャッチは縦書きにし、一部の文字だけ大きくしてリズムを出す
• 欧文の大見出しはセリフ体の全大文字にし、金のグラデーションをかける
• 特長は「小さいリード → 大きい名前」の 2 段組みにして中央揃えにする
• 注釈は ※ 付きの 11px で、白文字にする
• 価格は欧文数字で、商品名のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に交互にずらして置く
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端にはみ出してもよく、左右交互にずらして動きを出す
• テキストは基本中央揃えにし、商品情報のブロックだけ左揃えにする
• 背景の波紋写真はセクションの境目にまたがるように敷く
• 余白は広めに取り、1 画面に 1 つの話題だけを置く

Elevation & Depth

• 影はつけず、写真の明暗で奥行きを出す
• 円形写真の外側に細い金のリングを 1 本添える
• 背景にはスポットライトのような放射状グラデーションを敷き、主役を浮かせる

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 特長写真は正円に切り抜いて金のリングで囲む。商品単体の写真は背景を抜いて切り抜く
• セクション境界: 直線では区切らない。グラデーションと波紋写真で境目をぼかしてつなぐ
• 四角い囲みは角丸 0 の 1px 金線にする
• ボタンはすべてピル型にする
• テキストリンクは金色の下線で表す

Components

• 商品情報ボタン（button-primary）: キャメル色で塗ったピル型ボタン。幅は約 70%
• 一覧ボタン（button-outline）: 透明の地に金線と金文字を使ったピル型ボタン
• 情報リンク（link-underline）: 金文字の下に細い金線を引いた小さなリンク
• 円形の特長写真（photo-circle）: 正円に切り抜いた寄りの写真に金のリングをつけたもの。画面幅の約 85%
• 特長キャプション（feature-caption）: 白いゴシックで、小さなリードと大きな名前を 2 段で中央揃えにする
• 金線の囲み（gold-frame-box）: 1px の金枠の中に、筆記体の添え書き・説明文・商品写真を並べる。写真は枠の外にはみ出させる
• 金の欧文タイトル（gold-display-title）: セリフ体の全大文字を金のグラデーションで 2 行に組み、セクションの見出しにする
• 商品と価格のブロック（product-info）: 商品名・価格・説明・注釈を左揃えで並べ、下にボタンを置く

Do's and Don'ts

Do - 地は必ず焦げ茶と金茶のグラデーションにする - 金色は線・欧文・ボタンに絞って使う - チョコやクリームの質感が伝わる寄りのシズル写真を使う - 明朝の縦書きで余韻のあるキャッチを置く - 余白を広く取り、間をゆったりさせる

Don't - 白や明るい無彩色の背景面を使わない - 原色の赤や青を使わない - 角張ったカードや濃い影を使わない - 文字を詰め込みすぎない - 金色を面いっぱいに塗らない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: チョコの波紋に浮かぶ商品写真を置き、右に縦書きの明朝コピー、下に金の欧文で商品名を重ねる
2. 導入文（体験の価値を情緒的に伝える）: 最も暗い地に、淡い金色の明朝で 4 行を中央揃えにする
3. 特長（素材やこだわりを 3 点紹介する）: 白いキャプションと金リング付きの円形写真の組を、左右にずらしながら 3 回繰り返す
4. 補足の囲み（提供方法を補足する）: 金線の四角い枠に筆記体の添え書き・説明・パッケージ写真を入れる
5. 商品と価格・CTA（購入情報へ誘導する）: 切り抜いた商品写真の下に名前・価格・注釈を並べ、キャメル色のピル型ボタンを置く
6. 関連リンク（一覧ページや詳細情報へ送る）: 金線のアウトラインボタンと、下線付きのテキストリンクを置く
7. 関連商品（あわせて買う商品を提案する）: 金の欧文の大見出しを置き、切り抜き写真・商品情報・ボタン・一覧リンクを続ける

Imagery

• チョコレートの液面が同心円に広がる波紋や、はねる飛沫を暖色の逆光で撮った写真
• クリームや削りチョコをのせた商品の寄りのシズル写真。背景は金茶のボケ
• 注ぐ・浸すなど、手の動きが見える瞬間を切り取る
• 単品の商品は背景を抜いて切り抜き、柔らかい影を落とす
• 王冠などのゴールドのオブジェで特別感を添える
• 湯気や光の粒をうっすら重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左の黒い帯（欧文ロゴ）と右のメインビジュアルの 2 分割にする
• PC では本文の幅を約 60% に絞り、円形写真は小さめにして左右交互に置く
• 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 行書くと起動時に読み込まれる。