DESIGN.md — テラコッタ地×明朝の上質イタリアン LP（Terracotta Serif Italian Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、親しみ・手作り感
• キーワード: テラコッタ・紙テクスチャ・明朝体・額縁写真・細線ボタン・縦書きコピー
• 地の質感: テラコッタ色の地に紙の繊維や水彩のにじみのような微細なテクスチャを重ねる。写真を半透明でにじませて地になじませる。
• 形: 角丸なしの直線基調。写真は黒い太枠の額縁風。ボタンは白い 1px 枠の長方形で、右端に矢印線が飛び出す。
• 温度感: 暖色。焼いたレンガや木の温かさ。

Colors

• 地はほぼ全面テラコッタの一色。紙のテクスチャで単調さを消す。
• 文字はすべて白かオフホワイト。地の上に濃い色の文字は置かない。
• 黒は写真のフレーム、メニュー帯、フッター、予約ボタンだけに使う。
• 強調色を増やさず、写真の料理の色をアクセントにする。
• 区切りは白の細線か二重線。
• page は文字 #F5ECE4 × 背景 #B6673C のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#9F5A34、4.52:1）を使う。

Typography

• 和文は明朝で統一し、ゴシックは使わない。
• 見出しは「英字小文字セリフ＋下線」の上に和文を置く 2 段構成。
• FV のコピーは縦書き 2〜3 行。
• 本文は小さめにし、字間と行間を広くとる。
• 電話番号は欧文の字間を広げて見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真ギャラリーは左右交互の段違い配置。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 18px。
• 写真はほぼ全幅、または段違いで端からはみ出させる。
• 見出しは中央揃え。本文は左揃えで両端に寄せる。
• 店舗情報は項目名と値の 2 列の表。
• 下部に 4 分割の固定ナビ（電話・予約・地図・メニュー）。

Elevation & Depth

• 影はほぼ使わない。写真の黒フレームに軽い影をつけて額縁らしく見せる程度。
• 奥行きは写真の半透明重ねとにじみで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形。ギャラリー写真は 6px 前後の黒い額縁で囲む。
• セクション境界: 直線で区切るか、写真を紙ににじむようにフェードさせる。
• 角丸は使わない。
• ボタンは白い 1px の枠線で、右端から矢印線を外へ伸ばす。
• 予約ボックスは白の二重枠線で囲む。

Components

• 細線アローボタン（button-line）: 透明な面に白 1px の枠。中央に明朝のラベル、右端には枠を突き抜ける矢印線。
• WEB予約ボタン（button-primary）: 黒い面にカレンダーアイコンと白文字。右端に白の矢印線。
• 英字＋和文見出し（heading-en-ja）: 下線つきの英字小文字セリフ見出しの下に、字間を広げた明朝の和文を置く。
• 額縁写真（photo-frame）: 黒の太枠で囲んだ食材写真。段違いに散らして配置する。
• 予約ボックス（reserve-box）: 白の二重枠の中に、問い合わせラベル、電話番号、予約ボタンを縦に並べる。
• 店舗情報表（info-table）: 罫線なしの 2 列表。左に項目名、右に値。行間は広め。
• 下部固定ナビ（fixed-nav）: 黒地を 4 分割し、アイコンと英字・和文ラベルを置く。1 つのタブだけテラコッタにして強調する。
• 黒帯の写真バナー（menu-banner）: 黒い帯の中に大きな写真を置き、中央に英字見出し・横線・線ボタンを重ねる。

Do's and Don'ts

Do - 地は全面テラコッタに紙テクスチャを重ねて統一する。 - 文字は白の明朝に揃え、字間を広くとる。 - 見出しは英字セリフ＋下線＋和文の型で揃える。 - 写真は暖色の料理・木・店内に絞る。 - CTA は線ボタンと黒の予約ボタンの 2 種類に限る。

Don't - ゴシック体の太い見出しを使わない。 - 角丸やピル型のボタンを使わない。 - 寒色や蛍光色をアクセントにしない。 - 白い背景のセクションを作らない。 - ドロップシャドウの強いカードを並べない。

Page Structure

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

1. ファーストビュー（店の世界観と名前を伝える）: 上部中央に手描きロゴ、大きな料理写真に欧文店名を重ねる。下に店内写真をにじませ、縦書きコピーを置く。
2. 店の紹介（店のコンセプトを伝える）: 白い明朝の本文ブロック。
3. 食材ギャラリー（素材へのこだわりを見せる）: 額縁写真を左右段違いに散らし、続けて全幅の料理写真を 2 枚重ねる。
4. シェフ紹介（作り手の経歴で信頼を作る）: 英字＋和文見出し、人物写真、経歴の本文、線ボタン。
5. 外観写真（店の雰囲気と場所の目印を伝える）: 全幅の外観写真を昼と夜で縦に並べる。
6. 限定の訴求（少人数制の特別感を伝える）: 下線つきの見出し 2 行、本文、線ボタン。
7. 予約案内（予約の行動を促す）: 木の看板写真をにじませた地の上に、二重枠の予約ボックス、注意事項、キャンセル規定を置く。
8. メニュー導線（メニューのページへ誘導する）: 黒帯の中のワイン写真に、英字見出しと線ボタンを重ねる。
9. フロア紹介（席と空間を伝える）: 昼・夜の額縁写真を 2 列に並べ、線画の間取り図と説明文を添える。
10. 店舗情報（アクセスと基本情報を伝える）: ロゴ、SNS アイコン、予約ブロック、規定、2 列の情報表、モノクロ地図、線ボタン。
11. お知らせ（最新情報を伝える）: 英字見出しの下に日付と件名、線ボタン。
12. フッター・固定ナビ（シェアと常時の予約導線）: 黒地にコピーライトとシェアボタン。画面下に 4 分割の固定ナビ。

Imagery

• 料理は寄りで撮り、ソースの艶やパスタの質感を暖色で見せる。
• 食材写真は暗い背景で撮り、黒い額縁で囲む。
• 店内・外観は木やオレンジの壁が映える自然光の写真。
• 写真の端は紙ににじむ水彩風のフェードで地になじませる。
• 白い細い曲線を装飾として流す。
• ロゴは手描き風のイラスト。地図はモノクロにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の写真を左寄せの大きなサイズにし、店名を重ねる。右上に円形のメニューボタンを置く。
• PC では FV の下に横並びのグローバルナビを細線で挟んで置く。
• PC ではシェフ紹介を写真左・本文右の 2 カラムにする。
• PC の店舗情報は地図左・情報右の 2 カラム。
• 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 行書くと起動時に読み込まれる。