白地×極太黒文字×琥珀色の飲料 LP

Bold Black Type Amber Beverage LP

白い地に極太の黒ゴシックを大きく組み、泡立つ琥珀色の液体写真と赤い手描き風ラインで勢いを出す飲料プロモーション LP。モノクロの人物写真と缶の商品写真をコラージュし、広告ポスターのような力強さを持たせている。

酒類力強い・インパクトポップ・元気シンプル・ミニマルSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白にする。色の面は液体写真の帯だけで作る
見出しは黒一色。強調したい語だけ文字サイズを上げる
赤は手描きライン・小見出し・ラベル帯だけに使う
琥珀色は写真やグラデで出し、ベタ塗りの面にはしない
フッターだけ淡い水色グレーの地に切り替える

TYPOGRAPHY

書体

displayFV の縦組み大コピーゴシック／ Dela Gothic One 900 ／ 90px ／行間 1.05

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg英字のセクション見出し欧文サンセリフ／ Anton 900 ／ 56px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-md特長の大見出しゴシック／ Noto Sans JP 900 ／ 32px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm特長の見出しゴシック／ Noto Sans JP 800 ／ 27px ／行間 1.35

あなたの LP を、もっと伝わる形に。Aa 123

accent赤い和文の小見出しゴシック／ Noto Sans JP 900 ／ 18px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

body-lgステートメント文ゴシック／ Noto Sans JP 900 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明・動画タイトルゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・成分値ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

見出しは極太で詰め気味に組む
強調したい語だけ大きくし、助詞は小さくする
英字見出しはコンデンス系の極太体で横幅いっぱいに置く
英字見出しの左上に赤い和文の小見出しを斜めの線で添える
本文も太字にして、ポスターのような密度を保つ

PAGE STRUCTURE

セクション構成

ヘッダー企業ロゴとメニュー白地に左ロゴ、右ハンバーガー。薄い影を付ける
ファーストビュー商品とコピーで一瞬で惹きつける縦組みの極太コピー、手持ちの缶、モノクロ人物、琥珀の斜め帯、爆発バッジを重ねる
ステートメント商品の思想を語る琥珀の帯の上に太字の短文を 10 行ほど並べ、締めのコピーと缶を添える
ブランド訴求技術の裏付けを示す全幅の泡写真の帯から白地へ切り替え、強調語だけ大きい極太見出し
特長味の根拠を 2 点示す左に缶、右に赤線付き小見出しと大見出し。円形の原料写真や工程アイコンを添える
製品情報容量と成分を示す英字見出しの下に缶写真と黒白 2 列の成分表
動画CM を見せる16:9 動画カードを縦に 2 本並べる
ギャラリー広告ビジュアルを並べる横スクロールの広告画像帯を 2 段にする
新着情報お知らせ英字見出しに傾いた赤ラベルを重ねる
フッター企業サイトへの導線と注意表記アコーディオンメニュー、淡い地にリンクカード、SNS アイコン、飲酒の注意書き

COMPONENTS

部品

英字セクション見出し en-section-title極太の英字見出しの左上に、赤い和文の小見出しと赤い斜線 2 本を添える
赤線付き小見出し red-stroke-label上下に赤い手描き風の斜線を入れた短い見出し
傾いた赤ラベル badge-tilted赤地に白い太字。少し傾けて見出しの下に重ねる
爆発型バッジ burst-badge白地に赤線のギザギザ吹き出し。中に赤い強調語を入れる
成分表 nutrition-table左が黒地に白文字、右が白地に黒文字の 2 列表。行ごとに区切る
動画カード video-card16:9 のサムネイルの中央に白い円形の再生アイコン。下に太字のタイトル
工程アイコン列 process-icons細い線の円にイラストを入れ、小さな三角でつなげて 3 つ並べる
フッターリンクカード footer-link-card淡い地の上に白い矩形カードを 2 列で並べ、中央にロゴ文字を置く

守ること

見出しは画面幅いっぱいに極太で大きく組む
琥珀色の泡や水滴の写真で温度感を出す
赤は線とラベルに絞って使う
人物はモノクロにして商品のカラーを目立たせる
白い余白を大きくとり、要素の密度を緩急で見せる

DON'T

避けること

角丸のボタンやパステル色を使わない
細い明朝体で見出しを組まない
琥珀色をベタ塗りの背景に広く使わない
赤を本文に使わない
ドロップシャドウで立体感を出さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白地×極太黒文字×琥珀色の飲料 LP（Bold Black Type Amber Beverage LP）

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

