DESIGN.md — 黄金キャラメル色のカフェ季節限定メニュー LP（Golden Caramel Seasonal Cafe Menu LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 黄金色・とろける質感・キャラメル・大人のデザート・季節限定・切り抜き商品写真
• 地の質感: なめらかな布やクリームのようなグラデーション。ベタ塗りの地と、柔らかい落ち影の写真を組み合わせる
• 形: ピル型ボタン、角丸 12px 前後のカード、波形のセクション境界
• 温度感: 暖色。黄・ベージュ・こげ茶でまとめる

Colors

• セクションごとに地を黄金色→ベージュ→クリーム→淡クリームの順で切り替え、境目は波形にする
• 文字はこげ茶に統一し、純粋な黒は使わない
• 主ボタンはこげ茶の地に黄色の文字。黄金色の地の上では白ボタンにこげ茶の文字
• 見出しの欧文ロゴは黄から橙茶への金グラデにして立体感を出す
• 特に推したい商品だけ、ブラウンや深緑の暗いカードで囲んで目立たせる
• 一覧への誘導はこげ茶の枠線だけのアウトラインボタンにする

Typography

• セクション見出しは日本語ではなく欧文の装飾ロゴにし、少し斜体や遠近をつけて金グラデで塗る
• リード文だけ明朝体を使い、行間 2.5 倍以上で中央揃えにする
• 商品名・価格・説明は左揃えのゴシック体にする
• 価格は欧文の数字で大きめにする
• 注釈は 11px で、商品ブロックのすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品 1 点ごとに写真→商品名→価格→説明→ボタンの順で縦に並べる
• 商品ブロック同士は 80〜100px 空ける
• セクションの最後に一覧ページへのアウトラインボタンを置く
• 暗いカードは左右 16px の余白を残し、画面の端まで広げない
• ファーストビューは写真の上に文字を直接重ね、余白を多めにとる

Elevation & Depth

• 切り抜いた商品写真の右下に柔らかい落ち影をつける
• ボタンとカードには影をつけず、平らにする
• 欧文ロゴは影とグラデーションで立体的に見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いて落ち影をつける。カード画像は角丸の長方形。比較用の画像は丸く切り抜く
• セクション境界: なだらかな波形のカーブ
• ボタンはすべてピル型にする
• 特集カードは角丸 12px 前後
• セクションの境界に直線を使わず、波形で色を切り替える

Components

• 商品詳細ボタン（button-primary）: こげ茶の地に黄色の文字のピル型ボタン。幅は画面の約 50%
• 白ピルボタン（button-light）: 黄金色の地や暗いカードの上に置く白いボタン。幅は約 65%
• 一覧誘導ボタン（button-outline）: こげ茶の 1px の枠線だけのピル型ボタン。中は透明
• 下線テキストリンク（text-link-underline）: アレルゲン情報などへのリンク。こげ茶の文字に下線
• 金グラデ欧文見出し（logo-heading）: セクション名を太い欧文の斜体にし、黄から茶へのグラデで塗る
• 暗色特集カード（feature-card-dark）: ブラウンや深緑の角丸カード。中に写真、白文字の説明、白ボタンを入れる
• 発売日バッジ（date-badge）: 白い円の中に深緑の欧文で日付と曜日を入れ、カードの左上に重ねる
• 商品ブロック（product-block）: 切り抜き写真、商品名、価格、説明、詳細ボタンのセット。右上に丸い認証マークを置く
• 属性タグ（tag-outline）: 価格の横に置く、白い細い枠の小さなタグ

Do's and Don'ts

Do - 地は黄・ベージュ・クリーム系だけで切り替える - セクションの境界は波形でつなぐ - 商品写真は切り抜いて落ち影をつけ、大きく見せる - 商品ブロックの並び順は全セクションで同じにする - ボタンはすべてピル型にし、役割に合わせて塗り・白・枠線を使い分ける

Don't - 寒色や鮮やかな原色をベースの色にしない - セクション見出しをただの日本語ゴシックにしない - ボタンを四角くしたり、影をつけたりしない - 文字に純粋な黒を使わない - 1 つの商品ブロックに複数のボタンを並べない

Page Structure

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

1. ファーストビュー（新作の世界観を一目で伝える）: 布のようなグラデーションの背景に、浮かぶドリンクと人物の写真を重ねる。明朝の斜めのキャッチと金グラデの欧文商品ロゴを置く
2. コンセプトのリード（商品の情緒的な価値を語る）: グラデーションの地に、明朝の中央揃えで 5 行ほど。行間は広くとる
3. 素材の特長（味の構成要素を 2 つ見せる）: 写真のアップ、素材の欧文ロゴ、短い説明文を左右交互に置く
4. 取り組みの紹介（原材料の背景や社会的な価値を伝える）: 太字の見出し 2 行と、中央揃えの本文 4 行
5. メイン商品（商品の詳細へ誘導する）: 切り抜き写真、商品名、価格、注釈、白いピルボタンの順に並べる
6. 関連ドリンクのカード（同じシーズンのほかのドリンクを紹介する）: ブラウンや深緑の暗い角丸カード。線画の装飾、欧文ロゴ、日付バッジを入れる
7. フード（関連するフードを紹介する）: 波形の境界のあとに金グラデの欧文見出しを置き、商品ブロックを 3 つ繰り返す。最後に一覧ボタン
8. コーヒー豆（豆の商品を紹介する）: 淡いクリームの地に商品ブロックを 1 つと、一覧ボタン
9. グッズ（シーズン限定のグッズを紹介する）: 明るいクリームの地。色違いを丸い枠で見せたり、セット内容を＋でつないで見せたりする
10. カード（プリペイドカードのデザインを紹介する）: ベージュの地に、角丸のカード画像と中央揃えの商品名、注釈、ボタン
11. デジタルカード（デジタル版のカードへ誘導する）: 星形のビジュアルと、一覧へのアウトラインボタン

Imagery

• 商品は白背景で撮って切り抜き、右下にベージュの柔らかい落ち影をつける
• ファーストビューは布やクリームがうねるような質感のグラデーションの背景にする
• 素材はアップで撮り、とろりと垂れる様子を見せる
• 暗いカードにはコーヒーの枝葉の線画を薄く敷く
• 特集カードの写真は、葉や木の台などを使った舞台のような演出にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の幅を 960px ほどに収めて中央に置き、外側にも地の色を敷く
• PC では商品ブロックを 2〜3 列のグリッドにする
• ファーストビューは PC では写真とコピーを左右に分ける
• 波形の境界は 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 行書くと起動時に読み込まれる。