DESIGN.md — 赤×黄と濃紺の力強い新メニュー告知 LP（Bold Collaboration Menu Launch LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ポップ・元気、信頼・誠実
• キーワード: 2品対比・極太見出し・黄色帯・栄養数値訴求・シズル写真・シェフの声
• 地の質感: ベージュの無地を地にする。FVと商品カードだけ赤〜橙・金色のグラデーション。データ部は白い平面カード
• 形: 四角を基本にし、角丸は小さめ。見出しラベルは片側を斜めに切った台形タブ。ロゴ類は円形バッジ
• 温度感: 暖色の赤・黄に濃紺を合わせた、食欲をそそる高いコントラスト

Colors

• 地はベージュで統一し、データを置く面だけ白にする
• 2品はそれぞれ赤系・金系の専用色を持ち、ラベルとカードの色を揃える
• 見出しの文字はすべて濃紺の極太にする。黒は本文だけに使う
• 黄色は理由の見出し帯と文字下マーカーに限る
• 栄養の数値は鮮やかな赤の特大文字にする
• 告知帯は濃紺地に白文字。最後のCTAだけ黄色を大きな面で使う

Typography

• 見出しは極太にし、詰めた字間で大きく見せる
• 見出しの中では強調語だけ文字を大きくし、ジャンプ率で読ませる
• 数値は数字を大きく、単位は小さくし、右上に*を付ける
• コメント本文は中央揃えにし、強調句だけ赤の大きめ文字にする
• 注釈は小さいグレー文字で、データブロックの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。FVだけ左右2分割で2品を対比
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 2品を同じ構成で繰り返して比べやすくする（写真→ラベル→データカード）
• 料理写真はカードの上端に重ねて配置する
• 理由見出しは左寄せのタブ＋全幅の黄色帯で作る
• データカードは白地に細い枠を付け、中身は中央揃えにする
• セクションの区切りは余白で取り、線は使わない

Elevation & Depth

• 基本はフラットにする
• 料理写真は切り抜きにし、うっすら接地影を付ける
• 商品ラベルには軽いドロップシャドウを付けて浮かせる
• コメントカードは影を使わず、グラデーションで立体感を出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 料理は背景を抜いた切り抜き写真。シェフも人物だけ切り抜く。店舗写真は全幅の角版
• セクション境界: 直線で切り替える。FVの下には細い濃紺のラインを入れる
• ラベルタブは右端を斜めに切った台形にする
• 商品名ラベルは両端をリボン状に切り欠く
• ブランドロゴの円形バッジは2品の写真の境目に重ねる
• コメント枠は角丸にし、話者側に小さなしっぽを付ける
• CTAボタンは黒い枠線だけのピル型にする

Components

• 理由番号タブ（reason-label-tab）: 濃紺の台形タブに白文字で番号付きの理由を書く。直下に黄色帯を置く
• 黄色帯見出し（marker-headline-band）: 全幅の黄色の面に、黒の極太2行見出しを載せる
• 商品名リボン（product-ribbon）: その品のテーマ色のリボン形ラベル。料理写真の下、カードの上端に重ねる
• 栄養データカード（nutrition-card）: 白地に細い枠。レーダーチャート、棒グラフ、凡例ボックス、特大の数値を縦に並べる
• 特大数値（big-stat）: 左に黒い項目名、右に赤の特大数字と小さな単位を置き、3行並べる
• シェフコメントカード（chef-comment-card）: テーマ色のグラデーション枠の中に、クリーム色の吹き出しを置く。料理写真と切り抜いたシェフ、肩書きを添える
• 告知帯（info-band）: 濃紺の全幅帯に、白の太字1行と小さな注釈を載せる
• 店舗検索ボタン（button-primary）: 店内写真の上に半透明の黄色パネルを置き、英字の小見出しと黒枠のピル型ボタンを載せる
• 円形ブランドバッジ（brand-circle-badge）: 濃紺の円に白のロゴ、外周に黄色の縁。2品の境目に重ねる

Do's and Don'ts

Do - 2品は色・構成・順序を揃えて並べ、比べやすくする - 見出しは濃紺の極太ゴシックにし、強調語は大きくする - 数値訴求は赤の特大数字にし、単位と*注記を添える - 黄色は帯とマーカーに絞り、目印として使う - 料理は切り抜きのシズル写真で大きく見せる - 注釈はデータの下にまとめて根拠を示す

Don't - 細い書体や明朝を見出しに使わない - 地の色を純白にしない（ベージュを保つ） - 2品のテーマ色を混ぜて使わない - 黄色を本文の背景に広く敷かない - 角丸の大きい柔らかいカードにしない - CTAを塗りつぶしの派手なボタンにしない（黄色パネル＋枠線ボタンにする）

Page Structure

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

1. ファーストビュー（新メニュー2品の登場と発売日を一目で伝える）: 左を赤、右を黄の2分割背景にし、上に白の極太キャッチを置く。中央に円形バッジ、日付の丸バッジ、栄養の小ボックス3つ、商品名と価格を配置する
2. 問いかけ見出し（読み手の疑問を代弁して本題へ導く）: ベージュ地に濃紺の極太見出しを3行置く。最後の語だけ特大にする
3. 理由1：栄養バランス（1品目）（栄養の根拠をデータで示す）: 理由タブと黄色帯の見出し→切り抜き料理写真→赤リボン→白カード（レーダーチャート・棒グラフ・特大数値）の順に並べる
4. 理由1：栄養バランス（2品目）（同じ形式で2品目を示す）: 金色リボンにし、グラフ色を黄系に変えて同じ構成を繰り返す
5. 注釈（数値の根拠を補足する）: 小さな文字で※番号付きの段落を並べる
6. 理由2：おいしさ（作り手のこだわりで味の信頼をつくる）: 理由タブと黄色帯の見出しの下に、赤と金のシェフコメントカードを縦に2枚並べる
7. 締めのキャッチ（訴求をまとめる）: 濃紺の極太2行。ロゴバッジを挟み、2品の写真を左右に並べる
8. 提供店舗の告知（食べられる場所を伝える）: 濃紺の帯に白文字とロゴ、除外店舗の注釈を載せる
9. CTA（店舗検索）（来店につなげる）: 店内写真の全幅背景に黄色パネル、英字の小見出し、枠線のピル型ボタンを置く

Imagery

• 料理は斜め上から撮り、湯気やツヤを強調した明るいシズル写真にする。背景は抜く
• 鉄板や陶器の器ごと見せ、ボリューム感を出す
• シェフはコックコートで腕組み。白背景で撮って切り抜く
• グラフは淡い色の平面的な描き方にし、テーマ色で線を引く
• 店舗写真は木目の明るい内装を広角で撮る
• FVの背景は赤や黄のグラデーションに光のにじみを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVはキャッチを1行の横組みにし、2品を左右に大きく並べる
• PCでは栄養カード内のチャート・棒グラフ・凡例を横3列にし、数値も横1行に並べる
• PCではシェフカードを横長にし、写真・本文・人物を左右に配置する
• PCのコンテンツ幅は約960pxで中央寄せ。地のベージュは全幅にする
• 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 行書くと起動時に読み込まれる。