DESIGN.md — 焦げ茶×生成りの本格スパイス食品 LP（Dark Roast Spice Craft Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、和風
• キーワード: 焦げ茶の地・生成りの文字・明朝と欧文セリフ・細線の枠・料理シズル写真・スパイス素材
• 地の質感: マットで暗い単色の地に、湯気や照りのある料理写真が浮かぶ。装飾は細い線だけに絞っている。
• 形: 円形の人物写真と円形のポイント枠、角丸の細線カード、ピル型ボタン。
• 温度感: 暖色寄りで、ローストしたような深い温かみがある。

Colors

• 地はほぼ黒の焦げ茶 1 色に統一する。生成りの面はファーストビュー直下の素材紹介にだけ使う。
• 暗い地の文字は真っ白にせず、生成り（#F0EDE9）にする。
• 強調は色を変えずに、生成りのラベル帯・細線・字の大きさで付ける。
• ボタンは生成りの面に焦げ茶の文字を載せ、地色と反転させる。
• 線はくすんだベージュの 1px にして、主張させない。
• 色数を抑え、写真の料理の色で温かみを出す。

Typography

• 見出しはすべて明朝にし、字間を広めに取る。
• 本文だけは小さめのゴシックにして、行間を 2.0 ほど取る。
• 見出しの上に、欧文セリフの小さなラベルと下線を添える。
• 数字の番号には欧文セリフの大きめの数字を使う。
• 人物名につける敬称は、本体より一段小さくする。
• 見出しは中央揃え、本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。専門家紹介は 2 列、副菜レシピは横スクロールカード。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション間は 70〜90px と広めに取る。
• 製品紹介は細線の角丸枠で囲み、パッケージ画像を枠の上辺にはみ出させる。
• 写真は左右に余白を取った 80% 幅で置く。
• 工程の写真は互い違いにずらして配置し、リズムを出す。
• 特長リストは番号付きの行を細線で区切る。
• 本文の左右余白は 16px 程度にする。

Elevation & Depth

• 影はほとんど使わず、平面的に構成する。
• 副菜カードは、写真の右下に細線の枠をずらして重ね、奥行きを出す。
• パッケージ画像だけ、わずかに浮いた見え方にしてよい。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 6px 程度の長方形、人物は細線の二重円で円形に切り抜く。
• セクション境界: 直線で色を切り替える。暗い地どうしの境目は余白だけで区切る。
• ポイントは、上部が切れた細線の円の中に番号と名前を入れる。
• ボタンは生成りで塗ったピル型にする。
• ラベル帯は角丸なしの長方形にする。
• 太い線や塗りの枠は使わない。

Components

• 詳しく見るボタン（button-primary）: 生成りのピル型ボタン。焦げ茶の明朝文字で、中央に置く。
• 専門家の円形ポートレート（expert-circle）: 細線の二重円で切り抜いた人物写真。上に欧文名を弧状に添え、下に肩書きと名前を置く。
• 製品紹介の細線枠（product-frame）: 1px のベージュ線で囲んだ角丸の枠。上辺にパッケージ画像を重ね、中に説明・ボタン・ポイントを入れる。
• ポイント円（point-circle）: 上部に切れ目のある細線の円。Point の欧文ラベルと番号を載せ、中に名前と短い説明を入れる。
• 生成りのラベル帯（tag-label）: 見出し上のリード文や名前に敷く、生成りの長方形の帯。文字は焦げ茶。
• 番号付き特長リスト（numbered-list）: 欧文セリフの数字と明朝の文を組み、行と行を細線で区切る。最後に注釈を添える。
• 欧文サブラベル付きの見出し（section-eyebrow）: 小さな欧文セリフのラベルと下線の下に、明朝の大見出しを中央揃えで置く。
• レシピ写真カード（recipe-card）: 角丸の料理写真。左下に円形の人物アイコンを重ね、その横に肩書きと名前のラベルを置く。
• 副菜の横スクロールカード（side-dish-card）: 正方形に近い写真に、ずらした細線の枠を重ねる。下に明朝 2 行で料理名を置く。

