DESIGN.md — クラフト紙×朱赤×焦げ茶のレトロ大衆酒場 LP（Retro Izakaya Kraft and Lantern LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、和風、力強い・インパクト、親しみ・手作り感
• キーワード: クラフト紙・赤提灯・放射線・縦書き明朝・木目ダーク・昭和酒場
• 地の質感: くしゃっとしたクラフト紙、和紙、暗い木目、筆でかすれた朱色の塗りを重ねる
• 形: 角丸なしの四角が基本。傾けた短冊カード、リボン形の帯ボタン、吹き出し型の見出しを使う
• 温度感: 暖色寄りで温かい。夜の酒場のような灯りを感じる色温度

Colors

• 地はクラフト紙の色と焦げ茶の木目を交互に置き、セクションごとに明暗を切り替える
• 朱赤は見出しの一部の語、筆の塗り、CTA の帯だけに使う
• ダーク面の文字は生成りの白、クラフト面の文字は茶黒にする
• 電話や応募の大きいボタンは金色の和紙調にして、朱赤の CTA と役割を分ける
• 見出しの白文字には朱赤のずらし影を付けてレトロな看板らしくする
• 放射線背景は淡い朱色と生成りの 2 色で作る

Typography

• 見出しは極太の明朝にし、縦書きを多めに使う
• 見出しでは強調したい 1〜2 語だけを朱赤にして大きくする
• 白抜きの見出しには朱赤か黒のずらし影を付ける
• 本文は小さめの太字ゴシックで、行間を 2 前後と広めに取る
• 数字は見出し内で特に大きくして目を引かせる
• 電話番号はセリフ体で大きく表示する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か左右に余白を取った配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と縦書き見出しを重ねて非対称に組む
• 本文ブロックは左右 20px 前後の余白で置く
• セクション間は背景の切り替えで区切り、余白は大きめに取る
• 短冊カードは傾けて互い違いに配置する
• 店舗情報は 2 列の定義リスト表にし、行ごとに細線で区切る
• 画面下部に 4 分割のナビバーを固定する

Elevation & Depth

• 影はほぼ使わず、紙の重なりと質感で奥行きを出す
• 短冊カードと提灯にはごく弱いドロップシャドウを付ける
• 見出しの文字にずらし影を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い全幅写真、または破れた紙の縁で切り抜く
• セクション境界: 破れた紙の縁、筆の塗り、提灯の並び、木目への直線的な切り替え
• 角丸は使わない
• CTA は左右の端が矢羽根形になったリボン帯にする
• 短冊カードは朱色の枠線で囲み、上部に番号バッジを置く
• 見出しの一部は吹き出し枠で囲む

Components

• 朱赤の帯ボタン（button-primary）: 左寄せのラベルと右端の » で構成した四角い CTA
• リボン型リンク（ribbon-link）: 両端が矢羽根形に切れた朱赤の帯。名物写真の上に重ねる
• 短冊カード（tanzaku-card）: 和紙地に朱枠を付けたカード。傾けて置き、筆文字のコピーを縦書きにする
• 番号バッジ（number-badge）: 短冊の上端に付ける朱赤の盾形バッジで、白の数字を入れる
• 吹き出し見出し（speech-heading）: 白地に黒の太枠を付けた吹き出し。下線に朱の筆線を引く
• 金和紙の電話パネル（tel-panel）: 金色の和紙調の面に、電話アイコンと大きな番号を載せる
• 縦書き小ラベル（vertical-label）: 店舗名などを入れる生成りまたは茶色の小さい縦長札
• 店舗情報表（info-table）: 項目名と内容の 2 列で、行ごとに細線を引く
• 固定下部ナビ（sticky-nav）: 予約、店舗 2 つ、メニューの 4 分割バー

Do's and Don'ts

Do - クラフト紙と木目の質感テクスチャを必ず敷く - 見出しは極太の明朝で、縦書きと横書きを混ぜて使う - 赤提灯・放射線・筆の塗りで昭和レトロな装飾を入れる - 料理写真は大きく寄りで撮り、照りが伝わるようにする - CTA は朱赤の四角い帯で統一する

Don't - 角丸やピル型のボタンを使わない - 寒色や彩度の高いパステルを入れない - フラットな単色ベタだけの背景にしない - 細い欧文サンセリフを見出しに使わない - 朱赤を本文や広い面に多用しない

Page Structure

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

1. ファーストビュー（看板料理で食欲を引き、店の第一印象をつくる）: クラフト紙のヘッダーにロゴを置き、その下に料理の寄り写真を全幅で配置する
2. お知らせ（店舗ごとの最新情報を伝える）: 朱の筆塗りを背景に、見出し・店舗写真・日付・more リンクを並べる
3. コンセプト（店の想いと使い方を伝える）: 提灯の写真に縦書きの大見出しを重ね、その下に中央揃えの本文を置く
4. 選ばれる理由（通いたくなる理由を 3 つ示す）: 放射線の背景に吹き出し見出しと大きな数字の見出しを置き、傾けた番号付き短冊を 3 枚並べる
5. 名物紹介（看板メニュー 2 品を訴求する）: 上端に提灯を並べて木目ダーク面に切り替え、縦書きの料理名・料理写真・リボン型リンク・説明文を配置する
6. コース案内（宴会の需要を取り込む）: 破れた紙の縁で切り抜いた宴会写真に大見出しを重ね、帯ボタンを 2 つ置く
7. 利用シーン提案（出張客や一人飲みの客を呼び込む）: 店内写真とクラフト紙の地に、縦書きの見出しと金色の括弧線を組み合わせ、最後に帯 CTA を置く
8. 求人（スタッフを募集する）: 暗い写真の背景を細枠で囲み、白文字の本文と金色の和紙パネル 2 枚を置く
9. 予約・店舗情報（予約へ誘導し、アクセス情報を伝える）: ロゴ・電話番号・WEB 予約ボタン・SNS アイコン・情報表を、店舗ごとに放射線背景の色を変えて並べる
10. フッター（シェアボタンと規約を置く）: クラフト紙の地にシェアボタンとコピーライトを置き、下部にナビを固定する

Imagery

• 料理は暖色の照明で寄りから撮り、器や木の質感も画面に入れる
• 店内や客の写真は夜の賑わいと笑顔が伝わるものを選ぶ
• 赤提灯はイラストまたは写真の切り抜きで横一列に並べる
• 朱色の筆塗りやかすれた墨のストロークを装飾に使う
• クラフト紙、和紙、木目の背景テクスチャを使う
• 昭和レトロな放射線（旭日風）の背景を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では 2 店舗の名物や情報を左右 2 カラムで並べる
• PC ではナビを上部の縦書き短冊タブにし、右上に予約パネルを固定する
• PC ではコンセプト本文を写真上に縦書きで重ねる
• SP は 1 カラムに縦積みし、下部ナビを固定する
• 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 行書くと起動時に読み込まれる。