DESIGN.md — 深紅ボルドー×金リボンのショコラ季節メニュー LP（Velvet Chocolate Seasonal Cafe Menu LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: ショコラ・ベルベット・金の光の軌跡・アールデコ欧文・波形セクション・季節限定
• 地の質感: 暗い地に放射状の光グロー、金色のきらめき粒子と細い光のリボン線が流れる艶やかな質感
• 形: 大きくうねる波形のセクション境界、ピル型ボタン、商品の切り抜き写真を円形グローで包む
• 温度感: 暖色。チョコレートの焦げ茶〜ボルドーと金で温かく濃厚

Colors

• ページ前半はボルドー〜焦げ茶の暗地で高級感を作る
• セクションごとに地色を変え、波形境界でグラデーション的に切り替える
• ボタン色は地色に合わせる：暗地は金ベージュ、黄地は焦げ茶、ラベンダー地は深紅
• 金色は欧文見出しと光のリボン線に限定して使う
• 暗地では文字は白、明地では焦げ茶かマゼンタ
• 商品写真の背後に地色より明るい放射グローを置く

Typography

• 欧文見出しは大文字・細線の装飾体で2行に積み、1行目より2行目を小さくする場合もある
• 和文はすべてゴシックで、商品名だけ太字
• 説明文は短い行で3〜4行に改行する
• 欧文見出しの色は地色に合わせ金・焦げ茶・マゼンタを使い分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は写真と文字の左右交互 2 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 0px（375px 幅換算）
• 商品は写真と文字を左右交互に配置（SP は写真→文字の縦積み）
• カード枠は使わず、地の上に直接写真と文字を置く
• 各区画の末尾に一覧への枠線ボタンと注釈リンクを中央に置く
• セクション間は波形で区切り、余白は広め

Elevation & Depth

• 影は使わず、商品写真の背後の放射状グローで浮かせる
• 金のきらめき粒子と光のリボン線で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品は背景切り抜き。周りを円形のソフトグローで包む
• セクション境界: 大きくうねる波形カーブ
• ボタンはすべてピル型
• 四角いカードや枠線の囲みは使わない
• 光のリボンは細い曲線を複数本並べる

Components

• 暗地用の商品ボタン（button-primary-dark）: 金ベージュのピル型。中央に『商品情報』系の短いラベル
• 黄地用の商品ボタン（button-primary-yellow）: 焦げ茶のピル型で白文字
• ラベンダー地用の商品ボタン（button-primary-lavender）: 深紅のピル型で白文字
• 一覧リンクボタン（button-outline）: 透明地に白の細枠線のピル型。区画末尾の中央
• アールデコ欧文見出し（heading-deco-en）: 細身の装飾欧文を2行に積み、上に和文リードを添える
• 商品ブロック（product-block）: 切り抜き写真＋リード＋商品名＋価格＋ボタンの縦並び
• 食感の特徴紹介（texture-feature）: 円形グロー写真3点と短い見出し＋説明を、光の曲線でつなぐ
• 注釈リンク（note-link）: 下線付きの小さな栄養・アレルゲン情報リンク

Do's and Don'ts

Do - 地色を区画ごとに切り替え、境界は波形にする - 商品写真はすべて切り抜きにし、背後にグローを置く - 金の光のリボン線をセクションをまたいで流す - ボタン色は地色に応じて3種を使い分ける - 欧文の装飾見出しで区画名を示す

Don't - 四角いカードや影付きボックスを使わない - 直線のセクション区切りにしない - 太い角ゴシックの欧文見出しを使わない - 寒色や蛍光色を加えない - 金色を本文に使わない

Page Structure

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

1. ファーストビュー（季節テーマと主力ドリンクを印象付ける）: 赤いベルベット幕を背景に主力商品を大きく配置。左に金の欧文タイトルと短い和文リード
2. 食感・特徴の紹介（味わいの要素を3つに分けて伝える）: ボルドー地に円形グロー写真3点と短い見出し＋説明を、光の曲線で結ぶ
3. 主力商品詳細（商品名・価格・詳細導線）: 左に切り抜き写真、右にリード・商品名・価格・金ボタン
4. バリエーション商品（派生商品を紹介）: ベージュ金の波形区画で欧文見出し＋商品ブロック、写真は反対側
5. ホット商品（別の飲み方を提案）: 焦げ茶地に戻し、左右反転の商品ブロック。末尾に一覧ボタンと注釈
6. フード（関連フードを3品紹介）: マスタード地に焦げ茶の欧文見出し、商品を左右ジグザグに配置
7. コーヒー豆（相性の良い豆を提案）: 深紅の波形区画で金欧文見出し、パッケージ写真と説明を横並び
8. グッズ（季節のグッズを紹介）: ラベンダー地にマゼンタ欧文見出し、商品を3列で中央揃え、深紅ボタン
9. 一覧導線（全商品ページへ誘導）: 白枠線のピル型ボタンを中央に配置

Imagery

• 商品は真俯瞰ではなく斜め上から撮り、背景を切り抜く
• ホイップやソースの艶、チョコ片など素材を周囲に散らす
• 背後に地色より明るい円形グローを置く
• 金色の細い曲線リボンと、きらめき粒子・音符などの装飾を添える
• ファーストビューは赤いベルベットの幕で舞台感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真と文字を左右交互の 2 カラム、SP は写真→文字の 1 カラム縦積み
• SP の欧文見出しは 40〜48px 程度に縮小し中央揃え
• グッズの 3 列は SP では 1 列または 2 列にする
• 波形の境界は SP でも維持し、振幅は小さめにする
• 光のリボン線は SP では本数を減らす

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