DESIGN.md — 生成り紙とオレンジのナポリ風ピッツェリア LP（Rustic Neapolitan Pizzeria Collage LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、レトロ、親しみ・手作り感
• キーワード: 生成り紙テクスチャ・炎のオレンジ・マジョリカタイル・欧文セリフ＋筆記体・雑誌風コラージュ・旅情
• 地の質感: ざらついた再生紙のようなノイズ地。古地図や街並みの写真を淡く透かして敷き、スタンプ風の線画を薄く重ねる
• 形: 角丸なしの四角が基本。写真とタイルを少しずつ重ね、細線の円や手描き風の楕円をアクセントに置く
• 温度感: 暖色寄り。生成りとベージュに焼き色のオレンジを合わせ、青いタイルで締める

Colors

• 地は生成り紙を基本にし、セクションの変わり目だけ一段濃いベージュに切り替える
• オレンジはロゴ・予約ボタン・筆記体・図面の席に限り、大きな面には使わない
• 青と黄色はタイル画像の中だけで使い、文字や線には使わない
• 文字は真っ黒にせず、焦げ茶寄りのチャコールにする
• 写真が並ぶ帯の地には、街並みの写真を淡く透かして色の温度をそろえる

Typography

• 大見出しは伊語の欧文セリフ、その右上に筆記体を斜めに重ねる
• 和文見出しは細めの明朝で、字間を広く取る
• 本文は小さめのゴシックで、行間を2以上に広げる
• 番号は『01.』のようにセリフ数字で書き、明朝の見出しと横に並べる
• 見出しの下に、左側の細い横線と明朝のサブコピーを並べる
• 縦書きの明朝コピーを写真の横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とカードを左右にずらして互い違いに置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで寄せたり、余白からはみ出させたりして非対称に置く
• タイル画像は写真の角に重ねたり、斜めに隣接させたりする
• こだわりは『写真＋白カード（番号見出し＋本文）』を 3 回くり返す
• 店舗情報は項目名と値の 2 段にし、細線で区切ってリストにする
• 画面下に予約・電話・地図・メニューの 4 分割固定バーを置く

Elevation & Depth

• 影はほぼ使わず、紙の上に紙を重ねたような平らな表現にする
• カードは地より明るい生成りの面だけで浮かせる
• 地図の情報ボックスにだけ、ごく薄い影を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。正方形のタイル画像を重ねてコラージュにする
• セクション境界: 直線で切り替える。地の色や透かし写真の有無で区切る
• ボタン・カード・写真はすべて角丸なしにする
• 円形は細線の円（利用シーンのラベル）だけに使う
• 手描き風の楕円で欧文コメントを囲む
• 店内の見取り図は太い線と丸い席アイコンで描く

Components

• Web予約ボタン（button-reserve）: オレンジの面に紙のかすれ感を付け、カレンダーアイコンと明朝の文字を中央に置く
• 枠線＋矢印ボタン（button-outline-arrow）: 細い濃色の枠の中に明朝の文字を置き、右端に細長い矢印線を付ける
• 欧文大見出し＋筆記体（heading-display-script）: 大きなセリフ体の伊語に、オレンジの筆記体を斜めに重ねる
• 番号付きこだわりカード（card-numbered-feature）: 明るい生成りのカードに、番号と明朝見出し、横線付きのサブコピー、本文を並べる
• マジョリカタイル装飾（tile-decoration）: 青と黄色の柄タイルの正方形を、写真の角やすき間に散らす
• 利用シーンの円ラベル（scene-circle）: 細線の円を3つ重ね、中に明朝の短い言葉を入れる
• お知らせカード（news-card）: ファーストビューの下に重ねるベージュの帯。欧文の見出し、サムネイル、日付、タイトル、more リンクを置く
• 店舗情報リスト（info-list）: 項目名の下に値を書き、項目ごとに細い区切り線を入れる
• 固定フッターナビ（fixed-bottom-bar）: 予約（オレンジ）・電話（生成り）・地図（濃色）・メニューの4つに分けたボタンを、画面下に固定する

Do's and Don'ts

Do - 地には紙のノイズ質感を必ず敷く - 伊語の欧文セリフと筆記体を、見出しの装飾として使う - 写真とタイルを少し重ね、手作りのコラージュに見せる - オレンジは予約などの行動と、ブランドの印にしぼる - 本文は小さく、行間を広く取り、余白を多めに残す

Don't - 角丸やピル型のボタンを使わない - 強い影やグラデーションのボタンにしない - 純白の地や真っ黒の文字を使わない - タイルの青や黄色を文字色に使わない - ポップな丸ゴシックや太いゴシックの見出しにしない

Page Structure

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

1. ファーストビュー（料理とお酒で店の格と味を伝える）: 料理とワインの写真を画面いっぱいに使い、左上にオレンジのロゴを置く。下端に小さなキャプションを添える
2. お知らせ（営業情報を知らせる）: ベージュの帯をファーストビューに重ねる。欧文の見出しと日付、タイトルを入れる
3. コンセプト（店名の由来と雰囲気を伝える）: 欧文の大見出し、縦書きの明朝コピー、料理の切り抜き写真、来店客の写真、タイルを組み合わせたコラージュ
4. 本場の世界観（現地の文化への想いを伝える）: 港町の風景写真を全幅で見せる。その上に欧文見出しと筆記体を重ね、下に本文を置く
5. こだわり3つ（素材・生地・焼きの品質を伝える）: 写真と番号付きカードを3回くり返す。地には街並みの写真を淡く透かす
6. メニュー導線（メニューページへ誘導する）: 写真付きのカードに欧文の『Menu』と筆記体、下線付きの和文ラベルを置く
7. 店内紹介（空間と利用シーンを見せる）: 欧文見出し、店内写真の重ね置き、利用シーンの円ラベル、手描き風の見取り図
8. 移動販売のストーリー（創業の経緯と出店情報を伝える）: 人物と窯の写真を重ね、筆記体のコピーと明朝の見出しを添える。砂色のブロックの上に枠線ボタンを置く
9. 予約・問い合わせ（予約の行動をうながす）: ベージュの面にロゴ、電話番号、オレンジの予約ボタン、キャンセルポリシーをまとめる
10. 店舗情報・地図（来店に必要な情報を示す）: 細線で区切ったリスト、SNSアイコンの枠、モノクロの地図、枠線ボタン
11. フッター（連絡先と共有ボタンをまとめる）: ロゴ、電話、予約ボタン、住所、共有ボタン、コピーライト。画面下に固定ナビを置く

Imagery

• 料理は暖色の照明で、焼き目や素材の質感に寄って撮る
• 来店客の写真は自然な笑顔で、少し黄みのある室内光にする
• 現地の港町の風景を彩度控えめにし、背景に淡く透かす
• 青×黄のマジョリカタイルやレモン柄タイルを、正方形の素材として散らす
• スタンプや古地図、羅針盤の線画を、地にごく薄く重ねる
• 見取り図は太い濃色の線とオレンジの席で、手描き風に描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では大見出しを横一行に広げ、写真とテキストを左右に互い違いに置く
• PC ではヘッダーのロゴを中央に置き、ナビを左右に分ける。右上に電話と予約ボタンを置く
• PC のこだわりは、カードと写真を2カラムで組む
• PC の店舗情報は、左に情報リスト、右に予約の面を置く2カラムにする
• SP では画面下に固定の4分割ナビを出す

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