DESIGN.md — グレージュ×極太黒文字のレトロ中華バーLP（Retro Greige Dining Bar LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、力強い・インパクト、ポップ・元気、親しみ・手作り感
• キーワード: 紙のざらつき・極太欧文・夜の店内写真・傾けたスナップ写真・赤い楕円ラベル・点線の区切り
• 地の質感: グレージュの地に細かいノイズを重ねて、紙のような質感を出す
• 形: 角丸カード、円形の写真、傾けた白フチ写真、ピル型の赤い線ラベル、ずらした黒い影付きボタン
• 温度感: 暖かくくすんだ中間色に、黒と赤で締める

Colors

• 基本はノイズを入れたグレージュの地。情報のまとまりは明るいグレーの面に載せる
• 見出しは墨黒の極太書体だけで出し、色は付けない
• 赤は楕円ラベル、ハッシュ記号、ふりがなの吹き出しなど小さなアクセントだけに使う
• オレンジは予約ボタンと固定フッターの予約・電話にだけ使う
• 料理を見せるセクションはオリーブ寄りのくすんだ地に切り替えて変化を出す
• フッターは黒にして、上側を大きな角丸で切り替える

Typography

• セクション名は極太の丸い欧文で、画面幅いっぱいに大きく組む
• 大見出しの直下に、赤い楕円の線で囲んだ日本語ラベルを添える
• 大見出しの1語だけ緑灰の色に変えて遊びを入れる
• 英文や日本語のキャプションは縦書きにし、写真の端や余白に置く
• 本文は小さめにし、字間を広めにとって落ち着かせる
• 白抜きの縁取り文字を使い、レトロな看板のような見出しにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。シーンカードは写真と文字を左右半分ずつ交互に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの間は横いっぱいの点線で区切る
• ファーストビューは大きな欧文、写真のコラージュ、縦書きの説明の順に重ねる
• シーンカードは写真と文字の左右を1枚ごとに入れ替える
• 料理の写真は傾けて重ね、はみ出させる
• 店舗情報は罫線で区切った2列の表で見せる
• 画面下に電話・予約・SNS・メニューの固定バーを置く

Elevation & Depth

• ボタンには右下にずらした黒い影（ぼかしなし）を付ける
• 傾けたスナップ写真は白フチに薄い影を付ける
• カードは影なしの平らな面にする
• 料理の皿の写真は切り抜きにして、柔らかい落ち影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形、白フチの円形、白フチで傾けたスナップ写真、皿の切り抜き
• セクション境界: 横いっぱいの点線。フッターの手前は大きな角丸で切り替える
• ボタンは角丸なしの長方形で、ずらした影を付ける
• ラベルは赤い線で描いた楕円や吹き出しにする
• 円形カードの下部に白い矢印を置く
• ロゴサムネイルは角丸の枠線で囲む

Components

• 予約ボタン（button-primary）: オレンジの長方形に、カレンダーのアイコンと文字。黒い影をずらして付ける
• 一覧・地図リンクボタン（button-outline）: 地色の上に黒い枠線と黒い影。右端に細い矢印
• 赤い楕円ラベル（oval-label）: 大見出しの下や円形カードの上に置く、赤い線の楕円と赤い文字
• シーンカード（scene-card）: 角丸のグレーの面を左右に分け、片方は写真、片方はハッシュ記号付きの見出しと説明。写真の上に英語の小ピルを置く
• 円形プランカード（circle-plan）: 白フチの円形に写真を入れ、暗いオーバーレイの上に白い見出しと矢印。赤い吹き出しで人数を示す
• 傾けたスナップ写真（tilted-photo）: 白フチの写真を回転させて重ね、白い枠線の縦書きキャプションを載せる
• 価格ボックス（menu-box）: 明るいグレーの角丸の面に、メニュー名、価格、緑の点付きの品目を2列で並べる
• 固定フッターバー（fixed-footer-bar）: 画面下に固定。左にオレンジの電話・予約、右にSNSアイコンと赤い楕円のメニュー
• 店舗情報の表（info-table）: 左に項目、右に内容。行ごとに細い罫線で区切る

Do's and Don'ts

Do - 地には必ず細かいノイズの質感を入れる - 極太の欧文見出しは、画面幅の8〜9割を占めるくらい大きくする - 写真は暖かい照明の夜の店内と料理を中心にする - 縦書きのキャプションや英文を余白に置いて、雑誌のような遊びを出す - ボタンは長方形で、ずらした影を付けた形にそろえる

Don't - 鮮やかな原色の大きな面を使わない（赤とオレンジは小さく使う） - 細い書体だけで大見出しを組まない - ぼかしの強い柔らかい影を使わない - 写真をすべて同じ正方形に整列させない - 白一色の無地の地にしない

Page Structure

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

1. ファーストビュー（店の世界観とコンセプトを一目で伝える）: ロゴを中央に、右上に縦書きの店舗説明。3行の極太欧文の下に、ふりがな吹き出し付きの日本語コピー。その下に店内と料理の写真を隙間なく並べたコラージュ
2. 店舗紹介（立地と使い方を短く説明する）: 地の上に小さな本文を左揃えで置き、点線で区切る
3. 利用シーン（宴会・女子会・学生・イベントなど用途を提案する）: 欧文の大見出しと赤い楕円ラベル、カクテルの切り抜き。左右を入れ替えた角丸カードを4枚並べる
4. プラン選択（貸切か少人数コースかへ誘導する）: 欧文の問いかけ見出しの下に円形の写真カードを2つ。人数は赤い吹き出しで示し、左右に点線と縦書きの英字を置く
5. ディナー（料理とカクテルの体験価値を訴求する）: オリーブ系の地に、縁取り文字と極太欧文。傾けた写真を重ね、縦書きのキャプションを添える
6. ランチ（昼の利用と価格を伝える）: 店内写真の上に白抜きの欧文と時間の帯。その下に皿の切り抜き写真、縦書きの見出し、価格ボックスと注釈
7. お知らせ（最新情報を見せる）: 左に縦向きの極太欧文、右にロゴサムネイルと日付のリスト、一覧ボタン
8. 店舗情報（電話・予約・営業情報を伝える）: 流れる欧文の帯の下に、グレーの面。ロゴ、大きな電話番号、オレンジの予約ボタン、罫線の表
9. 地図（アクセスを示す）: 地図の埋め込みとアウトラインボタン。下端を大きな角丸にする
10. フッター（シェア、著作権表記、ページ上部へのリンク）: 黒の地に白い文字と指アイコン。画面下に固定のアクションバー

Imagery

• 暖色の照明が当たる、にぎやかな夜の店内で乾杯する人物写真
• 蒸籠や点心を真上や斜め上から撮った、コントラスト高めの料理写真
• グラスや皿は切り抜きにして、傾けて配置する
• 白フチのポラロイド風スナップ写真を回転させて重ねる
• 手描き風の指差しアイコンや矢印などの線画を小さく添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではシーンカードを2列のグリッドにし、写真を上、文字を下にする
• PCではプランの円形カード2つを横に並べる
• PCでは上部に横並びのナビゲーションと予約ボタンを固定する
• PCのランチは写真と文字を左右に並べる
• PCの店舗情報は中央の角丸カードにし、左右に縦向きの流れる欧文を置く
• 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 行書くと起動時に読み込まれる。