Overview

業種: 酒類／ 雰囲気: 力強い・インパクト、ポップ・元気、シンプル・ミニマル
キーワード: 極太ゴシック・琥珀の泡・白地・赤ライン・モノクロ人物・ポスター風
地の質感: 白地はフラット。液体の泡や水滴の写真で質感を足す
形: 角のない四角が基本。写真は斜めの帯状や円形に切り抜く
温度感: 暖色の琥珀と赤が主役。黒と白で引き締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#FFFFFF`	ページの地	57%	画素の実測
`primary`	`#F8C02D`	琥珀色の液体イメージ	7%	画素の主要色に補正
`text`	`#000000`	極太見出しの文字	6%	画素の実測
`accent-1`	`#E20C0B`	赤い手描きラインと小見出し	1%	画素の実測
`cta`	`#E60012`	強調ラベルの赤帯	0%	推定
`on-cta`	`#FEF8F8`	赤帯上の白文字	0%	画素の実測
`dark-section`	`#010101`	成分表の見出しセル	1%	画素の実測
`accent-2`	`#CD7033`	液体の焼き色・グラデ端	3%	画素の主要色に補正
`background-alt`	`#ECF4F7`	フッター地	7%	画素の実測
`surface`	`#FEFEFE`	フッターのリンクカード	3%	画素の実測
`line`	`#0F0E0B`	成分表の罫線・区切り線	0%	画素の主要色に補正
`text-muted`	`#595B50`	注釈・補足	0%	画素の主要色に補正
`secondary`	`#41B6E6`	ヘッダーの企業ロゴ色	0%	推定

地は白にする。色の面は液体写真の帯だけで作る
見出しは黒一色。強調したい語だけ文字サイズを上げる
赤は手描きライン・小見出し・ラベル帯だけに使う
琥珀色は写真やグラデで出し、ベタ塗りの面にはしない
フッターだけ淡い水色グレーの地に切り替える

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の縦組み大コピー	ゴシック	Dela Gothic One	900	90px	1.05	-0.02em
`headline-lg`	英字のセクション見出し	欧文サンセリフ	Anton	900	56px	1.0	0.02em
`headline-md`	特長の大見出し	ゴシック	Noto Sans JP	900	32px	1.3	0.0em
`headline-sm`	特長の見出し	ゴシック	Noto Sans JP	800	27px	1.35	0.02em
`accent`	赤い和文の小見出し	ゴシック	Noto Sans JP	900	18px	1.2	0.0em
`body-lg`	ステートメント文	ゴシック	Noto Sans JP	900	17px	1.5	0.0em
`body-md`	説明・動画タイトル	ゴシック	Noto Sans JP	700	13px	1.6	0.0em
`note`	注釈・成分値	ゴシック	Noto Sans JP	400	10px	1.5	0.0em

見出しは極太で詰め気味に組む
強調したい語だけ大きくし、助詞は小さくする
英字見出しはコンデンス系の極太体で横幅いっぱいに置く
英字見出しの左上に赤い和文の小見出しを斜めの線で添える
本文も太字にして、ポスターのような密度を保つ
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。特長は缶写真を左、文字を右に並べる
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
FV は人物と缶と大コピーを重ねたコラージュにする
セクションの間は白い余白を大きくとる
特長ブロックは商品写真を左端に寄せ、はみ出させる
表は商品写真の右に置き、2 列で組む
フッターは全幅の淡い地にカードを 2 列で並べる

Elevation & Depth

影は基本使わずフラットにする
商品缶の下に薄い落ち影を付けるのみ
ヘッダーの下にごく薄い影を付ける

Shapes

角丸: 小 0px ／中 2px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 原料写真は円形。液体写真は斜めの帯や全幅の帯で切り抜く
セクション境界: 直線。液体写真の帯がセクション間のつなぎになる
角丸は使わない
赤ラベルは少し傾けた長方形にする
アイコンは細い線の円の中に置く

Components

