DESIGN.md — 焦げ茶と金の大人向け肉バル LP（Dark Wood Meat Bar LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 焦げ茶・夜の酒場・欧文セリフ・シズル写真・細枠ボタン・斜め区切り
• 地の質感: ほぼ単色のダーク面。写真の上は暗く落とし、一部に紙や木目のようなざらつきのある茶色面を使う
• 形: 角丸なしの直角。細い1px枠線、斜めにカットしたセクション境界、L字のオレンジ帯
• 温度感: 暖色寄りのダーク。照明の灯りのような琥珀色が差す

Colors

• 地は焦げ茶・黒・赤茶の3色だけで、セクションごとに切り替える
• 白い背景は使わない。本文はすべて明るいオフホワイトにする
• 欧文の大見出しはくすんだゴールドにし、黒地の上に置く
• オレンジは日本語のキャッチコピーとL字帯だけに使う
• ボタンは塗らない。地の色を透かして細い枠と白文字で作る
• 写真の上の見出しはピンクベージュにして、写真になじませる

Typography

• 見出しは欧文セリフで大きく、和文明朝のサブ見出しを添える
• 本文は小さめのゴシックで、行間を2.0ほどと広くとる
• 日本語キャッチの一部の漢字だけを大きくして、強弱をつける
• 欧文見出しは縦書きにしたり、写真にかぶせて端を切ったりして使う
• ボタン文字は明朝の太字にし、字間を広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右に約20pxの余白をとり、左揃えにする
• 写真は片側を画面端まで広げ、反対側に余白を残してずらす
• 色面を左右にずらして重ね、段差のあるレイアウトにする
• 各セクションの最後に、中央寄せの枠線ボタンを置く
• 見出しと写真を重ねて、奥行きを出す

Elevation & Depth

• 影は使わない。奥行きは色面の重ね方とずらし方で表す
• 写真に暗いオーバーレイをかけて、その上に文字を置く
• 写真カードは内側に細い枠線を入れて額縁のように見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い写真を片側だけ画面端まで広げる。角丸なし
• セクション境界: 斜めのカットと、段差のある色面の切り替え
• 角丸は一切使わない
• ボタンは1pxの細枠の長方形にし、右端に細い矢印線を置く
• オレンジのL字帯でセクションの角を囲む
• 吹き出しは下向きの三角が付いた四角にする

Components

• 細枠ボタン（button-outline）: 地を透かした長方形に1pxの枠。中央に明朝の白文字、右に細い矢印線
• 予約ボタン（button-reserve）: 細枠ボタンの左にカレンダーの線画アイコンを付けたもの
• 欧文大見出し（heading-serif-en）: ゴールドの大きなセリフ体。縦書きや写真への重ね、端の切れも使う
• 括弧付き和文サブ見出し（heading-bracket-ja）: 細い角括弧の線で囲んだ明朝の小見出し
• 縦書きキャッチ（catch-vertical）: オレンジの明朝で縦書きにし、写真の左に重ねる。一部の漢字だけを大きくする
• お知らせリスト（news-list）: 黒地に日付と下線付きのタイトルを2段で並べる。右上にmoreボタン
• 写真リンクカード（photo-link-card）: 暗くした全幅写真に内枠を入れ、中央に欧文見出しと短い線を置く
• 吹き出し告知（speech-badge）: ピンクベージュの四角に下向き三角。中に2行の短い告知文を入れる

Do's and Don'ts

Do - 地は焦げ茶・黒・赤茶のダークトーンでそろえる - 見出しは大きな欧文セリフと和文明朝を組み合わせる - 料理と店内は暖色の照明の写真を大きく使う - ボタンは細枠と矢印で統一する - 色面と写真を少しずつずらして重ねる

Don't - 白や明るい背景のセクションを作らない - 角丸や影の付いたボタン・カードを使わない - オレンジを本文やボタンの塗りに使わない - 丸ゴシックやポップな書体を使わない - 鮮やかな寒色を差し色にしない

Page Structure

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

1. ファーストビュー（大人向けの酒場という世界観を一目で伝える）: 焦げ茶の地に、乾杯の写真と料理の写真を並べる。左にオレンジの縦書きキャッチ、右上にロゴと短い説明文
2. 予約導線（最初の予約誘導）: カレンダーアイコン付きの細枠ボタンを中央に置く
3. お知らせ・SNS（最新情報と更新されている感を見せる）: 黒地にゴールドの欧文見出しとmoreボタン。日付付きのリストとSNSアイコンを並べる
4. コンセプト紹介（店の魅力と使えるシーンを伝える）: 写真に欧文スローガンを重ねる。暗い茶の地に長めの本文と写真を交互に置き、最後にメニューボタン
5. テイクアウト（持ち帰り商品を案内する）: 赤茶の地に縦書きの欧文見出し。盛り合わせの写真、短い本文、ボタンの順
6. パーティー・宴会（団体利用・コースへ誘導する）: ゴールドの枠で囲んだオレンジの和欧混在キャッチ。斜めにカットした肉料理の全幅写真、本文、ボタン
7. フロア紹介（広さと貸切できることを伝える）: 黒地に欧文見出しと括弧付きサブ見出し。店内写真と本文を置き、斜め区切りとオレンジのL字帯の上にボタン
8. サブメニュー導線（ドリンクやBBQのページへ送る）: 内枠付きの写真カードを縦に並べ、ピンクベージュの欧文見出しを重ねる
9. 予約・問い合わせ（フッターCTA）（電話とWEB予約で来店につなげる）: 棚の写真をぼかした茶色グラデの地に、ロゴ・電話番号・注釈・予約ボタン・アプリ告知の吹き出しとボタン

Imagery

• 暗い店内で、琥珀色の照明が当たる料理やグラスを撮る
• 肉料理は断面や焼き目に寄り、木の板や鉄板の上で撮る
• 人物は手元だけを写した乾杯のシーンにして、顔は出さない
• 背景の酒瓶はぼかして奥行きを出す
• 写真は全体に暗く、彩度を少し落とした暖色に調整する
• 線画のアイコン（カレンダー・SNS）は細い単色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではヘッダーに電話番号・予約ボタン・横並びのナビを置く
• PCでは写真と本文を左右2カラムでずらして重ねる
• PCのお知らせは見出し・リスト・SNSを1行に横並びにする
• PCのサブメニュー写真カードは2枚横並びにする
• PCのフッターは連絡先と店舗情報の表を2カラムにし、下に地図を全幅で置く
• 欧文見出しは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 行書くと起動時に読み込まれる。