--- version: alpha name: Bold Collaboration Menu Launch LP description: 赤と黄の2分割ファーストビューで2品を対比させる、飲食チェーンの新メニュー告知LP。ベージュ地に濃紺の極太ゴシック見出しを置き、黄色の帯見出しで「理由」を番号付きで示す。栄養データは赤い大きな数字で目立たせ、シェフのコメントカードでおいしさを伝える。最後は濃紺帯と黄色の店舗検索CTAで締める。 colors: primary: '#0A0457' background: '#EDEAE1' surface: '#EDEAE1' secondary: '#B4432D' accent-1: '#CAA468' marker: '#FCF25D' cta: '#FCD216' on-cta: '#222222' accent-2: '#E0020D' tint-1: '#FFFBD4' background-alt: '#F3F2F2' text: '#1A1007' line: '#DCD3AB' on-dark: '#FAFAF7' typography: display: fontFamily: Noto Sans JP fontSize: 56px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' reason-label-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px marker-headline-band: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 88px product-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px nutrition-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 1250px big-stat: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 56px chef-comment-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 380px info-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 64px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px brand-circle-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 96px --- # DESIGN.md — 赤×黄と濃紺の力強い新メニュー告知 LP（Bold Collaboration Menu Launch LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、ポップ・元気、信頼・誠実 - **キーワード**: 2品対比・極太見出し・黄色帯・栄養数値訴求・シズル写真・シェフの声 - **地の質感**: ベージュの無地を地にする。FVと商品カードだけ赤〜橙・金色のグラデーション。データ部は白い平面カード - **形**: 四角を基本にし、角丸は小さめ。見出しラベルは片側を斜めに切った台形タブ。ロゴ類は円形バッジ - **温度感**: 暖色の赤・黄に濃紺を合わせた、食欲をそそる高いコントラスト ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0A0457` | 見出し文字・ラベルタブ・告知帯の濃紺 | 10% | 画素の実測 | | `background` | `#EDEAE1` | ページ全体の地のベージュ | 22% | 画素の実測 | | `surface` | `#EDEAE1` | 栄養データカードの白い面 | 20% | 画素の実測 | | `secondary` | `#B4432D` | 1品目のテーマ色の赤（FV左・商品ラベル・カード） | 9% | 画素の主要色に補正 | | `accent-1` | `#CAA468` | 2品目のテーマ色の金色（商品ラベル・カード） | 7% | 画素の主要色に補正 | | `marker` | `#FCF25D` | 理由見出しの黄色帯・文字下のマーカー | 3% | 画素の主要色に補正 | | `cta` | `#FCD216` | 店舗検索CTAエリアの黄色 | 6% | 画素の実測 | | `on-cta` | `#222222` | CTAボタンの文字・枠線 | 0% | 推定 | | `accent-2` | `#E0020D` | 栄養数値・強調文字の赤 | 2% | 画素の実測 | | `tint-1` | `#FFFBD4` | シェフコメントカード内のクリーム色 | 7% | 画素の実測 | | `background-alt` | `#F3F2F2` | グラフ凡例ボックスの薄いグレー | 3% | 画素の実測 | | `text` | `#1A1007` | 本文・データ見出しの黒 | 2% | 画素の実測 | | `line` | `#DCD3AB` | データカードの細い枠線 | 0% | 画素の主要色に補正 | | `on-dark` | `#FAFAF7` | 濃紺帯の上の白文字 | 0% | 画素の実測 | - 地はベージュで統一し、データを置く面だけ白にする - 2品はそれぞれ赤系・金系の専用色を持ち、ラベルとカードの色を揃える - 見出しの文字はすべて濃紺の極太にする。黒は本文だけに使う - 黄色は理由の見出し帯と文字下マーカーに限る - 栄養の数値は鮮やかな赤の特大文字にする - 告知帯は濃紺地に白文字。最後のCTAだけ黄色を大きな面で使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチと締めのキャッチ | ゴシック | Noto Sans JP | 900 | 56px | 1.15 | -0.02em | | `headline-lg` | 問いかけ型のセクション大見出し | ゴシック | Noto Sans JP | 900 | 40px | 1.25 | 0em | | `headline-md` | 黄色帯の上の理由見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0em | | `headline-sm` | 商品名ラベル、データ小見出し、コメントの見出し | ゴシック | Noto Sans JP | 800 | 18px | 1.4 | 0.02em | | `accent` | 栄養の数値（数字は特大、単位は小さめ） | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.1 | -0.02em | | `body-md` | シェフのコメント本文（中央揃え） | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 1.8 | 0.03em | | `note` | ※の注釈、グラフの凡例 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0em | | `label-button` | 店舗検索ボタン、英字の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | - 見出しは極太にし、詰めた字間で大きく見せる - 見出しの中では強調語だけ文字を大きくし、ジャンプ率で読ませる - 数値は数字を大きく、単位は小さくし、右上に*を付ける - コメント本文は中央揃えにし、強調句だけ赤の大きめ文字にする - 注釈は小さいグレー文字で、データブロックの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-dce042a9`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/menu/kanzenmeshi/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。