DESIGN.md — 白地と炭火写真の和モダン焼鳥店 LP（Monochrome Smoke Japanese Grill Corporate LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル
• キーワード: 炭火・煙・余白・明朝縦書き・職人・墨色
• 地の質感: 白地に薄い煙のにじみ、写真は暖色の焼き色と暗い影
• 形: 角丸なしの矩形と細い線枠、丸いアイコンだけ円形
• 温度感: 白と墨で冷静、写真の炭火で温かみを足す

Colors

• 地は白。色をのせるのは写真の焼き色と影だけにする
• 文字は墨色に統一し、強調にほかの色を使わない
• ブラウンは丸矢印などの小さな装飾だけに使う
• 暗い面は写真のブロックとフッターに限る
• セクションの切り替えは白地と淡い灰の面を半幅でずらして示す

Typography

• ゴシック体は使わず、すべて明朝体と欧文セリフにする
• 大きなコピーは縦書きにして写真に重ねる
• 欧文見出しは字間を広げ、下に和文の小ラベルを添える
• 本文は小さめの文字で行間2以上・字間0.1em
• 太字は使わず、文字の大きさと余白だけで強弱をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の一覧だけ横スクロールの帯にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの間に大きな余白をとる
• 写真は画面の端まで広げるか、左右に余白を残して中央に置く
• ボタンは中央に置き、幅は約70%
• 淡い灰の面を画面の半分の幅で敷き、写真とずらして重ねる
• 本文は左揃えで、両端に約7%の余白

Elevation & Depth

• 影はほぼ使わない
• 奥行きは写真と面のずらし重ねで出す
• 煙の写真を白地に溶け込ませて浮遊感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。横長かやや正方形に切る
• セクション境界: 直線。写真の端で切り替えるか、半幅の灰面をずらして区切る
• ボタンは1pxの線枠の矩形
• 丸くするのは矢印の円とSNS・電話アイコンだけ
• 写真の境界に装飾線は付けない

Components

• 線枠ボタン（button-outline）: 白地に1pxの墨色の線。文字を中央に置き、右端に小さな丸矢印を付ける
• 暗い写真の上の線枠ボタン（button-outline-dark）: 背景を透過し、白い線と白い欧文の文字で作る
• 欧文見出し（section-title-en）: 字間の広いセリフ体の大文字。下に和文の小ラベルを添える
• 縦書きコピー（vertical-copy）: 写真の左上や中央に重ねる明朝体の縦書き。白か墨色
• 店舗カード（brand-card）: 店内写真の左にロゴを白抜きで置き、右下に白い丸の電話・予約・SNSアイコンを並べる
• 写真の帯（photo-strip）: 小さな料理・調理の写真を細い隙間で横に並べ、灰面の上に重ねる
• 下線リンク（text-link-underline）: 一覧へのリンク。右寄せにして長い下線を引く
• 墨色フッター（footer-dark）: 中央に縦組みロゴ、その下にコピーライト・SNSボタン・PAGE UP

Do's and Don'ts

Do - 余白を多めにとり、写真1枚を主役にする - 見出しは縦書きの明朝か、字間を広げた欧文セリフにする - 炭火・煙・職人の手元など、温度が伝わる写真を使う - ボタンは細い線枠の矩形にする - 色数は墨・白・灰と写真の色だけに抑える

Don't - 塗りつぶしの派手なCTAボタンを置かない - ゴシック体や太字の見出しにしない - 角丸カードやドロップシャドウを使わない - 原色や蛍光色を使わない - 文字を詰めた情報量の多い訴求にしない

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: 中央に縦組みロゴを置き、職人の集合写真に縦書きコピーを重ねる。下に炭火の写真を全幅で置く
2. お知らせ（最新情報への入口）: 欧文見出しと和文の小ラベル、右寄せの下線リンク
3. 店舗ロゴの一覧（運営する店舗を示す）: 煙のにじむ白地に店舗ロゴを横に4つ並べる
4. コンセプト（料理への姿勢を伝える）: 煙から料理写真へ溶けるグラデーションに縦書きの大コピー。写真の下部に横書きのコピーを白文字で重ねる。その下に本文と線枠ボタン
5. 写真ギャラリー（店内と調理の雰囲気を見せる）: 半幅の灰面に小さな写真の帯を重ねる
6. 採用（人材を募集する）: 職人の写真を全幅で置き、下端に大きな欧文見出しを白で重ねる。その下に本文と線枠ボタン
7. 店舗紹介（主力店舗に誘導する）: 土壁の写真の上に白抜きのロゴ、短い文、白い線枠のボタン
8. ブランド一覧（各店舗への予約導線）: 店内写真のカードを縦に積み、予約アイコンを付ける。開店予定の店は灰の面で示す
9. フッター（会社情報と共有）: 墨色の面に縦組みロゴ、コピーライト、SNSボタン、PAGE UP

Imagery

• 炭火と立ち上る煙を、暗めの露出・暖色で接写する
• 白衣の職人をカウンター越しに撮った自然光の写真
• 白地に溶ける煙の写真を背景の装飾に使う
• 木・土壁・竹などの和素材の質感がわかる店内写真
• ロゴは筆書き風。写真の上には白抜きで置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に縦長の料理写真、右にナビゲーションと縦組みロゴを置く2分割のファーストビュー
• PCの本文は縦書きの段組みにし、ボタンも縦長にする
• PCのブランド一覧は5つのカードを横に並べる
• 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 行書くと起動時に読み込まれる。