---
version: alpha
name: Kraft Paper Bold Brush Noodle Shop LP
description: クラフト紙のような茶色の地に、黒帯セクションと白い紙面カードを重ねた飲食店 LP。大きな明朝・筆文字の見出しで要の一字だけを朱赤にし、料理写真を画面いっぱいに使って濃い味とシズル感を伝える。品書きは点線罫で値段を並べる、和の献立表スタイル。
colors:
  background: '#DCB17D'
  primary: '#22388D'
  dark-section: '#000000'
  surface: '#FFFFFF'
  accent-1: '#D0141A'
  text: '#030305'
  on-dark: '#DADCD9'
  line: '#3A3030'
  tint-1: '#CEBEAC'
  secondary: '#803B25'
  cta: '#FEFEFD'
  on-cta: '#030305'
typography:
  display:
    fontFamily: Shippori Mincho B1
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Shippori Mincho B1
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Serif JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  accent:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  logo-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 410px
  accent-headline:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 120px
  vertical-label:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 130px
  menu-price-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 36px
  menu-list:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 18px
  paper-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 400px
  button-pill:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 34px
  info-table:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 44px
  news-frame:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 340px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#DCB17D` | クラフト紙の地色 | 30% | 画素の実測 |
| `primary` | `#22388D` | ロゴ帯・ブランドの藍色 | 3% | 画素の実測 |
| `dark-section` | `#000000` | 品書き・フッターの黒帯 | 13% | 画素の実測 |
| `surface` | `#FFFFFF` | 白い紙面カード・品名ラベル | 12% | 画素の実測 |
| `accent-1` | `#D0141A` | 見出しの強調一字・日付 | 1% | 推定 |
| `text` | `#030305` | 見出し・本文の墨色 | 3% | 画素の主要色に補正 |
| `on-dark` | `#DADCD9` | 黒帯の上の白文字 | 1% | 画素の実測 |
| `line` | `#3A3030` | 品書きの点線罫・情報表の区切り線 | 1% | 推定 |
| `tint-1` | `#CEBEAC` | 写真を薄く透かしたベージュの面 | 6% | 画素の主要色に補正 |
| `secondary` | `#803B25` | 濃い焦げ茶の陰影 | 5% | 画素の主要色に補正 |
| `cta` | `#FEFEFD` | 白いピルボタン | 0% | 画素の実測 |
| `on-cta` | `#030305` | ピルボタンの文字 | 0% | 画素の主要色に補正 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ・特長見出し（極太の筆文字風） | 明朝 | Shippori Mincho B1 | 800 | 72px | 1.05 | -0.02em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho B1 | 800 | 40px | 1.2 | 0.0em |
| `headline-md` | メニューカテゴリ名・品名ラベル | 明朝 | Noto Serif JP | 500 | 20px | 1.4 | 0.05em |
| `headline-sm` | 価格表示 | 明朝 | Noto Serif JP | 700 | 17px | 1.3 | 0.0em |
| `body-md` | 本文・説明文 | 明朝 | Noto Serif JP | 400 | 11px | 1.9 | 0.05em |
| `note` | 注釈・品書きの行・店舗情報 | 明朝 | Noto Serif JP | 400 | 9px | 1.7 | 0.03em |
| `accent` | 写真の上に重ねる白抜きの添え文字 | 明朝 | Shippori Mincho | 500 | 36px | 1.1 | 0.0em |
| `label-button` | ピルボタンの文字 | 明朝 | Noto Serif JP | 400 | 10px | 1.0 | 0.05em |

- 書体は全体を明朝で統一する。ゴシックは使わない。
- 見出しは文字ごとにサイズを変えてジャンプ率を大きくし、写真の端にはみ出させて重ねる。
- 見出しの要となる一字だけを朱赤にする。
- 写真の上には白文字の極太明朝を重ね、白抜きの縁取り文字を添える。
- 本文は小さめの明朝にし、行間を約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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-b7284d2c`（元 LP の URL から採番）
- **元 LP**: https://www.muu-chan-ramen.jp/muraokaya/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。