--- version: alpha name: Black Gold Chinese Noodle Food LP description: 金粉を散らした漆黒の地に、金色の明朝見出しと雷紋装飾を合わせた高級中華の LP。後半は金のグラデーション帯から、白い和柄地に赤・橙・緑のラベル付きレシピカードが並ぶ明るいパートに切り替わる。 colors: background: '#050102' primary: '#E1B144' secondary: '#BD8F1F' cta: '#5D460D' on-cta: '#FDFDFB' on-dark: '#E8E9E5' background-alt: '#FAFBF5' accent-1: '#83001F' accent-2: '#DC820C' accent-3: '#1A3C12' surface: '#DFD3B3' text: '#1F1A18' marker: '#C6161D' secondary-accessible: '#846416' typography: display: fontFamily: Shippori Mincho B1 fontSize: 36px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho B1 fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 600 lineHeight: 1.5 accent: fontFamily: Klee One fontSize: 13px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.08em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 0px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 8px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-meander: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px gold-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px tab-toggle: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 30px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 42px product-card: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 170px recipe-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 260px label-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.md}' height: 180px ribbon-heading: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 56px step-illust: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 130px --- # DESIGN.md — 黒×金箔の本格中華・冷凍麺 LP（Black Gold Chinese Noodle Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、和風、力強い・インパクト - **キーワード**: 漆黒・金粉・雷紋・明朝・シズル写真・中華 - **地の質感**: 黒地に金粉のノイズと唐草の縁取り。後半は白地に細い格子の和柄パターンを敷く - **形**: 黒パートは角のない直線的な帯と四角いタブ。白パートのカードは角丸 8px 程度 - **温度感**: 温かい。黒と金に料理の赤・橙が映える高温系 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#050102` | 前半を占める金粉入りの漆黒の地 | 45% | 画素の実測 | | `primary` | `#E1B144` | 金色の見出し・装飾 | 4% | 画素の実測 | | `secondary` | `#BD8F1F` | 金のグラデーション帯（レシピパート） | 12% | 画素の実測 | | `cta` | `#5D460D` | もっと見るボタン（濃い茶） | 0% | 画素の実測 | | `on-cta` | `#FDFDFB` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#E8E9E5` | 黒地の本文・見出しの白文字 | 2% | 画素の実測 | | `background-alt` | `#FAFBF5` | 後半の白い和柄地 | 30% | 画素の実測 | | `accent-1` | `#83001F` | レシピカードの臙脂ラベル・赤帯 | 2% | 画素の実測 | | `accent-2` | `#DC820C` | 橙ラベル・橙ライン | 2% | 画素の実測 | | `accent-3` | `#1A3C12` | 深緑ラベル | 2% | 画素の実測 | | `surface` | `#DFD3B3` | 金地上の商品名タグ（淡いベージュ） | 1% | 画素の主要色に補正 | | `text` | `#1F1A18` | 白地・金地の濃い文字 | 1% | 画素の実測 | | `marker` | `#C6161D` | 見出しリボンの赤 | 0% | 画素の実測 | | `secondary-accessible` | `#846416` | AA を満たす補正値（計算） | | 計算 | - 前半は黒地に金と白だけで構成し、色は料理写真で出す - 見出しは金のグラデーション文字、本文は白 - 黒から白パートへは金のグラデーション帯で橋渡しする - 白パートは商品パッケージ色（臙脂・橙・緑）をカードラベルと区切り線に使い分ける - ボタンは金地の上に濃い茶の四角で控えめに置く - `gold-band` は文字 `#E8E9E5` × 背景 `#BD8F1F` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#846416`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名ロゴ風大見出し（金） | 明朝 | Shippori Mincho B1 | 800 | 36px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（金・雷紋で挟む） | 明朝 | Shippori Mincho B1 | 700 | 22px | 1.4 | 0.08em | | `headline-md` | 黒地の小見出し（白） | 明朝 | Noto Serif JP | 600 | 18px | 1.6 | 0.04em | | `headline-sm` | 金帯の中の見出し・リード | 明朝 | Noto Serif JP | 700 | 15px | 1.6 | 0.04em | | `body-md` | 本文（白・太め明朝） | 明朝 | Noto Serif JP | 700 | 13px | 2.0 | 0.02em | | `note` | 写真の注釈・商品名キャプション | 明朝 | Noto Serif JP | 600 | 10px | 1.5 | 0.0em | | `accent` | 手順説明の手書き風コメント | 手書き・筆 | Klee One | 600 | 13px | 1.6 | 0.08em | | `label-button` | ボタン・タブ | 明朝 | Noto Serif JP | 700 | 13px | 1.2 | 0.04em | - 全編を明朝で統一し、ゴシックを使わない - 金見出しは上→下に明るい金から暗い金へのグラデーション - 本文は太めの明朝で黒地でも潰れないようにする - 見出しは中央揃え、本文は左揃え - キャッチは短い行で改行し中央に積む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、商品とレシピは 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 90px、基本単位 8px、カード内 8px（375px 幅換算） - 左右端に唐草の金縁装飾を縦に通す - 見出しの左右に雷紋の短い装飾を置く - 写真は余白を広く取り、黒地に溶け込ませる - 商品・レシピは 2 列で縦に積み、奇数は左寄せ - 白パートの小見出しは丸アイコン＋商品名＋全幅の色付き下線 ## Elevation & Depth - 影はほぼ使わずフラット - 料理写真の背景を黒に溶かすビネットで奥行きを出す - 金帯は左右がフェードアウトするグラデーション ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 黒パートは切り抜き・ビネット写真。レシピは角丸の正方形〜4:3 - **セクション境界**: 黒→金グラデーション帯→白和柄へ直線で切り替え - 黒パートのボタン・タブは角丸なし - 白パートのカードは角丸 8px で写真とラベルを一体化 - 丸いアイコンに商品パッケージを入れる ## Components - **雷紋付きセクション見出し**（`heading-meander`）: 金の明朝見出しを中央に置き、左右に雷紋の装飾を並べる - **金グラデーション帯見出し**（`gold-band`）: 左右がフェードする金帯の上に白い明朝の見出し - **動画切替タブ**（`tab-toggle`）: 選択中は金の塗り、未選択は金枠のみの四角タブ - **もっと見るボタン**（`button-primary`）: 金地に置く濃い茶の四角ボタン、白文字 - **商品パッケージカード**（`product-card`）: パッケージ写真の下に白い明朝の商品名 - **金地のレシピカード**（`recipe-card`）: 料理写真＋料理名＋商品アイコン入りのベージュタグ - **色ラベル付きレシピカード**（`label-card`）: 角丸写真の下に臙脂・橙・緑の帯で白文字の料理名 - **赤リボン問いかけ見出し**（`ribbon-heading`）: 丸アイコン付きの赤いリボンに白文字で問いかけ - **調理手順の線画**（`step-illust`）: 白い線画アイコンを三角矢印でつなぎ、下に手書き風説明 ## Do's and Don'ts **Do** - 黒地には金粉テクスチャと唐草の縁を必ず入れる - 見出しは金グラデーションの明朝で統一する - 料理写真は湯気・照りの見えるシズル感重視にする - 白パートのラベル色は商品カラーと対応させる - 注釈は写真の右下に小さく添える **Don't** - ゴシック体や丸ゴシックを主要見出しに使わない - 黒パートに鮮やかな色の面を置かない - ボタンをピル型や派手な色にしない - 白パートに黒い大面積の背景を混ぜない - 金色をフラットな黄色で代用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高級感と看板商品の印象付け）: 金枠ロゴ風見出し＋大きな料理写真、下に商品パッケージの切替サムネを横に並べる 2. **ブランドメッセージ**（本格感を短く伝える）: 金の明朝で短い行を中央に積み、最後にブランド名を大きく鉤括弧で 3. **テレビCM**（認知と信頼の補強）: 雷紋見出し＋埋め込み動画＋秒数切替タブ 4. **こだわり**（素材と麺の品質訴求）: 白明朝の小見出し＋本文＋黒背景に溶け込む素材写真を 2 ブロック 5. **ラインアップ**（商品一覧）: パッケージ写真を 2 列グリッドで並べ、下に商品名 6. **簡単調理**（手軽さの訴求）: 金帯見出しで調理法を分け、線画手順と動画を配置 7. **アレンジレシピ**（食べ方の提案）: 金グラデーション地に 2 列の写真カードと商品タグ、もっと見るボタン 8. **付属品活用レシピ**（追加の楽しみ方の提案）: 白い和柄地に赤リボンの問いかけと装飾ロゴ、商品ごとに色ラベル付きカードを 2 列で ## Imagery - 料理は黒い器や暗い背景で斜め上から撮り、周囲をビネットで黒に落とす - 素材（唐辛子・山椒・麺）は黒背景の切り抜き写真で浮かせる - 調理手順は白い単線の線画イラスト - レシピ写真は明るい自然光の家庭的な卓上写真 - 金粉が舞うノイズテクスチャと唐草・雷紋の装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も中央寄せ 1 カラムで、コンテンツ幅は約 70% - こだわりは PC で写真と文章の左右交互 2 カラム - ラインアップは PC で 3 列、レシピカードは 4 列 - メッセージは PC で 1 行に長くつなげる - 左右の唐草縁は 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-350efe90`（元 LP の URL から採番） - **元 LP**: https://www.nissin.com/jp/product/brands/chuka/special/1/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。