DESIGN.md — 焦げ茶×金の上質な食品ブランド LP（Premium Brown and Gold Food Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、信頼・誠実、ラグジュアリー・ダーク
• キーワード: 焦げ茶・金リボン・明朝見出し・二重罫線・シズル写真・欧文スクリプト
• 地の質感: 白地に薄い菱形のダイヤ柄を四隅に散らす。茶帯は中央が明るい放射グラデーション。金はメタリックなグラデーションにする。
• 形: 角はほぼ直角にする。見出しは上下の二重罫線と左右の菱形でまとめる。お客様の声だけ円形の吹き出しを使う。
• 温度感: 暖色寄りで落ち着いた、やや暗めのトーン

Colors

• 地は白・薄グレー・生成り・濃茶の4種類を章ごとに切り替える。
• 金は見出しのリボン・菱形・細い罫線だけに使い、面積は小さくする。
• 濃茶帯の上では文字を生成りか金にし、白い明朝で上品に見せる。
• ボタンは焦げ茶の単色にして、白文字と右向きの矢印を付ける。
• 強調したい一文だけ本文をオレンジ茶にする。
• お客様の声の円は白・金茶・赤茶・オリーブを交互に並べる。

Typography

• 見出しも本文も明朝を基本にし、ゴシックは注釈とボタンだけに使う。
• 章タイトルの字間は 0.1em 以上あけ、ゆったり見せる。
• 欧文スクリプトは章タイトルの上の罫線の中央に小さく置く。
• リード文は中央揃えにし、1行15〜20字で改行する。
• 開発者メッセージの長文は左揃えのゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ナビは 3×2、ポイントは 2 列）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 料理写真は左右の余白なしで全幅に置く。
• 章タイトルは上下を二重罫線で挟み、内側に余白をしっかり取る。
• 作り方の手順は左に写真、右に番号付きの帯と説明を並べる。
• テキストブロックの両端には細い金の線を角に添える。
• 章の間は地の色を切り替えて区切る。

Elevation & Depth

• 影はほぼ使わず、線と地色の差で階層をつくる。
• ナビのタブは濃茶の地に細い明るめの区切り線を入れる。
• お客様の声の円にはごく弱い影を付けて写真から浮かせる。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は全幅の長方形にする。人物写真は角を少し丸めた四角にする。
• セクション境界: 直線で切り替え、二重罫線の見出しを区切りにする
• ボタンは角丸なしの長方形にする。
• 見出しのリボンは両端を切り込んだ金の帯にする。
• 菱形を2〜3個並べた飾り線を小見出しの下に入れる。
• 吹き出しだけを正円にする。

Components

• 章ナビのタブ（nav-tab-grid）: 3×2 の濃茶タブ。白い明朝の文字と下向きの山形矢印を入れる。
• 二重罫線の章見出し（heading-double-rule）: 上下を茶の二重線で挟む。上の線の中央に欧文スクリプトを置き、左右には金の菱形を添える。
• 金のリボン見出し（gold-ribbon）: メタリックな金の帯に白い明朝の文字を載せる。小見出しやカードのラベルに使う。
• ポイント比較カード（point-card）: 金の細い枠の中を2列に分ける。上に斜体の番号ラベル、下に明朝の短い文を置く。
• 番号付きの手順（step-row）: 左に写真を置き、右に茶色のグラデーション帯で番号と工程名を示し、下に説明文を入れる。
• 茶色の誘導ボタン（button-primary）: 焦げ茶の長方形。白い文字を中央に、右端に山形の矢印を置く。
• 声の円形吹き出し（voice-bubble）: 料理写真の上に散らす正円。中に3〜4行の短い感想を入れ、地の色を4種類で交互にする。
• シーン説明の濃茶帯（dark-scene-band）: 放射グラデーションの濃茶帯に、明朝の見出し・菱形の飾り線・2行の説明を入れる。
• 担当者メッセージカード（profile-card）: 生成りのカード。上に金のラベル、中央に人物写真、続けて長い本文を置く。

Do's and Don'ts

Do - 料理は暗めの背景で、照りと湯気が伝わるように大きく見せる。 - 章ごとに「欧文スクリプト＋明朝の見出し＋二重罫線」の型を守る。 - 金はアクセントとして少量だけ使い、上品さを保つ。 - 地の色を白・生成り・濃茶で順に切り替え、リズムをつくる。 - 本文は短い文を中央揃えにし、行間を広く取る。

Don't - 原色に近い赤や青を面として使わない。 - ポップなゴシック極太体や丸ゴシックを見出しに使わない。 - ボタンを大きなピル型にしたり、派手なグラデーションにしたりしない。 - 写真を小さなサムネイルばかりにしない。 - 装飾の金を全体に多用しない。

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 食卓の料理写真を全幅に置き、左上に明朝のタイトル、右下に商品パッケージを重ねる。
2. 章ナビ（各章へのページ内リンク）: 濃茶の3×2タブに山形の矢印を付ける。
3. リードと特長（歴史とこだわりを伝える）: 中央揃えのリード文と金のリボン見出しの後に、素材写真と説明を交互に置く。
4. 作り方（調理の手軽さを示す）: 薄グレー地に二重罫線の見出し、ポイントカード、動画、番号付きの手順3つを並べる。
5. おすすめシーン（使う場面を想像させる）: 濃茶帯の見出しの後に、写真と濃茶の説明帯を交互に2組置く。
6. 商品ラインアップ（種類の比較と詳細への誘導）: 白地にパッケージを3つ横に並べ、下に茶色のボタンを置く。
7. アレンジレシピ（活用法を見せる）: 生成り地に料理写真、明朝の料理名、菱形の箇条書き、ボタンを入れた白いカードを置く。
8. お客様の声（満足度の社会的証明）: 暗めの料理写真の上に、色違いの円形吹き出しを散らす。右下に調査の注釈を入れる。
9. 開発者メッセージ（作り手の想いで信頼を得る）: 生成りのカードを2枚置き、金のラベル・人物写真・長文の順に並べる。

Imagery

• 料理は少し上からの斜め俯瞰で撮り、暖色の照明と浅い被写界深度にする。
• ワイングラスや銀のカトラリー、金縁の皿を添えて上質な食卓を演出する。
• 素材は白い金縁の皿に載せ、ややアップで質感を見せる。
• 白地の四隅に淡いベージュの菱形ドット柄を敷く。
• 人物は白背景のバストアップで、商品を手に持たせる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を約 85% に収め、左右に余白を取る。
• PC のナビは6つのタブを横一列に並べる。
• 特長とシーンは、PC では写真とテキストを左右交互の2カラムにする。
• 作り方の手順は PC では3列の縦型カードにする。
• 開発者カードは 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 行書くと起動時に読み込まれる。