DESIGN.md — 黒×ビール黄の斜め切替え酒類プロモLP（Bold Black and Beer Yellow Diagonal Promo LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: ビールの黄色・漆黒・斜めの切替え・極太ゴシック・泡・動き
• 地の質感: ビールの液面と細かい気泡の写真テクスチャを黄色い面に敷く。黒い面はフラット。銀色セクションには水滴の付いた缶肌のテクスチャ
• 形: セクション境界は斜めの直線。見出しは黒い角帯。お客様の声は真円の泡の吹き出し
• 温度感: 冷たく爽快でありながら、熱気のある高コントラスト

Colors

• 黄色と黒のセクションを交互に置き、境界は必ず斜めにする
• 黄色地の文字は黒、黒地の文字は白。強調語は山吹色か黄色にする
• 見出しは黒い帯に白文字を載せて、どの地色の上でも読めるようにする
• 赤は主CTAと注意喚起ラベルにだけ使う
• 注意・安全の情報は黒地に濃灰パネルで落ち着かせる
• 黄色い面には泡のテクスチャを敷き、平坦な単色にしない

Typography

• 見出しはすべて極太（900）でイタリック調に傾ける
• キャッチは行ごとに文字サイズを変え、核となる語を大きくする
• 本文も太字（700）にして、テクスチャの上でもつぶれないようにする
• 欧文の見出しは極太イタリックのサンセリフ
• 注釈は米印付きの小さい文字で各ブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。泡の吹き出しは左右に互い違い
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは中央寄せの狭い幅にまとめ、背景は全幅に広げる
• 斜めの境界の分だけ上下の余白を広く取る
• 動画は横スクロールのカルーセルにし、下にスクロールバーを付ける
• ポイントは丸いバッジを 2〜3 列に並べる
• 注意情報は表やステップ写真で詳しく並べる

Elevation & Depth

• 影はほとんど使わない。重なりは色と斜めの切替えで表す
• 泡の吹き出しには内側に柔らかい影をつけて立体感を出す
• 製品の缶写真には接地の薄い影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物は切り抜いて缶と組み合わせる
• セクション境界: 斜めの直線（左上から右下へ約8〜10°）
• ボタンは角丸が小さい長方形で、右に矢印を入れる
• 見出しの帯は角丸なしの黒い長方形
• お客様の声は真円の泡にする
• ポイントは缶の口を模した円形の銀色バッジに番号のタグを付ける

Components

• 赤い主CTA（button-primary）: 赤い長方形に白い太字、右に矢印。少し傾けて勢いを出す
• 黒帯の見出し（heading-band）: 黒い角帯に白い極太文字。2行の場合は行ごとに帯を分ける
• 黄色の案内バナー（banner-link）: 黄色の帯に缶写真と2行の見出し、右端に矢印
• 泡の声の吹き出し（foam-bubble）: 白い真円の泡に、強調語を山吹色にした声を中央揃えで置く。周りに小さな泡を散らす
• ポイントの丸バッジ（point-badge）: 銀色の缶口リングの中に短いポイント文、右上に黄色い番号の円
• 動画カード（video-card）: 16:9のサムネイル中央に黄色の再生ボタン、下に2行のタイトル
• 注意パネル（caution-panel）: 黒地の濃灰パネルに、赤や黄色のラベル帯と番号付きの写真ステップ
• 出演者プロフィール（profile-row）: 左に写真、右に白い名前ラベルと経歴の本文

Do's and Don'ts

Do - 黄色と黒を斜めに切り替えてリズムを作る - 見出しは極太イタリックで大きく、文字サイズに強弱をつける - 黄色い面には泡と気泡のテクスチャを敷く - 製品の缶をどのセクションにも登場させる - 注意事項や注釈は省かず、小さい文字で丁寧に載せる

Don't - パステル色や淡いグラデーションを使わない - 大きな角丸やピル型のボタンにしない - 細いウェイトや明朝体を見出しに使わない - セクション境界を水平線だけにしない - 赤を装飾に多用しない

Page Structure

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

1. ファーストビュー（コンセプトと製品を一目で伝える）: 明るい灰色の地に人物・缶・泡のジョッキ写真。左に極太のキャッチを3行
2. コンセプト（おいしさの核となる価値を語る）: 泡のテクスチャの黄色い地に、大きさを変えた黒い極太文字を段々に置く
3. 案内バナー（楽しみ方のページへ誘導する）: 斜めに区切った黒帯の中に黄色のリンクバナー
4. 動画（TVCM・WEB CM）（広告の動画を見せる）: 黄色の地に欧文の極太見出し、横スクロールの動画カード
5. 楽しみ方のポイント（おいしく飲むコツを5つ示す）: 水滴の付いた銀色の地に黒帯見出し、番号付きの丸バッジ
6. 付属品の紹介（関連グッズを紹介する）: 黒帯見出しに製品写真1枚と注釈
7. 安全構造の紹介（安心感を与える）: 黒地に図解写真、黄色で強調した一文
8. ご注意・開け方（正しい扱い方とお問い合わせ先を示す）: 大きな注意バナー、温度の表、黄色の警告枠、番号付きの写真ステップのパネル
9. お客様の声（体験の評価で共感を得る）: 黄色の泡の地に、白い泡の吹き出しを6つ互い違いに配置
10. スペシャルコンテンツ（開発の物語へ誘導する）: 黒地に白い極太見出し、白いラベルの小見出しとバナー画像
11. 出演者紹介（出演者の情報を載せる）: 黒地に欧文見出し、写真とプロフィールを横に並べる
12. 製品情報・CTA（商品の詳細ページへ誘導する）: 黄色の地に缶サイズの写真を並べ、赤いCTAボタン
13. フッター（サイト内の導線とSNSを示す）: 明るい灰色の地にリンク一覧、SNSボックス、濃紺の帯

Imagery

• ビールの液面と泡を真上やアップで撮り、黄金色の気泡テクスチャとして背景に使う
• 人物は飲む瞬間の生き生きした表情で、缶を手に持たせる
• 製品の缶は白背景で切り抜き、銀色の光沢と結露を見せる
• 黒地には暗めの照明の写真やモノクロ寄りの人物写真を合わせる
• 白い丸い泡と小さな泡粒をあしらいに使う
• 扱い方は手元のアップ写真に番号を付けて見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の狭い幅（約680px）の1カラムで、背景だけを全幅に広げる
• SPでは見出しを28〜34pxに縮め、行ごとの強弱は残す
• 動画カードはSPで1枚と次のカードが少し見える横スクロールにする
• ポイントのバッジはSPで2列にする
• 泡の吹き出しはSPで少し小さくし、左右の互い違いは保つ
• プロフィールはSPで写真を上、本文を下に縦に積む

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