DESIGN.md — 黒板石×赤黄の焼肉居酒屋 LP（Dark Slate Yakiniku Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、和風、情報量多め・訴求型
• キーワード: 黒板石テクスチャ・シズル写真・赤帯見出し・黄色マーカー・吹き出しコピー・筆の擦れ
• 地の質感: 黒〜チャコールの石・黒板調のざらついた背景。墨の筆跡や斜線ハッチングを半透明で重ねる
• 形: 角丸なしの四角い帯と枠が基本。ギザギザの吹き出しと丸い矢印ボタンがアクセント
• 温度感: 暗い地に赤と黄の暖色を差した、熱気のある温かい印象

Colors

• 地はほぼ全体を黒〜チャコールの石目テクスチャにし、白い文字を載せる
• 赤は見出しの帯、強調語、予約 CTA だけに使う
• 黄色は見出しの下線マーカーと、極太コピーの一部の語に限って使う
• 白は吹き出し、アウトラインボタン、本文の文字に使う
• フッターだけ焦げ茶の地にして、ページの終わりをわかるようにする
• 写真の上に載せる文字は白に黒フチを付け、可読性を保つ
• page は文字 #C0141A × 背景 #25262A のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#DADBDF、4.52:1）を使う。

Typography

• 本文はすべて明朝の太めにし、字間を広めにとって和の大衆店らしさを出す
• 写真に重ねるキャッチは極太ゴシックにし、白文字に黒い太フチを付ける
• 強調語だけを赤または黄色に変え、1 行に 1〜2 語までにする
• FV のコピーは縦書きにし、行を階段状にずらして配置する
• 店名・産地などの強調語は、1 文字ずつ四角い枠や赤帯で区切って並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章を左右に振り分ける 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右に余白を少し残すか、全幅で大きく見せる
• 写真の下端に見出しを重ね、写真の下にテキストパネルを続ける
• テキストパネルは斜線ハッチングの半透明の黒にし、右下に丸い矢印ボタンを置く
• セクションの間は石目の地だけで区切り、大きめの余白をとる
• 店舗情報は項目名と値を縦に積み、項目ごとに細線で区切る
• 画面下部に予約ボタンとメニューボタンを常に固定表示する

Elevation & Depth

• 影はほとんど使わない。奥行きは写真の重なりと黒フチ文字で出す
• 吹き出しやラベルには、わずかなドロップシャドウを付けてよい
• テキストパネルは半透明にし、背景の写真や石目を透かす

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。商品は切り抜き写真を斜めに配置して重ねる
• セクション境界: 直線の境界。写真の端をフェードさせて暗い地に溶け込ませる
• 主要なボタンは角丸なしの白い長方形にし、灰色の太枠を付ける
• 地図関連のボタンだけ黒いピル型にする
• 詳細リンクは白い円形に赤い矢印を入れる
• 吹き出しは白地に黒い太線、ギザギザまたは楕円の形にする

Components

• 固定予約バー（button-reserve-fixed）: 画面下部に固定する赤いバー。カレンダーアイコンと大きな白文字を入れ、右側に黒いメニューボタンを並べる
• 白い長方形ボタン（button-outline）: 白地に灰色の太枠。中央に赤い文字、右端に小さな矢印を置く
• 丸い矢印ボタン（button-circle-arrow）: 白い円に赤い矢印。テキストパネルの右下に配置する
• 赤帯・枠付き漢字見出し（heading-red-band）: 1 文字ずつ白枠で囲った漢字を並べ、下の段は赤地に白文字にする
• 黄色下線見出し（heading-yellow-underline）: 白い明朝の大見出しで、キーワードの下に黄色い太線を引く。助詞は小さめにする
• コピー吹き出し（speech-bubble）: 白地に黒い太線のギザギザ吹き出し。黒と赤の極太文字を入れ、写真に重ねる
• 告知ボックス（notice-box）: 黒い箱。上部に筆の擦れ帯を敷き、大きな赤い数字と黄色の強調で見出しを作る。下にリード文とボタンを置く
• 斜線テキストパネル（text-panel-hatched）: 半透明の黒地に斜線ハッチングを入れ、明朝の白い本文を載せる。写真の直下に置く
• 価格ラベル（price-label）: 写真の左下に重ねる白い帯。黒文字で説明、赤文字で価格を入れる
• 店舗情報リスト（info-list）: 項目名と値を 2 段に積み、項目ごとに細い白線で区切る

