DESIGN.md — 墨色と生成りグレーの和モダン居酒屋 LP（Monochrome Ink Brush Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク
• キーワード: 墨・筆文字・縦書き・雲文様・モノトーン・夜の灯り
• 地の質感: 明るいグレー地に、薄墨の雲文様と細かいノイズを重ねる。黒の面はわずかにざらついた質感にする。
• 形: 写真は角丸の小さい矩形にする。ボタンはピル型。円形のマスクと八角形の紋章を装飾に使う。
• 温度感: 背景は無彩色で冷たい。写真の電球色と焼き色で温かさを補う。

Colors

• 地は明るいグレー2段階と漆黒の3色を交互に切り替える。
• 有彩色は写真だけにする。UI に色を足さない。
• 主ボタンは黒地に白文字。写真の上や黒帯の近くでは白地に黒文字の線ボタンにする。
• 黒の面の上は白文字と薄グレーの線画だけにする。
• 罫線は薄いグレーの1px で、本文の各行の下に引く。
• 地図はグレースケールにしてモノトーンにそろえる。

Typography

• 文字はすべて明朝にする。ゴシックは使わない。
• 主役の一語だけを太い筆文字で極端に大きくし、ほかの文字は細い明朝で小さくする。
• メインコピーは縦書きで1文字ずつ積む。
• 本文は小さめにして字間を広く取る（0.1em 以上）。
• ボタンのラベルは字間を0.3em ほど広げる。
• 欧文の添えコピーはセリフ体のイタリックにせず、細めに組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。料理は横スクロールのカルーセル。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右5%の余白を残して置き、要所では画面いっぱいに広げる。
• 縦書きのコピーのまわりは上下に大きく空ける（150px 以上）。
• ボタンは幅85%前後で中央に置き、縦に並べるときは間隔を16px にする。
• 店舗情報は項目名に下線を付け、値を1字下げて並べる。
• 画面下に4分割の固定ナビを置く。

Elevation & Depth

• 影は使わない。面の色の切り替えで階層を出す。
• 写真の上の文字は暗めのオーバーレイで読ませる。
• 固定ナビは黒地に白アイコンにし、細い縦線で区切る。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 矩形に小さい角丸を付ける。料理カードは縦長、ブランド部分は円形にマスクする。
• セクション境界: 直線で色面を切り替える。黒帯の中に大きな白い円を置いて区切りにする。
• ボタンはすべて完全なピル型にし、右端に小さな矢印を付ける。
• 装飾の紋章は八角形の枠にする。
• 縦書きのラベルは白い長方形のタブにして、写真の右上にかける。

Components

• 黒ピルボタン（button-primary）: 黒地に白い明朝のラベル、右端に矢印。予約やメニューへの導線に使う。
• 白ピル線ボタン（button-outline）: 白地に黒の細い枠線と黒文字。写真の直下に縦に2つ並べる。
• 縦書きの大コピー（vertical-copy）: 細い明朝を1字ずつ縦に積み、途中の主役の一字だけ巨大な筆文字にする。背景に雲文様を敷く。
• 黒地の料理カード（menu-card）: 縦長の黒いカード。左上に筆文字で料理名を縦書きし、中央に料理写真を置く。横スクロールで次のカードを少し見せる。
• 紋章付きの見出し（section-emblem-title）: 八角形の紋章アイコンの下に、明朝の大きい見出しを置く。
• 縦書きの白タブ（vertical-tab）: 写真の右上に、白い縦長のタブを置いてセクション名を縦書きする。
• 店舗情報リスト（info-list）: 項目名に下線を付け、値を字下げして並べる明朝の小さい文字の一覧。
• 下部の固定ナビ（fixed-bottom-nav）: 黒地に白の線アイコンと欧文ラベルを4つ等分して並べる。

Do's and Don'ts

Do - 地色はグレーと黒の交互だけで構成する。 - 主役の一語だけを筆文字で極端に大きくし、強弱を付ける。 - 本文は小さい明朝で、字間と行間を広く取る。 - 写真は夜の灯りや炭の焼き色が見える暖色のトーンにする。 - 雲文様は薄く、ページの背景として控えめに敷く。

Don't - UI に赤や金など有彩色のアクセントを足さない。 - ゴシック体や丸ゴシックを使わない。 - ボタンを角ばった形にしたり、影を付けたりしない。 - 本文を大きくして余白を詰めない。 - グラデーションを派手にかけない。

Page Structure

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

1. ファーストビュー（店構えと屋号で世界観を一目で伝える）: 夕暮れの外観写真をほぼ全面に置き、白抜きのロゴを上部に重ねる。左端に縦書きの小さい説明文、下部に縦書きの「SCROLL」と縦線を入れる。
2. ロゴの提示（屋号を印象づける）: グレー地の中央に、黒の紋章と筆文字ロゴを大きく置く。
3. コンセプトコピー（店の楽しさを一言で伝える）: 雲文様の上に縦書きの明朝を置き、主役の一字だけ巨大な筆文字にする。
4. 店の紹介（立地と空間の魅力を伝える）: スタッフの笑顔の写真にコピーを重ね、下に罫線付きの小さい明朝の本文を置く。
5. おすすめ料理（看板料理を見せる）: 紋章付きの見出しの下に黒い料理カードを横スクロールで並べ、短い説明と黒ピルボタンを付ける。
6. ブランドの帯（区切りとリズムを作る）: 黒地の中に白い円を置き、中に線画のイラストと欧文ロゴを入れる。
7. 宴会・コース（団体利用へ誘導する）: 宴会の写真に縦書きの白タブ、欧文の添えコピー、明朝の見出しと白文字の本文を重ねる。下に白ピル線ボタンを2つ置く。
8. 雰囲気写真（店内の質感を見せる）: 木札のメニューのアップ写真を全面に入れる。
9. 予約CTA（電話とWEB予約へ導く）: 外観写真の下に、セリフ体の大きな電話番号と黒ピルの予約ボタンを置く。
10. 店舗情報（基本情報を提供する）: 下線付きの項目名を並べたリストと、SNS へのリンク。
11. アクセス（所在地を示す）: グレースケールの地図を全幅で置き、下に黒ピルボタンを付ける。
12. フッター（締めとページ内の移動）: 黒地に紋章を薄く透かし、コピーライト・共有ボタン・トップへ戻るリンクを置く。下部に固定ナビ。

Imagery

• 夕暮れや夜の時間帯に、灯りが入った木造の外観を撮る。
• 料理は黒背景の上でスポット光を当て、器の柄と焼き目を際立たせる。
• 人物は自然な笑顔の手持ちスナップにし、電球色で少し粒子感を残す。
• 木札や器のアップを浅い被写界深度で撮る。
• 装飾は薄墨の雲文様、細い線画、八角形の紋章にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの写真を全幅にし、右上にメニューの縦リストを置く。
• PC の本文は縦書きの段組みにし、各行の間に縦の罫線を引く。
• PC は見出しを左の縦書き、料理カードを右に3枚並べる横長の構成にする。
• PC の宴会セクションは写真を左右2枚に分け、ボタンを横に並べる。
• PC は左に写真を固定し、右の列に店舗情報を流す2カラムにする。
• 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 行書くと起動時に読み込まれる。