---
version: alpha
name: Dark Charcoal Japanese Yakitori Dining LP
description: 黒地に炭火の写真を大きく置く、和モダンで高級感のある飲食店 LP。白い明朝体の縦書き・横書き見出しと、字間を広く取った欧文セリフの小見出しで品よくまとめる。写真は左右にずらして重ね、細い斜線や円弧の線画で動きを出す。後半では和紙調の明るいグレー地に切り替え、店内を紹介する。
colors:
  background: '#000000'
  primary: '#000000'
  background-alt: '#1D1D1D'
  surface: '#2D2D2D'
  tint-1: '#EDEDED'
  on-dark: '#ECECEC'
  text: '#0C0C0C'
  line: '#8A8A8A'
  accent-1: '#BF8E5C'
  text-muted: '#D5D1C8'
  cta: '#010101'
  on-cta: '#EAEAEA'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.15em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Playfair Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.35em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.15em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-vertical-copy:
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 200px
  news-box:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 50px
  section-label-en:
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 20px
  price-row:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 80px
  tel-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 140px
  accordion-button:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 62px
  photo-slider:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 280px
  info-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 480px
  sticky-tel-bar:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    height: 36px
  arrow-link:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 40px
---

# DESIGN.md — 黒と炭火の高級和モダン焼鳥店 LP（Dark Charcoal Japanese Yakitori Dining LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: ラグジュアリー・ダーク、和風、上品・高級
- **キーワード**: 黒地・炭火・明朝体・縦書き・非対称レイアウト・和紙テクスチャ
- **地の質感**: 大部分はフラットな黒地。店内紹介と最下部だけは和紙のような細かい粒のある明るいグレー地にする
- **形**: 角丸なしの直角が基本。細い斜線（2〜3本セット）と大きな円弧の線画を飾りに使う
- **温度感**: 背景は冷たい黒。写真の炭火のオレンジと木の色で温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページ全体の地色 | 45% | 画素の実測 |
| `primary` | `#000000` | ブランドを代表する墨の黒（ヘッダー・固定バー） | 4% | 画素の実測 |
| `background-alt` | `#1D1D1D` | チャコールの帯（店舗情報後半・求人・コース見出し裏） | 12% | 画素の実測 |
| `surface` | `#2D2D2D` | メニュー開閉ボタンの面 | 3% | 画素の実測 |
| `tint-1` | `#EDEDED` | 和紙調の明るい地（店内紹介・フッター） | 9% | 画素の実測 |
| `on-dark` | `#ECECEC` | 黒地の上の見出し・本文の文字色 | 3% | 画素の実測 |
| `text` | `#0C0C0C` | 明るい地の上の文字色 | 1% | 画素の実測 |
| `line` | `#8A8A8A` | 枠線・区切り線・斜線の飾り | 1% | 推定 |
| `accent-1` | `#BF8E5C` | 炭火や照明の暖色（写真の中のアクセント） | 6% | 画素の主要色に補正 |
| `text-muted` | `#D5D1C8` | 注釈・ラベルの控えめなグレー | 1% | 画素の主要色に補正 |
| `cta` | `#010101` | 電話予約の固定バー | 1% | 画素の実測 |
| `on-cta` | `#EAEAEA` | 電話予約バーの文字 |  | 画素の実測 |

- 地の 8 割は真っ黒（#000）にする。区切りや奥行きにはチャコール（#1D〜#30）の帯を左半分などに部分的に敷く
- 文字は白一色にする。強調は色ではなく、文字サイズの差（大小のジャンプ率）で付ける
- 暖色は写真の炭火・木・照明だけで出す。UI の部品に有彩色を使わない
- 店内紹介だけは和紙調の明るいグレー地に切り替え、黒文字にして場面の転換を作る
- 枠線・区切り線は細いグレーの 1px にし、面を塗らずに線で囲む

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 34px | 1.3 | 0.15em |
| `headline-lg` | セクションの大見出し（横書き・縦書き） | 明朝 | Shippori Mincho | 500 | 26px | 1.8 | 0.1em |
| `headline-md` | コース名・料理名・価格 | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.05em |
| `accent` | セクションの欧文ラベル（字間を広く） | 欧文セリフ | Playfair Display | 400 | 14px | 1.2 | 0.35em |
| `body-md` | 説明文（中央揃え・左揃え） | ゴシック | Noto Sans JP | 500 | 11px | 2 | 0.05em |
| `note` | 写真のキャプション・表のラベル | ゴシック | Noto Sans JP | 400 | 9px | 1.8 | 0.05em |
| `label-button` | メニュー開閉ボタンの文字 | 明朝 | Shippori Mincho | 500 | 22px | 1.4 | 0.15em |

- 見出しはすべて明朝体にし、本文だけ小さめのゴシック体にする
- 見出しの中で 1〜2 文字だけを大きくし、ジャンプ率で強調する
- 縦書きの見出しを写真の横に置き、和の趣を出す
- 欧文ラベルは字間を 0.3em 以上空け、見出しの上や写真の角に添える
- 本文は 11px 前後と小さめにし、行間を 2.0 と広く取る
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は左右にずらして非対称に置く
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は画面端まで寄せたり、片側に余白を残したりして、左右交互にずらす
- 見出しを写真に重ねるか、写真の端からはみ出させる
- 説明文のブロックは左右どちらかに寄せて、幅を狭く取る
- セクションの間は 80〜100px 空けて、ゆったりさせる
- 店舗情報はラベルと値の 2 列で、罫線のない表にする

## Elevation & Depth

