グレー地×紺と筆記体の大人居酒屋 LP

Gray Concrete Script Izakaya LP

明るいグレーの地に、暗めのシズル写真と紺色のピルボタンを合わせた居酒屋向けの LP。手書きの筆記体英字を見出しに重ねたり、細い曲線を背景に流したりして、都会的でこなれた空気をつくる。写真は左右にずらして非対称に置く。見出しは字間を広く取った太めのゴシック。

飲食店・レストランシンプル・ミニマル上品・高級クール・先進的SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は明るいグレー 1 色で通す。白はフッターと見出しの帯だけに使う
色を持つのは紺だけ。ボタン、写真下の帯、ロゴ地に限定する
グレー地に置くリード見出しは白抜きにして、控えめな印象を保つ
色数は写真の暖色に任せ、UI 側では足さない
細い曲線はグレーより少し濃い線で、背景に溶け込ませる

TYPOGRAPHY

書体

displayセクション見出しの大きな和文ゴシック／ Zen Kaku Gothic New 700 ／ 40px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-md見出し上の小見出し・白抜きリードゴシック／ Zen Kaku Gothic New 700 ／ 24px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm白帯の上に載せる項目見出しゴシック／ Zen Kaku Gothic New 900 ／ 26px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

accent見出しや写真に重ねる手書きの筆記体英字欧文スクリプト／ Mrs Saint Delafield 400 ／ 64px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Zen Kaku Gothic New 500 ／ 10px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの英字ラベル欧文サンセリフ／ Quicksand 600 ／ 11px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

note店舗情報の表・注記ゴシック／ Noto Sans JP 500 ／ 9px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

和文の見出しは字間を 0.15〜0.2em と広めに取る
筆記体英字は和文見出しの背後や写真の下端に、はみ出すように重ねる
本文は小さめにし、行間を 2 前後と広く取る
見出しには縦書きと横書きを組み合わせてよい
ボタンの英字は大文字か頭文字だけを大文字にする

PAGE STRUCTURE

セクション構成

ファーストビュー店の雰囲気を一瞬で伝える両脇を黒にした縦長の写真に、白の手書きロゴを大きく重ねる
コンセプト店名に込めた想いを伝えるグレー地に白抜きの大見出しを置き、白帯見出し 2 つと本文を続ける
料理紹介料理の魅力を伝える筆記体英字を重ねた見出しの下に、料理写真 3 枚を互い違いに配置し、本文とメニューボタンを添える
ドリンク紹介お酒の品揃えを伝える全幅の瓶の写真に筆記体英字を重ね、中央揃えの本文とボタンを続ける
空間・利用シーン居心地の良さを伝える縦書きと横書きの見出しを組み合わせ、人物写真と小物の写真を重ねる
誘導バナー過ごし方・席案内のページへ送る全幅写真に筆記体英字を重ね、下に紺帯のリンクを置く
外観来店のイメージを持たせる店の外観を全幅写真で見せる
予約 CTA電話や Web 予約へ導く紺の正方形ロゴの下に電話番号と紺のピルボタンを置く
店舗情報・地図基本情報を伝える線で区切った情報表のあとに、地図と地図アプリへのボタンを置く
お知らせ・フッター更新情報と補足を載せる濃いグレーのお知らせ欄のあとに、白地のフッターと固定ナビを置く

COMPONENTS

部品

紺のピルボタン button-primary英字ラベルを左寄せにし、右端に細い矢印を置いたほぼ全幅のボタン
筆記体の英字見出し script-overlay和文見出しや写真の下端に重ねる、手書き風の白または黒の英字
白帯見出し white-band-heading左端から伸びる白い帯に、黒の太字見出しを載せる
写真の下の紺帯リンク photo-link-band写真のすぐ下に紺の帯を敷き、白字のラベルと矢印を置く
店舗情報の表 info-table項目名と内容を縦に積み、項目ごとに細い線で区切る
紺の正方形ロゴ logo-square紺の正方形に白の手書きロゴを入れ、その下に電話番号と CTA を続ける
固定の下部ナビ fixed-bottom-nav電話・Web 予約・初めての方向け・メニューの 4 分割。予約だけを紺にする

守ること

グレーの地と紺の 2 色を軸にする
暗めでシズル感のある写真を大きく使う
筆記体の英字を見出しに重ねて抜け感を出す
写真は左右交互にずらして配置する
余白はたっぷり取る

DON'T

避けること

