DESIGN.md — 赤×金×白の斜体で攻める新発売ビール LP（Bold Red and Gold Beer Launch LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: 濃い赤・金のグラデーション・極太イタリック・水滴テクスチャ・斜めカット・新発売
• 地の質感: 赤い面に結露のような水滴が散ったテクスチャを敷き、冷えた缶の質感を出す。金は光沢グラデーション。
• 形: 角を斜めに落とした平行四辺形のボタン、八角形風の金枠カード、斜めカットの帯。
• 温度感: 熱量の高い暖色。白地で抜け感を作る。

Colors

• 地は白と水滴入りの濃い赤をセクションごとに交互に使う。
• 白地では見出しを赤、赤地では見出しを白にする。
• 金はグラデーションの帯・カード枠・見出し下線・再生ボタンに限定して使う。
• 赤地で最も目立たせたい技術名だけを黄色にする。
• 紺はフッターだけに使い、本編には持ち込まない。
• サブボタンは白地に赤文字にして、赤地の上で反転させる。
• release-band は文字 #DE001E × 背景 #E2B421 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FAF1D5、4.51:1）を使う。
• heading-marker は文字 #DE001E × 背景 #E2B421 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FAF1D5、4.51:1）を使う。

Typography

• 英字見出しは極太の斜体にし、下に小さな日本語の訳を中央揃えで添える。
• 日本語の見出しやリードも斜体（skew）で勢いを出す。
• 本文も太めの字で書き、赤地の上で埋もれないようにする。
• キャッチは2行にして、後ろの行を大きくする。
• 小見出しの右側に細い白線を画面端まで伸ばす。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、POINT は画像と文の左右交互配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの赤帯と白帯で区切る。
• 英字見出しはセクション上部の中央に置く。
• POINTの画像は片側の画面端まで裁ち落とし、交互に配置する。
• 誕生セクションの写真は左右どちらかの端に寄せて重ねる。
• 受賞カードは縦に並べ、カード間を16pxあける。

Elevation & Depth

• 影はほとんど使わず、平面的に仕上げる。
• 奥行きは金枠と写真の重ね配置で出す。
• フッターのボタンだけに薄い影を付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。商品画像は金枠付きの白パネルに入れる。
• セクション境界: 直線で色を切り替える。FVだけ赤と白を斜めに分割する。
• ボタンは左上と右下の角を斜めに落とした平行四辺形にする。
• 受賞カードは四隅を面取りした八角形の金枠にする。
• 金帯は斜め端の細長い形にする。

Components

• 斜めカット主CTA（button-primary）: 赤い面に白い太字、右端に＞。対角の2隅を斜めに落とす。
• 反転サブボタン（button-secondary）: 赤地の上に置く白面・赤文字の斜めカットボタン。
• 金の発売日帯（release-band）: FVの下端に敷く金グラデーションの帯。発売日を赤い斜体で載せる。
• 英字＋和文の見出し（section-title）: 極太イタリックの英字の下に、小さな日本語を添える。
• POINT番号（point-label）: 金色のPOINTの文字と大きな数字。下に金の線を引く。
• 受賞歴カード（award-card）: 面取りした金枠の白カード。左にメダル、中央に賞名、右下に赤字の「詳しく見る＋」を置く。
• 動画サムネイル（video-thumb）: 16:9の矩形サムネイルの中央に、金の円形再生ボタンを置く。下にキャプションを中央揃えで入れる。
• 金帯付きキャッチ（heading-marker）: 赤い斜体キャッチの背面に、斜めの金グラデーション帯を敷く。
• 追従キャンペーンバナー（floating-banner）: 画面右下に固定する赤いバナー。左側を丸く、金の数字で訴求する。

Do's and Don'ts

Do - 英字見出しと日本語のキャッチは必ずイタリックにする。 - 赤の地には水滴テクスチャを薄く敷く。 - 金はグラデーションで光沢を出す。 - 赤のセクションと白のセクションを交互に並べ、リズムを作る。 - ボタンは斜めカットの形で統一する。

Don't - パステル調の淡い色は使わない。 - ボタンをピル型や丸角にしない。 - 細い明朝体は使わない。 - 金を本文の文字色に使わない。 - 赤地の上に黒文字を置かない。

Page Structure

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

1. ファーストビュー（新発売とキャッチを一目で伝える）: 赤と白の斜め分割の上に、金の大きな英字・白いキャッチ・人物と商品を置き、下端に金の発売日帯を敷く。
2. 商品誕生の紹介（新しさと価値を短く伝える）: 白地に金帯付きの見出しを置く。写真は端に寄せて重ね、赤い斜体のリードを3行で添える。
3. ブランドメッセージ（キャッチを繰り返して印象を強める）: 飲む人物の写真の下に、赤のキャッチ、金帯、ロゴタイプを並べる。
4. 特長・技術（製法の独自性を説明する）: 赤い水滴地に英字見出しと横線付きの小見出しを置き、黄色の技術名、比較グラフ、本文の順に並べる。
5. パッケージのポイント（デザインのこだわりを伝える）: POINT番号付きの短文と金枠の商品画像を左右交互に配置する。
6. 受賞歴（第三者評価で信頼を示す）: 白地に赤い年号の見出しを置き、その下に八角形の金枠カードを縦に並べる。
7. 動画ギャラリー（CMで興味を深める）: 赤地に動画サムネイルとキャプションを並べ、最後に白い斜めボタンを置く。
8. キャンペーン（購入を後押しする）: 白地に赤枠のバナー画像を置き、下部の赤帯に「詳しくはこちら」の導線を入れる。
9. 出演者紹介（親近感と話題性を出す）: 赤地に正方形の人物写真、白い名前、金の下線、プロフィール文を並べる。
10. 商品ラインナップ・CTA（商品情報への遷移を促す）: 白地に容量違いの缶を並べ、赤いロゴタイプと斜めカットの赤いCTAを置く。
11. フッター（関連リンクと注意表記を載せる）: リンクを2列に並べ、淡い青のSNS枠、紺の帯、飲酒の注意表記を入れる。

Imagery

• 人物は黒い服を着せ、白背景か淡い空の前で正面から撮り、缶を手に持たせる。
• 商品は白背景で正面から撮り、冷えた質感を強調する。
• 背景には赤い面に細かな水滴が散ったマクロ写真風のテクスチャを使う。
• 飲むシーンは明るい自然光で撮り、赤い流線の装飾を重ねる。
• グラフは黄色からオレンジのグラデーションの山と灰色の線で、比較をイメージで見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央の約900px幅に収め、FVは横長で人物を右、コピーを左に置く。
• PCのPOINTは、中央の商品画像を3つの要点で左右から囲む配置にする。
• PCの受賞カードとWEB CMは2列のグリッドにする。
• PCの出演者紹介は、左に写真、右に文章の横並びにする。
• PCでは上部に英字のアンカーナビを固定する。

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