DESIGN.md — 黒×封蝋レッドのクラフト洋酒ブランドLP（Red Wax Craft Whisky Brand LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト、レトロ
• キーワード: 封蝋レッド・漆黒・クリーム地・セリフ英字見出し・物語コピー・手づくり感
• 地の質感: 黒板のようなざらつきのある黒、とろりとした赤い蝋のシズル写真、暖色の生成り地
• 形: 直線の矩形ブロックが基本。角丸はほぼ使わない。セクション境界は細かい波形、バッジは封蝋のような不定形の円
• 温度感: 暖かく、ほの暗い。夜のバーのような温度感

Colors

• 上部は黒→深紅→黒（写真）と暗く強い色で物語を見せる。
• 下部は生成り→クリームと明るい暖色に切り替え、商品と店舗情報を見せる。
• 赤は面か封蝋モチーフに使い、文字色の強調には使わない。
• 黒・赤の地では文字を白に、ボタンは白枠のアウトラインにする。
• 明るい地では文字を黒に、ボタンは黒枠のアウトラインにする。
• 動画の枠線にだけ細い赤線を使ってよい。

Typography

• 見出しは「英字セリフ大＋和文ゴシック小」の2段で組む。
• 英字見出しは短い英語フレーズで、タイトルケースにする。
• 物語コピーは1行を短くして左揃えにし、行間2.0でゆったり並べる。
• PCでは物語コピーを縦書きにしてよい。
• 本文は細めの字で小さく組み、装飾はしない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品のみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは左右16〜26pxの余白をとった全幅の帯にする。
• 写真の上に見出しを置くセクションは中央揃え、明るい地のセクションは左揃えにする。
• 動画は16:9で、コンテンツ幅いっぱいに置く。
• 見出し、説明文、詳しく見るボタンの順に並べる。
• 商品は切り抜きボトルを2列に並べ、下に小さく名前を添える。

Elevation & Depth

• 影は基本的に使わず、フラットに見せる。
• 商品ボトルにだけ、柔らかい落ち影を下に付ける。
• 写真の上の文字は、写真を暗くして読みやすくする。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形でトリミングし、商品だけ切り抜きにする
• セクション境界: 明るい地と暗い地の境は細かい波形（スカラップ）。それ以外は直線で切り替える
• ボタンは角丸なしの細い枠線の矩形にする。
• 封蝋の形をした不定形の円バッジを強調に使う。
• カードや角丸パネルは使わない。

Components

• 詳しく見るボタン（button-outline）: 透明な地に1pxの枠線を付けた横長の矩形。暗い地では白枠、明るい地では黒枠
• 通販誘導CTA（button-primary）: 深紅の塗りに白文字を載せた矩形ボタン。物語コピーの下に置く
• 英和2段見出し（heading-bilingual）: 英字セリフの太い見出しの下に、和文の細い見出しを添える
• 封蝋バッジ（badge-wax-seal）: 赤い封蝋のような不定形の円に、白文字を2〜3行入れる。限定品や案内に使う
• 物語コピーブロック（story-copy）: 黒地に白文字。短い行を20行ほど左揃えで並べる
• 動画埋め込み（video-embed）: 16:9の動画を置き、下に中央揃えのキャプションを付ける。暗い地では赤い細枠で囲む
• 商品切り抜きタイル（product-tile）: クリーム地にボトルの切り抜き写真を置き、下に小さく商品名を添える
• 写真全面セクション（photo-hero-section）: シズル写真を全幅に敷き、中央に英和見出しと説明文、白枠ボタンを重ねる

Do's and Don'ts

Do - 暗い地（黒・赤）と明るい地（生成り・クリーム）をリズムよく切り替える。 - 見出しはすべて英字セリフと和文の2段で統一する。 - 赤い蝋が滴るなど、手仕事のシズル写真を全幅で使う。 - ボタンは細枠のアウトラインで控えめに見せる。 - 暗い地と明るい地の境に波形の区切りを入れる。

Don't - ピル型ボタンやポップな角丸カードは使わない。 - 赤を文字の強調色として多用しない。 - 派手なグラデーションやネオン色は使わない。 - 情報を詰め込まず、余白で品位を保つ。 - 飲酒注意の表記を省略しない。

Page Structure

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

1. ファーストビュー（ブランドの世界観とキャラクターを一瞬で伝える）: モノクロの人物写真に、赤いワンポイントと縦書きキャッチを重ねる。下部にロゴと商品ボトルを置く
2. ブランドストーリー（詩的な物語で情緒的な共感をつくる）: 黒地に白文字で短い行を並べる。PCは縦書きにして、下にCTAを置く
3. ストーリー動画（体験談と動画で物語を広げる）: 深紅の全面地に、英字見出し、短い文章、16:9の動画、キャプションを並べる
4. ブランド紹介（手づくりのこだわりを伝える）: 封蝋を施す写真を全面に敷き、中央に見出し、説明、白枠ボタン、封蝋バッジを重ねる
5. ブランドムービー（職人の手仕事を映像で見せる）: 暗い写真の上に、英字キャッチ、和文、封蝋型の再生ボタンを置く
6. 飲み方提案（おすすめの楽しみ方を提案する）: ハイボールの写真に、左揃えの見出しと半透明の黒帯の説明文を重ねる
7. 取扱店紹介（飲める店への導線をつくる）: 生成り地に店内写真を全幅で置き、見出し、説明、黒枠ボタンを続ける
8. 商品ラインナップ（商品ごとの違いを見せる）: クリーム地に、上下の波形の区切りを付ける。ボトルの切り抜きを2列に並べ、限定品には封蝋バッジを付ける
9. 広告紹介（CMやグラフィックをまとめて見せる）: 黒板調の暗い地に、赤枠の動画とキャプション、白枠ボタンを置く
10. フッター（企業サイトへの回遊と注意表記）: 白地のアコーディオンリンクと、淡いブルーグレー地のバナーを2列で並べる。SNSアイコンと飲酒注意も置く

Imagery

• 人物はモノクロで撮り、衣装や小物の赤だけを残して強調する。
• 赤い蝋が瓶口から滴る瞬間を、浅い被写界深度でシズル感たっぷりに撮る。
• バーカウンターや店内は暖色の電球光でほの暗く撮る。
• 商品は白い背景で切り抜き、落ち影を付けて真正面から見せる。
• 黒板やチョークのような粗いテクスチャを暗い地に敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは物語コピーを縦書きの多段組にし、中央に置く。
• PCの取扱店とラインナップは、写真とテキストの左右2カラムにする。
• PCでは商品を3本横並びにする。
• PCの上部には黒帯のグローバルナビを横並びで置き、中央にロゴを置く。
• 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 行書くと起動時に読み込まれる。