英字セクション見出し（en-section-title）: 極太の英字見出しの左上に、赤い和文の小見出しと赤い斜線 2 本を添える
赤線付き小見出し（red-stroke-label）: 上下に赤い手描き風の斜線を入れた短い見出し
傾いた赤ラベル（badge-tilted）: 赤地に白い太字。少し傾けて見出しの下に重ねる
爆発型バッジ（burst-badge）: 白地に赤線のギザギザ吹き出し。中に赤い強調語を入れる
成分表（nutrition-table）: 左が黒地に白文字、右が白地に黒文字の 2 列表。行ごとに区切る
動画カード（video-card）: 16:9 のサムネイルの中央に白い円形の再生アイコン。下に太字のタイトル
工程アイコン列（process-icons）: 細い線の円にイラストを入れ、小さな三角でつなげて 3 つ並べる
フッターリンクカード（footer-link-card）: 淡い地の上に白い矩形カードを 2 列で並べ、中央にロゴ文字を置く

Do's and Don'ts

Do - 見出しは画面幅いっぱいに極太で大きく組む - 琥珀色の泡や水滴の写真で温度感を出す - 赤は線とラベルに絞って使う - 人物はモノクロにして商品のカラーを目立たせる - 白い余白を大きくとり、要素の密度を緩急で見せる

Don't - 角丸のボタンやパステル色を使わない - 細い明朝体で見出しを組まない - 琥珀色をベタ塗りの背景に広く使わない - 赤を本文に使わない - ドロップシャドウで立体感を出さない

Page Structure

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

ヘッダー（企業ロゴとメニュー）: 白地に左ロゴ、右ハンバーガー。薄い影を付ける
ファーストビュー（商品とコピーで一瞬で惹きつける）: 縦組みの極太コピー、手持ちの缶、モノクロ人物、琥珀の斜め帯、爆発バッジを重ねる
ステートメント（商品の思想を語る）: 琥珀の帯の上に太字の短文を 10 行ほど並べ、締めのコピーと缶を添える
ブランド訴求（技術の裏付けを示す）: 全幅の泡写真の帯から白地へ切り替え、強調語だけ大きい極太見出し
特長（味の根拠を 2 点示す）: 左に缶、右に赤線付き小見出しと大見出し。円形の原料写真や工程アイコンを添える
製品情報（容量と成分を示す）: 英字見出しの下に缶写真と黒白 2 列の成分表
動画（CM を見せる）: 16:9 動画カードを縦に 2 本並べる
ギャラリー（広告ビジュアルを並べる）: 横スクロールの広告画像帯を 2 段にする
新着情報（お知らせ）: 英字見出しに傾いた赤ラベルを重ねる
フッター（企業サイトへの導線と注意表記）: アコーディオンメニュー、淡い地にリンクカード、SNS アイコン、飲酒の注意書き

Imagery

人物は高コントラストのモノクロ写真にし、大げさな表情で切り抜く
液体は泡や水滴のあるマクロ写真。斜めの帯状に切り抜く
商品缶は正面から撮り、白背景で切り抜く
原料は円形に切り抜いた自然光の写真にする
アイコンは細い線と黄土色の差し色のイラストにする
手描き風の赤い斜線を装飾に使う
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はヘッダーにグローバルナビを横並びで出す
PC の FV は横長のコラージュにし、コピーは左寄せの縦組み
PC のステートメントは縦書きにする
PC の成分表は 2×2 の横並びにする
PC の動画は 2 本を横に並べる
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 行書くと起動時に読み込まれる。

---
version: alpha
name: Bold Black Type Amber Beverage LP
description: 白い地に極太の黒ゴシックを大きく組み、泡立つ琥珀色の液体写真と赤い手描き風ラインで勢いを出す飲料プロモーション LP。モノクロの人物写真と缶の商品写真をコラージュし、広告ポスターのような力強さを持たせている。
colors:
  background: '#FFFFFF'
  primary: '#F8C02D'
  text: '#000000'
  accent-1: '#E20C0B'
  cta: '#E60012'
  on-cta: '#FEF8F8'
  dark-section: '#010101'
  accent-2: '#CD7033'
  background-alt: '#ECF4F7'
  surface: '#FEFEFE'
  line: '#0F0E0B'
  text-muted: '#595B50'
  secondary: '#41B6E6'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 90px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Anton
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 32px
    fontWeight: 900
    lineHeight: 1.3
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 27px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.02em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.2
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 900
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 0px
  md: 2px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  en-section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 90px
  red-stroke-label:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 40px
  badge-tilted:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    height: 30px
  burst-badge:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 110px
  nutrition-table:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.note}'
    height: 200px
  video-card:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 260px
  process-icons:
    backgroundColor: '{colors.background}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 90px
  footer-link-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 65px