Do's and Don'ts

Do - 暗い焦げ茶の地を守り、写真の料理の照りを引き立てる。 - 見出しは明朝で字間を広めに取り、欧文セリフのラベルを添える。 - 装飾は 1px の細線と円形のモチーフに絞る。 - スパイスの粒や粉を、白い地に切り抜いて図鑑のように並べる。 - 余白を大きく取り、1 画面に入れる情報を絞る。

Don't - 赤や黄色の派手な CTA ボタンを使わない。 - 純白の背景セクションを多用しない。 - 丸ゴシックやポップな書体を使わない。 - 濃い影やグラデーションのボタンを使わない。 - 価格訴求の大きなバッジを乱立させない。

Page Structure

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

1. ファーストビュー（本格感とシズル感で引き込む）: 暗い背景で料理を俯瞰した写真を全面に置く。下部に明朝の小さなコピーと、生成りの大きな欧文セリフのロゴタイプを重ねる。
2. 素材紹介（原料スパイスのこだわりを見せる）: 生成りの地に、皿の写真と切り抜いたスパイスを弧状に配置する。各スパイスには小さな欧文名を付け、下に明朝の 3 行コピーを置く。
3. 専門家紹介（監修者の権威で信頼を出す）: 暗い地に 2 列で円形ポートレートを並べ、欧文名・肩書き・名前を添える。
4. 商品紹介と特長（商品概要と 3 つのポイントを伝える）: 細線の角丸枠の上辺にパッケージ画像を重ね、本文とピル型ボタンを入れる。その下にポイント円を縦に 3 つ並べる。
5. 使い方（手軽さを伝える）: 生成りのラベル帯、明朝の 2 行見出し、本文の順に置く。工程写真を互い違いに配置し、円弧状の欧文装飾を添える。
6. 製品の利点リスト（形状のメリットを列挙する）: 金色のメダル風のエンブレムの下に、細線区切りの番号付きリスト 4 行と注釈、ボタンを置く。
7. スペシャルレシピ（監修者のレシピで使い方を広げる）: 欧文ラベル付きの見出しの後に、人物アイコン付きの料理写真カードを縦に 4 枚並べる。
8. アレンジレシピ（公式レシピの提案）: 欧文の小見出しと下線、写真、明朝の料理名、説明文を 1 組にして 2 品並べる。
9. つけあわせレシピ（副菜の提案で回遊させる）: ずらした細線の枠付きの写真カードを横スクロールで並べ、スクロールできることを示すヒントを添える。
10. インタビュー（専門家の言葉で深みを出す）: 細線の角丸カードに、人物写真・Vol 番号・明朝の引用見出し・肩書き・名前を入れる。
11. フッター（シェアとブランドの締め）: スパイスを俯瞰した写真を背景に、シェアの円形アイコンと大きな欧文ロゴタイプを置く。

Imagery

• 料理は鉄鍋や陶器の皿に盛り、暗めの背景でローキーに撮る。照りと湯気を強調する。
• スパイスは粒や粉を小山にして、白い背景で真上から撮って切り抜く。
• レシピ写真は木の台や布を敷き、自然光の下、斜め上から撮る。
• 人物は料理人らしい服装で、キッチンや店内を背景にした自然なポートレートにする。
• 見出しの周りに、欧文セリフの文字を円弧状に並べた薄い装飾を入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅をおよそ 75% にして中央に寄せ、周囲に暗い地の余白を広く取る。
• PC の素材紹介は、右側に明朝の縦書きコピーを置く。
• 専門家は PC で 4 列に横一列で並べる。
• ポイント円は PC で横 3 列にする。利点リストはエンブレムの右に置いた横組みにする。
• レシピカードは PC で 2 列、副菜は 4 列のグリッドで全件表示する。
• 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 行書くと起動時に読み込まれる。