深緑×木目の斜め切りカフェ LP

Rustic Green Slanted Cafe LP

白地に深緑の帯と木目の帯を斜めに差し込み、縦書き明朝と手書き風欧文で時間帯ごとの過ごし方を見せる、写真主体の地域カフェ LP。

飲食店・レストランナチュラル上品・高級親しみ・手作り感PC

ダウンロード

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

COLORS

配色

地は白と薄グレーのテクスチャを交互に使う
深緑はセクション帯・ボタン・バナーに限定する
木目の茶帯は写真セクションの上下に斜めに挟む
強い原色は使わず色味は写真に任せる
濃色帯上の文字は白のみ

TYPOGRAPHY

書体

display縦書きのキャッチ明朝／ Shippori Mincho 500 ／ 28px ／行間 1.6

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

accent時間帯名などの手書き欧文見出し欧文スクリプト／ Kalam 700 ／ 36px ／行間 1.1

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

headline-lgセクション見出し明朝／ Shippori Mincho 500 ／ 22px ／行間 1.5

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

headline-sm小見出し・電話番号明朝／ Noto Serif JP 600 ／ 17px ／行間 1.5

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 2.0

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

note注釈・営業時間ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.7

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

label-buttonボタン文字明朝／ Noto Serif JP 500 ／ 13px ／行間 1.4

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

キャッチは縦書き明朝で3行前後に改行
手書き欧文と和文明朝の小見出しを組み合わせる
本文は行間2.0で小さめに静かに組む
時間帯は欧文見出しの右下に小さく添える
太字ゴシックの大見出しは使わない

PAGE STRUCTURE

セクション構成

ファーストビュー店の外観と雰囲気を伝える縦長の外観写真に縦書き白明朝キャッチ、横に手書きロゴと連絡先ボックス
お知らせ最新情報とSNS誘導斜めの深緑テクスチャ帯に欧文見出しと記事、白枠ボタン
テイクアウト告知持ち帰り需要を拾う料理写真の左を深緑の斜めバナーで覆う
店内写真＋コンセプト居心地の良さを伝える木目帯に挟んだ斜め切りの店内写真、縦書きキャッチ
時間帯別紹介（昼・カフェ）利用シーンを示す手書き欧文見出し＋時間、料理写真と本文、正円の誘導ボタン
夜の紹介酒・アラカルトの訴求暗い写真に深緑の斜め帯、白文字見出しとハッピーアワー表
イベント季節イベントの告知薄グレーテクスチャ地に縦書き見出しと写真2枚
プラン料金BBQ等の料金提示白カードに写真と料金表
テイクアウト詳細持ち帰りメニュー誘導深緑の斜め面に白文字、左にドリンク写真
店内のご案内席や利用ルール・予約を案内写真と本文、番号付きルール、枠囲みの電話番号
フロアマップ席配置を見せる線画の簡易図面に大きな淡色欧文
店舗情報・アクセス住所・営業時間・地図斜め切り外観写真、2列情報表、地図埋め込みと深緑ボタン

COMPONENTS

部品

矢印付き角型ボタン button-primary深緑地に白の明朝文字と右矢印
白地の枠線ボタン button-outline白地に墨文字と細枠、右に矢印
正円のメニュー誘導 circle-link深緑の円に白文字2〜3行と矢印
手書き欧文見出し script-heading大きな手書き欧文＋時間帯の小文字、下線や放射線の装飾
斜めカットの緑バナー slant-banner写真の左を深緑の平行四辺形で覆い欧文見出しと説明を載せる
白い料金カード price-card薄グレー地上の白箱に写真とプラン料金の表
時間帯ラベル表 hours-table深緑ラベル＋グレー地の時間を横並び
生成りの告知ボックス info-box生成り地に吹き出しラベルと電話番号

守ること

縦書き明朝のキャッチを写真の横に置く
斜めの色帯でセクションをリズムよくつなぐ
時間帯ごとに手書き欧文見出しで区切る
写真は自然光で温かい色味に揃える
ボタンは深緑の角型で統一

DON'T

避けること

