--- version: alpha name: Dark Imperial Chinese Premium Sauce LP description: 黒地をベースに、商品ごとに深紅・紫・黒のパネルを切り替える高級中華調味料の LP。金のグラデ明朝見出し、中華風の細い金枠、シズル感のある料理写真で、重厚なプレミアム感を出している。 colors: background: '#000000' primary: '#7C022B' secondary: '#46003F' accent-1: '#FFD671' line: '#C9A25A' text-body: '#FFFFFF' cta: '#FEDB5C' on-cta: '#CEBD81' background-alt: '#3D2A0A' dark-section: '#24000A' accent-2: '#C57643' surface: '#000000' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 30px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 42px button-secondary: textColor: '{colors.text-body}' typography: '{typography.label-button}' height: 42px panel-chinese-frame: backgroundColor: '{colors.primary}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 900px heading-gold-ruby: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 50px badge-new: textColor: '{colors.accent-1}' typography: '{typography.note}' height: 30px label-season: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 40px product-nav: textColor: '{colors.text-body}' typography: '{typography.note}' height: 240px recipe-card: textColor: '{colors.text-body}' typography: '{typography.note}' height: 300px --- # DESIGN.md — 黒×深紅×紫に金文字の高級中華調味料 LP（Dark Imperial Chinese Premium Sauce LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、和風、力強い・インパクト - **キーワード**: 漆黒・深紅と紫・金の明朝・中華の飾り枠・シズル写真・縦書きコピー - **地の質感**: 黒地に金のグラデと薄いダマスク柄。艶のある料理写真で湿度と熱を出す - **形**: 角丸なしの四角パネルと、四隅に中華風の雷文コーナーが付いた細い金の二重線枠 - **温度感**: 暗く熱い。辛さと香りを思わせる赤みがかった暖色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地色（漆黒） | 30% | 画素の実測 | | `primary` | `#7C022B` | 商品1のパネル色（深紅） | 16% | 画素の実測 | | `secondary` | `#46003F` | 商品2のパネル色（深紫） | 15% | 画素の実測 | | `accent-1` | `#FFD671` | 見出しの金文字 | 2% | 画素の実測 | | `line` | `#C9A25A` | パネルの金の飾り枠線 | 1% | 推定 | | `text-body` | `#FFFFFF` | 暗い地の上の本文（白） | 3% | 推定 | | `cta` | `#FEDB5C` | 特設サイトボタンの矢印アイコン（金黄） | 0% | 画素の実測 | | `on-cta` | `#CEBD81` | 主 CTA の文字（金） | 0% | 画素の実測 | | `background-alt` | `#3D2A0A` | レシピ見出し帯の金茶グラデ地 | 8% | 画素の実測 | | `dark-section` | `#24000A` | パネルの外側に敷く黒みの赤 | 6% | 画素の実測 | | `accent-2` | `#C57643` | 見出しの横線・小さい三角マーカー（オレンジ金） | 0% | 画素の主要色に補正 | | `surface` | `#000000` | 商品3のパネル色（黒） | 12% | 画素の実測 | - 地色はほぼ黒。商品ごとに深紅・深紫・黒のパネルで色分けする - 見出しは金のグラデ文字だけ。本文は白に限る - 金は線・見出し・矢印など細い要素にだけ使う - 主 CTA は金の線と金文字、サブ CTA は白い線と白文字にする - パネルの外側は暗い色にして、パネルが浮いて見えるようにする - 明るい色は料理写真の中にだけ出す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きコピー | 明朝 | Shippori Mincho | 800 | 30px | 1.4 | 0.1em | | `headline-lg` | 商品名見出し（金、ルビ付き） | 明朝 | Shippori Mincho | 700 | 28px | 1.3 | 0.05em | | `headline-md` | セクション見出し・レシピ見出し | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.08em | | `headline-sm` | こだわりの小見出し（金、カギ括弧付き） | 明朝 | Noto Serif JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 説明文（中央揃え） | 明朝 | Noto Serif JP | 500 | 14px | 2.0 | 0.05em | | `note` | 商品名のキャプション・レシピ名リンク | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.03em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 400 | 14px | 1.4 | 0.05em | - 見出しは明朝体にし、金のグラデと細い影を付ける - 中国語の料理用語にはカタカナのルビを付ける - 本文は基本的に中央揃えで短く改行する - キャッチコピーは縦書きの明朝で複数行並べる - 強調したい語はカギ括弧で囲み、ルビを付ける - レシピ名は白文字に下線を付けたリンクにする - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-25938f45`（元 LP の URL から採番） - **元 LP**: https://www.ajinomoto.co.jp/cookdo/premium/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。