---
version: alpha
name: Washi Mincho Japanese Beef Restaurant LP
description: 生成りの和紙テクスチャ地に、字間を広く取った明朝の縦書きコピーと肉の写真を交互に並べる上品な和風飲食店 LP。墨黒の帯と円弧で締め、予約ボタンだけに深いえんじ色を使う。
colors:
  background: '#F1EDEA'
  background-alt: '#E3DEDA'
  primary: '#020101'
  dark-section: '#1C1C1C'
  on-dark: '#F4F1EE'
  cta: '#7D2323'
  on-cta: '#F9F8F7'
  text-body: '#1C1C1C'
  text-muted: '#777777'
  line: '#BDB8B2'
  accent-1: '#874128'
  surface: '#F1EDEA'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.2em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.25em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.2em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 400
    lineHeight: 2.2
    letterSpacing: 0.12em
  accent:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4em
  headline-sm:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-reserve:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 36px
  link-arrow:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 44px
  vertical-catch:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 400px
  dark-copy-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 200px
  broken-frame:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 200px
  news-box:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 110px
  info-list:
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 46px
  sticky-footer-nav:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 44px
---

# DESIGN.md — 和紙地×墨黒×えんじの和牛焼肉店 LP（Washi Mincho Japanese Beef Restaurant LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル
- **キーワード**: 和紙テクスチャ・縦書き明朝・余白多め・墨黒の差し色・写真の段違い配置・細い斜線
- **地の質感**: 生成りの和紙の繊維感が全面にあり、黒い面には墨の揉み紙のようなざらつきがある。
- **形**: 角丸なしの四角。装飾は極細の罫線・斜線・太い墨色の円弧・角だけ切れたフレーム。
- **温度感**: 暖かみのある生成りと、黒・焦げ茶で落ち着いた温度感。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F1EDEA` | 和紙調のページ地 | 55% | 画素の実測 |
| `background-alt` | `#E3DEDA` | 少し濃い和紙の帯・囲みの面 | 8% | 画素の実測 |
| `primary` | `#020101` | 墨黒（見出し・ロゴ・円弧装飾） | 4% | 画素の実測 |
| `dark-section` | `#1C1C1C` | フッター・コピーを載せる黒い揉み紙面 | 9% | 画素の実測 |
| `on-dark` | `#F4F1EE` | 黒地上の文字 | 1% | 画素の主要色に補正 |
| `cta` | `#7D2323` | 予約ボタンのえんじ色 | 1% | 画素の実測 |
| `on-cta` | `#F9F8F7` | 予約ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text-body` | `#1C1C1C` | 本文の濃いグレー | 2% | 画素の主要色に補正 |
| `text-muted` | `#777777` | 英字ラベル・日付の灰色 | 0% | 推定 |
| `line` | `#BDB8B2` | リンク下線・表の罫線 | 0% | 推定 |
| `accent-1` | `#874128` | 肉写真の焼き色・赤身の茶系 | 6% | 画素の主要色に補正 |
| `surface` | `#F1EDEA` | 黒地上の店舗情報カード | 2% | 画素の実測 |

- 地は全面を生成りの和紙テクスチャにし、白ベタは使わない。
- 見出し・装飾は墨黒一色で、色付きの見出しは作らない。
- えんじ色は予約ボタンと固定フッターの予約ボタンにだけ使う。
- 黒い面は観光・ランチのコピー帯とフッターに限定し、揉み紙の質感を付ける。
- 色の情報量は料理写真に任せ、UI 側は無彩色でまとめる。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 30px | 1.5 | 0.2em |
| `headline-lg` | セクション大見出し（字間を大きく空ける） | 明朝 | Shippori Mincho | 500 | 36px | 1.4 | 0.25em |
| `headline-md` | 見出しの前置き・囲み見出し | 明朝 | Shippori Mincho | 400 | 22px | 1.6 | 0.2em |
| `body-md` | 紹介文 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 2.2 | 0.12em |
| `accent` | 英字の小ラベル（DINNER・LUNCH など） | 欧文サンセリフ | Montserrat | 400 | 10px | 1.4 | 0.4em |
| `headline-sm` | NEWS などの欧文見出し | 欧文セリフ | Playfair Display | 600 | 22px | 1.3 | 0.05em |
| `label-button` | テキストリンク・予約ボタン | 明朝 | Noto Serif JP | 600 | 12px | 1.4 | 0.1em |
| `note` | 店舗情報表・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em |

- 見出しは明朝で字間 0.2em 以上。和の余韻を出す。
- ひらがなの送りや助詞は一回り小さくし、漢字との大小差でリズムを付ける。
- キャッチは縦書きにし、写真の横や上に重ねる。
- 本文は小さめのゴシックで、行間 2 倍以上にして軽く見せる。
- 英字ラベルは大文字で字間を大きく、見出しの補助として小さく添える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は左右どちらかに寄せた段違い配置
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は画面端まで寄せ、反対側に余白か縦書きコピーを置く。
- 見出し、写真、本文、右矢印付きのリンクの順に 1 ブロックを作る。
- セクション間は 80〜120px と大きく取る。
- 写真にコピー面をかぶせ、少しはみ出させて奥行きを出す。
- 店舗情報はラベルと値を縦に積み、下に罫線を引くリストにする。

## Elevation & Depth

