DESIGN.md — 黒×深紅×紫に金文字の高級中華調味料 LP（Dark Imperial Chinese Premium Sauce LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、和風、力強い・インパクト
• キーワード: 漆黒・深紅と紫・金の明朝・中華の飾り枠・シズル写真・縦書きコピー
• 地の質感: 黒地に金のグラデと薄いダマスク柄。艶のある料理写真で湿度と熱を出す
• 形: 角丸なしの四角パネルと、四隅に中華風の雷文コーナーが付いた細い金の二重線枠
• 温度感: 暗く熱い。辛さと香りを思わせる赤みがかった暖色

Colors

• 地色はほぼ黒。商品ごとに深紅・深紫・黒のパネルで色分けする
• 見出しは金のグラデ文字だけ。本文は白に限る
• 金は線・見出し・矢印など細い要素にだけ使う
• 主 CTA は金の線と金文字、サブ CTA は白い線と白文字にする
• パネルの外側は暗い色にして、パネルが浮いて見えるようにする
• 明るい色は料理写真の中にだけ出す

Typography

• 見出しは明朝体にし、金のグラデと細い影を付ける
• 中国語の料理用語にはカタカナのルビを付ける
• 本文は基本的に中央揃えで短く改行する
• キャッチコピーは縦書きの明朝で複数行並べる
• 強調したい語はカギ括弧で囲み、ルビを付ける
• レシピ名は白文字に下線を付けたリンクにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介とレシピは縦に積む
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 40px、基本単位 8px、カード内 30px（375px 幅換算）
• 商品パネルは左右 12px 程度の余白で画面幅いっぱいに置く
• パネルの中は、パッケージ画像→見出し→小見出し→本文→素材写真→ボタンの順に縦に並べる
• ボタンは幅 75% で中央に置き、縦に重ねる
• レシピ写真は幅 80%・横長で、下に中央揃えのレシピ名を置く
• セクションの間は暗い地で 30〜40px 空ける

Elevation & Depth

• パネルは暗い地の上にわずかな影を付けて浮かせる
• パッケージ画像に柔らかい落ち影を付ける
• セクションの区切りに金の二重線を使う

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は角丸なしの横長長方形。素材写真は背景を切り抜いて置く
• セクション境界: 直線で切り替える。金の二重水平線と、金枠の四隅の雷文装飾を使う
• 角丸はほぼ使わず、四角でシャープにする
• パネルは細い金の二重線で囲み、四隅に中華風のコーナー飾りを付ける
• NEW バッジはひし形の金線にする
• 矢印アイコンは角丸の小さい正方形にする

Components

• 特設サイトへのボタン（button-primary）: 黒地に金の細い枠線と金文字。右端に金黄の角丸四角で矢印アイコンを付ける
• 商品情報ボタン（button-secondary）: 透明な地に白の細い枠線と白文字。右端に白い四角の矢印アイコンを付ける
• 中華風の金枠パネル（panel-chinese-frame）: 商品の色で塗った面に金の二重線枠を付け、四隅に雷文のコーナー飾りを置く
• ルビ付きの金見出し（heading-gold-ruby）: 金のグラデをかけた明朝の商品名。上に小さいカタカナのルビを付ける
• NEW のひし形バッジ（badge-new）: パッケージの右上に、金線のひし形と NEW の欧文セリフを置く
• 季節限定のラベル（label-season）: 黒地に金の二重枠を付けた横長ラベル。料理写真の帯の中央に置く
• 商品へのアンカーナビ（product-nav）: パッケージ 3 つを横に並べ、下に商品名 2 行と金色の下向き三角を付ける
• レシピカード（recipe-card）: 横長の料理写真の下に、白の下線付きのレシピ名を中央揃えで置く

Do's and Don'ts

Do - 地は暗い色で統一し、金は見出しと線に絞る - 商品ごとにパネルの色を固定して、商品を色で見分けられるようにする - 見出しは明朝体にして金のグラデを付ける - 料理写真は湯気と照りのあるアップで使う - 中国語の料理用語にはルビを付ける

Don't - 白や明るい色の地を広く使わない - 角丸の大きいカードやピル型ボタンを使わない - ポップな丸ゴシック体や彩度の高いパステル色を使わない - 金を面として大きく塗らない - 本文を左揃えで長く続けない

Page Structure

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

1. ファーストビュー（料理のシズル感と世界観で引き込む）: 上半分に料理のアップ写真を置き、下へ黒にグラデで溶かす。縦書きの白い明朝コピーを重ね、その下に金のロゴを大きく置く
2. コンセプト文（シリーズのこだわりを伝える）: 黒地に、白い明朝の短い文を中央揃えで 5 行ほど並べる
3. 商品ナビ（3 商品の一覧と各商品へのリンク）: パッケージを 3 つ横に並べ、NEW のひし形バッジ、商品名、下向き三角を付ける
4. 新作バナー（季節の新作を訴求する）: 料理写真の帯に、左右から縦書きのコピーを入れ、中央に金枠のラベルと新作パッケージを置く
5. 商品紹介 1（1 つ目の商品の特長を伝える）: 深紅の金枠パネルにパッケージ、ルビ付きの金見出し、2 つのこだわり、素材写真、白枠のボタンを並べる
6. 商品紹介 2（2 つ目の商品の特長を伝える）: 商品紹介 1 と同じ構成を深紫のパネルで作る
7. 看板商品（定番の看板商品を強く印象づける）: 黒いダマスク柄の地に、2 行の白い明朝コピーと赤い皿の料理写真を大きく置く。続けてパッケージ、説明、2 つのボタンを並べる
8. アレンジレシピの導入（使い道を広げる）: 金の二重線で区切り、金茶のグラデ地に金の見出しと白い導入文を置く
9. レシピ一覧（商品ごとのアレンジレシピを見せる）: 商品色のパネルを 3 つ並べ、それぞれに小さいパッケージ、金の見出し、料理写真 3 枚とリンク名を入れる

Imagery

• 料理は暗い背景で、照りと油の艶が出るように寄りで撮る
• 素材（香辛料・醤・油）は白い背景から切り抜き、山積みにして置く
• レシピ写真は和食器にのせ、布や木の上で自然光で撮った家庭的な一皿にする
• パッケージは正面から撮り、柔らかい影を付ける
• 黒い地に、薄いダマスク柄や中華の文様をかすかに入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では内容を幅 80% 前後に収め、中央に置く
• PC の商品パネルは、左にパッケージ、右に見出しと本文の 2 カラムにする
• PC のレシピは 3 列のグリッドにして、写真を小さくする
• PC のファーストビューは、ロゴを中央に置き、縦書きコピーを左右に分ける
• ボタンは 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 行書くと起動時に読み込まれる。