DESIGN.md — クラフト紙と焦茶の郷土イタリアン LP（Kraft Paper Rustic Italian Osteria LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ナチュラル、上品・高級、レトロ、親しみ・手作り感
• キーワード: クラフト紙・地産地消・郷土料理・ワイン・欧文セリフ・民族柄
• 地の質感: ざらついた紙の質感と木目を地に敷く。地図の線画を薄く重ねる
• 形: 角のある四角い写真を左右交互にずらして重ねる。ボタンは直角の白い帯、小さな操作ボタンだけピル型
• 温度感: 暖色。焼き色・木・ワインを思わせる茶系で統一する

Colors

• 地は常にクラフト紙色にし、白背景のセクションは作らない
• 写真の背後に焦茶・木目のブロックをずらして置き、奥行きを出す
• 店舗情報・アクセスは焦茶の面にまとめ、文字は生成りにする
• ワインレッドは予約ボタンだけに使う
• リンクボタンは白地＋黒文字＋民族柄の帯で統一する
• 強い原色は写真の食材だけに任せ、UI は茶系の濃淡でまとめる

Typography

• 和文はすべて明朝にし、ゴシックは使わない
• 欧文見出しは大文字の碑文風セリフにし、すぐ下に和文サブ見出しを付ける
• 欧文見出しと和文サブ見出しは左揃えにし、下に細い線を引く
• 本文は字間を広めにとり、小さめの文字で行間を 2 倍前後とる
• コンセプトのコピーは中央揃え、または縦書きの 2 行で見せる
• ラテン系の見出し語で各シーンを分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして非対称に置く
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は 15px 前後にし、本文はさらに 20px 内側に下げる
• 写真は画面端まで寄せるものと、片側に余白を残すものを交互に置く
• 焦茶・木目の面を写真の裏から片側にはみ出させる
• セクションの頭に短い縦線 2 本のインジケーターを置く
• 店舗情報は項目名と値を縦に積むリストにする

Elevation & Depth

• 影はほぼ使わず、面の重なりで奥行きを出す
• 写真の上に吹き出しや欧文ラベルを重ねて立体感を出す
• 地図や白枠ボックスはフラットに置く

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の長方形にする。料理の皿だけ円形の切り抜きを画面端からはみ出させる
• セクション境界: 直線で区切る。面をずらして置き、段差のある境界にする
• メインのリンクボタンは角丸なしの白帯にする
• サブの小さいボタン（more・地図を開く）は黒のピル型にする
• 丸い黒地に矢印のアイコンをボタンの右端に置く
• 吹き出しは大きい角丸の半透明黒地にし、細い引き出し線を付ける

Components

• 民族柄帯付きリンクボタン（button-link-band）: 白い長方形の上下を紺と橙の民族柄の帯で縁取る。中央に明朝の文字、右端に黒丸の矢印を置く
• WEB予約ボタン（button-reserve）: ワインレッドの面に白文字。左にカレンダーのアイコンを付ける
• 黒ピルのサブボタン（button-pill）: 黒地に白の小さい文字。more や地図表示に使う
• 欧文＋和文の見出し（heading-latin）: 大きい欧文セリフの下に明朝の和文を置き、その下に細い区切り線を引く
• 透かし欧文見出し（heading-watermark）: 薄い大きな欧文を背後に敷き、その上に和文見出しを中央に重ねる
• FAQアコーディオン（faq-accordion）: 上下を二重線で挟んだ行。左に Q と質問、右に下向きの矢印を置く
• 店舗写真の吹き出し（speech-bubble）: 半透明の黒い角丸の吹き出しに白の明朝 2 行を入れ、写真に細い線を引き出す
• お知らせ白枠（news-box）: 白い面に日付とタイトルを 1 行ずつ並べ、日付の下だけ濃い線を引く
• 店舗情報パネル（info-dark-panel）: 焦茶の面に、ロゴ・電話番号・予約ボタン・店舗情報のリスト・手描き風の簡易地図を縦に並べる

Do's and Don'ts

