DESIGN.md — 漆黒×金色の高級ビール体験イベント LP（Jet Black and Gold Premium Beer Event LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 漆黒・金色・明朝・スポットライト・細い金線・非日常
• 地の質感: ほぼ純黒のフラットな面。写真の周りは黒へ溶け込むビネットで、立体感は光で出す
• 形: 角丸のない長方形と細い直線だけで組む。装飾は数字の左右に伸ばす水平線と、金の細枠
• 温度感: 暗くて温かい。黒の中に琥珀・金の光が灯る

Colors

• 地はほぼ純黒。最後のフッターだけ淡いグレーに切り替える
• 見出し・番号・料金の強調には金色の文字を使う。大面積の黄色は主ボタンとカード見出しだけ
• 本文は黒地に白文字。注釈も白かグレーにし、黄色にはしない
• 枠線は 1px の金茶色かグレー。太い線は使わない
• 赤は訂正・注意の一行だけに使う
• page は文字 #322D28 × 背景 #010101 のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#959595、4.55:1）を使う。

Typography

• フッター以外は明朝で統一し、上品さを出す
• 英字見出しはセリフ体を金色で使う
• 特長の見出しは中央揃えで 2 行に分ける。本文は左揃え
• 文字間をやや広げ、行間は 2 前後でゆったり組む
• 料金は数字を大きく、円と税込は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品グッズと料金カードは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px
• 写真は画面幅いっぱいに置き、黒地へ溶け込ませる
• 特長は番号→見出し→写真→本文→リンクの順に並べる
• 日程は 1 会場を 1 ブロックにし、ブロック間をグレーの線で区切る
• 概要は項目名＋下線＋内容の定義リストにする

Elevation & Depth

• 影は使わない。奥行きはスポットライト調の写真と光で出す
• カードは影を付けず 1px の細枠で区切る

Shapes

• 角丸: 小 2px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形。写真の縁は黒にフェードさせる。グッズ写真は細枠付きの長方形
• セクション境界: 境界線は置かない。番号の左右に伸びる金の水平線で区切る
• ボタンとカードは角丸なしの長方形
• テキストリンクの横には白い円に再生三角のアイコンを付ける
• MAP ボタンだけ小さな角丸（2px）にする

Components

• 黄色の帯ボタン（button-primary）: 幅いっぱいの黄色い長方形。明朝の文字を中央に、右端に太い矢印を置く
• 番号見出し（section-number）: 金色のセリフ数字の左右に、金の細い水平線を画面端まで伸ばす
• テキストリンク＋丸アイコン（link-play）: 白文字の後ろに、白い円に黒い三角のアイコンを付ける
• 金枠の誘導バナー（banner-outline）: 黒地に金茶の 1px 枠。左にロゴ、右に金文字で詳細へのリンクと矢印
• 料金カード（price-card）: 上部に黄色の見出し帯、その下は金枠の黒地。白い大きな数字と白帯の購入ラベル、＋記号で内容を縦に積む
• MAP 小ボタン（button-map）: 日程の右上に置く黄色の小さなボタン。右向き山形の記号付き
• 日程ブロック（schedule-item）: 日付と会場名を太字の白で書き、グレーの線の下にアクセスと営業時間を項目名付きで並べる
• 小英字＋金見出し（heading-ornament）: 小さな金の英字ラベルの下に、大きな金の太い明朝見出し。左右に金線を伸ばす
• TOP へ戻るボタン（button-back）: 黒地に金の 1px 枠と金文字、左に山形の記号

Do's and Don'ts

Do - 地は純黒に保ち、写真は暗い背景で光が当たる構図にする - 金色は見出し・番号・線に絞り、高級感を保つ - 見出しと本文は明朝で統一する - 情報量が多い部分は細い線と余白で整理する - 飲酒の注意事項と年齢の注記を必ず入れる

Don't - 明るい色の背景や白いセクションを途中に挟まない - 角丸のピル型ボタンやドロップシャドウを使わない - 黄色を本文や広い面に多用しない - 丸ゴシックやポップな書体を使わない - 明るく白飛びした商品写真を使わない

Page Structure

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

1. ヘッダー（ブランドの表示とメニュー）: 白の細いグローバル帯の下に山吹色の帯。中央にロゴ、左にメニューを置く
2. ファーストビュー（イベントの世界観を一目で伝える）: 左上に金のセリフ体タイトル、右上に大きな金の星。注ぐ瞬間の写真に白い明朝コピーとロゴを重ねる
3. イベント導入（概要の説明と会場詳細への誘導）: 白い明朝の中央揃え文を 5 行ほど置き、黄色の帯ボタンを続ける
4. SNS のお知らせ（最新情報を見せる）: 白い見出しの下に埋め込み投稿の枠
5. 紹介動画（会場の雰囲気を伝える）: 金の英字見出しと、再生ボタン付きの暗い会場写真
6. 特長（番号付き 4 つ）（空間・商品・設備・グッズのこだわりを伝える）: 金の番号と左右の線、白の 2 行見出し、黒に溶ける写真、本文と丸アイコン付きリンク
7. グッズ・関連サイト（関連する販売・会員サイトへの誘導）: 細枠の写真を 2×2 で並べ、金枠のバナーを 2 つ縦に置く
8. 料金メニュー（チケットの価格と内容を比べさせる）: 黄色の見出し帯付きカードを 2 列で並べる。数量限定の注記を上に添える
9. 開催場所・日程（全会場の日時と行き方を伝える）: 日程ブロックを縦に繰り返し、右上に MAP ボタンを置く
10. 追加告知 CTA（別のイベント会場へ誘導する）: 白く大きな明朝の 3 行コピーと黄色の帯ボタン
11. 開催概要・注意事項（詳しい条件と注意事項を伝える）: 金の装飾見出しの下に、項目名と下線の定義リスト。箇条書きの注意事項を続ける
12. バナー・関連カルーセル（関連商品やキャンペーンへの回遊）: 金枠のバナー、白抜きのロゴ、黄色の丸い矢印付きカルーセル、金枠の TOP ボタン
13. フッター（企業情報と飲酒の注意）: 淡いグレー地に星のロゴ、SNS アイコン、リンク一覧、飲酒の注意文

Imagery

• 黒バックに 1 灯のスポットライトを当てた商品写真。泡と琥珀色の液体が光る
• 写真の四辺は黒へグラデーションで溶かし、境目を見せない
• 会場や設備は暗い空間に光柱が浮かぶ構図で撮る
• 金色の星マークに金属や泡の質感を付けて大きく使う
• グッズは暗いグレー背景の物撮りを細枠に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px の幅で黒地を全面に敷く
• 特長セクションは左にテキスト、右に写真の 2 カラムにする
• グッズ写真は 4 列、誘導バナーは 2 列に並べる
• 日程は日付・会場名・MAP を 1 行に収め、詳細を横長の行で表示する
• ボタンは幅いっぱいをやめ、中央寄せで幅約 40% にする
• ヘッダーに横並びのグローバルナビを加える

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