DESIGN.md — クラフト紙×焦げ茶の和風居酒屋 LP（Kraft Paper Japanese Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、親しみ・手作り感
• キーワード: クラフト紙・縦書き明朝・焦げ茶の木目・シズル写真・夜の居酒屋
• 地の質感: 地は全面にクラフト紙の繊維テクスチャ。縦縞の和紙柄の帯と筆の円モチーフを薄く重ねる。フッターは黒い革・石のようなざらつき。
• 形: 角丸はほぼ使わず四角。写真は矩形でずらして重ね、木札形の短冊タグを使う。
• 温度感: 暖色寄りで、灯りのような温かみがある

Colors

• 地はクラフト紙の茶色で、明暗違いの紙色を交互に置いてセクションを区切る
• ボタンはすべて焦げ茶の木目調に白文字で、ほかの色は使わない
• 文字は墨色か焦げ茶だけ。純粋な黒は見出しだけに使う
• 地酒などを見せる写真セクションは暗い木の色で、白文字を重ねる
• フッターと固定メニューは黒の革目調でページを締める
• 彩度の高い色は料理写真にしか出さない

Typography

• 見出しは明朝体。重要な見出しは縦書きにし、横に細い縦線を添える
• 本文は細いゴシックで、行間を2倍以上に広く取る
• 見出しの一部の漢字を一回り大きくして強弱をつける
• 写真の上に重ねる料理名は白の縦書き明朝にする
• 電話番号は欧文セリフに受話器アイコンを付けて大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き見出しを左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 料理写真は画面幅いっぱいに置き、その下に本文ブロックを続ける
• 縦書き見出しと写真は左右に分け、一部を重ねる
• ボタンは中央に置き、幅は画面の約半分にする
• 店舗情報は2列の表にし、行ごとに線で区切る
• 紙色の違う帯でセクションの切り替わりを示す

Elevation & Depth

• 影はほとんど使わず、紙と写真の重なりで奥行きを出す
• 皿の写真は切り抜きにし、うっすら影を落とす
• 縦縞和紙柄のブロックを写真の背後にずらして置く

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切る。料理の皿だけは切り抜いて紙の地に直接置く
• セクション境界: 直線で切り替え、紙色の帯や青海波の細い帯を境界に使う
• ボタンは角丸なしの横長の長方形
• 利用シーンを書く短冊は木札のような縦長の形
• 細い横線を見出しの上下に引いて挟む
• 筆で描いた円を背景に薄く敷く

Components

• 木目調CTAボタン（button-primary）: 焦げ茶の木目の長方形に、白い明朝のラベルと右端の丸矢印アイコン
• 縦書き見出し（vertical-heading）: 大きな明朝の縦書きに細い縦線を添え、写真の横に重ねる
• 上下線つき見出し（lined-heading）: 2行の明朝見出しを、細い横線で上下から挟む
• 写真上の料理名（photo-caption-overlay）: 全幅のシズル写真の端に白い縦書き明朝を重ねる
• 利用シーン短冊（scene-tag）: 紙色の縦長の札に縦書きで利用シーンを書き、4〜5枚並べる
• 電話番号ブロック（contact-block）: 横線で挟んだ小さなラベルの下に、大きな電話番号とSNSアイコンを置く
• 店舗情報テーブル（info-table）: 左に項目名、右に内容を置く2列の表。行は線で区切る
• 固定下部ナビ（fixed-bottom-nav）: 木目調で3つに分けた固定バー（電話・地図・メニュー）

Do's and Don'ts

Do - 地は全面にクラフト紙のテクスチャを敷く - 見出しは明朝体にし、要所は縦書きにする - 料理写真は湯気・焼き目・油のつやなど、シズル感のあるものを大きく使う - ボタンは焦げ茶の木目調に統一する - 紙色の帯や和紙柄で、和の温かみを重ねる

Don't - 白い地や彩度の高い色の面は使わない - ピル型や丸みの強いボタンにしない - ポップな丸ゴシックやイラストを使わない - 強いドロップシャドウやグラデーションのボタンにしない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（店の看板料理と雰囲気を一目で伝える）: 紙の地の中央に筆文字のロゴ。切り抜いた料理の皿を2枚ずらして重ね、左端に縦書きの短い説明を添える
2. お知らせ（最新情報を届ける）: 明朝の見出しの下に、サムネイル・日付・タイトルを横に並べる。一覧へのリンクには線を引く
3. コンセプト（店の楽しみ方を伝える）: 縦書きの大見出しと客席の写真を左右に重ね、その下に横書きの大見出しと本文を続ける
4. こだわり（看板料理3品の魅力を伝える）: 上下線つきの見出しのあと、全幅の写真に縦書きの料理名を重ね、本文と交互に並べる。最後にメニューへのボタン
5. 宴会コース（団体での利用を促す）: 縦書きの見出しを料理写真に重ね、その下にボタンを置く
6. 空間の案内（席の数や貸切に対応できることを伝える）: 店内の写真の背後に和紙柄をずらして敷き、見出し・本文・ボタンを続ける
7. お酒の紹介（地酒の品ぞろえを伝える）: 暗い木の色の背景に酒瓶と料理の写真を置き、白文字の見出しと本文、ボタンを重ねる
8. 利用シーン（さまざまな使い方を提案する）: 散らばった写真の上に半透明の紙のパネルを置き、見出し・木札形の短冊・ボタンを並べる
9. 店舗情報（予約と来店につなげる）: 外観写真に筆の刷毛跡と白い見出しを重ね、ロゴ・電話・SNS・情報テーブル・地図・地図ボタンを続ける
10. フッター（連絡先を再掲し、ページを締める）: 黒い革目調の地にロゴ・電話・簡易の店舗情報・コピーライト・シェアボタンを置き、下部ナビを固定する

Imagery

• 料理は暗めの背景の上で、温かい色の照明を使い、湯気・焼き目・油のつやを近くから撮る
• 陶器の皿や笹の葉など、和の器を真上か斜め上から撮り、切り抜いて紙の地に置く
• 店内と客席は電球色の灯りで、自然に楽しむ人物を写す
• クラフト紙・縦縞の和紙・筆の円・刷毛跡を装飾に使う
• 外観は夜の灯りを生かして撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは写真と縦書きテキストを左右2カラムで重ね、雑誌のようなレイアウトにする
• PCではヘッダー右側に縦書きのナビと電話番号を置く
• PCのこだわりセクションでは、全幅の写真の上に縦書きの本文を直接重ねる
• PCの店舗情報は、左に地図と写真、右に情報テーブルの2カラムにする
• 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 行書くと起動時に読み込まれる。