DESIGN.md — 黒炭×金の熟成プレミアムビール LP（Dark Charcoal Gold Premium Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、和風
• キーワード: 墨色の石目テクスチャ・金のアクセント・明朝体の見出し・ボトルを主役にした撮影・限定感・熟成の重み
• 地の質感: 黒〜チャコールのざらついた石目・紙目テクスチャ。こだわりカードには薄い緑の植物模様が透けて入る。
• 形: 角丸は小さめ（6px前後）のカードと、金色のピル型ボタン。全体は直線的で端正。
• 温度感: 暗くて温かい。琥珀色のビールと金色が、冷たい黒の中に温度を足す。

Colors

• 地は墨色テクスチャで統一し、セクションの区切りはテクスチャの濃淡だけでつける
• 金色はロゴ文字・キャッチ・CTA・アイコンだけに使い、広い面には塗らない
• 長文で読ませるこだわり章だけ、白〜生成りのカードに反転させる
• CTA はくすんだ金のピル型に白文字。鮮やかな色は使わない
• ブランドフッターは濃紺、企業フッターは白〜淡い青灰にして、LP 本体とはっきり分ける
• ビールの琥珀色と瓶ラベルの緑・赤は写真の中だけに置く
• button-primary は文字 #FFFFFF × 背景 #B29464 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D7246、4.54:1）を使う。
• brand-banner は文字 #E4C163 × 背景 #FFF9EB のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8E6E19、4.55:1）を使う。

Typography

• 和文の見出しと本文は明朝体で統一し、字間を広め（0.08em 以上）にとる
• セクション見出しは和文の大見出しの下に小さい英字の大文字ラベルを添え、中央揃えにする
• 見出しの背後に薄い家紋風の紋章を重ねる
• こだわり項目の番号は細い明朝体の大きな数字（2桁）を見出しの左に置く
• 暗い地の本文は白、行間は 2 前後でゆったり組む
• 注意書きと企業フッターだけゴシック体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は左にボトル写真、右に縦積みのテキストを置く 2 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 18px 前後の余白で画面幅の約 90% に収める
• セクション見出しは上下に 60px 以上の余白をとって中央に置く
• 商品ブロックは見出しの帯→ボトルとキャッチ→細い線→発売日の順に積む
• CTA は中央に 1 つ置き、すぐ下に小さい注意書きを添える
• こだわりは番号見出し→全幅写真→本文の繰り返しにする

Elevation & Depth

• 影はほぼ使わず、暗い地と明るいカードの明度差で奥行きを出す
• ボトル写真は暗い背景から浮き出るように、縁を少し明るくする
• FV の背景には煙・霧を薄く重ねる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 角丸なし、または 6px 程度の長方形。商品は背景を抜いた切り抜き
• セクション境界: 直線。テクスチャの濃淡が切り替わるだけ
• カード・情報ボックスの角丸は 6px 程度
• 注意事項のボックスは 1px の灰色の枠線と角丸にする
• 購入バッジは金色の円形メダル
• 弾数ラベルは全幅の白い帯

Components

• オンラインショップボタン（button-primary）: くすんだ金のピル型に、白い欧文セリフ文字と右向き矢印
• 和英2段のセクション見出し（section-heading）: 白い明朝体の大見出しに、英字の大文字サブを添える。背後に薄い紋章
• 弾数ラベル帯（release-label-bar）: 全幅の白帯の中央に、黒い明朝体で第何弾かを示す
• 金メダル型バッジ（badge-gold-medal）: 金色の円形バッジに、限定・購入導線の短い文字を入れる
• 写真付きの黒い情報ボックス（story-card）: 黒地の角丸ボックス。上に白い中央揃えの文章、下に暗い写真
• 番号付きこだわりカード（commitment-card）: 生成りの地に植物模様を敷き、番号見出し・写真・明朝本文を繰り返す
• 販売方法の注意ボックス（notice-box）: 細い灰色の枠線だけの透明なボックスに、白い小さめの本文
• ブランドサイト誘導バナー（brand-banner）: クリーム地に缶の写真と縦書きコピー、下端に金のグラデーション帯で誘導文と矢印

Do's and Don'ts

Do - 地は必ず暗い石目テクスチャにして、明るい面はカードに限る - 金色は小さく、要所だけに使う - 見出し・本文は明朝体で字間を広くとる - 商品は切り抜きで中央に大きく見せ、キャッチは金色の明朝体で添える - 在庫・売り切れの注意は CTA 直下に小さく置く

Don't - 原色の赤・青のボタンや派手なバッジを使わない - 丸ゴシックやポップな手書き書体を使わない - 白い地のセクションを続けない - ドロップシャドウやグラデーションボタンを多用しない - 金色を広い面に塗らない

Page Structure

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

1. ファーストビュー（シリーズ名と限定感を一目で伝える）: 煙のかかる暗い背景に金の英字ロゴ・金メダルバッジ・白い明朝リードを置き、下に 2 本のボトルとグラスを並べる
2. 紹介動画（第三者の推奨で信頼を足す）: 和英見出しの下に動画サムネイルのスライダー。左右に矢印、下に中央揃えの説明文
3. 限定販売の告知（EC 限定であることを知らせる）: 和英見出しと、中央揃えの 3 行ほどの白いリード
4. 商品紹介（最新弾）（最新商品の特長と発売日を伝える）: 白い弾数帯→左にボトル、右にキャッチと金ロゴ→細線→発売日→黒い写真付き説明ボックス→CTA→注意ボックス
5. 商品紹介（前弾）（シリーズの継続性と人気を示す）: 同じ型を繰り返し、CTA の代わりに金色の完売表示を置く
6. 製法の解説（熟成方法の価値を物語で伝える）: 樽とグラスの暗い写真を背景にした黒カードに、白い明朝の長文
7. 造り手のこだわり（工程ごとの品質を見せる）: 生成りカードに 01〜04 の番号見出し・写真・本文を縦に繰り返す
8. 製品情報（商品の仕様と購入導線をまとめる）: ボトルの切り抜き・金のキャッチ・白い商品名・容量を並べ、販売中の商品には CTA を置く
9. ブランド誘導バナー（親ブランドサイトへ誘導する）: クリーム地のバナーに缶の写真・縦書きコピー・金の帯ボタン
10. ブランドフッター（サイト内ナビゲーションと SNS）: 濃紺の地に金ロゴ、白文字のメニューを細線で区切り、金アイコンの SNS 一覧
11. 企業フッター（企業サイトの共通導線と飲酒の注意）: 白のアコーディオンと淡い灰青の地のバナーグリッド、飲酒注意のマーク、コピーライト

Imagery

• ボトルとグラスは背景を抜いた切り抜きで、暗い地に浮かべる。泡と琥珀色を際立たせる
• 樽・蔵の写真は低照度で、暖色のスポット光を当てる
• 原料（麦・ホップ）は寄りで撮り、自然光で鮮やかに
• 職人の作業風景はクリーンな白い工場で、真剣な横顔を撮る
• 背景に薄い煙・霧、エンボス風の円形の紋章、筆文字の漢字を透かす
• こだわりカードには淡い緑の植物スケッチ柄を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% 幅のコンテナに収め、地のテクスチャは全幅に敷く
• FV は横長にして、左にボトル、右にロゴとリードを置く
• 動画は左右の隣のサムネイルを覗かせるカルーセルにする
• こだわり 01〜04 は PC で 2×2 のグリッドにする
• 製品情報は 2 商品を横に並べ、黒い説明ボックスは横長（文章左・写真右）にする
• ブランドフッターは左ロゴ・中央メニュー・右 SNS の 3 列にする

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