DESIGN.md — 生成り×焦げ茶×金の洋食フェアメニューLP（Classic French Bistro Seasonal Menu LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: 生成り紙・焦げ茶・金の細線・明朝・額縁写真・フランス料理風
• 地の質感: 和紙・漆喰のような淡いムラのある紙テクスチャを全面に敷く。ワインセクションは濃茶のスタッコ調
• 形: ピル型の日付ラベル、写真の背後に斜めにずらした金茶の帯、細い金罫、四芒星のきらめき
• 温度感: 暖色寄り。クリーム〜キャラメル〜焦げ茶のグラデーションで温かいソースの印象

Colors

• 地は生成り紙テクスチャ。冒頭だけはグレージュ紙にして、販売時期の違いを色で分ける
• 日付や期間は必ず焦げ茶のピル型ラベル＋白文字で出す
• 写真の背後に金茶か深緑の帯をずらして置き、メニュー系統を色で区別する
• ワイン・ドリンクは濃茶スタッコ地に反転させ、大人っぽい印象を出す
• 金は細罫・きらめき・プレゼント見出しだけに絞り、面では使わない
• 黄色は店舗検索の帯だけに使う。ブランド色なのでフェアの配色には混ぜない
• present-card は文字 #B8860B × 背景 #FEFEFE のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#966D09、4.64:1）を使う。

Typography

• 全体を明朝で統一し、ゴシックは使わない
• 見出しの背後に薄い金茶の欧文スクリプトを大きく重ねる
• 価格は数字を大きく、「円」と税込表記は小さくする
• 写真の端に縦書きの短い紹介文を置いてもよい
• 文字は焦げ茶が基本で、真っ黒は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サブセットや単品メニューは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• メインの写真ブロックは幅いっぱい近くまで使い、背後の帯を左右に 8〜12px はみ出させる
• セット名と価格は左、内容リストは縦の細罫で区切って右に置く（SP では下に積む）
• 素材紹介は小さな横長カード（写真＋短文）を中央に置く
• セクションの頭に『ピル型ラベル→見出し→きらめき』を縦に並べる

Elevation & Depth

• 影はほぼ使わず、紙の上に写真を置いたようなフラットな重なりにする
• 告知カードだけ白面に薄い影を付ける（0 2px 8px rgba(0,0,0,.15)）
• 奥行きは写真の背後にずらした帯で出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸なしの矩形で、金茶の細枠をかける。背後に斜めのストライプ入りの帯をずらして置く
• セクション境界: 直線で背景のテクスチャ色を切り替える
• 日付ラベルとボタンはピル型
• 写真とカードは角丸なしか 2px
• 告知カードは角丸 10px
• 四芒星のきらめきを見出しの下や写真の角に添える

Components

• 日付ピルラベル（date-pill）: 焦げ茶のピル型の中に、上段に小さく区分名、下段に日付を白の明朝で入れる
• 額縁風の料理写真（framed-photo）: 料理写真に細枠をかけ、背後に金茶か深緑の帯をずらして重ねる
• 欧文透かし見出し（script-heading）: 薄い欧文スクリプトの上に明朝の見出しを重ね、下にきらめきを置く
• 罫線挟みの小見出し（line-subheading）: 左右の金の細罫でメニュー系統名を挟む
• 円形バッジ（badge-circle）: 写真の角に焦げ茶の円形バッジを重ね、提供時間などの付帯情報を入れる
• 素材紹介カード（ingredient-card）: 淡い面に金の細枠をかけ、左に小さな写真、右に素材名と短い説明を置く
• プレゼント告知カード（present-card）: 上部が金の帯に白文字、下部が白面。特典名を金の大きな明朝で出す
• 店舗検索の帯（store-search）: 黄色の帯に、濃茶の枠線をかけたピル型ボタンを置く

Do's and Don'ts

Do - 紙テクスチャを全セクションに敷き、のっぺりした単色の面にしない - 料理写真は真上寄りの斜め45°から撮った白皿の写真で揃える - 価格・セット内容は明朝で整然と組み、余白を広めにとる - 金の細罫と四芒星のきらめきは小さく控えめに使う

Don't - ゴシック体や太いポップ書体を使わない - 原色の赤やビビッドな色で値引きを強調しない - 写真に角丸や強い影を付けない - 黄色をフェアのメニュー部に持ち込まない

Page Structure

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

1. ファーストビュー（フェアの主役料理と開始日を見せる）: 金茶の紙地に大きな料理写真を置き、上部は金のアーチに欧文タイトル。開始日は緑の菱形バッジで出す
2. 先行販売メニュー（先行メニューと期間を伝える）: グレージュ地に日付ピル、額縁写真、セット名・価格・説明、素材紹介カードの順に並べる
3. セットメニュー（系統A）（主力セットを比べて見せる）: 生成り地。大きな写真に金茶の帯を合わせ、その下に2カラムでサブセットを並べる
4. セットメニュー（系統B）（別ソース系統のセットを見せる）: 深緑の帯で系統Aと区別し、同じレイアウトを繰り返す
5. 単品メニュー（単品の価格を一覧で見せる）: 2×2のグリッドに額縁写真と品名・価格を置く
6. 追加セット（パン・ライスの追加を促す）: 淡い横長パネルに皿の写真を左右に置き、中央に価格を入れる
7. おすすめワイン（ドリンクの追加注文を促す）: 濃茶スタッコ地にボトル写真と説明を2カラムで並べ、下に白のプレゼント告知カードを置く
8. キャンペーン告知（応募型キャンペーンへ誘導する）: 応募期間を罫線で挟んだ見出し、バナー画像、対象メニューと応募方法の箇条書きを並べる
9. 店舗検索フッター（来店につなげる）: 左半分は黄色の帯にピル型ボタン、右半分は店内写真

Imagery

• グレーの石目調の天板に白い洋皿を置き、斜め上から自然光で撮る
• ソースの艶と湯気感を出すため、暖色寄りにグレーディングする
• 写真の背後に細い斜めストライプ入りの金茶の帯を重ねる
• 装飾は四芒星のきらめき・金の細罫・アーチ枠に限る
• ワインボトルは切り抜き写真にし、濃茶の地に直接置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 65% 幅に収め、左右に紙テクスチャを見せる
• SP ではサブセット・単品を 2 カラムのまま縮めるか、1 カラムに積む
• セット名とセット内容の横並びは、SP では縦に積む
• ワインの 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 行書くと起動時に読み込まれる。