DESIGN.md — 生成り×焦げ茶の大人の鉄板焼き店 LP（Warm Ivory and Dark Wood Teppanyaki Wine Bistro LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、ナチュラル
• キーワード: 炎と暖色光・生成りの余白・焦げ茶の夜・欧文セリフ・縦書き明朝・非対称レイアウト
• 地の質感: フラットな生成り地。暗部は写真の暗がりと焦げ茶ベタでつなぐ。端に細い菱形格子柄をアクセントで置く
• 形: 写真は角丸なしの矩形。ボタンだけ黒いピル型。細い罫線で枠をずらして重ねる
• 温度感: 暖かい。オレンジの炎と琥珀色の照明が主役

Colors

• 地は生成りを基本に、店内・フロアのセクションとフッターだけ焦げ茶に反転する
• 暗部への切り替えはグラデーションでなめらかにつなぐ
• 予約の主ボタンだけを焼き色ブラウンにし、他の誘導は黒ピルで差をつける
• ゴールド・金茶は欧文の飾り文字と細い装飾にだけ使う
• 暖色を写真から出すため、面の色数は増やさない
• 純黒・純白ではなく、墨色と生成りでやわらかく見せる

Typography

• 欧文セリフの大見出しは2行目を右へずらして動きを出す
• 和文見出しは明朝で字間を広めにとる
• 縦書きの明朝コピーを写真の横に置き、筆記体の欧文を斜めに添える
• 本文は細めのゴシックで行間2.0
• ナビとラベルは欧文の詰まったサンセリフを大文字で
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章の 2 カラムを左右交互にずらす
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真と文章を左右交互に配置し、高さをずらして非対称にする
• 写真は画面端まで出したり余白を残したりして、リズムを変える
• セクション間は大きく空けて余白で高級感を出す
• 店舗情報は細い罫線の2列表でまとめる
• 暗いセクションでは写真を散らしてコラージュにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の重なりと細い線の枠のずらしで出す
• 写真の上に文字を載せるときは暗いオーバーレイを敷く

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。横長・縦長・正方形を混ぜる
• セクション境界: 直線で切る。暗部へはグラデーションでつなぐ
• 写真は常に角を立てる
• ボタンだけを完全なピル型にする
• 細い線の枠を写真から少しずらして重ねる
• 画面端に細い菱形格子の帯を置く

Components

• 予約ボタン（button-reserve）: 焼き色ブラウンのピル型。カレンダーアイコン付き
• 黒ピルの誘導ボタン（button-pill-dark）: 墨色のピル型。左に線画アイコン、右に矢印
• 欧文大見出し（heading-serif-en）: 欧文セリフの2行見出しに筆記体の添え文字
• 縦書きコピー（vertical-copy）: 明朝の縦書き2行を引用符で挟み、筆記体を斜めに添える
• お知らせ一覧（news-list）: 上に縦線、欧文見出しと more ボタン。サムネイル・日付・タイトルを並べる
• 写真帯の見出し（photo-hero-overlay）: 暗い写真の帯にゴールドの欧文と白い和文を中央に置く
• 店舗情報表（info-table）: 項目と内容の2列。行ごとに細い罫線
• 線画フロアマップ（floor-map）: 暗地に白い細線で席の配置図を描く

Do's and Don'ts

Do - 炎・ワイン・照明など暖色の写真を主役にする - 生成りの地と余白をたっぷりとる - 欧文セリフと明朝を組み合わせて大人の雰囲気にする - 写真をずらし重ねて非対称なリズムをつくる - 予約導線は茶色のピルボタンで統一する

Don't - 写真に角丸や影をつけない - 鮮やかな原色や寒色の面を使わない - ポップな丸ゴシックを使わない - 文字を詰め込みすぎない - ボタン色を何色にも増やさない

Page Structure

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

1. ファーストビュー（店の雰囲気とライブ感を一目で伝える）: 左に縦のロゴとナビ、右に炎が上がる調理シーンの大きな写真
2. お知らせ（営業日などの更新を見せる）: 縦線と欧文見出し、サムネイル付きの横並びリスト
3. コンセプト（料理とワインの組み合わせを打ち出す）: 欧文セリフの大見出しに照明写真を重ね、炎の写真と明朝見出し・本文を並べる
4. こだわり（気軽さと本格さを伝える）: スタッフ写真、縦書きコピー、筆記体を非対称に配置し、本文と黒ピルボタンで料理ページへ
5. ワイン訴求（ワインの魅力を伝える）: 暗いボトル写真の帯に見出しを載せ、続けて料理写真と本文、ボタン
6. シーン・店内（記念日などの利用シーンを想像させる）: 焦げ茶地に写真を散らしたコラージュ、その後に店内のパノラマ写真と欧文ラベル
7. フロア紹介（席の配置と居心地を伝える）: 暗地に明朝見出しと本文、線画のフロアマップ。下は生成りへグラデーション
8. 店舗情報・予約（アクセスと予約へ導く）: 地図、ロゴ、電話番号、予約ボタン、罫線の情報表、外観写真、地図ボタン
9. フッター（連絡先とナビをまとめる）: 焦げ茶地にロゴ、電話、予約ボタン、2列のナビ

Imagery

• 低い照明と暖色光で撮り、背景は暗く落とす
• 鉄板の炎はアップで写し、オレンジを画面いっぱいにする
• ワイングラスとボトルは逆光で透け感を出す
• ステンドグラスのランプを色のアクセントにする
• スタッフは笑顔の自然なカットを入れる
• フロアマップは白い細線のミニマルな線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左固定ナビ＋右の大きな写真。SP ではナビをハンバーガーにまとめ、写真を全幅にする
• 左右交互の2カラムは、SP では写真→文章の縦積みにする
• 縦書きコピーは SP でも縦書きを残し、写真の横に小さく置く
• 欧文大見出しは SP で 40〜44px に縮め、ずらしは保つ
• 予約ボタンは 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 行書くと起動時に読み込まれる。