ビビッドな赤や黄のボタンを使わない
角丸の大きいカードやポップな装飾を入れない
太いゴシックの大見出しを使わない
斜めの角度をバラバラにしない
文字を詰め込みすぎない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深緑×木目の斜め切りカフェ LP（Rustic Green Slanted Cafe LP）

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

Overview

業種: 飲食店・レストラン／ 雰囲気: ナチュラル、上品・高級、親しみ・手作り感
キーワード: 斜め切り・深緑・木目・縦書き明朝・手書き欧文・写真主体
地の質感: 和紙や漆喰のような薄いグレーのざらつき地、深緑の擦れたテクスチャ帯、濃い茶の木目帯
形: 写真と色面を斜めの平行四辺形に切り、角丸はほぼ使わない。ボタンは角型か正円
温度感: 温かみのある落ち着いたトーン。白と深緑で静か、写真の料理色で温度を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#46583E`	ブランドの深緑（帯・ボタン）	6%	画素の実測
`dark-section`	`#2B3E42`	濃い青緑のテクスチャ帯	6%	画素の実測
`background`	`#FFFFFF`	基本の白地	42%	画素の実測
`background-alt`	`#EDEDED`	ざらつきのある薄グレー地	12%	画素の実測
`surface`	`#F5F0EA`	案内ボックスの生成り地	4%	画素の実測
`secondary`	`#5A3E2A`	木目帯の茶	3%	推定
`cta`	`#4B5C43`	主ボタンの深緑	1%	画素の実測
`on-cta`	`#FFFFFF`	ボタン文字の白	0%	画素の主要色に補正
`text`	`#2C2C2C`	見出し・本文の墨色	2%	画素の実測
`text-muted`	`#777777`	注釈のグレー	1%	推定
`line`	`#ECEDEC`	表の罫線	0%	画素の主要色に補正
`accent-1`	`#CABDB0`	電話番号ラベルのくすみピンクベージュ	0%	画素の主要色に補正
`on-dark`	`#FFFFFF`	濃色帯上の白文字	1%	画素の主要色に補正

地は白と薄グレーのテクスチャを交互に使う
深緑はセクション帯・ボタン・バナーに限定する
木目の茶帯は写真セクションの上下に斜めに挟む
強い原色は使わず色味は写真に任せる
濃色帯上の文字は白のみ

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	縦書きのキャッチ	明朝	Shippori Mincho	500	28px	1.6	0.15em
`accent`	時間帯名などの手書き欧文見出し	欧文スクリプト	Kalam	700	36px	1.1	0.0em
`headline-lg`	セクション見出し	明朝	Shippori Mincho	500	22px	1.5	0.1em
`headline-sm`	小見出し・電話番号	明朝	Noto Serif JP	600	17px	1.5	0.08em
`body-md`	本文	ゴシック	Noto Sans JP	400	13px	2.0	0.05em
`note`	注釈・営業時間	ゴシック	Noto Sans JP	400	11px	1.7	0.03em
`label-button`	ボタン文字	明朝	Noto Serif JP	500	13px	1.4	0.1em

キャッチは縦書き明朝で3行前後に改行
手書き欧文と和文明朝の小見出しを組み合わせる
本文は行間2.0で小さめに静かに組む
時間帯は欧文見出しの右下に小さく添える
太字ゴシックの大見出しは使わない
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、写真と文章を上下に交互配置
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
写真は片側に寄せて裁ち落とし、文章は反対側
セクション境界は斜めの色帯でつなぐ
余白を広めに取り詰め込まない
情報表は2列のラベル/値で罫線区切り

Elevation & Depth

影はほぼ使わずフラット
白カードは薄グレー地の上に置き面で浮かせる
写真の重なりで奥行きを出す

Shapes

角丸: 小 0px ／中 2px ／大 999px。ボタンは角丸の長方形。
写真の切り抜き: 長方形と斜めの平行四辺形、料理は真上からの丸皿
セクション境界: 約5〜8度の斜めカット、木目帯や深緑帯を斜めに挿入
ボタンは角型、補助リンクだけ深緑の正円
斜めの角度はページ内で統一
角丸カードは使わない

