DESIGN.md — 黒×金グラデの明朝体ビール系飲料 LP（Dark Gold Premium Beer-like Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 漆黒・金グラデ・明朝体・シズル写真・商品色分け・夜空
• 地の質感: 黒の無地、星空、ざらついたメタリック粒子の色面
• 形: 角のない全幅帯で区切る。円形の金バッジと細い罫線を添える
• 温度感: 暗い地に温かい金と泡の黄色が光る

Colors

• 基本の地は漆黒にし、白文字と金文字だけで構成する
• 大見出しには金の縦グラデ（濃金から淡金）を使う
• 商品ごとに缶の色に合わせ、紺・赤銅・青緑の質感背景で区切る
• セクション見出しの帯は生成りか白にして、黒地との切り替えを示す
• 価格情報はラインナップでだけ、マゼンタの小文字で出す
• グラデの面には写真やノイズの質感を重ね、平坦な単色にしない

Typography

• 見出しも本文も明朝で揃え、ゴシックは注釈と価格だけに使う
• 大見出しは 2 行に分け、1 行 6〜8 字に収める
• 素材名などの縦組み見出しに、小さな縦書きラベルを添える
• 大見出しの背後に、欧文ロゴを暗い金で透かして重ねる
• 本文は字間を広めにとり、行間 2.0 でゆったり見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップだけ 5 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 4px（375px 幅換算）
• テキストは左揃えで左右に 24px の余白をとる
• 商品写真は中央に置き、映り込みの影をつける
• 商品ブロックは缶→見出し→商品名→罫線→本文の順に並べる
• FV 直下に 2×2 のアンカーナビを置く

Elevation & Depth

• 影は使わず、写真の映り込みと光で奥行きを出す
• 商品カードは白地に細い枠線だけでフラットにする
• 缶の下に床の反射を入れて立体感を出す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 缶とグラスは切り抜き。素材写真は角丸なしの 3 連矩形
• セクション境界: 全幅の直線で区切り、背景色を切り替える
• 角丸はほぼ使わず、直角でシャープに見せる
• バッジは金グラデの正円にする
• 仕切りは 1px の細線にする

Components

• 金帯アンカーナビ（anchor-nav）: 金グラデの帯を 2×2 に分け、細い縦横線で区切った黒明朝のリンク
• 金の円形バッジ（badge-circle）: 素材の訴求を 3 段で載せた正円バッジ。FV の右側に置く
• 金グラデ大見出し（heading-gold）: 欧文ロゴを暗く透かした上に金グラデの明朝を重ねる
• 白帯見出し（section-band）: 生成りの帯に黒明朝の見出しを中央に置く
• 商品色分けブロック（product-block）: 質感背景に缶写真、淡金の見出し、白の商品名、罫線、本文を縦に並べる
• ラインナップカード（product-card）: 白枠の正方形の商品画像に、商品名と 2 段の価格を添える
• もっと見るボタン（button-more）: 白地に細枠の横長ボタン。左に小さな矢印を置く
• 飲酒注意フッター（legal-footer）: 白地にマークと、法定の飲酒注意文を小さな太字で載せる

Do's and Don'ts

Do - 黒地を広くとり、金の見出しを光らせる - グラスの泡や液体のシズル写真を大きく使う - 商品ごとにパッケージの色を背景に引き継ぐ - 見出しは明朝で統一し、上品なトーンを保つ - 注釈は小さく、ただし必ず入れる

Don't - ポップな丸ゴシックや原色のボタンを使わない - 角丸カードや強いドロップシャドウを多用しない - 黒地に価格や値引きの訴求を大きく出さない - 金を面いっぱいに塗らず、帯とバッジだけに使う - 飲酒注意の表記を省かない

Page Structure

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

1. ファーストビュー（ブランドの格と主要商品を一目で伝える）: 黒地に筆致キャッチ、欧文ロゴ、金バッジを置き、3 缶とグラスを並べる
2. アンカーナビ（4 つのセクションへ誘導する）: 金グラデの帯を 2×2 に分けたナビ
3. ブランドストーリー（商品が進化してきたことを語る）: 星空の夜景に白明朝のリードと大見出しを置き、下からグラスがのぞく
4. こだわり（素材）（原料の価値を伝える）: 黒地に金の大見出し、縦組みの素材名、切り抜きの素材写真、白の本文、3 連写真を並べる
5. こだわり（味）（飲みごたえを訴求する）: 金見出しと短い本文の下に、傾けたグラスのシズル写真を置く
6. 商品特徴見出し（商品紹介への切り替えを示す）: 生成りの帯に黒明朝の見出しを置く
7. 商品紹介×3（味の違いを比較させる）: 紺・赤銅・青緑の質感背景に、缶・淡金見出し・商品名・罫線・本文を並べる
8. ラインナップ（容量・価格の一覧から購入へつなぐ）: 淡グレー地に欧文見出し、5 列の商品カード、もっと見るボタンを置く
9. 注意書きフッター（法定の表記を載せる）: 白地に飲酒注意マークと小さな文字を置く

Imagery

• 暗い背景に逆光を当てたグラス。泡と黄金色の液体を大きく写す
• 缶は正面から切り抜き、床への映り込みをつける
• 素材は黒地の切り抜きと、青空や手のひらで見せる自然光写真の 3 連
• 星空と山の稜線の夜景を、ストーリーの背景に使う
• 商品背景は金属粒子のようなざらついた質感のグラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 1000px 幅で、写真とテキストを左右 2 カラムに並べる
• 商品紹介は PC で缶とテキストを左右交互に配置する
• PC のナビは 4 つを 1 行に並べた金帯にする
• PC のラインナップは 6 列グリッド
• PC の FV は横長で、キャッチを上部中央に大きく置く

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