DESIGN.md — 黒と炭火の高級和モダン焼鳥店 LP（Dark Charcoal Japanese Yakitori Dining LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ラグジュアリー・ダーク、和風、上品・高級
• キーワード: 黒地・炭火・明朝体・縦書き・非対称レイアウト・和紙テクスチャ
• 地の質感: 大部分はフラットな黒地。店内紹介と最下部だけは和紙のような細かい粒のある明るいグレー地にする
• 形: 角丸なしの直角が基本。細い斜線（2〜3本セット）と大きな円弧の線画を飾りに使う
• 温度感: 背景は冷たい黒。写真の炭火のオレンジと木の色で温かみを足す

Colors

• 地の 8 割は真っ黒（#000）にする。区切りや奥行きにはチャコール（#1D〜#30）の帯を左半分などに部分的に敷く
• 文字は白一色にする。強調は色ではなく、文字サイズの差（大小のジャンプ率）で付ける
• 暖色は写真の炭火・木・照明だけで出す。UI の部品に有彩色を使わない
• 店内紹介だけは和紙調の明るいグレー地に切り替え、黒文字にして場面の転換を作る
• 枠線・区切り線は細いグレーの 1px にし、面を塗らずに線で囲む

Typography

• 見出しはすべて明朝体にし、本文だけ小さめのゴシック体にする
• 見出しの中で 1〜2 文字だけを大きくし、ジャンプ率で強調する
• 縦書きの見出しを写真の横に置き、和の趣を出す
• 欧文ラベルは字間を 0.3em 以上空け、見出しの上や写真の角に添える
• 本文は 11px 前後と小さめにし、行間を 2.0 と広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして非対称に置く
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで寄せたり、片側に余白を残したりして、左右交互にずらす
• 見出しを写真に重ねるか、写真の端からはみ出させる
• 説明文のブロックは左右どちらかに寄せて、幅を狭く取る
• セクションの間は 80〜100px 空けて、ゆったりさせる
• 店舗情報はラベルと値の 2 列で、罫線のない表にする

Elevation & Depth

• 影は使わず、フラットにする
• 奥行きは写真の重なりと、チャコールの帯を背面に敷くことで出す
• ファーストビューのニュース欄は半透明の黒地に細い枠線を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長と正方形に近い比率を混ぜる
• セクション境界: 直線で区切る。境目に斜めの細い線や大きな円弧の線画を重ねる
• ボタンと枠はすべて直角の四角にする
• 丸を使うのは、スライダー矢印と ＋ アイコンの円形ボタンだけ
• 飾りは細い斜めの平行線（2〜3本）と、大きな円弧の線画にする

Components

• 縦書きキャッチ（hero-vertical-copy）: 全面写真の上に白い明朝体の縦書き 2 行を右寄せで重ねる
• ニュース枠（news-box）: 半透明の黒地に細い枠線。欧文ラベル・日付・more リンクを横 1 行に並べる
• 欧文セクションラベル（section-label-en）: 字間を広く取った欧文セリフ体。写真の角や見出しの上に置く
• コース価格行（price-row）: コース名を左、価格を右下に置き、下に細い罫線を引く
• 電話予約枠（tel-box）: 細い枠線の中に、案内文・電話アイコン付きの大きな電話番号・補足文を中央揃えで並べる
• メニュー開閉ボタン（accordion-button）: チャコール地に細い枠線を付け、中央に明朝体の文字、右に円で囲んだ ＋ を置く
• 料理スライダー（photo-slider）: 写真の下に明朝体の料理名を置き、左右に円形の矢印ボタンを付ける。下にグレースケールのサムネイルを並べる
• 店舗情報表（info-table）: ラベルと値の 2 列。罫線は引かず、行間を広く取る
• 固定電話バー（sticky-tel-bar）: 画面下に固定する黒いバー。小さなラベルと、電話アイコン付きの番号を並べる
• 矢印付き下線リンク（arrow-link）: 白い文字の下に、右端が斜めに跳ねる矢印状の線を引く

Do's and Don'ts

Do - 炭火・煙・照りのある料理を、暗い背景で大きく見せる - 見出しは明朝体の白文字にし、縦書きを交える - 写真は左右交互にずらし、見出しを重ねて動きを出す - 細い斜線や円弧の線画を、セクションの境目に控えめに置く - 店内の紹介だけは和紙調の明るい地に切り替え、場面を変える

Don't - 鮮やかな有彩色のボタンや塗りのバッジを使わない - 角丸・ピル型・影のあるカードを使わない - 丸ゴシックやポップな書体を使わない - 写真を均等なグリッドに整然と並べない - 本文を大きく太くして、訴求を強くしすぎない

Page Structure

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

1. ファーストビュー（炭火の臨場感で一目で世界観を伝える）: 全面に料理写真を敷き、縦書きの明朝キャッチと縦書きロゴを置く。下部にニュース枠を付ける
2. コンセプト（店のこだわりを要約して伝える）: 黒地に 2 行の明朝見出しを置き、その下に中央揃えの小さな本文を続ける
3. 看板メニュー（まず頼んでほしい一品を示す）: 左揃えの見出しと本文の下に、横長の写真とキャプションを置く
4. 技・素材（仕込みと素材の質を伝える）: 欧文ラベル付きの写真に見出しを重ねる。写真 3 枚と本文 2 ブロックを左右交互にずらす
5. 味付け（タレと塩のこだわりを伝える）: 円弧の線画の中に写真を置き、右側に縦書きの見出しを重ねる。その下に塩の写真と本文を置く
6. メニュースライダー（串の種類を見せる）: 写真と料理名に左右の円形矢印を付け、下にサムネイルを並べる
7. コース一覧（価格を明示して予約へつなぐ）: 縦書きの見出しと串の写真を置く。コース名と価格を罫線付きで並べ、電話予約枠を続ける
8. 一品料理・お酒（単品や酒との組み合わせを提案する）: チャコール帯の上に写真と見出しを重ね、価格と本文を続ける。最後に開閉ボタンを 2 つ並べる
9. 店内紹介（空間の雰囲気を伝える）: 和紙調の明るい地に縦書きの見出しを置き、店内写真をずらして配置する
10. 店舗情報（来店に必要な情報を示す）: 欧文ラベルと明朝の見出しの下に 2 列の表を置き、外観写真を添える
11. キャンセル規定・求人（注意事項と採用情報を示す）: チャコール地に中央揃えの文章を置く。求人は枠線で囲んだ表にする
12. 地図・フッター（アクセスを補い、ページを締める）: 全幅の地図の下に矢印付きリンクを 2 つ置き、明るい地のフッターと固定電話バーで終える

Imagery

• 暗い背景で、炭火の赤とタレの照りを強調した低い角度のクローズアップにする
• 煙や湯気を逆光で写し込み、臨場感を出す
• 店内や人物は暖色の照明で撮り、木のカウンターの温かみを見せる
• スライダーの未選択サムネイルはグレースケールにする
• 飾りは白またはグレーの極細の斜線と、大きな円弧の線画だけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを右側に縦に固定し、ロゴ・電話・ニュースもそこへまとめる
• PC は写真と文章を 2 カラムで交互に置く。重ねとずらしの幅を SP より大きく取る
• PC のスライダーは写真を 3 枚並べて見せる
• 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 行書くと起動時に読み込まれる。