DESIGN.md — 白地×金枠の上品な飲料紹介 LP（Gold Frame Elegant Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル
• キーワード: 金グラデーション・明朝体・和紙テクスチャ・二重金枠・エビデンス訴求・余白多め
• 地の質感: 薄いグレーの和紙調ノイズ地に白いカードを置く。金はメタリックなグラデーション。
• 形: 角丸なしの四角が基本。金の二重線フレームで囲む。
• 温度感: 温かみのある中間。金と白で明るく、深い赤で強調する。

Colors

• 地は和紙調の薄グレー、情報ブロックは白い面か白地の金枠で囲む
• 金は面ではなくグラデーションで使い、枠・数字・ボタン・帯セクションに限定する
• 本文中の大事な一文だけを深い赤で強調する
• 見出しはえんじ寄りの黒で格調を出す
• 企業の赤はヘッダー線とフッターだけに使い本編には入れない
• 料理提案セクションは全面を金グラデーションの帯にしてリズムを切り替える

Typography

• 全体を明朝体でそろえ、ゴシックはフッターだけにする
• 本文は中央揃えで、短い行ごとに改行する
• 数字は欧文セリフで極端に大きくし、単位は小さめにする
• セクション見出しは和文の小ラベルと大きな英字の 2 段組みにする
• 注釈は ※ 付きで小さく、出典の年を括弧で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カード内も縦並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 40px（375px 幅換算）
• 金枠カードは左右 20px ほど空けて置く
• 枠の中にも大きく余白をとり、文と図を交互に置く
• 比較写真は 2 列で横に並べる
• 料理提案はカルーセルにして、左右に矢印、下にドットを置く

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 奥行きは金の二重線フレームで出す
• 白いカードを薄グレーの地に置いて面の差で区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角に切り抜き、料理写真は白い縁取りの額に入れる
• セクション境界: ほぼ直線で区切る。フッターの手前だけ赤い波線にする
• 角丸は使わずシャープに見せる
• 金枠は外側を太く、内側を細くした二重線にする
• 見出しの下に、両端がフェードする金の細線を引く

Components

• 金の二重枠カード（gold-frame-card）: 白地を金グラデーションの二重線で囲んだエビデンス用のブロック
• 金線付き見出し（heading-gold-underline）: えんじ色の明朝見出しの下に、フェードする金の線を引く
• 大きな数字ブロック（stat-number）: 金グラデーションの巨大数字と、結果を表す見出し、横に商品画像を置く
• 金グラデーションボタン（button-primary）: 四角い金グラデーションのボタン。中央に文字、右端に > 矢印
• 和英 2 段のセクション見出し（section-label）: 茶金色の小さな和文の下に、大きな英字セリフと下線を置く
• 金帯の料理カルーセル（gold-band-carousel）: 全幅の金グラデーション帯に見出しと白縁の写真を置き、左右に黒い矢印とドットを付ける
• 図解イラスト（diagram-illustration）: 淡い黄色の円を赤い粒で囲んだ働きのイメージ。赤いラベルで凡例を付ける
• 注釈（note-text）: ※ 付きの小さな出典テキストを中央または左揃えで添える

Do's and Don'ts

Do - 金はグラデーションにして、メタリックな質感を出す - 本文は明朝の中央揃えにし、行間を広くとる - 主張には必ず注釈か出典を添える - 地には薄い和紙テクスチャを敷く - 強調は 1 ブロックにつき 1 文だけ赤にする

Don't - ポップな丸ゴシックや鮮やかな多色づかいをしない - 角丸やピル型のボタンを使わない - 企業の赤を本編の面に広げない - 強い影やグラデーションの影をつけない - 文字を詰めて情報を詰め込まない

Page Structure

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

1. ヘッダー（企業ロゴの表示）: 白地に小さなロゴを置き、上端に赤い細線を引く
2. ファーストビュー（食事と一緒に飲むシーンを見せる）: 食卓の写真を全幅で置き、右側に明朝の縦書きコピーを入れる
3. 調査結果（数字で効果を印象づける）: 巨大な金の数字と短い結果文を左に、商品ボトルを右に置き、下に注釈
4. 仕組みの説明（働きを図で理解させる）: 金枠カードの中に見出し、赤い強調付きの本文、粒子の図解を入れる
5. 実験結果（研究データで信頼を得る）: 金枠カードに比較写真 2 列、顕微鏡風の写真、矢印付きの説明と出典を入れる
6. 料理との組み合わせ（飲むシーンを広げる）: 金グラデーションの全幅帯に筆風の大見出しと料理写真を置くカルーセル
7. 商品紹介（ラインナップと詳細への誘導）: 和英 2 段見出しの下に白いカードを置き、商品カルーセル・名前・説明・金ボタンを並べる
8. フッター（注意表記と企業リンク）: 赤い波線で区切り、TOP ボタン、注意マーク、赤帯のリンク一覧を置く

Imagery

• 料理写真は自然光の明るい食卓で、斜め上から撮る
• 商品は白背景の切り抜きで、正面から大きく見せる
• 実験写真はモノクロに近い実写で、比較を 2 枚並べる
• 図解は淡い黄色の円と赤い粒のシンプルなフラットイラストにする
• 料理写真は白い縁取りの額に入れて金の帯の上に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長の写真にし、縦書きコピーを右端に置く
• PC の調査結果は数字・商品・円グラフを横 3 列に並べる
• PC の金枠カードは幅 65% ほどの中央寄せにして、本文は 1〜2 行にまとめる
• PC のカルーセルは前後のスライドを左右にのぞかせる
• PC の商品紹介は画像を左、説明を右に置き、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 行書くと起動時に読み込まれる。