明るい原色やグラデーションを使わない
写真やボタン以外に角丸をつけない
影や立体的な装飾を加えない
本文を太く大きくしすぎない
写真を均等なグリッドに並べない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — グレー地×紺と筆記体の大人居酒屋 LP（Gray Concrete Script Izakaya LP）

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

Overview

業種: 飲食店・レストラン／ 雰囲気: シンプル・ミニマル、上品・高級、クール・先進的
キーワード: コンクリートグレー・紺のピル・筆記体英字・シズル写真・字間の広いゴシック・非対称レイアウト
地の質感: フラットなグレーの面。立体感は写真の暗いトーンと、背景を流れる細い曲線でつくる
形: 写真は角丸なしの矩形。ボタンだけが完全なピル型
温度感: 背景は無彩色で冷たい。写真の暖色の照明が温度を加える

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#CDCDCD`	ページ全体の地	45%	画素の実測
`primary`	`#1C2661`	ブランドの紺（ボタン・帯・ロゴ地）	5%	画素の実測
`cta`	`#1C2661`	主 CTA ボタン	2%	画素の実測
`on-cta`	`#EFF0FE`	ボタン上の文字	0%	画素の実測
`text`	`#000000`	見出しと本文	3%	画素の実測
`on-dark`	`#FFFFFF`	グレー地や写真上の白抜き見出し	1%	画素の実測
`surface`	`#FFFFFF`	見出しの白い帯・フッターの地	10%	画素の実測
`background-alt`	`#B4B4B4`	お知らせ欄の濃いグレー	2%	画素の実測
`line`	`#9C9C9C`	表の区切り線・背景を流れる曲線	0%	推定
`dark-section`	`#000000`	ファーストビュー両脇の黒	4%	画素の実測
`accent-1`	`#845F2D`	写真に入る木目・照明の暖色	5%	画素の主要色に補正

地は明るいグレー 1 色で通す。白はフッターと見出しの帯だけに使う
色を持つのは紺だけ。ボタン、写真下の帯、ロゴ地に限定する
グレー地に置くリード見出しは白抜きにして、控えめな印象を保つ
色数は写真の暖色に任せ、UI 側では足さない
細い曲線はグレーより少し濃い線で、背景に溶け込ませる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	セクション見出しの大きな和文	ゴシック	Zen Kaku Gothic New	700	40px	1.3	0.2em
`headline-md`	見出し上の小見出し・白抜きリード	ゴシック	Zen Kaku Gothic New	700	24px	1.5	0.2em
`headline-sm`	白帯の上に載せる項目見出し	ゴシック	Zen Kaku Gothic New	900	26px	1.3	0.15em
`accent`	見出しや写真に重ねる手書きの筆記体英字	欧文スクリプト	Mrs Saint Delafield	400	64px	1.0	0.0em
`body-md`	本文	ゴシック	Zen Kaku Gothic New	500	10px	2.0	0.08em
`label-button`	ボタンの英字ラベル	欧文サンセリフ	Quicksand	600	11px	1.0	0.05em
`note`	店舗情報の表・注記	ゴシック	Noto Sans JP	500	9px	1.7	0.03em

和文の見出しは字間を 0.15〜0.2em と広めに取る
筆記体英字は和文見出しの背後や写真の下端に、はみ出すように重ねる
本文は小さめにし、行間を 2 前後と広く取る
見出しには縦書きと横書きを組み合わせてよい
ボタンの英字は大文字か頭文字だけを大文字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真を左右へずらして非対称に置く
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
写真は画面端に接するように置き、左寄せと右寄せを交互にする
本文ブロックは左右 20px の余白で左揃え（ドリンクの紹介は中央揃え）
セクションの間は 100px 以上空けてゆったり見せる
CTA ボタンはほぼ全幅のピル型
画面下に 4 分割の固定ナビを置く

Elevation & Depth

影は使わず、すべてフラットにする
奥行きは写真の重なりと筆記体のはみ出しで出す

Shapes

角丸: 小 0px ／中 0px ／大 999px。ボタンはピル型。
写真の切り抜き: 角丸なしの矩形。横長や正方形を画面端に寄せて置く
セクション境界: 区切りは直線のみ。背景には細い曲線を流す
写真に角丸はつけない
ボタンだけを完全なピル型にする
項目見出しは左端から伸びる白い帯に載せる

Components

