---
version: alpha
name: Red Wax Craft Whisky Brand LP
description: 黒地と深紅を交互に重ね、セリフ体の英字見出しと和文サブ見出しでつなぐ洋酒ブランドサイト。物語調の詩的コピー、動画埋め込み、封蝋モチーフの丸バッジ、生成り〜クリーム地の商品紹介、波形のセクション境界で、手づくり感と大人の上質さを出している。
colors:
  primary: '#C90022'
  dark-section: '#000000'
  accent-1: '#1A161B'
  on-dark: '#FFFFFF'
  background: '#FBE1AE'
  background-alt: '#FFF7EC'
  text: '#181517'
  line: '#181517'
  accent-2: '#C90022'
  surface: '#ECF4F7'
  cta: '#B32B33'
  on-cta: '#FFFFFF'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.4
  accent:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  button-outline:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 28px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  heading-bilingual:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 50px
  badge-wax-seal:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  story-copy:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 650px
  video-embed:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 180px
  product-tile:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 340px
  photo-hero-section:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 300px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#C90022` | ブランドの深紅（ストーリー面） | 9% | 画素の実測 |
| `dark-section` | `#000000` | 物語コピーの漆黒背景 | 14% | 画素の実測 |
| `accent-1` | `#1A161B` | 黒板調テクスチャの広告セクション地 | 11% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒・赤地の上の白文字 | 3% | 画素の主要色に補正 |
| `background` | `#FBE1AE` | 商品ラインナップのクリーム地 | 15% | 画素の実測 |
| `background-alt` | `#FFF7EC` | 店舗紹介の生成り地 | 5% | 画素の実測 |
| `text` | `#181517` | 明るい地の見出し・本文 | 2% | 画素の主要色に補正 |
| `line` | `#181517` | アウトラインボタンの枠線 | 0% | 画素の主要色に補正 |
| `accent-2` | `#C90022` | 封蝋バッジの赤 | 1% | 画素の主要色に補正 |
| `surface` | `#ECF4F7` | フッターの淡いブルーグレー地 | 5% | 画素の実測 |
| `cta` | `#B32B33` | PCのオンラインショップ誘導ボタン | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字のセクション見出し | 欧文セリフ | Playfair Display | 700 | 22px | 1.2 | 0.0em |
| `headline-md` | 英字見出し下の和文サブ見出し | ゴシック | Noto Sans JP | 400 | 16px | 1.5 | 0.05em |
| `body-lg` | 物語調の詩的コピー（短い行を改行で並べる） | ゴシック | Noto Sans JP | 500 | 15px | 2.0 | 0.05em |
| `body-md` | セクションの説明文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em |
| `headline-sm` | 動画タイトル・キャプション | ゴシック | Noto Sans JP | 400 | 12px | 1.5 | 0.05em |
| `label-button` | アウトラインボタンの文字 | ゴシック | Noto Sans JP | 400 | 10px | 1.0 | 0.05em |
| `note` | 商品名キャプション | 欧文サンセリフ | Noto Sans JP | 400 | 9px | 1.4 | 0.0em |
| `accent` | FVの縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.3 | 0.1em |

- 見出しは「英字セリフ大＋和文ゴシック小」の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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-5a6e804a`（元 LP の URL から採番）
- **元 LP**: https://www.suntory.co.jp/whisky2025/makersmark/?fromid=001&_ga=2.26604542.2132003458.1754954627-1772456316.1753166244
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。