DESIGN.md — 和紙ベージュ×焦茶のイタリアン飲食店 LP（Kraft Paper and Dark Wood Italian Dining LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、和風、ラグジュアリー・ダーク
• キーワード: 和紙テクスチャ・縦書き明朝・筆記体欧文・写真コラージュ・焦茶の夜・細線ボタン
• 地の質感: ベージュ地に、しわ寄せた和紙やクラフト紙のような薄い凹凸の地紋を敷く。ダーク面はフラットな焦茶にする。
• 形: 写真は四角形を基本に、少し傾けたり、背面に色の帯をずらして置いたりする。ボタンは細線のピル型。
• 温度感: 暖色寄り。電球色の夜の写真とベージュで、温かく落ち着いた雰囲気にする。

Colors

• ベージュの和紙地を基本にし、店舗やテーマが変わるところで焦茶の面に切り替える。
• 強調色は使わない。ボタンは背景と同じ地に 1px の細線を引くだけにする。
• 深緑と青は写真の背後にずらして置く細い帯だけに使い、店舗ごとに色を分ける。
• ダーク面では文字と線を白にし、明朝を細めの太さで載せる。
• フッター付近は生成りと焦茶を左右（SP では上下）に分けて、2 店舗を対比させる。

Typography

• キャッチコピーは縦書きの明朝で、2〜3 行に分けて段差をつける。
• セクション名は筆記体の英字とし、大きく斜めに流してから下に和文見出しを置く。
• 店名は大きな欧文セリフで写真の上端に重ね、写真にかかるようにする。
• 本文は小さめのゴシックに広めの行間を取り、控えめに置く。
• 電話番号は欧文セリフで大きく見せ、tel: の接頭辞を小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に寄せて互い違いに並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面の片側に寄せ、反対側に縦書きコピーを置いて非対称に組む。
• 写真同士を一部重ね、色の帯を背面にずらしてコラージュにする。
• 全幅の写真は帯のように並べ、セクションのつなぎにする。
• 本文は左右 24px の余白で幅いっぱいに組む。
• ボタンは幅いっぱいの細線ピル型にし、右端に矢印を置く。

Elevation & Depth

• 影は使わず、フラットな面にする。
• 奥行きは写真の重ね合わせと、背面にずらした色帯で出す。
• 背景の地紋に、薄い煙状の写真を透かして重ねる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの四角。FV やリクルートの写真は少し傾けた台形に切る。
• セクション境界: 直線で区切る。一部はベージュの面に段差をつけて焦茶へ移る。
• 写真に角丸はつけない。
• ボタンだけを完全なピル型にする。
• ロゴ枠とメニュー円は柔らかい角丸か正円にする。

Components

• 細線ピルボタン（button-outline-pill）: 1px の線だけで作る幅いっぱいのピル型ボタン。中央に明朝の文字、右端に細い矢印を置く。
• 予約ボタン（button-reserve）: 電話番号の下に置く大きめの細線ピル。明朝の文字に右矢印を添える。
• 筆記体見出し（script-heading）: 焼き色ブラウンの筆記体英字を大きく置き、下に和文の明朝見出しを添える。
• 縦書きコピー（vertical-copy）: 明朝の縦書きで 2〜3 行に分け、行ごとに開始位置をずらす。
• 色帯ずらし写真（photo-offset-frame）: 写真の背面に、深緑か青の帯を斜め下へずらして置く。
• 写真バナーリンク（photo-title-banner）: 店舗写真の上に白い欧文店名と丸い矢印アイコンを重ねたリンク。
• 線囲みリスト（info-box-lined）: 1px 枠の中に、項目と内容を点線リーダーでつないで並べる。
• 問い合わせボックス（contact-box）: 淡いベージュの面に、見出し・電話番号・縦線・SNS アイコンを置く。
• 円形メニュー（menu-circle）: 右上に置く焦茶の正円ハンバーガーボタン。

Do's and Don'ts

Do - 地には和紙のような薄い凹凸の質感を必ず敷く。 - コピーは縦書きの明朝で、余白を広く取る。 - 写真は電球色の夜景や料理の寄りで、暖かく暗めに統一する。 - 店舗やテーマごとに、ベージュ面と焦茶面を切り替える。 - 写真同士を重ね、色帯をずらしてリズムをつくる。

Don't - ボタンを鮮やかな色でベタ塗りしない。 - 写真に角丸や影をつけない。 - ポップな丸ゴシックや太いゴシックを見出しに使わない。 - 写真を整然としたグリッドに等間隔で並べ切らない。 - 白い無地の背景をメインの地に使わない。

Page Structure

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

1. ファーストビュー（店の雰囲気を一目で伝える）: 少し傾けた夜の店舗写真に、縦書きの白い明朝コピーを重ねる。左上にロゴ、右上に円形メニューを置く。
2. お知らせ（最新情報への導線）: 筆記体の英字見出しと、右に小さな view more リンクを置く。
3. コンセプト（店の理念を伝える）: 右に料理写真、左に縦書きコピーを組み、下に本文を置く。続けて全幅の料理写真を帯状に並べる。
4. 店舗紹介（1店目）（1 店目の特徴を伝える）: 筆記体と欧文セリフの店名を写真に重ね、外観・内観・料理写真を互い違いにコラージュする。縦書きコピーと細線ボタンを置く。
5. 食材ギャラリー（素材のこだわりを見せる）: 横にはみ出すように写真を並べたスライダー。
6. 店舗紹介（2店目）（2 店目の特徴を伝える）: 焦茶の面に切り替え、欧文の大見出しを写真に重ねる。青い帯をずらした写真、2 枚並び、縦書きの白コピー、白線ボタンを置く。
7. 利用シーン（使い方への導線）: ぼかした全幅写真に、白い欧文見出しと丸い矢印を重ねる。
8. 求人情報（スタッフ募集）: 傾けた料理写真、筆記体の英字、明朝の見出し、線囲みリスト、本文、問い合わせボックスの順に置く。
9. 店舗情報（2店）（予約とアクセス）: 生成りと焦茶の面に、ロゴ・電話番号・予約ボタン・SNS・住所・営業時間・写真バナーを店ごとに置く。
10. フッター（共有と著作権表示）: ベージュ地に共有ボタン、コピーライト、円形のページトップボタンを置く。下に 2 店のロゴを固定する。

Imagery

• 電球色の照明で撮った夜の店舗外観を、暗めの階調で使う。
• 料理は真上か斜め上からの寄りで、陶器の皿の質感を見せる。
• スタッフは笑顔の自然な仕事中のカットにする。
• ワイングラスは浅い被写界深度でぼかしを生かす。
• 背景に煙や地図のような淡いシルエットを透かして重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左側に縦長の固定ナビを置き、ロゴ・電話番号・予約ボタン・メニューを 2 店分並べる。
• PC では写真とテキストを 2 カラムで重ね、コラージュの重なりを大きく取る。
• PC の店舗情報は生成りと焦茶を左右 50% に並べて対比させる。
• 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 行書くと起動時に読み込まれる。