紺のピルボタン（button-primary）: 英字ラベルを左寄せにし、右端に細い矢印を置いたほぼ全幅のボタン
筆記体の英字見出し（script-overlay）: 和文見出しや写真の下端に重ねる、手書き風の白または黒の英字
白帯見出し（white-band-heading）: 左端から伸びる白い帯に、黒の太字見出しを載せる
写真の下の紺帯リンク（photo-link-band）: 写真のすぐ下に紺の帯を敷き、白字のラベルと矢印を置く
店舗情報の表（info-table）: 項目名と内容を縦に積み、項目ごとに細い線で区切る
紺の正方形ロゴ（logo-square）: 紺の正方形に白の手書きロゴを入れ、その下に電話番号と CTA を続ける
固定の下部ナビ（fixed-bottom-nav）: 電話・Web 予約・初めての方向け・メニューの 4 分割。予約だけを紺にする

Do's and Don'ts

Do - グレーの地と紺の 2 色を軸にする - 暗めでシズル感のある写真を大きく使う - 筆記体の英字を見出しに重ねて抜け感を出す - 写真は左右交互にずらして配置する - 余白はたっぷり取る

Don't - 明るい原色やグラデーションを使わない - 写真やボタン以外に角丸をつけない - 影や立体的な装飾を加えない - 本文を太く大きくしすぎない - 写真を均等なグリッドに並べない

Page Structure

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

ファーストビュー（店の雰囲気を一瞬で伝える）: 両脇を黒にした縦長の写真に、白の手書きロゴを大きく重ねる
コンセプト（店名に込めた想いを伝える）: グレー地に白抜きの大見出しを置き、白帯見出し 2 つと本文を続ける
料理紹介（料理の魅力を伝える）: 筆記体英字を重ねた見出しの下に、料理写真 3 枚を互い違いに配置し、本文とメニューボタンを添える
ドリンク紹介（お酒の品揃えを伝える）: 全幅の瓶の写真に筆記体英字を重ね、中央揃えの本文とボタンを続ける
空間・利用シーン（居心地の良さを伝える）: 縦書きと横書きの見出しを組み合わせ、人物写真と小物の写真を重ねる
誘導バナー（過ごし方・席案内のページへ送る）: 全幅写真に筆記体英字を重ね、下に紺帯のリンクを置く
外観（来店のイメージを持たせる）: 店の外観を全幅写真で見せる
予約 CTA（電話や Web 予約へ導く）: 紺の正方形ロゴの下に電話番号と紺のピルボタンを置く
店舗情報・地図（基本情報を伝える）: 線で区切った情報表のあとに、地図と地図アプリへのボタンを置く
お知らせ・フッター（更新情報と補足を載せる）: 濃いグレーのお知らせ欄のあとに、白地のフッターと固定ナビを置く

Imagery

暖色の照明を活かしたローキーな写真で、背景は暗く落とす
料理は木のテーブルの上を斜め上から撮り、浅い被写界深度で
人物は横顔や手元など、自然な瞬間を切り取る
背景には細いペンで描いたような曲線を大きく流す
ロゴや英字は手書きの筆記体で描く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は左端に縦長のナビ列を固定し、ロゴと電話を縦に並べる
PC は写真とテキストを 2 カラムで千鳥に配置する
PC はボタンを短いピル型にする
PC は過ごし方と席案内の誘導バナーを横 2 分割で並べる
PC は店舗情報の表を項目と内容の 2 列にし、地図とボタンを横に並べる

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

---
version: alpha
name: Gray Concrete Script Izakaya LP
description: 明るいグレーの地に、暗めのシズル写真と紺色のピルボタンを合わせた居酒屋向けの LP。手書きの筆記体英字を見出しに重ねたり、細い曲線を背景に流したりして、都会的でこなれた空気をつくる。写真は左右にずらして非対称に置く。見出しは字間を広く取った太めのゴシック。
colors:
  background: '#CDCDCD'
  primary: '#1C2661'
  cta: '#1C2661'
  on-cta: '#EFF0FE'
  text: '#000000'
  on-dark: '#FFFFFF'
  surface: '#FFFFFF'
  background-alt: '#B4B4B4'
  line: '#9C9C9C'
  dark-section: '#000000'
  accent-1: '#845F2D'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.2em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.2em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.15em
  accent:
    fontFamily: Mrs Saint Delafield
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  label-button:
    fontFamily: Quicksand
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 0px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 120px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 36px
  script-overlay:
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 60px
  white-band-heading:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 32px
  photo-link-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 44px
  info-table:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 50px
  logo-square:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    height: 120px
  fixed-bottom-nav:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 38px