Do's and Don'ts

Do - 肉・酒・料理の写真は暗めの背景で、照りと湯気が出るように大きく見せる - 見出しの強調は赤帯・黄色下線・吹き出しの 3 種類から選んで使い分ける - 写真上の文字には黒い太フチを付ける - 本文は明朝で小さめにし、字間を広くとる - 予約の導線は画面下部に常に固定表示する - 筆の擦れや牛のシルエットを、背景に薄く重ねる

Don't - 明るい白背景のセクションを多用しない - 角丸のカードや、パステル調の色は使わない - 赤と黄色を同じ語に重ねて使わない - 細いゴシック体だけで見出しを作らない - 写真を小さなサムネイルだけで並べない

Page Structure

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

1. ファーストビュー（安さと美味しさを一瞬で伝える）: 肉・ビール・焼酎の切り抜き写真をコラージュする。縦書きの筆文字コピーに黄色の筆跡と赤帯を添える
2. 月替わりの告知（定期的な割引日を知らせ、SNS へ誘導する）: 黒い告知ボックスに大きな赤い数字の見出しを入れ、白い長方形ボタンを置く
3. 訴求コピー（コスパと肉の質を強調する）: 肉の写真に白い吹き出しを 2 つ重ね、赤い極太文字で強調する
4. コンセプト紹介（店の立ち位置を説明する）: 黄色下線付きの大見出しの下に、明朝の本文を置く。コース価格を白いラベルで示す
5. 素材のこだわり（肉の産地と品質を伝える）: 枠付きの漢字見出しと赤帯見出しを並べ、肉をカットする写真と墨円の装飾を添える。本文は半透明パネルに入れる
6. 利用シーン別メニュー（人数や目的ごとの選び方を示す）: 写真＋黄白の極太見出し＋斜線パネル＋丸い矢印のセットを 3 つ繰り返す
7. ドリンク紹介（酒の豊富さを伝える）: 瓶を並べた写真に筆跡と赤帯見出しを重ね、白いボタンを置く
8. 店内・座席（空間の快適さを見せる）: 店内写真、楕円の吹き出し見出し、黄色線で挟んだ本文、斜線の手描き風座席図を順に並べる
9. 店舗情報（予約・アクセス情報を提供する）: 店の外観写真を暗くした上に見出しを載せ、細線区切りの項目リストを置く
10. お知らせ（最新情報を示す）: 黒い箱に明朝の大見出しを入れ、写真と日付を横に並べる
11. 地図（場所を案内する）: 埋め込み地図と、白黒の簡略地図を並べる。下に黒いピル型ボタンを置く
12. フッター（連絡先と共有導線を置く）: 黒いロゴ帯の下に焦げ茶の地を敷き、連絡先、SNS ボタン、固定予約バーを置く

Imagery

• 肉は網や皿に盛って斜め上から寄りで撮る。脂の照りと赤身が鮮やかに見えるようにする
• ジョッキや酒瓶は切り抜きにし、斜めに傾けて躍動感を出す
• 背景は黒いスレートや焼き網で、暗くトーンを落とす
• 墨の筆跡、円相、牛の線画シルエットを半透明で重ねる
• 店内写真は電球色の暖かい光で撮る
• 座席図や地図は、白黒の太線と斜線ハッチングで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーを左上のロゴ＋電話＋予約ボタンにし、ナビは右上に縦書きで並べる
• PC は写真と文章を左右交互の 2 カラムにする
• PC の店舗情報は 2 カラムのリストにする
• 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 行書くと起動時に読み込まれる。