DESIGN.md — 和紙と焦げ茶の赤提灯居酒屋 LP（Torn Washi Rustic Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、レトロ、力強い・インパクト、親しみ・手作り感
• キーワード: 和紙テクスチャ・破り紙の境界・縦書き筆文字・赤提灯・炭火の写真・焦げ茶の木枠
• 地の質感: 生成りの和紙のザラつき、皺紙、木目の外枠、暗いセクションには黒い布地風の質感
• 形: 破いた紙の不規則な縁、角が少し丸い長方形のボタン、円形に切り抜いた写真、二重線の額縁
• 温度感: 暖色寄り。焼き色・朱赤・焦げ茶で、炭火の熱を感じる温度

Colors

• 地は和紙色、ページ左右は焦げ茶の木目で額装する
• 暗い写真帯や情報パネルで明暗のリズムを作る
• 朱赤はボタンと固定バーだけに使う
• 見出しの強調語 1〜2 文字を赤茶か金にし、ずらした影を付ける
• 寒色は使わない。写真も暖色に寄せる
• 暗い面の文字は生成り白にする

Typography

• 見出しは縦書きと横書きを混ぜ、大きさにメリハリを付ける
• 強調語は 1.3 倍に大きくし、赤茶でずらした影を付ける
• 見出しには白フチか二重影を付けて写真から浮かせる
• 本文は小さめのゴシックで行間 2.0
• 墨帯の見出しは明朝体の白文字で、字間を広めにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き見出しを左右に重ねる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ページ左右に約 6px の木目の枠を通す
• 写真はセクション幅いっぱいに置き、見出しを重ねる
• 本文ブロックは左右 24px の余白を取る
• 店舗情報は 2 列の表にして、細い区切り線を引く
• ボタンは幅約 60% で中央に置く
• 画面下に TEL・予約・地図・MENU の 4 分割バーを固定する

Elevation & Depth

• 影は破り紙の縁の淡い影程度に抑える
• 見出しの文字に付けるずらし影が主な立体表現
• ボタンは内側に細い二重線を入れ、ほぼフラットにする
• 写真は紙を重ねて置くことで前後感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形、円形の切り抜き、破り紙の不規則な縁
• セクション境界: 破いた和紙の縁、半紙のちぎれ、湾曲した紙の端
• ボタンは角丸 4px の長方形で、内側に細い枠線を入れる
• 暗いカードは二重線の額縁で囲む
• お知らせのサムネイルは円形にする
• 墨の筆帯の上に白文字を乗せる

Components

• 朱赤ボタン（button-primary）: 内側に白い細線の枠があり、右端に小さな三角アイコンを付ける
• 墨の筆帯（brush-band）: 斜めにかすれた黒い帯に白い明朝のリードを乗せる
• 吹き出しバッジ（badge-speech）: 赤茶の線で描いた丸い吹き出しに、短い強調語を入れる
• 赤いリボン札（ribbon-tag）: 斜めに置いた赤い札に白文字で、新しさを示す
• 額縁カード（frame-card）: 暗い写真の上に二重線の枠を重ねる。上部に波括弧の飾り線、明朝の見出し、本文、ボタンの順に並べる
• 予約パネル（info-panel）: 焦げ茶の角丸パネルに電話番号・予約ボタン・注意書きを入れる
• 店舗情報の表（info-table）: 項目名と内容の 2 列。行ごとに細い横線で区切る
• 下部固定ナビ（fixed-bottom-bar）: 左半分は赤（TEL・予約）、右半分は焦げ茶（地図・MENU）。アイコンの下に小さな文字を置く
• 縦書きタイトル札（vertical-title-tag）: 写真の上に、ベージュの縦長の札と太い縦書きのセクション名を重ねる

Do's and Don'ts

Do - 地の和紙テクスチャと左右の木目枠は全体で統一する - セクションの境界には破り紙の縁を使う - 料理写真は湯気や焼き色が見える寄りのアングルで撮る - 見出しの強調語には色と影を付ける - 暗い写真帯の文字は白にする - 赤提灯や暖簾のモチーフを添える

Don't - フラットな白地や寒色を使わない - ピル型や大きな角丸のボタンにしない - 細いゴシックだけで見出しを作らない - 朱赤をボタン以外の広い面に使わない - 写真を青白く補正しない - 直線のきれいすぎる区切りを多用しない

Page Structure

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

1. ファーストビュー（店の雰囲気と名物を一目で伝える）: 上部に暖簾と提灯の店名。焼鳥の寄り写真に縦書きの筆文字キャッチを大きく重ね、下を破り紙にする
2. 店舗外観（入りやすさを伝える）: 夜の外観写真を全幅で置き、手書き風の吹き出しで誘う
3. コンセプト紹介（どんな店かを伝える）: 墨の筆帯でリードを置き、大見出しの一語を丸囲みで強調。下に本文と酒器の写真
4. 名物メニュー（主力料理を訴求する）: 炭火の写真の上に縦書きの短い見出し、皿写真、太い見出しと本文
5. サブメニュー（その他の人気料理を見せる）: 食材写真と吹き出しバッジ。縦書き見出しと料理写真を互い違いに置く。リボン札＋円形写真の新名物も載せ、メニューボタンへつなぐ
6. 宴会訴求（コース・宴会の利用を促す）: 暗い料理写真の全幅帯に白い明朝の大見出しと本文、赤ボタン
7. 利用シーン（一人飲み・昼飲みなどを提案する）: 額縁カードを 2 枚縦に並べ、端に縦書きの大文字を重ねる
8. お知らせ（最新情報を伝える）: 円形サムネイル、日付、タイトルを 2 件並べ、一覧ボタンを置く
9. 店舗情報（予約と来店情報を伝える）: 外観写真に縦書きの札を重ねる。ロゴ、予約パネル、情報表、地図、地図ボタンの順
10. フッター（連絡先の再掲とシェア）: 黒い布地風の背景に提灯写真を薄く敷き、ロゴ・電話・予約・SNS・概要を載せる。下部ナビは固定

Imagery

• 料理は炭火・湯気・焼き色が出る寄りの暖色写真にする
• 外観は夜に撮り、提灯の灯りを主役にする
• 暗いセクションには料理写真を落とし気味に敷く
• 提灯・暖簾・酒器のカットを切り抜いて装飾に使う
• 破いた和紙やクラフト紙を重ねて質感を出す
• 手書きの線で描いた吹き出しを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に置いた 1 カラムを広げ、写真と見出しを左右 2 列に並べる
• PC のヘッダーは店名・電話・予約ボタンを中央に置き、右側に縦書きのナビを並べる
• 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 行書くと起動時に読み込まれる。