---

# DESIGN.md — グレー地×紺と筆記体の大人居酒屋 LP（Gray Concrete Script Izakaya LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的
- **キーワード**: コンクリートグレー・紺のピル・筆記体英字・シズル写真・字間の広いゴシック・非対称レイアウト
- **地の質感**: フラットなグレーの面。立体感は写真の暗いトーンと、背景を流れる細い曲線でつくる
- **形**: 写真は角丸なしの矩形。ボタンだけが完全なピル型
- **温度感**: 背景は無彩色で冷たい。写真の暖色の照明が温度を加える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#CDCDCD` | ページ全体の地 | 45% | 画素の実測 |
| `primary` | `#1C2661` | ブランドの紺（ボタン・帯・ロゴ地） | 5% | 画素の実測 |
| `cta` | `#1C2661` | 主 CTA ボタン | 2% | 画素の実測 |
| `on-cta` | `#EFF0FE` | ボタン上の文字 | 0% | 画素の実測 |
| `text` | `#000000` | 見出しと本文 | 3% | 画素の実測 |
| `on-dark` | `#FFFFFF` | グレー地や写真上の白抜き見出し | 1% | 画素の実測 |
| `surface` | `#FFFFFF` | 見出しの白い帯・フッターの地 | 10% | 画素の実測 |
| `background-alt` | `#B4B4B4` | お知らせ欄の濃いグレー | 2% | 画素の実測 |
| `line` | `#9C9C9C` | 表の区切り線・背景を流れる曲線 | 0% | 推定 |
| `dark-section` | `#000000` | ファーストビュー両脇の黒 | 4% | 画素の実測 |
| `accent-1` | `#845F2D` | 写真に入る木目・照明の暖色 | 5% | 画素の主要色に補正 |

- 地は明るいグレー 1 色で通す。白はフッターと見出しの帯だけに使う
- 色を持つのは紺だけ。ボタン、写真下の帯、ロゴ地に限定する
- グレー地に置くリード見出しは白抜きにして、控えめな印象を保つ
- 色数は写真の暖色に任せ、UI 側では足さない
- 細い曲線はグレーより少し濃い線で、背景に溶け込ませる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション見出しの大きな和文 | ゴシック | Zen Kaku Gothic New | 700 | 40px | 1.3 | 0.2em |
| `headline-md` | 見出し上の小見出し・白抜きリード | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.2em |
| `headline-sm` | 白帯の上に載せる項目見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.15em |
| `accent` | 見出しや写真に重ねる手書きの筆記体英字 | 欧文スクリプト | Mrs Saint Delafield | 400 | 64px | 1.0 | 0.0em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2.0 | 0.08em |
| `label-button` | ボタンの英字ラベル | 欧文サンセリフ | Quicksand | 600 | 11px | 1.0 | 0.05em |
| `note` | 店舗情報の表・注記 | ゴシック | Noto Sans JP | 500 | 9px | 1.7 | 0.03em |

- 和文の見出しは字間を 0.15〜0.2em と広めに取る
- 筆記体英字は和文見出しの背後や写真の下端に、はみ出すように重ねる
- 本文は小さめにし、行間を 2 前後と広く取る
- 見出しには縦書きと横書きを組み合わせてよい
- ボタンの英字は大文字か頭文字だけを大文字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真を左右へずらして非対称に置く
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は画面端に接するように置き、左寄せと右寄せを交互にする
- 本文ブロックは左右 20px の余白で左揃え（ドリンクの紹介は中央揃え）
- セクションの間は 100px 以上空けてゆったり見せる
- CTA ボタンはほぼ全幅のピル型
- 画面下に 4 分割の固定ナビを置く

## Elevation & Depth

- 影は使わず、すべてフラットにする
- 奥行きは写真の重なりと筆記体のはみ出しで出す

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 角丸なしの矩形。横長や正方形を画面端に寄せて置く
- **セクション境界**: 区切りは直線のみ。背景には細い曲線を流す
- 写真に角丸はつけない
- ボタンだけを完全なピル型にする
- 項目見出しは左端から伸びる白い帯に載せる

## Components

