DESIGN.md — 和紙ベージュ×焦茶の海鮮居酒屋 LP（Washi Beige and Dark Wood Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: 和紙・木目の焦茶・朱赤・明朝・縦書き・青海波
• 地の質感: ベージュ地に和紙の繊維感と薄い青海波（扇の連続模様）・波紋の透かし。茶帯は粗い紙やすり調のザラつき
• 形: 基本は角丸なしの矩形。茶帯の上下は大きな円弧でえぐる。枠は太い焦茶の罫線
• 温度感: 暖色寄り。照明の暖かいアンバーと生成り色

Colors

• 地はベージュ和紙と焦茶の木目帯を交互に置き、リズムを作る
• 朱赤は CTA ボタンと小さな差し色だけに使う
• 茶帯の上は白文字、ベージュ地の上は墨黒文字
• 写真は暖色の照明で、地色の茶系となじませる
• 純白・純黒の広い面は使わず、生成りと焦茶にとどめる

Typography

• 見出しはすべて明朝で、字間を広めにとる
• 見出しの中の助詞（の・を・が・な）は 6〜7 割の大きさに下げ、名詞を大きくする
• キーワード 1〜2 文字を白い角枠に入れて強調する
• 縦書き短冊でキャッチを 2 行並べる
• 本文は小さめのゴシックで、行間を 2.0 に広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に 15px ほど余白を残すか、全幅で裁ち落とす
• 見出しは中央揃え。下に細い二重線か点線を引く
• カードは縦に 3 枚、間を 20px 空けて積む
• 茶帯セクションは上下を円弧で切り、ベージュ地とつなぐ
• 店舗情報は 2 列の定義リスト。行は細線で区切る

Elevation & Depth

• 白和紙カードにうっすら影（0 2px 6px rgba(0,0,0,.12)）
• ボタンは焦茶の 1px 枠で、影はなし
• 写真ブロックは太い焦茶枠で縁取り、浮かせない

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。料理の写真は切り抜きにして地の上に置くことも
• セクション境界: 茶帯の上下を大きな円弧でえぐる。ほかは直線で切り替える
• 角丸は使わない
• 写真ラベルには波括弧のような曲線の手書き線を添える
• 枠は 4〜5px の焦茶の太罫線

Components

• 朱赤の矩形ボタン（button-primary）: 朱赤の面に焦茶の 1px 枠。明朝の白文字で、右端に » を付ける
• 縦書き短冊（vertical-tag）: 茶色の細長い短冊に白の明朝を縦書きにする。2 本を上下にずらして並べる
• 利用シーンカード（scene-card）: 白い和紙カード。中央に明朝の見出し、その下にゴシックの本文
• 角枠の強調文字（boxed-kanji）: 見出しの中の 1 文字ずつを白い四角枠に入れる
• 写真リンクバナー（photo-banner）: 暗くした写真に焦茶の太枠。白の明朝の見出しと、丸の中に » のアイコン
• 太枠の案内ボックス（framed-box）: グレージュ地に焦茶の太枠。中に見出し、イラスト地図、吹き出しを入れる
• 茶色の吹き出し（speech-callout）: 焦茶の四角に三角のしっぽ。白の明朝で補足を書く
• 店舗情報表（info-table）: 左に項目名、右に内容。行の間を細線で区切る
• 下部の固定ナビ（sticky-footer-nav）: 焦茶の地。中央に朱赤の電話・予約アイコンボタン、左右に地図アイコンとメニューアイコン

Do's and Don'ts

Do - ベージュ和紙と焦茶帯を交互に置く - 見出しは明朝で、助詞を小さくする - 料理は暖色光で湯気やツヤが出るようにアップで撮る - CTA は朱赤の矩形に » を付けた形でそろえる - 地には青海波や波紋をごく薄く敷く

Don't - 角丸やピル型のボタンを使わない - 青や緑などの寒色の面を入れない - ポップな丸ゴシックを使わない - 朱赤を広い面に使わない - 純白のフラットな背景にしない

Page Structure

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

1. ファーストビュー（看板料理の写真で食欲と雰囲気を伝える）: 青海波の地に筆文字のロゴ。その下に料理のアップ写真を大きく置く
2. コンセプト（どんな店かを伝える）: 朱赤の帯のボタン、切り抜きの料理写真と縦書き短冊。明朝の大キャッチの一部を角枠で囲む
3. 店内紹介（空間と概要を伝える）: 店内写真と小さめの本文を数段落
4. 利用シーン（使い道を示す）: 明朝の見出しの下に二重線。白い和紙カードを 3 枚縦に積む
5. 名物・こだわり（看板商品を訴求する）: 円弧で切った茶帯に、全幅の写真 2 枚と縦書きのラベル。点線で挟んだ大見出しと CTA
6. コース案内（宴会の需要を取り込む）: 料理を集めた写真の上に白い帯の見出し。続けて明朝の大見出し、CTA、写真バナー
7. ドリンク（酒の種類の豊富さを示す）: 暗い背景のボトル写真。茶帯の上に角枠の強調見出しと、ボトル画像付きの CTA
8. 駐車場案内（アクセスの不安を減らす）: 太枠ボックスにイラスト地図、写真付きの吹き出し、地図リンク
9. お知らせ（更新情報を見せる）: サムネイルと日付のリスト、一覧ボタン
10. 店舗情報（予約と基本情報）: 暗い写真の見出し帯。ロゴ、電話と予約のボックス、定義リストの表、カッコ形の枠の注意書き、地図
11. フッター（シェアと固定ナビ）: 茶帯にシェアボタンとコピーライト、下部に固定ナビ

Imagery

• 料理は暖色の照明でアップ、背景は暗く落とす
• 刺身や鍋などは切り抜いてベージュ地に重ねる
• 店内は夜の暖かいアンバー光で、少し暗く撮る
• 酒瓶は黒背景に並べ、映り込みを生かす
• 地図は茶系の線画イラストで描き、朱でルートを示す
• 地紋は青海波・扇・波紋を薄く透かす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメニューを縦書きにしてヘッダー右に並べ、電話と予約ボタンを置く
• PC の FV は写真の横長全幅と、縦書きキャッチのコラージュ
• PC の利用シーンカードは 3 列で、上下に少しずらして並べる
• PC の名物セクションは大きな茶色の円の中に、写真 2 枚を左右に置く
• PC のドリンクと駐車場は、写真と文字の 2 カラム
• PC の店舗情報表は 2 列に並べる

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