DESIGN.md — 芋ペースト黄×紫の季節限定カフェメニューLP（Seasonal Sweet Potato Cafe Menu LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 季節限定・シズル写真・食材テクスチャ背景・漢字一文字バッジ・黄×紫の補色
• 地の質感: 芋ペーストや果物断面の写真を背景に全面で敷く。テキスト帯だけはフラットな単色にする
• 形: 四角いバッジ、ピル型の日付ラベル、円形に切り抜いた商品写真
• 温度感: 暖色寄り。秋の味覚らしい黄金色に、紫とえんじで引き締める

Colors

• メニューごとに地の色を決める。芋系は黄・紫、梨系はクリーム・えんじ
• 写真背景のセクションと単色の説明帯を交互に置く
• 紫は日付帯と芋系の見出し文字だけに使う
• 漢字バッジは芋系なら黄地に紫文字、梨系ならえんじ地に黄文字
• 暗い地には白文字、明るい黄地には濃いグレーの文字
• グラデーションは使わない。色の変化は写真に任せる

Typography

• 見出しは極太で、手描き風の丸みがある書体にする
• 本文も太字にして、写真背景の上でも読めるようにする
• 写真の上の本文には白い縁取りか淡い影を付ける
• 本文は 2〜5 行の短い段落にし、左寄せにする
• 日付は数字を大きく、曜日は小さな欧文にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。説明帯は写真と文字の左右 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは隙間を空けず、背景を全幅で切り替えて区切る
• メニューのセクションは「見出し→大きな商品写真→説明帯」の順に組む
• 説明帯は円形写真を左端からはみ出させ、文字を右側に置く
• サブメニューは写真と見出しを左右交互にずらして配置する

Elevation & Depth

• 商品の切り抜き写真には下方向に淡い影を付けて、背景から浮かせる
• カードやボタンには影を付けない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品は背景ごと切り抜くか、白い円の中に収める
• セクション境界: 直線で区切って単色帯に切り替える
• 漢字バッジは角丸なしの正方形
• 日付ラベルは白いピル型
• 円形写真は画面端で切れるように置く

Components

• 漢字一文字バッジ（kanji-badge）: 正方形の中に大きな漢字一文字と縦組みの小見出しを入れ、味のテーマを示す
• 期間限定の日付ピル（date-pill）: 紫の全幅帯の中央に白いピルを置き、ラベル・矢印・開始日を並べる
• 日付帯（period-band）: FV の直下に置く高さ約 80px の紫の帯
• 商品名見出し（menu-headline）: バッジの右に、極太の丸ゴシックで商品名を 2 行で置く
• 円形写真の説明帯（desc-band）: 単色の帯に白い円形の写真と短い説明文を並べる
• 別メニューへのサムネイルリンク（anchor-thumb）: FV の隅に置く白枠付きの小さな写真。バッジと「click」ラベル付き

Do's and Don'ts

Do - 食材そのもののテクスチャ写真をセクション背景に使う - メニューごとにテーマ色を変え、バッジの色もそれに合わせる - 商品写真は大きく、画面幅の 7 割以上の大きさで見せる - 説明文は短く、食材名と食感を具体的に書く

Don't - 寒色や無彩色の背景を広く使わない - 細い明朝体や細字の本文を使わない - 角丸カードを並べるような汎用 UI にしない - 写真の上に長文を載せない

Page Structure

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

1. ファーストビュー（季節限定メニュー全体を一目で見せる）: ペーストの背景に商品を集合配置する。右上に漢字バッジ、左下に別メニューへのサムネイルを置く
2. 期間告知（販売開始日を伝える）: 紫の全幅帯に白いピル型の日付ラベルを置く
3. 主力商品紹介（看板のパンを訴求する）: ペーストの背景に、バッジ＋紫の見出しと大きな商品写真を置く
4. 主力商品の説明（食材とおいしさを説明する）: レモンイエローの帯に、円形写真（左）と本文（右）を並べる
5. サブ商品紹介（ドリンクとパフェを紹介する）: 写真と小見出し・本文を左右交互に配置し、焼き芋の写真で余白を埋める
6. 別テーマ商品紹介（梨のドリンクを訴求する）: 梨の断面写真を背景に、えんじのバッジと見出し、大きなグラスの写真を置く
7. 別テーマ商品の説明（味わいを説明して締める）: えんじの帯に、円形写真と白い本文を並べる

Imagery

• 食材のペーストや果物の断面を真上から撮ったテクスチャ写真を、全面背景に敷く
• 商品はやや俯瞰で切り抜き、ツヤとトッピングがはっきり見えるようにする
• 焼き芋・桃などの素材写真を画面端に見切れさせて添える
• 照明は明るく、暖色寄りで彩度を高めにする
• イラストは使わず、写真と文字だけで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1 カラムを幅広に使い、FV は商品を横に並べる
• PC の見出しは左、商品写真は右に置く 2 分割にする
• 説明帯は 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 行書くと起動時に読み込まれる。