- 影は使わず、フラットにする
- 奥行きは写真の重なりと、チャコールの帯を背面に敷くことで出す
- ファーストビューのニュース欄は半透明の黒地に細い枠線を付ける

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。横長と正方形に近い比率を混ぜる
- **セクション境界**: 直線で区切る。境目に斜めの細い線や大きな円弧の線画を重ねる
- ボタンと枠はすべて直角の四角にする
- 丸を使うのは、スライダー矢印と ＋ アイコンの円形ボタンだけ
- 飾りは細い斜めの平行線（2〜3本）と、大きな円弧の線画にする

## Components

- **縦書きキャッチ**（`hero-vertical-copy`）: 全面写真の上に白い明朝体の縦書き 2 行を右寄せで重ねる
- **ニュース枠**（`news-box`）: 半透明の黒地に細い枠線。欧文ラベル・日付・more リンクを横 1 行に並べる
- **欧文セクションラベル**（`section-label-en`）: 字間を広く取った欧文セリフ体。写真の角や見出しの上に置く
- **コース価格行**（`price-row`）: コース名を左、価格を右下に置き、下に細い罫線を引く
- **電話予約枠**（`tel-box`）: 細い枠線の中に、案内文・電話アイコン付きの大きな電話番号・補足文を中央揃えで並べる
- **メニュー開閉ボタン**（`accordion-button`）: チャコール地に細い枠線を付け、中央に明朝体の文字、右に円で囲んだ ＋ を置く
- **料理スライダー**（`photo-slider`）: 写真の下に明朝体の料理名を置き、左右に円形の矢印ボタンを付ける。下にグレースケールのサムネイルを並べる
- **店舗情報表**（`info-table`）: ラベルと値の 2 列。罫線は引かず、行間を広く取る
- **固定電話バー**（`sticky-tel-bar`）: 画面下に固定する黒いバー。小さなラベルと、電話アイコン付きの番号を並べる
- **矢印付き下線リンク**（`arrow-link`）: 白い文字の下に、右端が斜めに跳ねる矢印状の線を引く

## Do's and Don'ts

**Do**
- 炭火・煙・照りのある料理を、暗い背景で大きく見せる
- 見出しは明朝体の白文字にし、縦書きを交える
- 写真は左右交互にずらし、見出しを重ねて動きを出す
- 細い斜線や円弧の線画を、セクションの境目に控えめに置く
- 店内の紹介だけは和紙調の明るい地に切り替え、場面を変える

**Don't**
- 鮮やかな有彩色のボタンや塗りのバッジを使わない
- 角丸・ピル型・影のあるカードを使わない
- 丸ゴシックやポップな書体を使わない
- 写真を均等なグリッドに整然と並べない
- 本文を大きく太くして、訴求を強くしすぎない

## Page Structure

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

1. **ファーストビュー**（炭火の臨場感で一目で世界観を伝える）: 全面に料理写真を敷き、縦書きの明朝キャッチと縦書きロゴを置く。下部にニュース枠を付ける
2. **コンセプト**（店のこだわりを要約して伝える）: 黒地に 2 行の明朝見出しを置き、その下に中央揃えの小さな本文を続ける
3. **看板メニュー**（まず頼んでほしい一品を示す）: 左揃えの見出しと本文の下に、横長の写真とキャプションを置く
4. **技・素材**（仕込みと素材の質を伝える）: 欧文ラベル付きの写真に見出しを重ねる。写真 3 枚と本文 2 ブロックを左右交互にずらす
5. **味付け**（タレと塩のこだわりを伝える）: 円弧の線画の中に写真を置き、右側に縦書きの見出しを重ねる。その下に塩の写真と本文を置く
6. **メニュースライダー**（串の種類を見せる）: 写真と料理名に左右の円形矢印を付け、下にサムネイルを並べる
7. **コース一覧**（価格を明示して予約へつなぐ）: 縦書きの見出しと串の写真を置く。コース名と価格を罫線付きで並べ、電話予約枠を続ける
8. **一品料理・お酒**（単品や酒との組み合わせを提案する）: チャコール帯の上に写真と見出しを重ね、価格と本文を続ける。最後に開閉ボタンを 2 つ並べる
9. **店内紹介**（空間の雰囲気を伝える）: 和紙調の明るい地に縦書きの見出しを置き、店内写真をずらして配置する
10. **店舗情報**（来店に必要な情報を示す）: 欧文ラベルと明朝の見出しの下に 2 列の表を置き、外観写真を添える
11. **キャンセル規定・求人**（注意事項と採用情報を示す）: チャコール地に中央揃えの文章を置く。求人は枠線で囲んだ表にする
12. **地図・フッター**（アクセスを補い、ページを締める）: 全幅の地図の下に矢印付きリンクを 2 つ置き、明るい地のフッターと固定電話バーで終える

## Imagery

- 暗い背景で、炭火の赤とタレの照りを強調した低い角度のクローズアップにする
- 煙や湯気を逆光で写し込み、臨場感を出す
- 店内や人物は暖色の照明で撮り、木のカウンターの温かみを見せる
- スライダーの未選択サムネイルはグレースケールにする
- 飾りは白またはグレーの極細の斜線と、大きな円弧の線画だけにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はグローバルナビを右側に縦に固定し、ロゴ・電話・ニュースもそこへまとめる
- PC は写真と文章を 2 カラムで交互に置く。重ねとずらしの幅を SP より大きく取る
- PC のスライダーは写真を 3 枚並べて見せる
- 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-d734d529`（元 LP の URL から採番）
- **元 LP**: https://www.yakitori-shobudani.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。