Do - 地にクラフト紙の質感を必ず敷く - 写真と焦茶のブロックを左右交互にずらして重ねる - 見出しは欧文セリフ＋和文明朝の 2 段で組む - リンクボタンは民族柄帯の白ボタンに統一する - 料理・調理・乾杯・店内など、温かい光の写真を大きく使う - 地図の線画やモザイク画を薄く重ねて、土地の物語を出す

Don't - 真っ白やグレーのフラットな地を使わない - ゴシック体や丸ゴシックを使わない - ビビッドな色のボタンを増やさない（赤は予約だけ） - 写真に角丸や影を付けない - 左右対称の整ったグリッドにしない - 派手なグラデーションやアイコンの多用は避ける

Page Structure

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

1. ファーストビュー（料理の迫力と店の世界観を一目で伝える）: 暗く寄った肉料理とハーブの写真を全面に敷く。中央に円形のロゴ、明朝 2 行のコピー、小さい欧文を置く
2. コンセプト（店の成り立ちと楽しみ方を伝える）: 淡い地に地図の線画を重ねる。大きな欧文の店名、明朝 2 行のコピー、中央揃えの本文を置き、下に皿の円形写真をはみ出させる
3. 地産地消のこだわり（地元の食材へのこだわりを示す）: 食材の写真を 2 枚ずらして置き、背後に木目の帯を敷く。地域の地図線画に縦書きの見出しを重ね、横書きの本文を続ける
4. 調理・料理の想い（料理の背景へ誘導する）: 白帯のリンクボタンを置き、炎や鍋の調理写真を焦茶の面と互い違いに並べる
5. 利用シーン導入（楽しみ方の章に切り替える）: 薄くしたモザイク画の上に、縦書きの欧文を写真へまたがせて置く。続けて店内で食事する人の写真を全幅で見せる
6. アラカルト（夜の飲みの楽しみ方を伝える）: 欧文と和文の見出し、区切り線、本文、注釈、白帯ボタンの順に並べる
7. コース（宴会・貸切の利用を促す）: 乾杯写真を全幅で見せた後、同じ見出しの型で本文と白帯ボタンを置く
8. ランチ（昼の利用を促す）: ワインと前菜の写真を全幅で見せ、見出し・本文・白帯ボタンを続ける
9. お知らせ（最新情報を伝える）: 大きな欧文見出しを白枠に重ね、右上に黒ピルの more ボタンを置く。白枠に日付とタイトルを並べる
10. よくある質問（来店前の不安を解消する）: 透かし欧文の見出しの下に、二重線のアコーディオンを置く
11. 店舗情報・予約（予約と来店につなげる）: 店の外観写真に吹き出しを重ねる。焦茶のパネルに、ロゴ・電話番号・赤い予約ボタン・情報リストを入れる
12. アクセス・キャンセル規定（道順と注意事項を示す）: 焦茶の地に白い道路の簡易地図、線で囲んだ中央揃えの規定を置く。その後に埋め込み地図と黒ピルのボタンを続ける
13. フッター（SNS と共有の導線を置く）: 古地図風のイラストを薄く敷く。ロゴ・SNS アイコン・共有ボタン・テキストリンク・コピーライトを中央に並べる

Imagery

• 料理は暗めの背景で寄って撮り、湯気や焼き目の質感を強調する
• 調理の写真は炎や鍋の動きを入れ、温かい色温度で撮る
• 人物は顔を主役にしない。手元・乾杯・談笑する後ろ姿で雰囲気を伝える
• 地図の白い線画（国や地域の輪郭）を地に薄く重ねる
• 南欧の民族画・モザイク画・古地図風のイラストを透かして装飾に使う
• 木目のテクスチャ面を写真の背後の色面として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを左右 2 カラムに並べ、写真の左右を交互に入れ替える
• PC のファーストビューは横長にし、上部に横並びのナビ、左下に電話番号と予約ボタンを置く
• PC のコンセプトでは皿の円形写真を 3 枚横に並べる
• PC の店舗情報は左に焦茶の情報列、右に外観写真と簡易地図を並べる
• SP は右上のハンバーガーメニューで、全セクションを縦に積む
• PC のお知らせは見出しを左、リストを右に並べた白枠にする

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