DESIGN.md — 和紙地×墨黒×えんじの和牛焼肉店 LP（Washi Mincho Japanese Beef Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル
• キーワード: 和紙テクスチャ・縦書き明朝・余白多め・墨黒の差し色・写真の段違い配置・細い斜線
• 地の質感: 生成りの和紙の繊維感が全面にあり、黒い面には墨の揉み紙のようなざらつきがある。
• 形: 角丸なしの四角。装飾は極細の罫線・斜線・太い墨色の円弧・角だけ切れたフレーム。
• 温度感: 暖かみのある生成りと、黒・焦げ茶で落ち着いた温度感。

Colors

• 地は全面を生成りの和紙テクスチャにし、白ベタは使わない。
• 見出し・装飾は墨黒一色で、色付きの見出しは作らない。
• えんじ色は予約ボタンと固定フッターの予約ボタンにだけ使う。
• 黒い面は観光・ランチのコピー帯とフッターに限定し、揉み紙の質感を付ける。
• 色の情報量は料理写真に任せ、UI 側は無彩色でまとめる。

Typography

• 見出しは明朝で字間 0.2em 以上。和の余韻を出す。
• ひらがなの送りや助詞は一回り小さくし、漢字との大小差でリズムを付ける。
• キャッチは縦書きにし、写真の横や上に重ねる。
• 本文は小さめのゴシックで、行間 2 倍以上にして軽く見せる。
• 英字ラベルは大文字で字間を大きく、見出しの補助として小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右どちらかに寄せた段違い配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで寄せ、反対側に余白か縦書きコピーを置く。
• 見出し、写真、本文、右矢印付きのリンクの順に 1 ブロックを作る。
• セクション間は 80〜120px と大きく取る。
• 写真にコピー面をかぶせ、少しはみ出させて奥行きを出す。
• 店舗情報はラベルと値を縦に積み、下に罫線を引くリストにする。

Elevation & Depth

• 影はほぼ使わない。平面と質感の差で階層を作る。
• 肉の写真だけに切り抜きの柔らかい影を落とす。
• 囲みは極細の黒線フレームで、影は付けない。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。画面端に寄せた非対称の切り抜き。肉は背景を抜いた切り抜き。
• セクション境界: 直線で切り替える。背景をまたぐ極細の斜線と、太い墨の円弧を装飾に置く。
• 角丸はすべて 0。
• フレームは四隅や辺の一部を途切れさせて抜け感を出す。
• 円弧は筆で描いたような太い黒の弧を、画面端からはみ出させる。

Components

• 予約ボタン（button-reserve）: えんじ色の長方形。左に白いカレンダーアイコン、明朝の白文字を置く。
• 矢印テキストリンク（link-arrow）: 中央にリンク名、右端に細い右向き矢印。下に全幅の細い罫線を引く。
• 縦書きキャッチ（vertical-catch）: 明朝の縦書き 2 行。間に縦の細線を挟み、写真の脇や上に置く。
• 黒地コピーパネル（dark-copy-panel）: 写真に重ねる揉み紙調の黒い面。前置き、大見出し、下線付きの英字ラベルを中央揃えで置く。
• 途切れ枠の囲み（broken-frame）: 細い黒線の枠で、左右の辺を途中で切る。中は明朝見出しと中央揃えの説明文。
• お知らせボックス（news-box）: 細い灰色の枠の中に、欧文セリフの見出し、日付、一覧へのリンクを置く。
• 店舗情報リスト（info-list）: 項目名と内容を 2 段で並べ、罫線で区切る。
• 固定下部ナビ（sticky-footer-nav）: 黒地にアイコン付きのタブを並べ、問い合わせは生成り地、予約はえんじ地にする。

Do's and Don'ts

Do - 見出しは明朝で字間を広く取り、余白を惜しまない。 - 写真は左右交互に段違いで置き、縦書きコピーを添える。 - 和紙と揉み紙の質感を地に必ず敷く。 - 強い色は料理写真とえんじの予約ボタンだけに絞る。 - 装飾は極細線、斜線、墨の円弧に限る。

Don't - 角丸やピル型のボタンを使わない。 - 鮮やかなグラデーションや原色の帯を入れない。 - 太いゴシックで大きく訴求する煽りデザインにしない。 - ドロップシャドウの付いたカードを並べない。 - えんじ色を見出しや装飾に流用しない。

Page Structure

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

1. ファーストビュー（店の格と料理の魅力を一目で伝える）: 左上にロゴ、右と左下に料理写真を段違いで置き、余白に縦書きキャッチと縦の細線を入れる。
2. お知らせ（最新情報を控えめに示す）: 細い枠のボックスに欧文見出し、日付、一覧へのリンクを並べる。
3. 素材のこだわり（ブランド和牛の価値を訴求する）: 明朝の大見出しに英字ルビを添え、認証マークと切り抜いた霜降り肉を大きく見せる。本文と矢印リンクを続ける。
4. 職人・利用シーン（手仕事と使い方を想起させる）: 職人の写真を左に寄せ、背景をまたぐ斜線と、字の大小を付けた横一行コピーを置く。
5. ディナー紹介（焼肉ディナーの魅力を伝える）: 焼き網の全幅写真に縦書きコピーを重ね、明朝見出し、重箱写真、本文、墨の円弧装飾、矢印リンクの順に並べる。
6. コース紹介（特別な席向けのコースを案内する）: 縦書きの英字ラベル、大見出し、スライダー写真、本文、矢印リンクの順に並べる。
7. ランチ紹介（観光客のランチ需要を取り込む）: 観光地の写真に黒地のコピーパネルを重ね、定食写真と本文を続ける。
8. テイクアウト（弁当の需要を案内する）: 濃い和紙地の面を途切れ枠で囲み、見出し、弁当写真、本文、リンクを中央に置く。
9. 店舗情報・予約（予約・問い合わせへ誘導する）: ロゴ、電話番号、えんじの予約ボタン、罫線区切りの情報リストを並べる。
10. 注意事項・アクセス（キャンセル規定と道順を示す）: 途切れ枠の囲みを 2 つ重ね、道順は点線とドットのステップで示す。下に地図を置く。
11. フッター（情報の再掲と予約導線）: 黒い揉み紙地に生成りの店舗カードを浮かせ、住所・営業時間・SNS 共有を置く。下に固定ナビを付ける。

Imagery

• 料理は温かい照明で寄りに撮り、霜降りの赤と焼き色を鮮やかに見せる。
• 肉の塊は背景を抜いた切り抜きにし、柔らかい接地影を付ける。
• 器は漆の重箱・和食器・木の盆を使い、和の素材感を出す。
• 焼き網の煙や鉄板の炎など、シズル感のある瞬間を全幅で使う。
• 職人の手元と地域の名所の写真で、人と土地の物語を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真と縦書きコピーを左右に大きく散らす雑誌的な非対称レイアウトにする。
• PC は本文ブロックを写真の横に 2 カラムで置き、一部の本文は縦書きにする。
• PC はヘッダーにグローバルナビ、電話番号、予約ボタンを常時表示する。
• 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 行書くと起動時に読み込まれる。