---

# DESIGN.md — 白地×極太黒文字×琥珀色の飲料 LP（Bold Black Type Amber Beverage LP）

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

## Overview

- **業種**: 酒類 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、シンプル・ミニマル
- **キーワード**: 極太ゴシック・琥珀の泡・白地・赤ライン・モノクロ人物・ポスター風
- **地の質感**: 白地はフラット。液体の泡や水滴の写真で質感を足す
- **形**: 角のない四角が基本。写真は斜めの帯状や円形に切り抜く
- **温度感**: 暖色の琥珀と赤が主役。黒と白で引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | ページの地 | 57% | 画素の実測 |
| `primary` | `#F8C02D` | 琥珀色の液体イメージ | 7% | 画素の主要色に補正 |
| `text` | `#000000` | 極太見出しの文字 | 6% | 画素の実測 |
| `accent-1` | `#E20C0B` | 赤い手描きラインと小見出し | 1% | 画素の実測 |
| `cta` | `#E60012` | 強調ラベルの赤帯 | 0% | 推定 |
| `on-cta` | `#FEF8F8` | 赤帯上の白文字 | 0% | 画素の実測 |
| `dark-section` | `#010101` | 成分表の見出しセル | 1% | 画素の実測 |
| `accent-2` | `#CD7033` | 液体の焼き色・グラデ端 | 3% | 画素の主要色に補正 |
| `background-alt` | `#ECF4F7` | フッター地 | 7% | 画素の実測 |
| `surface` | `#FEFEFE` | フッターのリンクカード | 3% | 画素の実測 |
| `line` | `#0F0E0B` | 成分表の罫線・区切り線 | 0% | 画素の主要色に補正 |
| `text-muted` | `#595B50` | 注釈・補足 | 0% | 画素の主要色に補正 |
| `secondary` | `#41B6E6` | ヘッダーの企業ロゴ色 | 0% | 推定 |

