DESIGN.md — クラフト紙×墨黒×朱赤のつけ麺店 LP（Kraft Paper Bold Brush Noodle Shop LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、力強い・インパクト、情報量多め・訴求型、レトロ
• キーワード: クラフト紙・墨黒・朱赤の一字強調・極太明朝・シズル写真・献立表
• 地の質感: 繊維の入った茶色のクラフト紙テクスチャを全体の地に敷く。黒帯と白い紙面カードは無地のフラット。
• 形: 角丸なしの四角いブロック。写真とカードを左右にずらし、帯同士を重ねて段差を出す。細い斜線の装飾を添える。
• 温度感: 温かい。茶色と黒が中心で、朱赤と藍をアクセントに使う。

Colors

• 地は全体をクラフト紙の茶色にする。品書きとフッターだけ黒帯に切り替える。
• メニュー詳細や限定メニューは白い紙面カードに載せ、茶色の地からずらして配置する。
• 朱赤は見出しの中の一字と日付だけに使う。面には使わない。
• 藍色はロゴ帯とヘッダーにだけ使い、ブランドの印にする。
• ボタンは白地に墨色の文字、ピル型にする。
• 黒帯の上の文字は白にし、見出しの一字だけ朱赤にする。

Typography

• 書体は全体を明朝で統一する。ゴシックは使わない。
• 見出しは文字ごとにサイズを変えてジャンプ率を大きくし、写真の端にはみ出させて重ねる。
• 見出しの要となる一字だけを朱赤にする。
• 写真の上には白文字の極太明朝を重ね、白抜きの縁取り文字を添える。
• 本文は小さめの明朝にし、行間を約1.9とゆったり取る。
• 価格は品名より太く大きくして右に揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューの一部だけ 2 カラムで並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅、またはどちらかの端に寄せて配置し、反対側に見出しを重ねる。
• 白カードや黒帯は左右どちらかに寄せて段違いに重ね、紙を重ねたような奥行きを出す。
• 品書きは、品名を左・価格を右に置き、点線罫で区切った行で並べる。
• 店舗情報は、項目名と値を2行で書き、実線で区切る表にする。
• 説明文は写真の直下に短く2〜3行で添える。

Elevation & Depth

• 影は使わない。奥行きは色面の重なりとずらしだけで出す。
• 白カードは茶色地や黒帯の境目にまたがるように置く。
• 写真の一部は低い不透明度で地に溶かし込む。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。料理は真上〜斜め上からの寄りで大きく切り抜き、器が画面の外へはみ出すくらいにする。
• セクション境界: 直線で切り替える。色帯を段違いにずらして重ね、細い斜線を装飾に添える。
• ボタンだけを完全なピル型にし、ほかの要素はすべて角丸なしにする。
• お知らせの枠は四隅の角だけを細線で描く括弧型にする。
• ラベルは黒、または白の四角い帯にする。

Components

• 縦書きロゴ帯（logo-band）: ファーストビュー左上に置く藍色の縦長帯。白い筆文字の店名を縦書きで載せる。
• 一字朱赤の大見出し（accent-headline）: 極太明朝の見出しで、要の一字を朱赤にする。写真に重ね、細い斜線を添える。
• 黒地の縦書きラベル（vertical-label）: 大見出しの脇に置く黒い四角。白文字で品目を縦書きにする。
• 品名ラベル＋価格リスト（menu-price-card）: 黒帯の上に白い四角の品名ラベルを置き、その下に量と価格を点線罫で並べる。
• 献立表リスト（menu-list）: 品名を左、価格を右に置き、点線で区切る。カテゴリ名は中央揃えの明朝にする。
• 白い紙面カード（paper-card）: 限定メニューや店頭販売の告知を載せる白い面。茶色の地や黒帯の境目にまたがるように置く。
• 白ピルボタン（button-pill）: 白地に墨色の小さな明朝文字を置き、末尾に「>」を付けたピル型ボタン。
• 店舗情報表（info-table）: 項目名と値を2行で書き、墨色の実線で区切る表。
• 角括弧枠のお知らせ（news-frame）: 四隅の角を白い細線で囲む枠。中に写真、朱赤の日付、下線付きのタイトルを並べる。