Components

矢印付き角型ボタン（button-primary）: 深緑地に白の明朝文字と右矢印
白地の枠線ボタン（button-outline）: 白地に墨文字と細枠、右に矢印
正円のメニュー誘導（circle-link）: 深緑の円に白文字2〜3行と矢印
手書き欧文見出し（script-heading）: 大きな手書き欧文＋時間帯の小文字、下線や放射線の装飾
斜めカットの緑バナー（slant-banner）: 写真の左を深緑の平行四辺形で覆い欧文見出しと説明を載せる
白い料金カード（price-card）: 薄グレー地上の白箱に写真とプラン料金の表
時間帯ラベル表（hours-table）: 深緑ラベル＋グレー地の時間を横並び
生成りの告知ボックス（info-box）: 生成り地に吹き出しラベルと電話番号

Do's and Don'ts

Do - 縦書き明朝のキャッチを写真の横に置く - 斜めの色帯でセクションをリズムよくつなぐ - 時間帯ごとに手書き欧文見出しで区切る - 写真は自然光で温かい色味に揃える - ボタンは深緑の角型で統一

Don't - ビビッドな赤や黄のボタンを使わない - 角丸の大きいカードやポップな装飾を入れない - 太いゴシックの大見出しを使わない - 斜めの角度をバラバラにしない - 文字を詰め込みすぎない

Page Structure

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

ファーストビュー（店の外観と雰囲気を伝える）: 縦長の外観写真に縦書き白明朝キャッチ、横に手書きロゴと連絡先ボックス
お知らせ（最新情報とSNS誘導）: 斜めの深緑テクスチャ帯に欧文見出しと記事、白枠ボタン
テイクアウト告知（持ち帰り需要を拾う）: 料理写真の左を深緑の斜めバナーで覆う
店内写真＋コンセプト（居心地の良さを伝える）: 木目帯に挟んだ斜め切りの店内写真、縦書きキャッチ
時間帯別紹介（昼・カフェ）（利用シーンを示す）: 手書き欧文見出し＋時間、料理写真と本文、正円の誘導ボタン
夜の紹介（酒・アラカルトの訴求）: 暗い写真に深緑の斜め帯、白文字見出しとハッピーアワー表
イベント（季節イベントの告知）: 薄グレーテクスチャ地に縦書き見出しと写真2枚
プラン料金（BBQ等の料金提示）: 白カードに写真と料金表
テイクアウト詳細（持ち帰りメニュー誘導）: 深緑の斜め面に白文字、左にドリンク写真
店内のご案内（席や利用ルール・予約を案内）: 写真と本文、番号付きルール、枠囲みの電話番号
フロアマップ（席配置を見せる）: 線画の簡易図面に大きな淡色欧文
店舗情報・アクセス（住所・営業時間・地図）: 斜め切り外観写真、2列情報表、地図埋め込みと深緑ボタン

Imagery

自然光で撮る料理、木のテーブルと北欧風の器
店内は広角で温かい照明を写す
夜メニューは暗背景で被写体に光を当てる
人物は店主や演奏者の自然なスナップ
テクスチャは漆喰・和紙調の薄いざらつき
手書きの小さな注釈文字を写真に添える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPは1カラムで写真を全幅、文章を下に置く
縦書きキャッチはSPでも縦書きを保ち写真横に重ねる
斜め帯の角度はSPでやや浅くする
手書き欧文見出しは32〜40pxに縮める
情報表はSPでラベル上・値下の縦積みに
PCのグローバルナビはSPでハンバーガーに

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: Rustic Green Slanted Cafe LP
description: 白地に深緑の帯と木目の帯を斜めに差し込み、縦書き明朝と手書き風欧文で時間帯ごとの過ごし方を見せる、写真主体の地域カフェ LP。
colors:
  primary: '#46583E'
  dark-section: '#2B3E42'
  background: '#FFFFFF'
  background-alt: '#EDEDED'
  surface: '#F5F0EA'
  secondary: '#5A3E2A'
  cta: '#4B5C43'
  on-cta: '#FFFFFF'
  text: '#2C2C2C'
  text-muted: '#777777'
  line: '#ECEDEC'
  accent-1: '#CABDB0'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.15em
  accent:
    fontFamily: Kalam
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 2px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 40px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 36px
  circle-link:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 80px
  script-heading:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 60px
  slant-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 140px
  price-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 200px
  hours-table:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 24px
  info-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 160px
