DESIGN.md — 焦茶×紅とクラフト紙の中華居酒屋 LP（Dark Brown & Crimson Chinese Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、力強い・インパクト、レトロ、ラグジュアリー・ダーク
• キーワード: 焦茶の石目地・クラフト紙・紅色アクセント・極太明朝・中華文様・シズル写真
• 地の質感: ざらついた焦茶の石・紙テクスチャ、クラフト紙、和紙調の生成り地
• 形: 四角い帯ボタンの右端に二重の縦線。角丸はほぼ使わない。中華格子の飾り枠と雲形の紅いライン
• 温度感: 暖色。暗い茶と紅で夜の酒場の熱気を出す

Colors

• 焦茶テクスチャ・クラフト紙・生成り和紙の 3 種類の地を、セクションごとに切り替える
• 紅色は見出しの 1〜2 文字の強調とボタンだけに使う
• 暗い地では白文字、明るい地では黒文字を使う
• 英字の透かしは地の色より少し明るい同系色にして目立たせすぎない
• フッターは真っ黒にして締める
• SP 下部の固定ナビは焦茶の地に、予約ボタンだけ紅にする

Typography

• 見出しは極太明朝にして、縦書きや段違いの配置で動きを出す
• 強調語は紅色にして、ほかより一回り大きくする
• 白抜きの袋文字で見出しの一部にメリハリをつける
• 本文は小さめのゴシックで、行間を広く取る
• ふりがなを小さく添えた漢字表記を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面幅いっぱいに、または片側に寄せてはみ出させる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 料理写真は画面幅いっぱいか、片方の端まで寄せて置く
• 見出しと写真を重ねて、立体感のある構成にする
• 1 セクションは見出し → 写真 → 短い本文 → 帯ボタンの順に並べる
• 帯ボタンは幅 80% で中央に置く
• 店舗情報は細い線で区切った 2 段のリストにする

Elevation & Depth

• 影はほぼ使わない。奥行きは写真の重なりとテクスチャで出す
• 切り抜いた料理写真だけ、ごく薄い落ち影をつけてもよい

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い裁ち落としと、皿の形に沿った切り抜きを混ぜる
• セクション境界: 直線か斜めの切り替え。中華格子の帯や雲形の紅ラインを境目の飾りにする
• ボタンは角丸なしの長方形。右端に紅い二重の縦線を添える
• 細い線の吹き出し（楕円）で補足のひと言を入れる
• 角には中華風の格子飾りを置く

Components

• 紅の帯ボタン（button-primary）: 紅の長方形に白い明朝文字と細い長矢印を入れ、右端に二重の縦線を添える
• Web 予約小ボタン（badge-reserve）: カレンダーアイコン付きの小さな紅ボタン
• 手書き風吹き出し（speech-oval）: 細い線の楕円の中に、斜めに傾けた明朝文字を入れる
• 英字透かし（watermark-en）: セクション名の英字を地と同系色で大きく敷く
• 四角囲み文字（boxed-kanji）: 縦書きの 2 文字を細い枠で囲んで強調する
• 格子枠のお知らせ（news-frame）: 上下に中華格子の帯を入れた淡い枠。中にサムネイル・日付・見出しを並べる
• 予約・電話ボックス（contact-box）: 濃茶の地に予約ボタンと大きな電話番号を入れる。下に続けてクラフト地の注意事項を置く
• SP 下部固定ナビ（sticky-nav）: 地図・電話・予約・メニューの 4 分割。予約だけ紅の地にする

Do's and Don'ts

Do - 料理は湯気や照りが見える寄りのシズル写真を大きく使う - 見出しの強調語を紅にして、文字の大小差をはっきりつける - 提灯・格子・雲形など中華モチーフを、線画で控えめに添える - 地のテクスチャを切り替えて、セクションの区切りを見せる - 予約導線はファーストビュー・中盤・フッター・固定ナビに繰り返し置く

Don't - 角丸の大きいポップなボタンにしない - 青や緑など寒色をアクセントに使わない - 見出しを細いゴシックにしない - テクスチャのないフラットな白地を広く使わない - 紅を面いっぱいに使いすぎない

Page Structure

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

1. ヘッダー（店のロゴと所在地を示す）: 焦茶の地の中央に白抜きのロゴ。右上に小さな説明文を置く
2. ファーストビュー（看板料理のシズルで惹きつける）: 取り分けシーンの写真を全面に敷き、左上に縦書きの極太明朝コピーを細い枠と一緒に重ねる
3. 名物紹介（看板メニューを印象づける）: 焦茶の地に提灯の線画を置き、紅の大きな縦書き料理名と四角囲み文字を配置。下にアップ写真、本文、帯ボタンを続ける
4. 料理写真ブレイク（シズル感を強める）: 皿を切り抜いた写真を、地の切り替え部分にまたがるように置く
5. おつまみと酒（メニューの幅広さを伝える）: クラフト紙の地に大きな明朝見出し。料理写真を斜めに重ね、吹き出し・帯ボタン・英字透かしを入れる
6. 宴会・コース（団体の利用を促す）: 料理の集合写真の下に焦茶の地。白抜き袋文字の見出しと紅の強調語を置き、格子の角飾り・吹き出し・帯ボタンを入れる
7. 楽しみ方・利用シーン（店内の雰囲気を伝える）: クラフト紙の地に、横線で区切った見出し。店内写真 2 枚、英字透かし、本文、帯ボタンを続ける
8. お知らせ（最新情報を載せる）: 生成りの地に格子帯の枠。中にサムネイルと日付を入れ、黒い一覧ボタンを添える
9. 予約・問い合わせ（予約へ誘導する）: 紅のロゴの下に濃茶のボックス。予約ボタンと電話番号を入れ、クラフト地のキャンセル規定を続ける
10. 店舗情報・アクセス（来店に必要な情報を伝える）: 線で区切った項目リストの後に、入口写真（紅の矢印と案内文字入り）、地図、帯ボタンを置く
11. フッター（連絡先と共有導線）: 格子帯で区切った黒い地に、白ロゴ・予約ボタン・電話・住所・SNS 共有ボタン・ページトップを並べる

Imagery

• 暖色の照明で、湯気や油の照りが見える料理の寄り写真
• 陶器の皿を斜め上から撮り、皿の形に沿って切り抜く
• 木のテーブルに料理を並べた俯瞰の集合写真
• 人物は笑顔で飲食している自然なスナップ
• 提灯・中華格子・雲形ラインを紅か白の線画で描く
• 地は石・紙のざらついたテクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを左右に分けた 2 カラムにし、写真を大きくはみ出させる
• PC ではヘッダーに横並びのナビと予約・電話を置く
• PC の店舗情報は、左に表・右に予約ボックスと入口写真の 2 カラムにする
• SP では縦書きコピーを生かして 1 カラムに積み、下部に固定ナビを出す
• 英字透かしは PC では 1 行、SP では折り返して 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 行書くと起動時に読み込まれる。