Do's and Don'ts

Do - 地にはクラフト紙のテクスチャを敷き、温かみのある茶色を基調にする。 - 見出しは極太明朝で大きく組み、要の一字だけを朱赤にする。 - 料理写真は大きく寄りで撮り、見出しと重ねて迫力を出す。 - 品書きは点線罫と右揃えの価格で、献立表らしく組む。 - 色帯やカードは左右にずらして重ね、段差を作る。

Don't - ゴシック体や丸ゴシックを見出しに使わない。 - 朱赤を広い面や多くの文字に使わない。 - 角丸のカードやドロップシャドウを使わない。 - パステル色や鮮やかなグラデーションを入れない。 - 写真を小さなサムネイルだけで並べない。

Page Structure

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

1. ファーストビュー（看板商品と店名を印象づける）: 看板料理の真上からの寄り写真を全面に敷き、左上に藍色の縦書きロゴ帯を重ねる。下に小さく店の概要を一行添える。
2. キャッチと店の紹介（味の特徴を一言で伝える）: シズル写真の下端に、白と朱赤の極太見出しと黒地の縦書きラベルを重ねる。その下に明朝の紹介文を置く。
3. こだわり（美味しさの秘密）（素材と製法を3つ見せる）: 一字朱赤の大見出しの後、素材の写真3枚を段違いに配置する。各写真には白文字の大きな素材名と白抜きの添え文字を重ね、下に短い説明を添える。
4. お品書き（主力メニュー）（看板メニューの価格を示す）: 黒帯に切り替え、器の写真と見出しを置く。写真スライダーの下に、白ラベルと点線罫の価格を2列で並べる。
5. その他メニュー（トッピングやサイドを網羅する）: 写真見出しの下を紙地にし、カテゴリごとの献立表リストを置く。サイドは2列にする。
6. 限定メニュー（時間・曜日限定の品を告知する）: 白い紙面カードの上端にまたがって一字朱赤の見出しを置く。中は枠線付きの品名ラベル、黒帯の条件ラベル、価格リストで構成する。
7. 店頭販売の告知（持ち帰り商品の訴求）: 店舗外観の写真に白カードを重ね、点線の矢印を添える。見出しは枠囲みの小ラベルと朱赤の数字で作る。
8. 店舗情報・地図（アクセスと営業情報を伝える）: 白抜きの見出しの下に実線区切りの情報表を置く。続けて全幅の地図と白ピルボタンを配置する。
9. お知らせ（最新情報の掲載）: 角括弧枠の中に写真、朱赤の日付、タイトルを並べ、moreボタンを置く。
10. お席の紹介（店内の雰囲気と席数を伝える）: 白カードに線画の座席図を載せ、下に店内写真2枚を全幅で重ねる。
11. フッター（関連店舗とシェア導線）: 黒帯に白ピルボタン、シェアボタン、下線付きの白い明朝リンク、ページトップへのリンク、コピーライトを中央寄せで並べる。

Imagery

• 料理は真上〜斜め上から寄って撮る。湯気や照り、とろみがわかるシズル感を重視する。
• 素材の写真（骨、乾物、生麺など）は暗めで質感を強調し、画面いっぱいに大きく切り抜く。
• 料理写真の一部は低い不透明度で地に溶かし、背景装飾として使う。
• 店舗外観と店内の写真は明るく自然光で撮り、木の質感を見せる。
• 座席図は黒の線と黒い四角の席で描くシンプルな線画にし、厨房部分は斜線で塗る。
• 装飾は細い斜線と点線の矢印程度に抑える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約90%幅に茶色の紙面を置き、左右の外側は黒にする。
• PC のファーストビューは横長の料理写真で、店名を右に縦書きで置き、左上の藍色ボックスにナビゲーションを入れる。
• PC の特長セクションは写真と説明文を左右交互に並べ、見出しを写真に重ねる。
• PC のお品書きは写真を左、価格リストを右の2カラムにする。
• PC の店舗情報表とお知らせは2〜3カラムにする。
• SP ではすべて1カラムに積み、右上にハンバーガーメニューを置く。

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 行書くと起動時に読み込まれる。