DESIGN.md — 漆黒×金の帯見出しで魅せるビール LP（Black and Gold Premium Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、上品・高級
• キーワード: 漆黒・金帯・泡と黄金色・缶の物撮り・太ゴシック・笑顔
• 地の質感: 黒地にうっすら放射状のスポットライト風グラデーションをかける。金はメタリックなグラデーション。
• 形: 四角い帯と円形の写真切り抜きが中心。角丸はFAQと小さなラベルだけ。
• 温度感: 黒で引き締めつつ、金と琥珀色で温かい

Colors

• 地は黒で通し、セクションの区切りだけ金グラデーションの帯を横いっぱいに敷く。
• 金帯の上の見出しは黒の極太ゴシック。黒地の小見出しは金文字。
• 本文は黒地なら白、白カードの中なら濃いグレー。
• 赤は店舗誘導バナーの帯1か所だけに使い、行動を促す色にする。
• 成分表は金と濃グレーのセルを交互に並べる。
• フッターだけは淡い水色と白の地に切り替える。

Typography

• 全体を太めのゴシック体でまとめ、明朝は使わない。
• リード文の各行の下には金の下線を引く。
• 金帯の見出しは黒の極太文字で、帯の高さいっぱいに置く。
• 写真の上のキャッチは赤文字に白フチを付け、少し傾けて置く。
• 本文は中央揃え。特長の本文だけ左揃え。
• サブ見出しは両側に白い横線を引いた中央配置にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は円形写真と見出しを横に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 金帯の見出しは画面幅いっぱいに敷き、高さは約44px。
• 写真やバナーは左右に約12pxの余白を取って横幅いっぱいに置く。
• 特長は円形写真を左に、金見出しを右に置く。本文はその下にまとめる。
• 缶の図解は丸数字と白い引き出し線でパーツを指し、下に番号付きの説明を並べる。
• 成分表は3列のグリッドにする。
• FAQは黒地に白カードを置き、上端にグレーのタイトルバーを付ける。

Elevation & Depth

• 影はほとんど使わない。黒地の上のスポットライトで奥行きを出す。
• 缶の物撮りは、写真の中の反射とハイライトで立体感を出す。
• ページトップボタンだけに軽い影を付ける。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 素材写真は正円に切り抜き、広告ビジュアルは長方形のまま使う
• セクション境界: 直線の金グラデーション帯で区切る
• カードやバナーは基本的に角丸なし。
• 丸数字は白い円に黒の数字。
• Q/Aアイコンは小さな丸で、Qは黄色、Aは濃グレー。
• 店舗誘導バナーには左上にリボン形のラベルを付ける。

Components

• 金帯セクション見出し（gold-band-heading）: 横幅いっぱいの金グラデーション帯に黒の極太見出しを置く。左右に人物の丸写真と斜体の英字ラベルを添える。
• 横線付きサブ見出し（lined-subheading）: 白文字の両脇に白い横線を引いた中央見出し。
• 円形写真の特長ブロック（feature-circle）: 正円の素材写真の横に金の小見出しを置き、下に白の本文を続ける。
• 丸数字の図解ラベル（callout-number）: 白い丸数字から白線を伸ばして缶のパーツを指す。
• 店舗誘導バナー（banner-cta）: 赤枠で囲んだ広告画像の下に赤帯を付け、白の2行テキストと右向きのシェブロン矢印を置く。
• 成分表グリッド（nutrition-grid）: 値は金か濃グレーのセルに白抜き文字で入れ、項目名はセルの下に置く。3列で並べる。
• 受賞メダル紹介（award-block）: 金のメダル画像を中央に置き、その下に回数、大きな受賞名、説明の注釈の順で並べる。
• FAQカード（faq-card）: 白カードの上端にグレーのタイトルバーを付け、Q/Aアイコン付きの問答を並べる。
• ページトップボタン（page-top）: 右下に固定する黄色の丸ボタン。黒の上向き矢印を入れる。

Do's and Don'ts

Do - 地は黒で通し、セクションの区切りには必ず金帯を使う。 - 泡と黄金色の液体のシズル写真を大きく見せる。 - 文字はすべて太めのゴシック体にし、金と白の2色で階層をつける。 - 素材写真は正円に切り抜いてリズムを出す。 - 受賞やスペックの情報は大きく中央に置く。 - 法令上の注意書きはフッターにまとめて載せる。

Don't - パステル調や淡い地色をメインのエリアに使わない。 - 明朝体や細い書体で見出しを作らない。 - 赤を何か所にも使わない。 - 角丸の大きいポップなカードを使わない。 - 金帯以外の色帯でセクションを区切らない。 - 飲酒をあおるような過度な表現や装飾は避ける。

Page Structure

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

1. ヘッダー（ブランドロゴの表示とメニュー）: 上に白い企業バー、その下に黒地の商品ロゴバーと金のハンバーガーアイコン。
2. 受賞告知バナー（権威性を最初に伝える）: 人物3名が缶を持つ写真に、メダルと大きな金文字のコピーを重ねる。
3. ファーストビュー（商品とおいしさの訴求）: 泡のジョッキと缶の写真に、赤文字に白フチの斜めキャッチを重ねる。
4. コンセプトリード（開発の想いを伝える）: 金の下線付きの白い問いかけ文と、中央揃えの本文。
5. 特長（おいしさの理由を3点で示す）: 金帯の見出しの後、缶の周りに円形写真を配置し、円形写真＋金見出し＋本文を3つ繰り返す。
6. デザイン解説（パッケージの意図を伝える）: 缶の写真に丸数字の引き出し線を付け、下に4項目の説明を並べる。
7. 広告紹介（CM動画とグラフィックの紹介）: 横線付きのサブ見出しの下に、動画サムネイルと横長のグラフィックを置く。
8. 店舗誘導CTA（飲める店の検索へ誘導）: 赤枠で囲んだ広告バナーに、赤帯と矢印のテキストを付ける。
9. 製品情報（容量とスペックの提示）: 缶2サイズを並べ、白いカードに原材料と成分表のグリッドを載せる。
10. 受賞実績（品質の裏付け）: 金のメダル、大きな受賞名、注釈を縦に2組並べる。
11. よくある質問（不安の解消）: 黒地に白いFAQカードを置き、Q/Aアイコンで並べる。
12. フッター（企業サイトへの導線と注意表示）: アコーディオンのメニュー、淡い水色地のバナーリンク、飲酒の注意マーク、コピーライト。

Imagery

• 黄金色のビールと白く盛り上がった泡を、逆光で撮ったシズル写真。
• 金と黒の缶を正面から撮り、メタリックな反射を見せる。
• 人物は缶やジョッキを持って大きく笑う写真を、黄色い背景で撮る。
• 原料や製造工程の写真は正円に切り抜き、少し暗めのトーンにする。
• 黒地の中央に光のスポットを当てたグラデーションを敷く。
• 金のメダルは立体的なメタリック調で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは上部にグローバルナビを横に並べる。
• PCは中央に約1000px幅のコンテンツを置き、黒地を左右いっぱいに広げる。
• PCの特長は、缶を中心に写真と本文を左右に振り分けて配置する。
• PCのデザイン解説は、缶の左右に説明を置いて引き出し線でつなぐ。
• PCの成分表は8列1行、受賞はメダルを左・テキストを右の横並びにする。
• PCのフッターは4列のリンクと4列のバナーにする。

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