DESIGN.md — 生成り×焦げ茶と金の老舗中華料理店 LP（Classic Oriental Ivory and Brown Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、和風、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 老舗中華・生成り和紙・焦げ茶・金の雲文・縦書き明朝・料理写真主役
• 地の質感: 生成り地に和紙・唐草の薄い地紋。濃色面はフラットな焦げ茶
• 形: 角丸なしの矩形が基本。写真枠に中華格子の角飾り、境界に雲文の波形
• 温度感: 暖色寄り。生成りと焦げ茶、金で落ち着いた温かみ

Colors

• 生成り地と焦げ茶地をセクション単位で交互に切り替える
• 焦げ茶地の文字は金色、生成り地の文字は黒に近い墨色
• 予約の主 CTA だけに臙脂を使う
• 朱赤は料理名の縦書き札に限定する
• 金茶は雲文・サブボタン・お取り寄せ枠に使う
• 濃紺は店内案内などの補助ボタンに限定する

Typography

• 全文を明朝体で統一し、ゴシックは使わない
• 主要見出しは縦書きにし、横に小さな英字を縦組みで添える
• 英字見出しはローマン大文字のセリフ体
• 本文は小さめで行間 2.0 前後とゆったり組む
• 電話番号は大きめのセリフ数字で見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真は全幅または左右 18px 余白
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右どちらかに寄せてずらして配置し、余白にリズムをつける
• 縦書き見出しは中央付近にまとめる
• 情報表は左に項目名、下に内容、細線で区切る
• ボタンは中央寄せで幅 45% ほど
• セクションごとの地色変更で区切る

Elevation & Depth

• 影はほぼ使わずフラット
• 写真枠は細い二重線と角の格子飾りで立体感を出す
• 注意書きボックスは淡い面に細線枠と角飾り

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。料理は寄りで大きく切り取る
• セクション境界: FV下や店舗情報の上は雲文・瑞獣の波形の境界、他は直線で地色を切り替え
• ボタンは角丸なしの長方形に右端の小さな三角矢印
• 英字見出しやリンクの下に右端矢印付きの細線
• 料理写真に中華格子の角飾り付きの細線枠
• 朱赤の縦長札を写真右上にかぶせる

Components

• 予約ボタン（button-reserve）: 臙脂の矩形に白文字、左にカレンダーアイコン、右に三角
• 金茶サブボタン（button-gold）: 焦げ茶地上の金茶ボタン、墨文字に三角矢印
• 濃紺サブボタン（button-navy）: 生成り地上の濃紺ボタン、白文字
• 料理名縦書き札（dish-label）: 朱赤の縦長札に金色の縦書き料理名、写真右上に重ねる
• 格子角飾り写真枠（framed-photo）: 細い二重線と四隅の中華格子モチーフで写真を囲む
• 縦書き見出し（vertical-heading）: 明朝の縦書き大見出しに英字の小ラベルを縦に添える
• 矢印付き下線見出し（arrow-underline-link）: 英字見出しやリンクの下に右端矢印付き細線
• 注意書きボックス（notice-box）: 淡い地に細線枠と角飾り、中央揃えの説明文
• 店舗情報表（info-table）: 項目名太字、内容を下に、細線区切り

Do's and Don'ts

Do - 見出しは明朝の縦書きで余白を広く取る - 焦げ茶と生成りの交互配置で重厚感を保つ - 料理写真は湯気・照りがわかる寄りで大きく - 雲文や格子などの東洋装飾を金茶で控えめに添える - 予約導線は臙脂ボタンと電話番号をセットで出す

Don't - ゴシック体やポップな丸ゴシックを使わない - ボタンを角丸やピル型にしない - 鮮やかな原色を広い面に使わない - 強い影やグラデーションボタンを入れない - 朱赤を見出し以外に多用しない

Page Structure

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

1. ファーストビュー（店の象徴的な外観で印象づける）: ネオン看板の全幅写真、上部にロゴ、下端を雲文の波形で生成り地へ
2. コンセプト（歴史と味のこだわりを伝える）: 生成り地に縦書きキャッチ、金茶の雲文、写真を左右にずらして配置し本文
3. 料理写真帯（メニューの幅を見せる）: 料理写真を横に並べた帯
4. 名物料理（看板料理を訴求する）: 焦げ茶地に大きな料理写真、金色の縦書き見出し、格子枠写真に朱赤の料理名札、金茶ボタン
5. ランチ＆ディナー（利用シーンとコースを紹介）: 左帯に唐草地紋、欧文セリフ英字見出し、写真と矢印付き下線
6. 店内空間（宴会・個室の対応力を示す）: 全幅の店内写真に白文字見出し、フロア写真2枚並び、横書き見出しと濃紺ボタン
7. お取り寄せ（通販へ誘導）: 金茶の枠付きボックスに写真、見出し、本文、英字の矢印リンク
8. お知らせ（最新情報を伝える）: 英字ラベル付きサムネイルカード、日付と題名、一覧リンク
9. 店舗情報・予約（予約と来店情報を提供）: 瑞獣の波形境界、ロゴ、電話番号、臙脂予約ボタン、注意書き箱、情報表
10. アクセス（道順を示す）: 入口写真にキャプション、路線一覧、地図埋め込み
11. フッター（再度の予約導線）: 焦げ茶地に金色ロゴ、電話、臙脂予約ボタン、営業情報、SNSシェア

Imagery

• 料理は照り・湯気が見える寄りの暖色ライティング
• 暗い背景で料理を浮かび上がらせる撮影を名物で使う
• 夜のネオンや提灯など街の情緒を伝える写真
• 店内は明るく整った宴会場・個室の広角
• 金茶の雲文・瑞獣・唐草の線画装飾
• 和紙のような繊維テクスチャの背景
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビ・電話・右上の臙脂予約ボタン
• PC のコンセプトは写真・縦書き見出し・本文を3列に配置
• PC の名物料理は見出し本文と大写真を左右に、料理札写真を2列
• PC の店舗情報はロゴ・予約を左、情報表を右の2カラム
• SP は全て1カラム縦積み、下部に固定メニューバー

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 行書くと起動時に読み込まれる。