DESIGN.md — 炎と赤黒の激辛ビール系 LP（Fiery Red Spicy Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 炎・激辛・警告テープ・吹き出しの群れ・赤×黒・限定販売
• 地の質感: 炎写真とざらついた赤黒のグランジ地。平塗りは少なく、質感で熱さを出す
• 形: 斜めの黄色テープ、ギザギザの炎型パネル、丸い吹き出し
• 温度感: 非常に暖色。赤・橙・黒で熱を表現

Colors

• 地は炎写真→暗い赤茶テクスチャ→真紅パネル→ほぼ黒→真紅フッターと、暗赤系で段階的に切り替える
• 文字は原則白。読ませる本文は黒帯か赤帯の上に白で載せる
• 黄は警告テープ・販売状況ラベル・注意事項見出しに限る
• 緑は唐辛子モチーフと細い区切り線だけに使う
• 青や寒色は使わない

Typography

• 見出しは極太で白、黒い縁取りか影を付けて写真上でも読ませる
• 見出し内の助詞は小さくし、キーワードを大きく強調する
• 本文は太字で、1 行ごとに黒帯や赤帯を敷く
• 価格は数字を大きく、単位と税表記を小さく添える
• 本文は中央揃え、注意事項とスペックは左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。料理の画像は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• FV は商品の缶を中央に置き、周りを吹き出しで埋める
• 訴求見出しは左寄せで大きく、写真素材を右に重ねる
• 商品・価格ブロックは真紅パネルの中央にまとめる
• 注意事項は黒い地に見出しと本文を縦に並べる
• セクション境界に警告テープを斜めに走らせる

Elevation & Depth

• 影はほぼ使わず、写真の重なりで奥行きを出す
• 見出しの白文字に黒いドロップシャドウを付ける
• 吹き出しには薄い影を付けて浮かせる

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸の小さい長方形。缶は切り抜きにする
• セクション境界: 斜めの黄色い警告テープと炎のギザギザ形
• 吹き出しは角丸の長方形。白地か赤地にする
• 声のパネルは炎のようなギザギザの縁にする
• ボタンはピル型
• ラベルは角丸なしの長方形

Components

• 警告テープ（warning-tape）: 黄地に黒文字の英語の警告を繰り返した帯。-10〜15° 傾けてセクションをまたぐ
• 吹き出しの群れ（speech-bubble-cloud）: 短い感想を書いた赤白の吹き出しを FV いっぱいに敷き詰める
• 帯敷きテキスト（band-text）: 1 行ごとに黒または赤の帯を敷いた白い本文
• 販売状況ラベル（status-label）: 黄地に赤文字の長方形ラベル。価格の下に置く
• 価格ブロック（price-block）: 商品名、容量、大きな価格、白枠の送料バッジを縦に積む
• レベル付き料理カード（level-card）: 料理写真の左上に炎アイコンとレベル番号を付け、料理名を赤字で重ねる
• 炎形の声パネル（voice-flame-panel）: ギザギザの赤パネルに丸い顔写真、引用符付きの一言、MORE ボタン
• 白ピルボタン（button-contact）: 赤い地の上に置く白いピルボタン。アイコンと 2 段のテキスト
• 白枠ピルボタン（button-outline）: 赤い地の上に置く、白い線のサブボタン

Do's and Don'ts

Do - 炎・唐辛子・警告テープで「刺激」を一貫して見せる - 白文字は必ず暗い地か帯の上に置く - テープは傾けて、少なくとも 2 本を交差させる - 価格と販売状況はひとまとめにして目立たせる

Don't - 白や淡い色の広い面を作らない（ヘッダーを除く） - パステルや寒色を使わない - 細い明朝体を見出しに使わない - 黄を本文の色に使わない（注意事項の見出しは例外）

Page Structure

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

1. ヘッダー（ロゴとマイページ・カートへの導線）: 白地にロゴ、右にアイコン 2 つとハンバーガーメニュー
2. ファーストビュー（新しい体験への期待を一気に高める）: 缶を中央に置き、周りを吹き出しで埋める。上に極太の白い見出しを重ね、テープを交差させる
3. コンセプト・価格（商品の特徴を伝え、購入情報を出す）: 炎写真の上に黒帯見出しと帯敷き本文、炎型の赤い面に価格と販売状況ラベル
4. 特長（味）（味わいの魅力を伝える）: 大きな白い見出しに唐辛子写真を重ね、赤帯の本文を添える
5. 料理との相性（食べ合わせを提案する）: 警告マークのバッジと、レベル付き料理カードのカルーセル
6. 担当者の声（共感と信頼を作る）: 炎形パネルに顔写真と一言、MORE で開閉
7. 商品詳細（スペックと購入情報）: 上辺に緑のライン、真紅パネルに商品写真・価格・スペック表・注釈
8. 購入時の注意（販売期間・送料・発送の説明）: ほぼ黒の地に下線付きの白見出し、黄色の小見出しと白い本文
9. フッター（ブランドの紹介と問い合わせ・規約）: テープを境に真紅の地。ロゴ、白枠ボタン、白ピルの問い合わせボタン、線で区切ったリンク、飲酒の注意表記

Imagery

• 炎は全面の写真で使い、オレンジ〜赤の明暗を強く出す
• 料理は湯気やシズル感のある寄りのショットにする
• 唐辛子は艶のある緑の切り抜きを見出しに重ねる
• 缶は正面の切り抜きに唐辛子を添える
• 人物は丸く切り抜いた小さな顔写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の帯状レイアウト。全幅の背景に炎と赤黒のテクスチャを敷く
• PC の見出しは 1 行にまとめ、吹き出しを横いっぱいに広げる
• PC の料理カードは縦に並べ、見出しと横並びの 2 カラムにする
• PC の担当者の声はテキストと写真を横に並べる
• PC の商品詳細は左に写真、右に情報の 2 カラム
• フッターの問い合わせ先とリンクは 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 行書くと起動時に読み込まれる。