- 地は白にする。色の面は液体写真の帯だけで作る
- 見出しは黒一色。強調したい語だけ文字サイズを上げる
- 赤は手描きライン・小見出し・ラベル帯だけに使う
- 琥珀色は写真やグラデで出し、ベタ塗りの面にはしない
- フッターだけ淡い水色グレーの地に切り替える

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の縦組み大コピー | ゴシック | Dela Gothic One | 900 | 90px | 1.05 | -0.02em |
| `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Anton | 900 | 56px | 1.0 | 0.02em |
| `headline-md` | 特長の大見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.3 | 0.0em |
| `headline-sm` | 特長の見出し | ゴシック | Noto Sans JP | 800 | 27px | 1.35 | 0.02em |
| `accent` | 赤い和文の小見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.2 | 0.0em |
| `body-lg` | ステートメント文 | ゴシック | Noto Sans JP | 900 | 17px | 1.5 | 0.0em |
| `body-md` | 説明・動画タイトル | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em |
| `note` | 注釈・成分値 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |

- 見出しは極太で詰め気味に組む
- 強調したい語だけ大きくし、助詞は小さくする
- 英字見出しはコンデンス系の極太体で横幅いっぱいに置く
- 英字見出しの左上に赤い和文の小見出しを斜めの線で添える
- 本文も太字にして、ポスターのような密度を保つ
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長は缶写真を左、文字を右に並べる
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
- FV は人物と缶と大コピーを重ねたコラージュにする
- セクションの間は白い余白を大きくとる
- 特長ブロックは商品写真を左端に寄せ、はみ出させる
- 表は商品写真の右に置き、2 列で組む
- フッターは全幅の淡い地にカードを 2 列で並べる

## Elevation & Depth

- 影は基本使わずフラットにする
- 商品缶の下に薄い落ち影を付けるのみ
- ヘッダーの下にごく薄い影を付ける

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 原料写真は円形。液体写真は斜めの帯や全幅の帯で切り抜く
- **セクション境界**: 直線。液体写真の帯がセクション間のつなぎになる
- 角丸は使わない
- 赤ラベルは少し傾けた長方形にする
- アイコンは細い線の円の中に置く

## Components

- **英字セクション見出し**（`en-section-title`）: 極太の英字見出しの左上に、赤い和文の小見出しと赤い斜線 2 本を添える
- **赤線付き小見出し**（`red-stroke-label`）: 上下に赤い手描き風の斜線を入れた短い見出し
- **傾いた赤ラベル**（`badge-tilted`）: 赤地に白い太字。少し傾けて見出しの下に重ねる
- **爆発型バッジ**（`burst-badge`）: 白地に赤線のギザギザ吹き出し。中に赤い強調語を入れる
- **成分表**（`nutrition-table`）: 左が黒地に白文字、右が白地に黒文字の 2 列表。行ごとに区切る
- **動画カード**（`video-card`）: 16:9 のサムネイルの中央に白い円形の再生アイコン。下に太字のタイトル
- **工程アイコン列**（`process-icons`）: 細い線の円にイラストを入れ、小さな三角でつなげて 3 つ並べる
- **フッターリンクカード**（`footer-link-card`）: 淡い地の上に白い矩形カードを 2 列で並べ、中央にロゴ文字を置く

## Do's and Don'ts

**Do**
- 見出しは画面幅いっぱいに極太で大きく組む
- 琥珀色の泡や水滴の写真で温度感を出す
- 赤は線とラベルに絞って使う
- 人物はモノクロにして商品のカラーを目立たせる
- 白い余白を大きくとり、要素の密度を緩急で見せる

**Don't**
- 角丸のボタンやパステル色を使わない
- 細い明朝体で見出しを組まない
- 琥珀色をベタ塗りの背景に広く使わない
- 赤を本文に使わない
- ドロップシャドウで立体感を出さない

## Page Structure

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

1. **ヘッダー**（企業ロゴとメニュー）: 白地に左ロゴ、右ハンバーガー。薄い影を付ける
2. **ファーストビュー**（商品とコピーで一瞬で惹きつける）: 縦組みの極太コピー、手持ちの缶、モノクロ人物、琥珀の斜め帯、爆発バッジを重ねる
3. **ステートメント**（商品の思想を語る）: 琥珀の帯の上に太字の短文を 10 行ほど並べ、締めのコピーと缶を添える
4. **ブランド訴求**（技術の裏付けを示す）: 全幅の泡写真の帯から白地へ切り替え、強調語だけ大きい極太見出し
5. **特長**（味の根拠を 2 点示す）: 左に缶、右に赤線付き小見出しと大見出し。円形の原料写真や工程アイコンを添える
6. **製品情報**（容量と成分を示す）: 英字見出しの下に缶写真と黒白 2 列の成分表
7. **動画**（CM を見せる）: 16:9 動画カードを縦に 2 本並べる
8. **ギャラリー**（広告ビジュアルを並べる）: 横スクロールの広告画像帯を 2 段にする
9. **新着情報**（お知らせ）: 英字見出しに傾いた赤ラベルを重ねる
10. **フッター**（企業サイトへの導線と注意表記）: アコーディオンメニュー、淡い地にリンクカード、SNS アイコン、飲酒の注意書き

## Imagery

- 人物は高コントラストのモノクロ写真にし、大げさな表情で切り抜く
- 液体は泡や水滴のあるマクロ写真。斜めの帯状に切り抜く
- 商品缶は正面から撮り、白背景で切り抜く
- 原料は円形に切り抜いた自然光の写真にする
- アイコンは細い線と黄土色の差し色のイラストにする
- 手描き風の赤い斜線を装飾に使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーにグローバルナビを横並びで出す
- PC の FV は横長のコラージュにし、コピーは左寄せの縦組み
- PC のステートメントは縦書きにする
- PC の成分表は 2×2 の横並びにする
- PC の動画は 2 本を横に並べる
- 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-515cf6f7`（元 LP の URL から採番）
- **元 LP**: https://www.suntory.co.jp/non-al/thebezers/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

酒類炎と赤黒の激辛ビール系 LPFiery Red Spicy Beverage LP 酒類朱赤と金の和柄な正月福袋酒類 LPFestive New Year Red & Gold Lucky Bag LP 酒類青空ブルー×泡白の爽快ビール LPComfort Blue Refreshing Beer Brand LP 酒類赤×金×白の斜体で攻める新発売ビール LPBold Red and Gold Beer Launch LP 酒類レモン黄×木目×黒帯の居酒屋風酒類LPIzakaya Wood and Lemon Yellow Pop Drink LP 酒類漆黒×金の帯見出しで魅せるビール LPBlack and Gold Premium Beer LP