DESIGN.md — 黒×金箔の本格中華・冷凍麺 LP（Black Gold Chinese Noodle Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、和風、力強い・インパクト
• キーワード: 漆黒・金粉・雷紋・明朝・シズル写真・中華
• 地の質感: 黒地に金粉のノイズと唐草の縁取り。後半は白地に細い格子の和柄パターンを敷く
• 形: 黒パートは角のない直線的な帯と四角いタブ。白パートのカードは角丸 8px 程度
• 温度感: 温かい。黒と金に料理の赤・橙が映える高温系

Colors

• 前半は黒地に金と白だけで構成し、色は料理写真で出す
• 見出しは金のグラデーション文字、本文は白
• 黒から白パートへは金のグラデーション帯で橋渡しする
• 白パートは商品パッケージ色（臙脂・橙・緑）をカードラベルと区切り線に使い分ける
• ボタンは金地の上に濃い茶の四角で控えめに置く
• gold-band は文字 #E8E9E5 × 背景 #BD8F1F のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#846416、4.51:1）を使う。

Typography

• 全編を明朝で統一し、ゴシックを使わない
• 金見出しは上→下に明るい金から暗い金へのグラデーション
• 本文は太めの明朝で黒地でも潰れないようにする
• 見出しは中央揃え、本文は左揃え
• キャッチは短い行で改行し中央に積む
• 書体は画像からの推定で、フォント名は近い印象の 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

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

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