DESIGN.md — 黒石目×金文字の創作和食レストラン LP（Dark Stone Gold Fine Dining LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、和風、シンプル・ミニマル
• キーワード: 石目テクスチャ・淡い金・明朝体・大判料理写真・筆記体アクセント・隠れ家感
• 地の質感: 黒・チャコールに細かな石やモルタル調のざらつきを加える。白地はフラットにする。
• 形: 写真は角なしの矩形にする。ボタンは細線のピル型。花の線画をあしらいに使う。
• 温度感: 暗く静かな中に、照明のような暖色の金を差す。

Colors

• 地は黒・黒の石目・グレーの石目・白の 4 種類にし、セクションごとに切り替えて明暗のリズムを作る。
• 金はセクションの欧文見出し、和文見出しの強調語、筆記体アクセント、予約 CTA だけに使う。
• 暗い地の文字は白か薄いグレー。白地の文字は墨色にする。
• 副ボタンは塗らずに細線の枠だけにする。暗い地では明るい灰の線、白地では黒の線。
• 鮮やかな色は料理写真の中にだけ出し、UI には使わない。

Typography

• 和文はすべて明朝にし、ゴシックは使わない。
• 欧文見出しは大文字のセリフ体にし、金か白で大きく置く。
• 筆記体は欧文見出しの左下か右下に小さく重ねる。
• 和文見出しは 2 行に分け、字間を広めに取る。
• 縦書きの和文見出しを写真の横に置く変化も使う。
• 本文は小さく行間を広く取り、両端揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か左右 22px 程度の余白で配置する。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算）
• セクションは欧文見出し→写真→和文見出し→本文→ボタンの順に縦へ積む。
• 写真同士の間は 20〜30px 空ける。
• 写真を左右にずらす配置や小さな写真の重ねでリズムを作る。
• 店舗情報は左に項目名、右に値の 2 列で並べ、行間を大きく取る。
• 画面下に高さ約 64px の固定バーを置き、3 つのアイコンを並べる。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• 奥行きは地の色の明暗と石目テクスチャで出す。
• 写真の上に暗いグラデーションを重ね、文字を読ませる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。横長 16:10 前後が中心で、縦長写真も混ぜる。
• セクション境界: 直線で地の色を切り替える。全幅写真を境目に挟む。
• ボタンだけを完全なピル型にする。
• 写真とカードは角を立てる。
• 細い 1px の横線と縦線で区切りを入れる。
• 白い線画の花をセクションの隅にはみ出させて置く。

Components

• 細線ピルボタン（button-outline）: 細線の枠だけのピルボタン。左に欧文ラベル、右端に矢印を置く。暗い地では白、白地では黒で描く。
• 予約 CTA（button-reservation）: ベージュ金で塗ったピル型の予約ボタン。暗い文字の欧文ラベルと右矢印を置く。
• 欧文見出し＋筆記体（section-title-en）: 大きなセリフ体の欧文に金の筆記体を重ねる。見出しの下に左端から伸びる横線を引く版もある。
• 縦書き見出し（vertical-heading）: 縦長写真の横に置く 2 行の縦書き明朝見出し。
• 電話番号ブロック（phone-block）: 店舗外観写真の上に置く。小見出しの下に金の大きなセリフ数字で電話番号を書き、補足を添える。
• 店舗情報表（info-table）: 罫線を引かない 2 列の表。左が項目名、右が値。
• キャンセル料表（fee-table）: 中央の縦線で左右に分け、左に金茶の条件、右に白で率を書く。
• 固定下部バー（fixed-bottom-bar）: ベージュ金の地に線アイコンと欧文ラベルを 3 つ並べる（電話・予約・地図）。
• お知らせカード（news-card）: 横長サムネイルの下に、中央揃えの日付と左揃えのタイトルを置く。

Do's and Don'ts

Do - 暗い地にはざらついた石目テクスチャを必ず敷く。 - 金は見出しと予約まわりに絞って使う。 - 料理写真は大きく、余白をたっぷり取って見せる。 - 欧文はセリフ体、和文は明朝で統一する。 - 白地のセクションを 1〜2 回はさみ、明暗の差を作る。 - 予約導線はページ末尾と固定バーの両方に置く。

Don't - ゴシック体や太い文字を使わない。 - 鮮やかな色や赤いボタンなど、目立つ CTA を作らない。 - 写真に角丸や影を付けない。 - アイコンやバッジを多用して情報を詰め込まない。 - 金をグラデーションや光沢で派手にしない。 - 本文を大きく、行間を詰めて組まない。

Page Structure

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

1. ヘッダー（ブランドを印象付ける）: グレーの石目の地に、白い筆文字ロゴを中央に置く。
2. ファーストビュー（料理の美しさで惹きつける）: 明るい皿の料理写真を全幅で置き、小さな白文字のキャプションを添える。
3. お知らせ（最新情報を伝える）: 白地に金の欧文見出しを置き、サムネイルカード、黒線のピルボタンの順に並べる。花の線画を添える。
4. コンセプト（料理のジャンルの独自性を示す）: 黒地に大きな欧文と筆記体を置き、モノクロからカラーへ変わる同じ料理写真を繰り返し、2 行の明朝見出しと本文で続ける。
5. 食材へのこだわり（品質を伝える）: グレーの石目の地に縦書きの欧文を置き、写真をずらして配置する。金の強調語を含む見出し、本文、線ボタンの順に並べる。
6. 記念日利用（特別な日の需要を取り込む）: 全幅の写真の後に、黒の石目の地で明朝見出しと金の筆記体、デザート写真、本文、線ボタンを置く。
7. ドリンク（飲み物の幅を示す）: 下線付きの欧文見出しの下にスライダー写真を置き、縦長写真と縦書き見出しを並べ、本文と線ボタンで締める。
8. ランチ（昼の利用を案内する）: 白地に写真、金の欧文見出し、明朝見出し、本文、黒線ボタンの順に並べる。
9. 空間紹介（居心地を伝える）: 店内の写真と白い線の座席図、本文を置く。
10. 予約・問い合わせ（予約へ誘導する）: 夜の外観写真にロゴを重ね、金の電話番号と金の予約ボタンを置く。
11. 注意事項・店舗情報（利用条件と基本情報を伝える）: 黒の石目の地に、キャンセル料表、箇条書き、2 列の情報表を並べる。
12. 地図・フッター（アクセスを案内し、シェアを促す）: グレースケールの地図の下に、シェアボタンとコピーライトを置き、固定バーを重ねる。

Imagery

• 料理は暗い背景か木目の上に置き、照明を絞ってシズル感を出す。
• 盛り付けのアップを俯瞰か斜め上から撮る。
• 同じ写真をモノクロとカラーで並べ、演出に使う。
• 店内と外観は暖色の間接照明が効いた低い照度で撮る。
• 白い細線で描いた花の線画をセクションの隅にあしらう。
• 座席図は白い線だけの簡素な平面図にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにロゴを中央に置き、その下に横並びのナビゲーションを置く。右端に縦長の予約タブを固定する。
• PC は写真と文章を左右 2 カラムで交互に並べ、写真を画面端まで寄せる。
• PC は縦書き見出しを写真の横に大きく置く。
• PC はお知らせを 3 列のカードで並べる。
• PC はキャンセル料と店舗情報を 2 カラムで並べ、地図の右に案内パネルを重ねる。
• SP 専用として画面下に 3 アイコンの固定バーを置く。

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 行書くと起動時に読み込まれる。