DESIGN.md — 朱赤×青磁緑のレトロ中華居酒屋 LP（Retro Chinese Diner Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、和風、力強い・インパクト、情報量多め・訴求型
• キーワード: レトロ中華・雷文フレーム・提灯・縦書き明朝・色面ブロック・大衆酒場
• 地の質感: うっすら紙の粒子が見える薄灰の地。色面はベタ塗りで、グラデーションは使わない。
• 形: 四角い色面と細い線の枠が基本。角に雷文が付いたボタン枠、丸い印章風の漢字バッジ、提灯と花紋のイラストを使う。
• 温度感: 朱赤で温かく、青磁緑で引き締める。全体はやや温かい。

Colors

• 地は紙質感の薄灰にする。真っ白な背景にはしない。
• 朱赤の面と青磁緑の面を交互に置き、セクションごとにリズムを付ける。
• 朱赤の面と青磁緑の面には白文字だけを乗せる。キャッチは白い帯の上に黒明朝で置く。
• サブボタンは緑の細線枠と緑文字で、塗りつぶさない。
• フッターと固定バーは朱赤と緑で締める。
• 暖色の写真を色面に重ねて温度を足す。

Typography

• 見出しは縦書きの明朝を基本にする。
• セクション名は筆風の漢字2文字にし、太い斜体の欧文ラベルを小さく添える。
• 欧文ラベルは見出しの縦辺に沿わせて回転させてもよい。
• 本文は太めの明朝で小さめに組み、行間を広く取る。
• キャッチは白帯に1行ずつ分けて載せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と色面をずらして重ねる。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 色面ブロックは画面端まで広げ、写真は色面から少しはみ出させて重ねる。
• 本文ブロックは左右に約36pxの余白を取る。
• セクション名の枠は細線で囲み、片側を開けたL字の枠にする。
• 店舗情報は見出し列と値の列の2列テーブルにし、罫線は付けない。
• 画面下にTEL・MAP・MENU付きの予約バーを常に固定する。

Elevation & Depth

• 影は基本的に使わない。
• 写真の背後に、ずらした色面を置いて段差を作る。
• 固定予約バーだけは前面に置き、上端を色面で区切る。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形で切る。蒸籠は丸い形のまま切り抜いて画面端にはみ出させる。
• セクション境界: 直線で切り替える。区切りには赤白の細いストライプ線や雷文ラインを使う。
• 角丸は使わない。
• ボタンの四隅に雷文の飾りを付ける。
• 円形の印章風漢字バッジは、ファーストビューの四隅だけに使う。

Components

• 固定予約バー（fixed-reserve-bar）: 画面下に固定するバー。左に雷文枠付きの予約ボタン、右にTEL・MAPのアイコンとMENUを並べる。
• 雷文枠ボタン（button-frame）: 四隅に雷文が付いた細線の枠と、花紋アイコンを添えた緑文字で作る。
• 漢字2文字の見出し（section-kanji-title）: L字の細線枠に筆風の漢字2文字を入れ、縦か横に欧文ラベルを添える。
• 白帯キャッチ（white-band-copy）: 写真や色面の上に白い帯を1行ずつずらして重ね、黒の明朝を載せる。
• 問いかけバナー（question-banner）: 全幅の赤か緑の色面に、花紋・明朝の問いかけ・雷文ライン・下向き矢印を中央揃えで縦に並べる。
• 雷文額縁の見出し（read-me-heading）: 雷文の額縁の上に蒸籠アイコンを載せ、赤い小さなラベルと明朝の見出しを入れる。上に筆記体の英字を添える。
• お知らせブロック（news-block）: 赤い面の中に、太い斜体の英字見出し・日付・白い「more」ボタンを置く。
• フロアマップ（floor-map）: 緑の線と塗りで描く平面図。席は丸で示し、太い斜体の欧文でラベルを付ける。

Do's and Don'ts

Do - 装飾には提灯・花紋・雷文・蒸籠アイコンを繰り返し使う。 - 見出しは縦書きの明朝と筆風の漢字にする。 - 赤と緑の色面を交互に置く。 - 写真を色面からはみ出させてずらし、重ねて躍動感を出す。 - SPでは予約バーを常に固定する。

Don't - 角丸やピル型のボタンは使わない。 - パステル色やグラデーションは使わない。 - 丸ゴシックの可愛い書体は使わない。 - 真っ白でフラットな地にしない。 - 影の強いカードUIは使わない。

Page Structure

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

1. ファーストビュー（名物料理と店の世界観を一目で伝える）: 料理写真を雷文の細枠で囲む。四隅に印章風の漢字バッジ、上部中央にロゴアイコンを置く。
2. お知らせ（最新情報を知らせる）: 赤い色面に英字見出し・日付・白いボタンを置く。
3. コンセプト（店の魅力を情緒的に伝える）: 縦書きの大きな赤明朝のキャッチに雷文の縦ラインと提灯を添え、蒸籠の写真を左端からはみ出させる。その下に本文を置く。
4. 説明書見出し（ここから詳細紹介が始まることを示す）: 雷文の額縁と蒸籠アイコンで作る見出しにする。
5. 夜メニュー（看板料理を紹介する）: 緑と赤の色面に写真を重ね、漢字2文字の見出しと白帯キャッチを置く。下に本文と枠ボタンを並べる。
6. 宴会コース（団体利用を促す）: 写真の下に赤い色面を置き、縦書きの白帯キャッチを重ねる。下に本文と枠ボタンを置く。
7. ランチ・昼飲み（昼の利用シーンを提案する）: 全幅の写真と、赤・緑の問いかけバナーを交互に置く。
8. 空間紹介（店内の雰囲気と席を見せる）: 縦書きの見出しに提灯を添え、緑のフロアマップ、写真グリッド（大1枚＋小2枚）、本文の順に並べる。
9. 予約・店舗情報（予約と来店に必要な情報を伝える）: ロゴ・電話番号・注意事項・外観写真・2列の情報テーブル・地図の順に並べる。
10. フッター（再度の予約導線と共有ボタンを置く）: 赤い面に白文字で電話番号・概要・SNSボタン・ロゴを置き、白い提灯のイラストを添える。

Imagery

• 蒸籠料理を真上や斜め上から撮り、彩りの良い具材を密に並べる。
• 湯気や箸で持ち上げる瞬間を撮ってシズル感を出す。
• 店内はオレンジの照明が効いた暖色の写真にし、赤と緑のスツールを見せる。
• 提灯・花紋・雷文は朱赤の単色ベタのイラストで描く。
• 蒸籠は丸い形のまま切り抜き、画面端にはみ出させる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは左側に赤い縦長のナビパネルを置き、メニューリンクを縦に並べる。
• PCではキャッチ・本文・写真を2〜3カラムに並べ、色面と写真のずらし重ねをより大きく使う。
• PCでは2つの問いかけを1枚の写真の上に斜めの区切りで並べる。
• PCでは店舗情報を左にロゴと外観写真、右にテーブルの2カラムにする。
• SPの固定予約バーの代わりに、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 行書くと起動時に読み込まれる。