---
version: alpha
name: Fiery Black Red Yellow Spicy Food LP
description: ほぼ黒の地に、炎の赤と警告色の黄色を強く効かせた激辛食品のLP。極太ゴシックの縁取り見出し、ギザギザ吹き出し、ゆるい手描きイラストで、辛さを楽しむ遊び心とインパクトを両立している。
colors:
  background: '#1C1C1C'
  primary: '#D52225'
  secondary: '#FEF009'
  cta: '#D92528'
  on-cta: '#FCF2EF'
  text: '#F6F6F6'
  accent-1: '#FEF246'
  accent-2: '#DF9D48'
  background-alt: '#FDFEFD'
  line: '#E8C83A'
  text-muted: '#90908F'
  on-primary: '#FFF8E8'
  cta-accessible: '#D72528'
  primary-accessible: '#CE2124'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.15
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.75
    letterSpacing: 0.02em
  accent:
    fontFamily: Reggae One
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  nav-tab:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 34px
  burst-bubble:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 120px
  spice-meter:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 300px
  comment-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 130px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 50px
  recipe-card:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 70px
  frame-panel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1000px
  slash-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 50px
---

# DESIGN.md — 黒地×赤黄の激辛インスタント食品 LP（Fiery Black Red Yellow Spicy Food LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、ラグジュアリー・ダーク、情報量多め・訴求型
- **キーワード**: 激辛・黒×赤×黄・縁取り極太文字・ギザギザ吹き出し・手描きイラスト・発光
- **地の質感**: フラットな黒地。商品写真の背後に黄色や赤の発光グロー。
- **形**: ギザギザの爆発型吹き出し、角丸の太枠パネル、角丸の小さいカード。
- **温度感**: 高温。赤と黄で熱さと刺激を出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#1C1C1C` | ページ全体の黒地 | 55% | 画素の実測 |
| `primary` | `#D52225` | 炎の赤（吹き出し・見出し・辛さメーター帯） | 12% | 画素の実測 |
| `secondary` | `#FEF009` | 警告色の黄（アレンジカード・枠線） | 8% | 画素の実測 |
| `cta` | `#D92528` | 商品詳細ボタンの赤 | 1% | 画素の実測 |
| `on-cta` | `#FCF2EF` | 赤ボタン上の白文字 | 0% | 画素の実測 |
| `text` | `#F6F6F6` | 黒地上の白い本文 | 2% | 画素の実測 |
| `accent-1` | `#FEF246` | 黄色の強調見出し文字 | 2% | 画素の主要色に補正 |
| `accent-2` | `#DF9D48` | 縦組みキャッチのオレンジ金 | 3% | 画素の主要色に補正 |
| `background-alt` | `#FDFEFD` | 注釈帯の明るいグレー地 | 2% | 画素の実測 |
| `line` | `#E8C83A` | コメント枠の黄色線 | 0% | 推定 |
| `text-muted` | `#90908F` | 注釈・コピーライトのグレー文字 | 0% | 画素の実測 |
| `on-primary` | `#FFF8E8` | 赤吹き出し上の白文字 | 0% | 推定 |
| `cta-accessible` | `#D72528` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#CE2124` | AA を満たす補正値（計算） |  | 計算 |