- 影はほぼ使わない。平面と質感の差で階層を作る。
- 肉の写真だけに切り抜きの柔らかい影を落とす。
- 囲みは極細の黒線フレームで、影は付けない。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。画面端に寄せた非対称の切り抜き。肉は背景を抜いた切り抜き。
- **セクション境界**: 直線で切り替える。背景をまたぐ極細の斜線と、太い墨の円弧を装飾に置く。
- 角丸はすべて 0。
- フレームは四隅や辺の一部を途切れさせて抜け感を出す。
- 円弧は筆で描いたような太い黒の弧を、画面端からはみ出させる。

## Components

- **予約ボタン**（`button-reserve`）: えんじ色の長方形。左に白いカレンダーアイコン、明朝の白文字を置く。
- **矢印テキストリンク**（`link-arrow`）: 中央にリンク名、右端に細い右向き矢印。下に全幅の細い罫線を引く。
- **縦書きキャッチ**（`vertical-catch`）: 明朝の縦書き 2 行。間に縦の細線を挟み、写真の脇や上に置く。
- **黒地コピーパネル**（`dark-copy-panel`）: 写真に重ねる揉み紙調の黒い面。前置き、大見出し、下線付きの英字ラベルを中央揃えで置く。
- **途切れ枠の囲み**（`broken-frame`）: 細い黒線の枠で、左右の辺を途中で切る。中は明朝見出しと中央揃えの説明文。
- **お知らせボックス**（`news-box`）: 細い灰色の枠の中に、欧文セリフの見出し、日付、一覧へのリンクを置く。
- **店舗情報リスト**（`info-list`）: 項目名と内容を 2 段で並べ、罫線で区切る。
- **固定下部ナビ**（`sticky-footer-nav`）: 黒地にアイコン付きのタブを並べ、問い合わせは生成り地、予約はえんじ地にする。

## Do's and Don'ts

**Do**
- 見出しは明朝で字間を広く取り、余白を惜しまない。
- 写真は左右交互に段違いで置き、縦書きコピーを添える。
- 和紙と揉み紙の質感を地に必ず敷く。
- 強い色は料理写真とえんじの予約ボタンだけに絞る。
- 装飾は極細線、斜線、墨の円弧に限る。

**Don't**
- 角丸やピル型のボタンを使わない。
- 鮮やかなグラデーションや原色の帯を入れない。
- 太いゴシックで大きく訴求する煽りデザインにしない。
- ドロップシャドウの付いたカードを並べない。
- えんじ色を見出しや装飾に流用しない。

## Page Structure

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

1. **ファーストビュー**（店の格と料理の魅力を一目で伝える）: 左上にロゴ、右と左下に料理写真を段違いで置き、余白に縦書きキャッチと縦の細線を入れる。
2. **お知らせ**（最新情報を控えめに示す）: 細い枠のボックスに欧文見出し、日付、一覧へのリンクを並べる。
3. **素材のこだわり**（ブランド和牛の価値を訴求する）: 明朝の大見出しに英字ルビを添え、認証マークと切り抜いた霜降り肉を大きく見せる。本文と矢印リンクを続ける。
4. **職人・利用シーン**（手仕事と使い方を想起させる）: 職人の写真を左に寄せ、背景をまたぐ斜線と、字の大小を付けた横一行コピーを置く。
5. **ディナー紹介**（焼肉ディナーの魅力を伝える）: 焼き網の全幅写真に縦書きコピーを重ね、明朝見出し、重箱写真、本文、墨の円弧装飾、矢印リンクの順に並べる。
6. **コース紹介**（特別な席向けのコースを案内する）: 縦書きの英字ラベル、大見出し、スライダー写真、本文、矢印リンクの順に並べる。
7. **ランチ紹介**（観光客のランチ需要を取り込む）: 観光地の写真に黒地のコピーパネルを重ね、定食写真と本文を続ける。
8. **テイクアウト**（弁当の需要を案内する）: 濃い和紙地の面を途切れ枠で囲み、見出し、弁当写真、本文、リンクを中央に置く。
9. **店舗情報・予約**（予約・問い合わせへ誘導する）: ロゴ、電話番号、えんじの予約ボタン、罫線区切りの情報リストを並べる。
10. **注意事項・アクセス**（キャンセル規定と道順を示す）: 途切れ枠の囲みを 2 つ重ね、道順は点線とドットのステップで示す。下に地図を置く。
11. **フッター**（情報の再掲と予約導線）: 黒い揉み紙地に生成りの店舗カードを浮かせ、住所・営業時間・SNS 共有を置く。下に固定ナビを付ける。

## Imagery

- 料理は温かい照明で寄りに撮り、霜降りの赤と焼き色を鮮やかに見せる。
- 肉の塊は背景を抜いた切り抜きにし、柔らかい接地影を付ける。
- 器は漆の重箱・和食器・木の盆を使い、和の素材感を出す。
- 焼き網の煙や鉄板の炎など、シズル感のある瞬間を全幅で使う。
- 職人の手元と地域の名所の写真で、人と土地の物語を添える。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は写真と縦書きコピーを左右に大きく散らす雑誌的な非対称レイアウトにする。
- PC は本文ブロックを写真の横に 2 カラムで置き、一部の本文は縦書きにする。
- PC はヘッダーにグローバルナビ、電話番号、予約ボタンを常時表示する。
- PC のフッターは黒地のナビと店舗カードを左右に分割する。
- SP は固定下部ナビで予約導線を常に見せる。

## 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-edb1363d`（元 LP の URL から採番）
- **元 LP**: https://www.yakiniku-steak-gin.jp/
- **解析に使った画像**: 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/）からご連絡ください。