---

# DESIGN.md — 深緑×木目の斜め切りカフェ LP（Rustic Green Slanted Cafe LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: ナチュラル、上品・高級、親しみ・手作り感
- **キーワード**: 斜め切り・深緑・木目・縦書き明朝・手書き欧文・写真主体
- **地の質感**: 和紙や漆喰のような薄いグレーのざらつき地、深緑の擦れたテクスチャ帯、濃い茶の木目帯
- **形**: 写真と色面を斜めの平行四辺形に切り、角丸はほぼ使わない。ボタンは角型か正円
- **温度感**: 温かみのある落ち着いたトーン。白と深緑で静か、写真の料理色で温度を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#46583E` | ブランドの深緑（帯・ボタン） | 6% | 画素の実測 |
| `dark-section` | `#2B3E42` | 濃い青緑のテクスチャ帯 | 6% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 42% | 画素の実測 |
| `background-alt` | `#EDEDED` | ざらつきのある薄グレー地 | 12% | 画素の実測 |
| `surface` | `#F5F0EA` | 案内ボックスの生成り地 | 4% | 画素の実測 |
| `secondary` | `#5A3E2A` | 木目帯の茶 | 3% | 推定 |
| `cta` | `#4B5C43` | 主ボタンの深緑 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン文字の白 | 0% | 画素の主要色に補正 |
| `text` | `#2C2C2C` | 見出し・本文の墨色 | 2% | 画素の実測 |
| `text-muted` | `#777777` | 注釈のグレー | 1% | 推定 |
| `line` | `#ECEDEC` | 表の罫線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#CABDB0` | 電話番号ラベルのくすみピンクベージュ | 0% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 濃色帯上の白文字 | 1% | 画素の主要色に補正 |

- 地は白と薄グレーのテクスチャを交互に使う
- 深緑はセクション帯・ボタン・バナーに限定する
- 木目の茶帯は写真セクションの上下に斜めに挟む
- 強い原色は使わず色味は写真に任せる
- 濃色帯上の文字は白のみ

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 縦書きのキャッチ | 明朝 | Shippori Mincho | 500 | 28px | 1.6 | 0.15em |
| `accent` | 時間帯名などの手書き欧文見出し | 欧文スクリプト | Kalam | 700 | 36px | 1.1 | 0.0em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 22px | 1.5 | 0.1em |
| `headline-sm` | 小見出し・電話番号 | 明朝 | Noto Serif JP | 600 | 17px | 1.5 | 0.08em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em |
| `note` | 注釈・営業時間 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em |
| `label-button` | ボタン文字 | 明朝 | Noto Serif JP | 500 | 13px | 1.4 | 0.1em |

- キャッチは縦書き明朝で3行前後に改行
- 手書き欧文と和文明朝の小見出しを組み合わせる
- 本文は行間2.0で小さめに静かに組む
- 時間帯は欧文見出しの右下に小さく添える
- 太字ゴシックの大見出しは使わない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、写真と文章を上下に交互配置
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は片側に寄せて裁ち落とし、文章は反対側
- セクション境界は斜めの色帯でつなぐ
- 余白を広めに取り詰め込まない
- 情報表は2列のラベル/値で罫線区切り

## Elevation & Depth

- 影はほぼ使わずフラット
- 白カードは薄グレー地の上に置き面で浮かせる
- 写真の重なりで奥行きを出す

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 長方形と斜めの平行四辺形、料理は真上からの丸皿
- **セクション境界**: 約5〜8度の斜めカット、木目帯や深緑帯を斜めに挿入
- ボタンは角型、補助リンクだけ深緑の正円
- 斜めの角度はページ内で統一
- 角丸カードは使わない

