DESIGN.md — 深緑×金茶のカフェ朝食キャンペーンLP（Deep Green Cafe Morning Campaign LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、シンプル・ミニマル、信頼・誠実
• キーワード: 深緑・金茶アクセント・手書き縦書き・折り返し三角・商品カードグリッド・木漏れ日の影
• 地の質感: 白地に木漏れ日の淡い影を重ねる。緑地はフラットな単色。
• 形: 斜めに切った金茶の三角と、ページの角を折ったような形。カードとボタンは角丸。
• 温度感: 落ち着いた温かみ。朝の柔らかな光を感じさせる。

Colors

• 地は白と深緑の2つだけで交互に切り替える。
• 金茶は三角の装飾、主ボタン、白地の説明文にだけ使う。
• 緑地の文字は白に統一し、英字の補足だけ少し薄くする。
• 商品写真はライトグレーのカードに載せ、緑地から浮かせる。
• 注釈やLINEの帯は薄いグレー地にして、本編と区別する。
• button-primary は文字 #FFFFFF × 背景 #D49E4B のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9C6D25、4.54:1）を使う。

Typography

• 情緒的なコピーは手書き風の縦書きにし、本文の縦書きと並べる。
• キャンペーン名は太い欧文の大文字と筆記体を重ねる。
• 商品名は和文の太字の下に、細めの欧文表記を添える。
• 白地のリード文は金茶で中央揃え、行間は広めにとる。
• 注釈は小さく、緑地では白文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 商品写真は横幅いっぱいに裁ち落とす。
• カード一覧は左右16pxの余白、間隔は約28px。
• 縦書きコピーは右寄せで、まわりの余白を大きくとる。
• キャンペーンのパートは緑地をひと続きにして長く見せる。
• セクション間の余白は約64px。

Elevation & Depth

• 影は基本的に使わず、フラットにする。
• 商品写真の中の自然な落ち影だけで立体感を出す。
• カードは影なしで、ライトグレーの面で区切る。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品写真はライトグレーの角丸の正方形に収める。メインの写真は全幅の矩形で裁ち落とす。
• セクション境界: 直線で切り替える。緑面の角に金茶の三角（折り返し）を付ける。
• 金茶の三角は斜めに切った平行四辺形や、角を折った形として使う。
• ボタンは完全なピル型にする。
• バナー画像は角丸16px。

Components

• 商品詳細ボタン（button-primary）: 金茶のピル型ボタン。中央に置き、幅は約70%。
• キャンペーンロゴの面（campaign-badge）: 緑の帯に太い欧文と筆記体を重ね、金茶の斜め三角を添える。
• 商品カード（product-card）: ライトグレーの角丸正方形に切り抜き写真を載せ、下に和文名と英字名を置く。
• 組み合わせ表示（combo-plus）: 2つの商品名の間に金茶の大きな＋を置く。斜めの文字で添え書きを付ける。
• 下線付きの見出しリンク（underline-link）: 白の太字に白い下線を引いた条件見出しとリンク。
• SNS登録の帯（line-banner）: グレーの帯にアイコンと2行の案内文を並べる。
• 注釈ブロック（note-block）: ※で始まる注釈を小さな文字でまとめて置く。
• フッターのアコーディオン（footer-accordion）: 太字の欧文項目と右端の山形矢印を並べる。

Do's and Don'ts

Do - 緑と白の面をはっきり切り替える。 - 金茶は三角の装飾とボタンだけに絞って使う。 - 情緒的なコピーは手書き風の縦書きにする。 - 商品は同じ背景色・同じ角度で撮った写真をグリッドに並べる。 - 商品名には必ず欧文表記を添える。

Don't - 緑以外の強い原色を本編に入れない。 - カードに濃い影や枠線を付けない。 - 白地のコピーを詰め込まず、余白を削らない。 - ボタンを角張った四角にしない。 - 見出しをグラデーションにしない。

Page Structure

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

1. ヘッダー・パンくず（サイト内の位置を示す）: 白地に左ロゴ、右に3つのアイコン。その下にグレーのパンくず帯。
2. ファーストビュー（キャンペーンと割引を伝える）: 提供シーンの写真の下半分に、緑と金茶のキャンペーンロゴ面を重ねる。
3. 情緒コピー（朝の時間の世界観を伝える）: 木漏れ日の影が落ちる白地に、手書き風の縦書きキャッチと縦書きの本文。
4. 主役商品の紹介（おすすめ商品を訴求する）: 太い欧文の商品名、金茶のリード文、全幅のシズル写真、価格、ピル型ボタン。
5. キャンペーン条件（割引の条件を説明する）: 緑地の右上に折り返し三角。ロゴを再度出し、白い下線見出しと中央揃えの条件文。
6. おすすめの組み合わせ（セット利用を提案する）: 切り抜き写真2点と、金茶の＋で結んだ商品名。
7. 対象フード一覧（対象商品を示す）: 2列のグレー角丸カードに商品名と英字名。
8. 対象ドリンク一覧（対象ドリンクを示す）: 同じカードの形式で多数並べる。
9. 注釈・成分リンク（法的な補足）: 下線付きのリンクと小さな※注釈。左下に金茶の三角。
10. 関連バナー・SNS（回遊を促す）: グレー帯のLINE登録と、角丸バナーを縦に2枚。
11. フッター（サイト案内）: 注釈の帯、アコーディオンのリンク、黒丸のSNSアイコン、コピーライト。

Imagery

• 店員が商品を差し出す、温かい自然光の提供シーンの写真。
• 手でちぎってチーズが伸びるような、寄りのシズル写真。
• 商品はライトグレー背景に、斜めの柔らかい影を付けて単体で撮る。
• 白地には植物の葉の影（木漏れ日）を薄く重ねる。
• 飲み物はホットとアイスを並べて撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメインビジュアルを横長の全幅にし、ロゴ面は左上に小さく重ねる。
• PC は商品カードを3列にし、中央に約60%幅でまとめる。
• 縦書きコピーは PC でも縦書きのまま中央に置く。
• PC のフッターは3列のリンク一覧にする。
• PC の関連バナーは2枚を横並びにする。

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