DESIGN.md — 生成り×カラメル茶の明朝体デザート商品 LP（Warm Caramel Mincho Dessert Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 生成り・カラメル・明朝見出し・シズル写真・こだわり訴求・余白
• 地の質感: 生成りベージュの面に紙のような細かい質感。白地セクションはフラット。
• 形: ボタンはピル型。見出し下線と細い横罫線。写真は角丸なしの全幅か矩形。
• 温度感: 焼き色を思わせる暖色寄り。落ち着いた温かさ。

Colors

• 白地と生成りベージュ地を交互にしてセクションを区切る。
• 見出しはカラメル赤茶、ボタンは焦げ茶で茶系だけで統一する。
• 白地の補足本文はグレー、ベージュ地の本文は茶色にする。
• 黄色は派生商品の目印など一点だけに使う。
• 鮮やかな色は写真と商品パッケージに任せ、UI は低彩度に保つ。

Typography

• 見出しは明朝、本文とボタンはゴシックにする。
• 番号見出しは小さな語と大きな数字を組み合わせ、横に細い罫線を伸ばす。
• リード文は太字の赤茶、その下の詳細はグレーの細字で 2 段構成にする。
• 本文の行間は 1.8〜2.0 と広めにとる。
• セクション見出しには文字幅の下線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。おすすめ商品だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右余白なしの全幅で見せる。
• テキストブロックは左右 24px 前後の余白で左揃え。
• セクション見出しとボタンは中央揃え。
• こだわり項目は見出し→リード→本文→全幅写真の順で繰り返す。

Elevation & Depth

• 影はほぼ使わずフラット。
• ヘッダーだけ下側にうっすら影を付ける。
• 写真にかぶせる白パネルで奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形。商品は切り抜きで中央に置く。
• セクション境界: 直線で切り替える。写真の下辺に下向き三角の切り欠きを入れる。
• ボタンは必ずピル型。
• FV のロゴ部分は白の半円で写真に食い込ませる。
• 写真の角は丸めない。

Components

• 主ボタン（button-primary）: 焦げ茶のピル型、白文字を中央に、右端に小さな矢印。左端に商品の小アイコンを重ねることもある。
• サブボタン（button-outline）: 白地に焦げ茶の枠線と文字のピル型、右に矢印。
• 下線付き見出し（heading-underline）: 明朝体を中央揃えにし、文字幅の下線を引く。
• 番号見出し（numbered-heading）: 小さな語＋大きな数字を明朝で並べ、右に細い罫線を伸ばす。
• 罫線挟みキャッチ（divider-catch）: 上下の細罫線で挟んだ明朝のキャッチ。最後に感嘆符を付ける。
• 派生商品の丸バッジ（badge-circle）: 黄色の大きな円に商品画像と明朝の商品名を入れ、FV の端に重ねる。
• おすすめ商品カード（product-card）: 水色の楕円台座に商品画像をのせ、下に太字の商品名とサブボタン。
• 写真上の白パネル（photo-overlay-panel）: 全幅写真に白パネルを重ね、中央揃えの説明と CTA を入れる。

Do's and Don'ts

Do - 茶系の濃淡だけで UI をまとめる。 - 見出しは明朝体で上品にする。 - シズル写真は全幅で大きく、余白をたっぷりとる。 - こだわりは番号付きで同じ型を繰り返す。 - 白地とベージュ地を交互に置いてリズムを作る。

Don't - 原色の赤や青をボタンに使わない。 - 角張った四角ボタンにしない。 - 見出しを太いゴシックや丸ゴシックにしない。 - 強い影やグラデーションのボタンを使わない。 - 写真を小さく詰め込まない。

Page Structure

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

1. ヘッダー（ブランドを示し、ナビを置く）: 白地の左にロゴ、右に赤い丸の検索ボタンとハンバーガーメニュー。
2. ファーストビュー（世界観と商品名を伝える）: 木のテーブルの生活シーン写真に明朝の縦書きコピー。黄色い丸バッジを重ね、白の半円にロゴを置く。
3. 商品作りの想い（主力商品の紹介）: ベージュ地に下線見出し、切り抜き商品、主ボタン、茶色の本文。
4. おいしさの秘密導入（こだわりの数を予告する）: 表面のアップ写真に白い明朝文字。数字だけ金色で強調し、下辺に三角の切り欠き。
5. こだわり 1〜4（製法の特長を順に説明する）: 番号見出し→赤茶の小見出し→太字リード→グレー本文→全幅写真を 4 回繰り返す。
6. 製法まとめ・詳細導線（工程紹介ページへ送る）: 全幅写真の上に白パネルを重ね、中央揃えの文、罫線挟みキャッチ、主ボタン。
7. 派生商品紹介（別の味を紹介する）: ベージュ地に鉤括弧付きの下線見出し、商品画像、主ボタン、ダッシュ付きの箇条書き。
8. おすすめ商品（関連商品へ回遊させる）: 白地に 2 カラムの商品カードとアウトラインボタン、その下に全幅の主ボタン。
9. フッター（サイト内リンクと会社情報）: クリーム地に 2 列のリンクを縦罫線で区切り、ロゴとコピーライトを置く。

Imagery

• 木のテーブルと自然光の生活シーン写真で、ややくすんだトーンにする。
• 素材写真は白い木板の上で明るくハイキーに撮る。
• とろみのあるソースを垂らす瞬間など、黒バックでないシズル写真を使う。
• スプーンですくった断面を寄りで見せる。
• 製造の現場はステンレスで清潔感を出す。
• 商品パッケージは影なしで切り抜き、中央に大きく置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを左右 2 カラムにし、こだわりごとに左右を入れ替える。
• PC の商品紹介は左に商品画像とボタン、右に本文の 2 カラム。
• PC の白パネルは写真の左下に重ねる。
• PC のフッターリンクは 1 行の横並びにする。
• SP は全要素を 1 カラムにし、写真を全幅で見せる。

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