- **紺のピルボタン**（`button-primary`）: 英字ラベルを左寄せにし、右端に細い矢印を置いたほぼ全幅のボタン
- **筆記体の英字見出し**（`script-overlay`）: 和文見出しや写真の下端に重ねる、手書き風の白または黒の英字
- **白帯見出し**（`white-band-heading`）: 左端から伸びる白い帯に、黒の太字見出しを載せる
- **写真の下の紺帯リンク**（`photo-link-band`）: 写真のすぐ下に紺の帯を敷き、白字のラベルと矢印を置く
- **店舗情報の表**（`info-table`）: 項目名と内容を縦に積み、項目ごとに細い線で区切る
- **紺の正方形ロゴ**（`logo-square`）: 紺の正方形に白の手書きロゴを入れ、その下に電話番号と CTA を続ける
- **固定の下部ナビ**（`fixed-bottom-nav`）: 電話・Web 予約・初めての方向け・メニューの 4 分割。予約だけを紺にする

## Do's and Don'ts

**Do**
- グレーの地と紺の 2 色を軸にする
- 暗めでシズル感のある写真を大きく使う
- 筆記体の英字を見出しに重ねて抜け感を出す
- 写真は左右交互にずらして配置する
- 余白はたっぷり取る

**Don't**
- 明るい原色やグラデーションを使わない
- 写真やボタン以外に角丸をつけない
- 影や立体的な装飾を加えない
- 本文を太く大きくしすぎない
- 写真を均等なグリッドに並べない

## Page Structure

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

1. **ファーストビュー**（店の雰囲気を一瞬で伝える）: 両脇を黒にした縦長の写真に、白の手書きロゴを大きく重ねる
2. **コンセプト**（店名に込めた想いを伝える）: グレー地に白抜きの大見出しを置き、白帯見出し 2 つと本文を続ける
3. **料理紹介**（料理の魅力を伝える）: 筆記体英字を重ねた見出しの下に、料理写真 3 枚を互い違いに配置し、本文とメニューボタンを添える
4. **ドリンク紹介**（お酒の品揃えを伝える）: 全幅の瓶の写真に筆記体英字を重ね、中央揃えの本文とボタンを続ける
5. **空間・利用シーン**（居心地の良さを伝える）: 縦書きと横書きの見出しを組み合わせ、人物写真と小物の写真を重ねる
6. **誘導バナー**（過ごし方・席案内のページへ送る）: 全幅写真に筆記体英字を重ね、下に紺帯のリンクを置く
7. **外観**（来店のイメージを持たせる）: 店の外観を全幅写真で見せる
8. **予約 CTA**（電話や Web 予約へ導く）: 紺の正方形ロゴの下に電話番号と紺のピルボタンを置く
9. **店舗情報・地図**（基本情報を伝える）: 線で区切った情報表のあとに、地図と地図アプリへのボタンを置く
10. **お知らせ・フッター**（更新情報と補足を載せる）: 濃いグレーのお知らせ欄のあとに、白地のフッターと固定ナビを置く

## Imagery

- 暖色の照明を活かしたローキーな写真で、背景は暗く落とす
- 料理は木のテーブルの上を斜め上から撮り、浅い被写界深度で
- 人物は横顔や手元など、自然な瞬間を切り取る
- 背景には細いペンで描いたような曲線を大きく流す
- ロゴや英字は手書きの筆記体で描く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は左端に縦長のナビ列を固定し、ロゴと電話を縦に並べる
- PC は写真とテキストを 2 カラムで千鳥に配置する
- PC はボタンを短いピル型にする
- PC は過ごし方と席案内の誘導バナーを横 2 分割で並べる
- PC は店舗情報の表を項目と内容の 2 列にし、地図とボタンを横に並べる

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

SOURCE

出典と注意

元の LP: https://www.yumekyu.jp/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

飲食店・レストランクラフト紙×ワインレッドの街の洋食堂 LPWarm Kraft Paper Trattoria LP 飲食店・レストラン焦げ茶と金の大人向け肉バル LPDark Wood Meat Bar LP 飲食店・レストラン生成りグレージュ×焼き色写真のベーカリー店舗LPWarm Greige Editorial Bakery Shop Page 飲食店・レストラングレージュ和紙×朱橙の大人ビストロ LPWarm Greige Bistro French LP 飲食店・レストラン生成り×深緑×木目のレトロ焼肉店 LPRetro Editorial Yakiniku Restaurant LP 飲食店・レストラン白地と炭火写真の和モダン焼鳥店 LPMonochrome Smoke Japanese Grill Corporate LP