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

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

Overview

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

Colors

• 地は黒に固定し、赤と黄を交互に主役にする。
• 赤は吹き出し・大見出し・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

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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。