- 地は黒に固定し、赤と黄を交互に主役にする。
- 赤は吹き出し・大見出し・CTA・メーター帯に使う。
- 黄はカード面・パネル枠・小見出しに使う。
- 黒地の見出しは赤文字に黄色の縁取りを重ねて発光させる。
- 白は本文と赤面上の文字だけに使う。
- グレー地は注釈帯の1か所に限る。
- `button-primary` は文字 `#FCF2EF` × 背景 `#D92528` のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D72528`、4.56:1）を使う。
- `recipe-card` は文字 `#D52225` × 背景 `#FEF009` のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CE2124`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV大キャッチ・巨大数値 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.15 | 0.0em |
| `headline-lg` | セクション大見出し（赤＋黄縁） | ゴシック | Dela Gothic One | 900 | 26px | 1.4 | 0.02em |
| `headline-md` | 特長の黄色見出し | ゴシック | Zen Kaku Gothic New | 900 | 19px | 1.4 | 0.03em |
| `headline-sm` | スラッシュで挟む中見出し | ゴシック | Noto Sans JP | 900 | 16px | 1.4 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.75 | 0.02em |
| `accent` | 縦組みの装飾キャッチ | 装飾・ディスプレイ | Reggae One | 400 | 40px | 1.05 | 0.0em |
| `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em |
| `label-button` | ボタン・タブのラベル | ゴシック | Noto Sans JP | 900 | 12px | 1.2 | 0.03em |

- 本文も太字にして黒地で読みやすくする。
- 大見出しは赤文字に黄縁と外側の光を付ける。
- 装飾キャッチは縦組みで、写真の上に重ねる。
- 中見出しは前後を『\ ／』のスラッシュで挟む。
- 強調は文字サイズを跳ね上げ、数字は特大にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長だけ縦組み見出し＋本文の 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 吹き出しは左右交互に重ねて散らす。
- 特長ブロックは左に縦組み、右に見出しと本文。
- 大きな括りは太い角丸枠のパネルで囲む。
- 比較メーターは横スクロールさせる。
- 本文は中央揃えと左揃えを使い分ける。

## Elevation & Depth

- 影は使わず、商品写真の背後に黄・赤の発光グローを置く。
- 見出し文字は外側の光で浮かせる。
- カードは影を付けず、太枠だけで区切る。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品と丼は切り抜きにする。人物アイコンは円形にする。
- **セクション境界**: 直線で地色を切り替えるか、太い角丸枠のパネルで区切る。
- 吹き出しはギザギザの爆発型にする。
- パネル枠は 4px 前後の赤か黄の太線にする。
- ボタンは角丸小さめの長方形にする。

## Components

- **上部アンカーボタン**（`nav-tab`）: 赤地に黄枠のボタンを2つ並べ、下向き三角を付ける。
- **爆発型コメント吹き出し**（`burst-bubble`）: 赤いギザギザ円に短い感想2行と、丸アイコン付きの名前を入れる。
- **辛さメーター**（`spice-meter`）: 赤帯の上に商品を並べ、目盛りと数値で辛さを比べる。横スクロールさせる。
- **おすすめポイント枠**（`comment-box`）: 黄色線の角丸枠。左上に赤いラベルを付け、中に丸アイコンと黄色の感想文を入れる。
- **商品詳細ボタン**（`button-primary`）: 幅いっぱいの赤ボタンに白文字と外部リンクアイコンを付ける。
- **アレンジ開閉カード**（`recipe-card`）: 黄地に赤枠のカード。アイコン・名前・赤いレシピ名を入れ、右に赤い下向き三角を置く。
- **太枠パネル**（`frame-panel`）: 赤や黄の太線で角丸に囲む大きな括り。上辺に商品写真をはみ出させる。
- **スラッシュ見出し**（`slash-heading`）: 小さな赤いリードの下に、白い見出しを『\ ／』で挟んで置く。

## Do's and Don'ts

**Do**
- 黒地を基本にし、赤と黄だけで熱さを出す。
- 見出しは極太で、縁取りと発光を付ける。
- ゆるい手描きイラストを余白に散らして親しみを出す。
- 辛さは数値・目盛り・唐辛子アイコンで見せる。
- 商品写真は切り抜きにして、背後を光らせる。

**Don't**
- 白地や淡色地を広く使わない。
- 細い明朝体や繊細な書体を使わない。
- 青や緑を強調色にしない。
- 吹き出しを整列させすぎない。
- 柔らかいドロップシャドウで高級感を出そうとしない。

## Page Structure

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

1. **ファーストビュー**（新商品の刺激とうまさを一目で伝える）: 上部にアンカーボタン2つ。極太の赤黄キャッチ、丼の写真、商品パッケージを重ねる。
2. **口コミ吹き出し**（多くの人の短い感想で期待を高める）: 赤いギザギザ吹き出し6個を散らし、手描きイラストを添える。
3. **辛さ数値**（辛さを数値でアピールする）: 赤い見出し2行、特大の発光数値、唐辛子アイコンの段階表示を置く。
4. **辛さ比較メーター**（他の商品と辛さを比べる）: 赤帯に商品と目盛りを並べて横スクロール。下にグレーの注釈帯を置く。
5. **商品ビジュアル**（商品の世界観を見せる）: 縦組みの赤・金キャッチと、大きな丼の写真を重ねる。
6. **特長**（スープと麺の魅力を説明する）: 縦組み見出し、黄色見出し、白本文、おすすめポイント枠を2回繰り返す。
7. **開発者コメント・CTA**（開発の思いを伝え、詳細ページへ送る）: 赤太枠パネルの上辺に商品群を並べる。円形の人物写真、大きな白文字のコメント、赤ボタンを置く。
8. **食べ方提案**（食べ方とお湯の量を伝える）: 赤黄の見出し3行、中央揃えの本文、イラストを置く。
9. **アレンジレシピ**（アレンジの楽しみ方を広げる）: 黄太枠パネルに定番アレンジの点線リストと、黄色のアコーディオンカード6枚を並べる。
10. **まとめ**（商品の意義をまとめる）: 赤黄の見出し、黄色のリード、白本文、手描きイラストを置く。
11. **販売告知・フッター**（どこで買えるかを伝えて締める）: 発光する大きな赤い告知文字とカップ商品、SNSリンク、コピーライトを置く。

## Imagery

- 料理は真上や斜め上から撮り、赤いスープを鮮やかに見せる。
- 商品と丼は切り抜き、背後を黄・赤の光でぼかす。
- 黒い線のゆるい手描き人物や唐辛子キャラを添える。
- 人物は円形アイコンに切り抜き、黄色の枠を付ける。
- 唐辛子や炎のアイコンで辛さの段階を表す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約 1000px 幅にする。
- FV は丼を中央に置き、吹き出しを左右に散らす。
- 辛さメーターは PC では全体を一度に見せる。
- 特長の2ブロックとレシピカードは PC で2列にする。
- 開発者コメントは写真・文・ボタンを横一列に並べる。
- 販売告知は文字とカップ商品を左右に並べる。

## 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-217299fc`（元 LP の URL から採番）
- **元 LP**: https://karameter.com/collabo/sapporo-1ban-gokukara/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。