--- version: alpha name: Fiery Red Spicy Beverage LP description: 炎の写真と深い赤・黒のテクスチャを地にした、刺激を全面に押し出すお酒の限定販売 LP。黄色の警告テープを斜めに走らせ、白抜きの極太ゴシックと黒帯テキストでインパクトを作る。後半は暗い地に黄見出しの注意事項、最後は真紅のフッターで締める。 colors: primary: '#BE0C00' dark-section: '#130303' background: '#59100E' background-alt: '#D46C30' secondary: '#870707' accent-1: '#FEE302' accent-2: '#2E6B10' on-dark: '#FEFEFE' text: '#1B0404' marker: '#D40C01' accent-3: '#EEDA2F' cta: '#FEFEFE' on-cta: '#BE0D08' line: '#F0B0A8' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 28px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' warning-tape: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 28px speech-bubble-cloud: backgroundColor: '{colors.on-dark}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 30px band-text: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 22px status-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 30px price-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 160px level-card: textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 180px voice-flame-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 140px button-contact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-outline: textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px --- # DESIGN.md — 炎と赤黒の激辛ビール系 LP（Fiery Red Spicy Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 炎・激辛・警告テープ・吹き出しの群れ・赤×黒・限定販売 - **地の質感**: 炎写真とざらついた赤黒のグランジ地。平塗りは少なく、質感で熱さを出す - **形**: 斜めの黄色テープ、ギザギザの炎型パネル、丸い吹き出し - **温度感**: 非常に暖色。赤・橙・黒で熱を表現 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BE0C00` | ブランドの真紅（商品枠・フッター地） | 17% | 画素の実測 | | `dark-section` | `#130303` | 注意事項の黒赤地 | 12% | 画素の実測 | | `background` | `#59100E` | ページ基調の暗い赤茶テクスチャ | 20% | 画素の主要色に補正 | | `background-alt` | `#D46C30` | 炎エリアの橙 | 8% | 画素の主要色に補正 | | `secondary` | `#870707` | 深い赤のサブ面 | 8% | 画素の主要色に補正 | | `accent-1` | `#FEE302` | 警告テープ・販売状況ラベルの黄 | 3% | 画素の実測 | | `accent-2` | `#2E6B10` | 唐辛子の緑（区切りライン） | 1% | 推定 | | `on-dark` | `#FEFEFE` | 暗い地の白文字 | 4% | 画素の主要色に補正 | | `text` | `#1B0404` | 黒帯テキスト地 | 2% | 画素の主要色に補正 | | `marker` | `#D40C01` | 本文を載せる赤帯 | 2% | 画素の実測 | | `accent-3` | `#EEDA2F` | 注意事項の黄見出し | 0% | 画素の実測 | | `cta` | `#FEFEFE` | 問い合わせボタンの白面 | 1% | 画素の実測 | | `on-cta` | `#BE0D08` | 白ボタン上の文字 | 0% | 画素の主要色に補正 | | `line` | `#F0B0A8` | フッターリンクの区切り線 | 0% | 推定 | - 地は炎写真→暗い赤茶テクスチャ→真紅パネル→ほぼ黒→真紅フッターと、暗赤系で段階的に切り替える - 文字は原則白。読ませる本文は黒帯か赤帯の上に白で載せる - 黄は警告テープ・販売状況ラベル・注意事項見出しに限る - 緑は唐辛子モチーフと細い区切り線だけに使う - 青や寒色は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と各訴求の大見出し | ゴシック | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | セクション見出し（白抜き） | ゴシック | Noto Sans JP | 900 | 32px | 1.25 | 0.0em | | `headline-md` | 黒帯見出し・商品名 | ゴシック | Noto Sans JP | 800 | 20px | 1.4 | 0.03em | | `headline-sm` | 注意事項の黄見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `body-md` | 帯の上の本文・注意事項 | ゴシック | Noto Sans JP | 700 | 12px | 1.7 | 0.0em | | `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | 0.0em | | `note` | スペック表・※注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `label-button` | ボタン・ラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 見出しは極太で白、黒い縁取りか影を付けて写真上でも読ませる - 見出し内の助詞は小さくし、キーワードを大きく強調する - 本文は太字で、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 ```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-0248b9f0`（元 LP の URL から採番） - **元 LP**: https://fantasy-lp.asahibeer.co.jp/spice/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。