DESIGN.md — 黒×深緑の上質イタリアン飲食店 LP（Dark Textured Vegetable Italian Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、ナチュラル
• キーワード: 黒いザラ紙の質感・料理写真主役・縦書き明朝・手書きの曲線・オリーブグリーンの予約ボタン
• 地の質感: 黒〜チャコールの地にノイズの粒感。白地パートもうっすら紙の質感。
• 形: 角丸のない四角い写真と面。手書き風の吹き出し線や筆の下線を添える。
• 温度感: 暗くて暖かい。木や照明の暖色を写真で出し、地は無彩色か深い青緑。

Colors

• 前半は黒いザラ紙地と深い青緑地を交互に置き、写真の暖色を引き立てる。
• 店舗情報から明るいグレー地に切り替え、フッターで再び黒→青緑に戻す。
• 色付きの面は予約ボタンのオリーブグリーンだけにする。
• アクセントの金茶は手書き英字や小さなアイコンだけに使う。
• 暗い地の文字は真っ白でなく少し温かいオフホワイトにする。

Typography

• キャッチと日本語見出しは明朝。本文はゴシックで小さく、行間を広めにとる。
• 写真の上のキャッチは縦書きで写真の右端に置く。
• 日本語見出しの上に英字のサンセリフラベルを小さく添える。
• 英字見出しはセリフ体を引用符でくくり、筆で描いたような下線を添える。
• 電話番号は欧文サンセリフで大きく太く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は余白 16px ほどで幅いっぱいか、左右にずらして重ね、雑誌のようなリズムを作る。
• 本文ブロックは写真の下に 90% 幅で置く。
• 店舗情報は左に項目名、右に内容の 2 列表。行は細い線で区切る。
• セクションの間は地の色の切り替えで区切る。

Elevation & Depth

• 影は使わない。地の色と写真の重なりで奥行きを出す。
• 写真の重なりは単純に上に載せるだけにし、枠や影は付けない。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長と縦長を混ぜる
• セクション境界: 直線で地の色を切り替える
• ボタン・カード・写真はすべて角丸 0。
• 手書き風の吹き出し線や円弧で硬さをやわらげる。
• フロア図は白い細線と灰色の面で描く。

Components

• WEB 予約ボタン（button-reserve）: オリーブ地に明朝の白文字。右端に丸い再生アイコン。角丸なし。
• 下線付きテキストリンク（link-underline）: 英字セリフのリンク文字に細い下線を引き、右端に丸い矢印アイコン。
• 手書き吹き出しラベル（speech-curve-label）: 白い手書きの曲線で囲んだ短い添え文字。キャッチの上に置く。
• コース写真カード（menu-photo-card）: 料理写真の中央に線画アイコンと英字の大きなメニュー名。下に短い説明文。
• 英字＋日本語の見出し（heading-bilingual）: 小さな英字サンセリフの下に大きな明朝の日本語。中央揃え。
• 注意書きボックス（notice-box）: 薄いグレーの面に明朝の小見出しと本文 4 行ほど。
• 店舗情報の表（info-table）: 左に項目名、右に内容の 2 列。各行を灰色の細線で区切る。
• 下部固定バー（sticky-bottom-bar）: 地図・電話のアイコン、広いオリーブの予約ボタン、メニューを横に並べた固定バー。

Do's and Don'ts

Do - 料理写真は暗い背景で寄って撮った、彩りのはっきりしたものを使う。 - 黒い地には必ず細かいノイズの質感を入れる。 - キャッチは明朝の縦書きで、字間を広く。 - 予約導線（電話番号・予約ボタン）は店舗情報とフッターで繰り返す。 - 英字見出しには手書き風の線や筆の下線を添える。

Don't - 角丸や影のあるボタン・カードは使わない。 - 赤やオレンジなど彩度の高い色を地やボタンに使わない。 - 本文を大きく太くしない。 - ポップな丸ゴシックや絵文字は使わない。 - 写真に枠や装飾フレームを付けない。

Page Structure

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

1. ファーストビュー（店のコンセプトを一目で伝える）: 黒地の中央にロゴ。その下に料理写真を大きく置き、右端に縦書きの明朝キャッチ、左下に短い縦書きを添える。
2. コンセプト（料理へのこだわりを情緒的に伝える）: ぼかした料理写真を背景に、手書き吹き出しラベルと明朝 2 行のコピー。その後に料理写真 3 枚を左右にずらして重ね、紹介文と下線リンクを置く。
3. コース紹介（ディナーとランチの利用シーンを示す）: 深い青緑の地に、筆の下線が付いた英字セリフ見出し。メニュー写真カードを 2 枚と短い説明文。
4. 空間紹介（店内の雰囲気を伝える）: 店内写真を幅いっぱいに置き、縦書きの明朝コピーを重ねる。写真をずらし、手書き英字ラベル付きの青緑の説明ブロックを添える。
5. フロアマップ（席の配置を見せる）: 黒地に白い線画の間取り図。円弧で囲んだ大きなセリフ体の階数表示を添える。
6. 店舗情報（予約と基本情報を示す）: 明るいグレー地。2 か国語見出し、ロゴ、電話番号、予約ボタン、注意書きボックス、2 列の情報表を縦に並べる。
7. 外観・地図（場所を伝える）: 夜の外観写真と埋め込み地図を幅いっぱいに縦に並べる。
8. 系列店（関連店舗へ誘導する）: 2 か国語見出しの下に、店名ロゴを重ねた外観写真バナーを縦に並べる。
9. フッター（予約導線を最後にもう一度見せる）: 黒地にロゴ、電話番号、予約ボタン、店舗情報テキスト。最下部は青緑地にシェアボタンとコピーライト。下部固定バーを置く。

Imagery

• 料理は暗い背景で、上から斜めに寄って撮る。野菜の緑・赤・黄が映えるようにする。
• 器は陶器や黒い皿、背景は木のテーブル。暖色の照明で撮る。
• 店内は暖かい間接照明と木の家具が写る広角写真。
• 外観は夜に撮り、看板の灯りを見せる。
• 装飾は白い手書き線、筆の下線、細い円弧、線画アイコンだけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はロゴの下に中央寄せの縦長ヒーロー写真。右側に連絡先・予約ボタン・縦並びのナビを固定で置く。
• PC のコンセプトは左にコピーと小さい写真、右に大きい写真と本文を置く 2 カラムのコラージュ。
• PC のコース紹介は写真カード 2 枚を横に並べ、説明文を写真に重ねる。
• PC の店舗情報は左にロゴ・予約・注意書き、右に情報表の 2 カラム。外観写真と地図は横に並べる。
• PC の系列店は小さなバナーを 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 行書くと起動時に読み込まれる。