DESIGN.md — 紺×金装飾の高級スパイス食品 LP（Royal Navy and Antique Gold Spice Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 深い紺・アンティークゴールド・唐草装飾・明朝見出し・切り抜き料理写真・暗いキッチン写真
• 地の質感: 紺地は中央がやや明るいビネットのグラデーション。茶色セクションは暗く落とした厨房や原料の写真を全面に敷く
• 形: 角のない四角が基本。ボタンは角を内側に切ったチケット型の金プレート。見出しは金の細線と唐草飾りで上下を挟む
• 温度感: 紺の寒色の地に、金・カレー色の暖色をのせる対比

Colors

• 地の色は紺が基本。導入と製法の 2 セクションだけ暗い茶色の写真地にして、交互にリズムをつける
• 金は装飾線・唐草飾り・ボタンにだけ使い、本文には使わない
• 文字は紺地・茶地のどちらでも白。淡い金は目次と章タイトルのロゴ周りに限る
• 赤は注意書き 1 か所だけに使う
• 料理写真のカレー色がいちばんの暖色。背景に別の暖色を足さない
• button-gold-plate は文字 #FFFFFF × 背景 #C38A30 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9A6D26、4.58:1）を使う。

Typography

• 見出しは明朝が基本。FV と小見出しにだけ太ゴシックを使う
• 強調したい名詞を大きく、助詞を小さくして、字の大きさに抑揚をつける
• 見出しは中央揃え。レシピの説明とレシピ名は左揃え
• 白文字には薄いドロップシャドウをつけて写真の上でも読めるようにする
• 本文は 13px 前後。行間 1.8 でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はレシピを写真とテキストの 2 カラムにし、左右を交互に入れ替える
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
• 章タイトルは上下を金罫で挟み、左右の端に唐草飾りを置く
• レシピは 写真→リード→レシピ名→ボタン の順に縦に積み、1 品ごとに 60px ほど空ける
• ボタンは中央に置き、幅は画面の約 55%
• カードの枠は作らない。紺地に写真を直接置く

Elevation & Depth

• 切り抜いた料理写真と商品缶の下に、紺地へなじむ柔らかい影を落とす
• 金ボタンに薄いドロップシャドウをつける
• 白文字に弱いテキストシャドウをつける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は皿ごと切り抜いて紺地に置く。導入と製法は全幅の四角い写真を背景にする
• セクション境界: 直線で色を切り替える（紺↔暗い茶）
• ボタンは四隅を内側に切ったチケット型にする
• 角丸は使わない
• 飾りは金の細線と唐草だけにする

Components

• 金プレートボタン（button-gold-plate）: 四隅を切り欠いた金色の面。左右に小さな唐草飾り、中央に白い明朝の文字
• 唐草罫線の章見出し（ornament-heading）: 上に唐草の飾り、上下に金の細罫、四隅に小さな飾りを置き、中央に白い明朝の見出し
• 目次アコーディオン（accordion-nav）: 濃い紺の帯に、淡い金の明朝の項目名と右端の▼を置き、細線で 3 段に区切る
• 小飾り付きサブ見出し（sub-heading-ornament）: 小さな金の飾りの下に、白い太ゴシックの小見出しを置く
• レシピ項目（recipe-item）: 切り抜いた料理写真の下に、白のリード文と明朝のレシピ名を左揃えで置き、その下に金ボタン
• 共同開発の×図（collab-cross）: 2 つのロゴと強みを縦に並べ、間に金の大きな×を置く
• 注記（note-text）: 写真の右下に小さく置く白文字の注記

Do's and Don'ts

Do - 紺と暗い茶の 2 色の地だけでページを組む - 金の装飾は細く繊細にして、章の頭に限って使う - 料理写真は皿ごと切り抜き、紺地に影を落として浮かせる - 見出しは明朝にし、語の大小で抑揚をつける - レシピは同じ型を繰り返して統一感を出す

Don't - 丸いボタンやピル型を使わない - 明るい白い背景のセクションを入れない - 金をベタ塗りの大きな面に使わない（ボタンだけにする） - ポップな手書き書体やカラフルなアイコンを入れない - 料理写真に角丸の枠やカード枠をつけない

Page Structure

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

1. ファーストビュー（商品と共同開発の価値を一目で伝える）: 紺のグラデーション地に商品缶と料理写真を重ね、白い太ゴシックのロゴとコピー、赤の注記を置く
2. 目次ナビ（3 つの章へ案内する）: 濃い紺の帯に、淡い金の明朝の項目と▼を 3 段で並べる
3. 共同開発の紹介（2 社の強みを掛け合わせたことを示す）: 暗い厨房写真を地に、唐草の見出し、2 つのロゴと×、短い説明文を中央揃えで置く
4. 商品紹介（商品の特長を伝え、商品情報へ誘導する）: 紺地に商品缶を大きく置き、明朝のリード見出し、本文、金ボタンを続ける
5. おいしさの秘密（製法のこだわりを説明する）: 焙煎工程やスパイスの暗い写真を地に、唐草の見出し、明朝の大見出し、説明文、結論のコピーを置く
6. 本格レシピ一覧（使い方を提案して利用を促す）: 唐草の章見出しの後、切り抜き料理・リード・料理名・金ボタンの組を 7 品ほど縦に繰り返す
7. アレンジレシピ一覧（普段の料理への使い道を広げる）: 小飾り付きのサブ見出しの後、同じ型でアレンジ料理を 4 品ほど並べる

Imagery

• 料理はやや上からの斜め俯瞰で撮り、皿ごと切り抜いて紺地に置く
• 器は陶器・アンティーク風・金属皿などを使い分け、料理ごとに表情を変える
• 製法の写真は暗いトーンで寄りにし、原料の質感とスパイスの粉を見せる
• 導入の背景は暗い厨房をぼかし、セピア寄りに落とす
• 装飾は金の唐草・渦巻き・細罫を、クラシックなベクター線画で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、商品缶を左、料理写真を右に置き、コピーは中央上に置く
• PC の目次は横一列のテキストリンクにする
• PC の共同開発の図は 2 つのロゴを左右に並べ、間に×を置く
• PC の商品紹介はテキストを左、商品缶を右の 2 カラムにする
• PC のレシピは写真とテキストを左右交互に配置し、ボタンは小さくする
• PC は中央寄せで、コンテンツ幅を約 800px に抑える

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 行書くと起動時に読み込まれる。