DESIGN.md — クラフト紙×黒と臙脂のビストロ飲食店 LP（Kraft Paper Bistro Burger LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、力強い・インパクト、上品・高級
• キーワード: クラフト紙・インダストリアル・ビストロ・欧文タイポ・シズル写真
• 地の質感: 紙の繊維やシミが見えるベージュ地テクスチャ。写真はやや暗めで温かみがある
• 形: 角丸のない直線的な矩形。黒帯ボタン、細い罫線、四隅に丸鋲やL字のコーナー装飾
• 温度感: 暖色寄りで落ち着いた、夜の店の温度感

Colors

• 地は全体をクラフト紙テクスチャのベージュで統一し、無地の白は使わない
• ボタン・ナビ・情報枠は墨黒で塗り、文字は生成り白にする
• 臙脂はキャッチのラベルと英文の帯など、ごく一部の強調だけに使う
• 写真の上の文字は生成り白にし、写真は暗めに補正して文字を読ませる
• フッターだけ黒い面を広く取り、ページの終わりを締める

Typography

• 大見出しは英語の太いサンセリフとセリフ体を組み合わせ、間を「×」や罫線でつなぐ
• 和文の見出しは明朝体にして、品のよさを出す
• コンセプト文は写真の上に明朝体で縦書きしてもよい
• セクション見出しの背後に、薄い透かし欧文を大きく敷く
• 本文は小さめのゴシックにし、行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と本文は縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真はセクションをまたぐほど大きく使い、雑誌のように非対称に配置する
• 写真と文章ブロックを左右交互にずらして並べる
• 工程の写真は縦長カードにして横スクロールで並べる
• 店舗情報は項目名と値を縦に並べ、項目ごとに細い罫線で区切る
• 黒帯ボタンは本文ブロックの下に左寄せで置く

Elevation & Depth

• 影はほぼ使わない。平面的に見せる
• FVの写真だけは、白フチのポラロイド風を少し傾けて重ね、薄い影を付ける
• 奥行きは影でなく、写真とテキストの重なりで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。工程写真は縦長に切り抜く
• セクション境界: 直線で切り替える。区切りの四隅に黒い丸鋲の点やL字のコーナー線を置く
• 角丸は一切使わない
• ボタンは黒い長方形にし、右端に細い矢印を付ける
• 情報ボックスは黒い細枠の二重罫線で囲む

Components

• 黒帯矢印ボタン（button-primary）: 黒い長方形の左端に細い縦線を入れ、右端に長い矢印を付ける。文字はセリフ体
• 予約・電話ボックス（reserve-box）: 黒地と紙色を罫線の枠で分割し、電話番号と WEB 予約を並べる
• 臙脂ラベル帯（label-ribbon）: キャッチの一行を臙脂の帯に白い明朝体で載せる。生成りの帯と段違いに組み合わせる
• 透かし欧文見出し（watermark-heading）: 大きく薄い欧文の上に和文の明朝見出しを重ね、両端に矢印付きの罫線を付ける
• お知らせ枠（news-card）: 黒い二重枠の中にサムネイル付きの記事を 2 件並べ、カテゴリは黒の小ラベルで示す
• 工程写真カード（process-card）: 縦長の写真に、太い欧文を縦組みで重ねる。カードは横に連ねる
• 店舗情報リスト（info-list）: 小さな項目名の下に値を書き、項目ごとに細い罫線で区切る
• コーナー装飾枠（corner-frame）: 四隅に黒いL字線を置いて、地図やボタンを囲む

Do's and Don'ts

Do - 地には常に紙テクスチャのベージュを敷く - 見出しは太い欧文と明朝体の和文をペアで組む - 写真は暖色で暗めに補正し、料理のシズル感を出す - ボタンは黒い矩形に矢印を付ける形で統一する - 罫線・丸鋲・L字コーナーで、アナログな印刷物らしさを出す

Don't - 角丸やピル型のボタンを使わない - 純白の背景や鮮やかな原色を使わない - 臙脂を広い面に使わない - 丸ゴシックやポップな書体を使わない - グラデーションや強い影を付けない

Page Structure

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

1. ヘッダー（ナビゲーションと予約導線）: 左上に黒地のロゴ。和文の小さな補足を添えた欧文ナビを並べ、右に罫線枠の電話・WEB予約を置く
2. ファーストビュー（店の世界観と看板商品を伝える）: 巨大な欧文見出しの下に、ポラロイド風の料理写真を傾けて置く。臙脂帯の和文キャッチとお知らせ枠を添える
3. コンセプト（店のスタイルを伝える）: 全幅の暗い料理写真に白い欧文見出しを重ね、明朝体の縦書き本文を置く。下端に臙脂の英文帯を敷く
4. こだわりの工程（商品の作り方とこだわりを見せる）: 透かし欧文を敷いた見出しの下に、縦長写真のカードを横に並べる。その下に本文と黒帯ボタンを置く
5. ドリンク・バー訴求（夜の利用シーンを提案する）: 全幅の写真に縦書きのキャッチと大きな欧文ロゴ見出しを重ね、写真2枚と本文を互い違いに配置する
6. 店内紹介（空間の雰囲気を伝える）: 大きな店内写真を重ねて配置し、明朝体と欧文の見出し、線画の間取り図、本文を添える
7. 予約CTA帯（予約・問い合わせを促す）: ロゴ、電話、WEB予約、注意書きを、罫線で区切った横長のボックスにまとめる
8. 店舗情報（営業時間やアクセスを伝える）: 左に罫線区切りの情報リスト、右に外観写真を縦に並べる
9. 地図（アクセスを示す）: L字コーナー線で囲んだ黒帯ボタンと、埋め込み地図を横に並べる
10. フッター（サイトを締め、再度予約へ誘導する）: 左は紙地にロゴ・予約ボックス・住所、右は黒地にナビを2列で並べる

Imagery

• 料理はやや上から寄りで撮り、暗い木のテーブルにレトロな縁取りの皿を合わせる
• レンガ壁・酒瓶・グラスなどを背景に入れ、ビストロ感を出す
• 暖色の照明で暗めに仕上げ、ハイライトでシズル感を出す
• 手で持つ・ソースをかけるなど、動きのある瞬間を切り取る
• 間取り図などの図版は、黒い線画と塗りのシンプルな表現にする
• 地にはクラフト紙やシミのある古紙のテクスチャを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではナビをハンバーガーメニューにし、予約ボタンは画面下に固定する
• FVの欧文見出しは画面幅の約90%に収まるよう縮め、写真は全幅で見せる
• PCで左右に並ぶ写真と本文は、SPでは縦に積む
• 縦書きの本文は、SPでは横書きに切り替えてもよい
• 工程カードはSPで横スクロールにする
• フッターの2列は、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 行書くと起動時に読み込まれる。