DESIGN.md — マスタード×深緑のレトロダイナー飲食店LP（Retro Diner Mustard & Forest Green Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、親しみ・手作り感、ナチュラル
• キーワード: アメリカンダイナー・マスタード・えんじ・深緑・生成り・料理写真主役
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わず、写真の質感でシズル感を出す
• 形: 角丸なしの四角が基本。限定バッジだけ正円。小さな四角をピクセル状に組み合わせた装飾
• 温度感: 暖色寄り。黄・茶・えんじに深緑を差し、温かく落ち着いた印象

Colors

• セクションごとに地色を切り替える：マスタード→生成り→深緑→鮮黄の順
• 大見出しと英字見出しはえんじ色、本文は焦げ茶で統一
• 深緑地の上は文字を生成り色の白系にする
• 限定訴求のバッジだけ深紅の正円で目立たせる
• サブ見出しの強調はオレンジ文字で、えんじとの差をつける
• 店舗ボタンは深緑地の上にマスタード面とえんじ文字を置く

Typography

• 見出しは英字の大見出しと、その上に小さな日本語ラベルを置く2段組
• メインコピーは太いゴシックを左揃えで3〜4行に分ける
• 本文は行間を2倍前後にとって、ゆったり読ませる
• 料理名は中央揃えで2行、その下に価格を小さく添える
• 英字見出しの頭に小さな四角の装飾を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真モザイクのみ不揃いのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は左右に約7%の余白を残した全幅に近い横長で配置
• メニューは写真、料理名、価格を1セットにして縦に並べ、セット間は約50px空ける
• セクションの上下に60〜80pxの余白
• 料理写真のモザイクと店内写真は画面幅いっぱいに広げる
• 本文は左揃え、見出しは中央揃え

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の重ね方と地色の切り替えで出す
• ファーストビューでは写真を少しずらして重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。メニュー写真は横長の約3:2
• セクション境界: 直線で地色を切り替える
• ボタンとカードは角丸0の四角
• 限定バッジのみ正円
• サブの店舗検索ボタンだけ枠線のピル型
• 小さな四角を2〜3個組み合わせたピクセル風装飾を区切りに使う

Components

• 店舗リンクボタン（button-store）: 深緑地に置く横長のマスタード面ボタン。中央にえんじ色の太字
• 店舗検索ボタン（button-outline-pill）: 鮮黄のパネル上に置く、黒い枠線のピル型ボタン
• 限定バッジ（badge-limited）: 写真の右上にはみ出して置く深紅の正円。上にカトラリーのアイコン、下に白文字2行
• 英字セクション見出し（heading-section）: 小さな日本語ラベルの下に太い英字。英字の左上に小さな四角を添える
• 縦書き英字ラベル（label-vertical）: 写真の左上に、細い縦線と一緒に料理カテゴリの英字を縦に置く
• オープン日の帯（date-strip）: 淡いベージュの細い帯に、店名・日付・時刻をえんじ色で1行に入れる
• メニューカード（menu-card）: 横長の写真の下に、中央揃えの料理名2行と小さな価格を置く
• ピクセル装飾（pixel-ornament）: えんじと深紅の小さな四角を階段状に組み合わせた区切りの装飾

Do's and Don'ts

Do - 地色はマスタード・生成り・深緑の3色をはっきり切り替える - 料理写真を大きく、角丸なしで見せる - 見出しは英字と日本語の2段で、ピクセル装飾を添える - 本文は行間を広めにして左揃えにする - 限定メニューには深紅の正円バッジを付ける

Don't - 角丸のカードや影を多用しない - 青や寒色を加えない - 純白の背景を広く使わない - 見出しに細い明朝体を使わない - グラデーションの装飾を入れない

Page Structure

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

1. ファーストビュー（新店舗の誕生とコンセプトを伝える）: マスタード地の左側にえんじ色の太字コピーと日付帯。右側に料理写真を重ね、縦書きの英字ラベルを付ける
2. 導入文（新店舗の狙いと特徴を説明する）: マスタード地のまま、ピクセル装飾の下に焦げ茶の本文を2段落で置く
3. ピックアップメニュー見出し（限定メニューを打ち出す）: 生成り地に英字見出し。オレンジの3行サブ見出しと説明文を続ける
4. メニュー一覧（料理と価格を見せる）: 写真・料理名・価格のセットを縦に6つ並べる。限定品には深紅のバッジ
5. 料理写真モザイク（メニューの豊富さを伝える）: 大きさの違う料理写真を、細い生成りの隙間を空けて全幅のグリッドに敷き詰める
6. 店舗情報（立地の良さと空間の魅力を伝える）: 深緑地に白系の英字見出し・日本語見出し・本文。下に店内写真を大1枚＋小2枚
7. 店舗リンクCTA（各店舗のページへ誘導する）: 深緑地にマスタードの四角いボタンを縦に2つ並べる
8. 店舗検索（近くの店舗を探してもらう）: 店内写真の上に鮮黄のパネルを重ね、英字の小見出しとピル型の枠線ボタンを置く

Imagery

• 料理は少し上からの斜め俯瞰で撮り、赤い縁取りの白い洋皿や鉄鍋に盛る
• 背景は木目のテーブルか明るいグレーの面。自然光風の明るさ
• 写真の左上に細い縦線と縦書きの英字カテゴリを添える
• 店内は暖色の照明と木目のインテリアを広角で撮る
• イラストは使わず、ピクセル風の四角形だけを装飾にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約50%に絞って中央に寄せ、左右には地色を延ばす
• PC のメニューは2カラムのグリッドにする
• PC の料理写真モザイクは全幅で2段にする
• PC の店内写真は大1枚＋右に小2枚の横並び
• PC の店舗ボタンは2つを横に並べる
• 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 行書くと起動時に読み込まれる。