## Components

- **矢印付き角型ボタン**（`button-primary`）: 深緑地に白の明朝文字と右矢印
- **白地の枠線ボタン**（`button-outline`）: 白地に墨文字と細枠、右に矢印
- **正円のメニュー誘導**（`circle-link`）: 深緑の円に白文字2〜3行と矢印
- **手書き欧文見出し**（`script-heading`）: 大きな手書き欧文＋時間帯の小文字、下線や放射線の装飾
- **斜めカットの緑バナー**（`slant-banner`）: 写真の左を深緑の平行四辺形で覆い欧文見出しと説明を載せる
- **白い料金カード**（`price-card`）: 薄グレー地上の白箱に写真とプラン料金の表
- **時間帯ラベル表**（`hours-table`）: 深緑ラベル＋グレー地の時間を横並び
- **生成りの告知ボックス**（`info-box`）: 生成り地に吹き出しラベルと電話番号

## Do's and Don'ts

**Do**
- 縦書き明朝のキャッチを写真の横に置く
- 斜めの色帯でセクションをリズムよくつなぐ
- 時間帯ごとに手書き欧文見出しで区切る
- 写真は自然光で温かい色味に揃える
- ボタンは深緑の角型で統一

**Don't**
- ビビッドな赤や黄のボタンを使わない
- 角丸の大きいカードやポップな装飾を入れない
- 太いゴシックの大見出しを使わない
- 斜めの角度をバラバラにしない
- 文字を詰め込みすぎない

## Page Structure

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

1. **ファーストビュー**（店の外観と雰囲気を伝える）: 縦長の外観写真に縦書き白明朝キャッチ、横に手書きロゴと連絡先ボックス
2. **お知らせ**（最新情報とSNS誘導）: 斜めの深緑テクスチャ帯に欧文見出しと記事、白枠ボタン
3. **テイクアウト告知**（持ち帰り需要を拾う）: 料理写真の左を深緑の斜めバナーで覆う
4. **店内写真＋コンセプト**（居心地の良さを伝える）: 木目帯に挟んだ斜め切りの店内写真、縦書きキャッチ
5. **時間帯別紹介（昼・カフェ）**（利用シーンを示す）: 手書き欧文見出し＋時間、料理写真と本文、正円の誘導ボタン
6. **夜の紹介**（酒・アラカルトの訴求）: 暗い写真に深緑の斜め帯、白文字見出しとハッピーアワー表
7. **イベント**（季節イベントの告知）: 薄グレーテクスチャ地に縦書き見出しと写真2枚
8. **プラン料金**（BBQ等の料金提示）: 白カードに写真と料金表
9. **テイクアウト詳細**（持ち帰りメニュー誘導）: 深緑の斜め面に白文字、左にドリンク写真
10. **店内のご案内**（席や利用ルール・予約を案内）: 写真と本文、番号付きルール、枠囲みの電話番号
11. **フロアマップ**（席配置を見せる）: 線画の簡易図面に大きな淡色欧文
12. **店舗情報・アクセス**（住所・営業時間・地図）: 斜め切り外観写真、2列情報表、地図埋め込みと深緑ボタン

## Imagery

- 自然光で撮る料理、木のテーブルと北欧風の器
- 店内は広角で温かい照明を写す
- 夜メニューは暗背景で被写体に光を当てる
- 人物は店主や演奏者の自然なスナップ
- テクスチャは漆喰・和紙調の薄いざらつき
- 手書きの小さな注釈文字を写真に添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPは1カラムで写真を全幅、文章を下に置く
- 縦書きキャッチはSPでも縦書きを保ち写真横に重ねる
- 斜め帯の角度はSPでやや浅くする
- 手書き欧文見出しは32〜40pxに縮める
- 情報表はSPでラベル上・値下の縦積みに
- 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-a0361bb0`（元 LP の URL から採番）
- **元 LP**: https://www.shinamon-cafe.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低
- **生成**: 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.shinamon-cafe.com/（公開状況により表示できない場合があります）
この 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