朱赤×生成り×深緑の老舗町中華 LP

Chinese Lacquer Red Town Restaurant LP

雷文柄の朱赤地と生成りの和紙調地を交互に重ね、明朝の縦書き見出し・雲紋装飾・中華枠線で老舗中華の格と活気を出す飲食店 LP。CTA は深緑のピル型で統一。

飲食店・レストラン和風力強い・インパクトレトロ親しみ・手作り感SPPC

ダウンロード

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

COLORS

配色

地色は朱赤→生成り→焦茶→生成り→朱赤の順で交互に切り替える
朱赤・焦茶地には必ず細かな雷文パターンを薄く敷く
CTA は全て深緑で統一し、赤地上でも緑を使う
金色は暗色地上のサブ見出しと帯のみに限定
見出しの強調語だけ朱赤文字にする
姉妹店紹介のみ紫地で区別する

TYPOGRAPHY

書体

display縦書きのキャッチ・大見出し明朝／ Shippori Mincho 800 ／ 44px ／行間 1.2

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

headline-lgセクション見出し(横・縦)明朝／ Shippori Mincho 700 ／ 28px ／行間 1.4

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

headline-md下線付き小見出し明朝／ Noto Serif JP 700 ／ 22px ／行間 1.8

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

accent筆文字風のシズル擬音手書き・筆／ Yuji Syuku 400 ／ 64px ／行間 1.1

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

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

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

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

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

note注釈・情報表ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.8

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

見出しは明朝、本文はゴシックで役割を分ける
縦書き見出しを積極的に使い、白短冊や縦罫で挟む
擬音キャッチは筆文字で大きく傾けて配置
本文は字間 0.1em・行間 2 で余裕を持たせる
電話番号は明朝で大きめに表示

PAGE STRUCTURE

セクション構成

ファーストビュー看板料理とロゴで印象付け赤地上に角丸の料理写真、中央に白い筆ロゴ
限定告知とコンセプト期間限定と老舗の歴史を伝える深緑の片丸バナー、金と白の明朝見出し、皿写真に縦書き短冊
店舗紹介文店の成り立ちを説明赤地に白文字本文、上下を二重線で挟む
名物料理看板メニューの魅力訴求生成り地、アーチ白面に筆文字擬音、写真を互い違い配置
営業時間の訴求通し営業を伝える焦茶地、緑枠写真、金帯と金の大見出し
宴会・座席宴会利用を促す個室写真スライダー、縦書き赤明朝の大見出し
店内案内フロア構成を紹介縦罫で挟んだ縦書き見出しと本文
テイクアウト持ち帰り需要の獲得筆帯見出し、弁当写真、赤地の電話番号と受取時間カード
よくある質問不安解消コーナー枠付き白カードのアコーディオン
お知らせ・営業カレンダー最新情報と定休日楕円細線枠、埋め込みカレンダー
店舗情報・アクセス来店情報を網羅ロゴ、電話、細線区切りの情報表、駐車場図、地図
姉妹店紹介関連店舗への送客紫の柄地に写真スライダーと枠ボタン
フッター基本情報と共有焦茶雷文地に白ロゴ、情報、固定予約バー

COMPONENTS

部品

深緑ピル CTA button-primary両端に雷文の小アイコン、明朝白文字の横長ボタン
限定告知バナー banner-limited右端のみ半円の深緑帯に2行の告知
縦書き白短冊 tanzaku-vertical写真上に重ねる白い縦長札に明朝縦書き
赤下線見出し heading-underline明朝見出しの各行に朱赤の細下線
筆ストローク見出し brush-banner朱赤の筆塗り帯の上に白明朝の大見出し
時間案内カード info-card赤地上の淡ピンク二重罫カード、罫線で区切る
FAQ アコーディオン faq-accordion白カード内に Q＋質問＋右シェブロン、下線区切り
固定フッターバー sticky-footer左に深緑の予約ボタン、右に電話・メニューの白ボタン

守ること

赤と焦茶の地には雷文パターンを敷く
見出しは明朝の縦書きを優先する
料理写真は湯気・照りが分かるアップを大きく使う
雲紋の装飾を端からはみ出させる
CTA は深緑ピルで統一する

DON'T

避けること

青や蛍光色を入れない
丸ゴシックやポップ書体を使わない
CTA を赤にして地色と同化させない
無地のフラット地だけで構成しない
影の強いカードを多用しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 朱赤×生成り×深緑の老舗町中華 LP（Chinese Lacquer Red Town Restaurant LP）

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

Overview

業種: 飲食店・レストラン／ 雰囲気: 和風、力強い・インパクト、レトロ、親しみ・手作り感
キーワード: 朱赤・雷文柄・雲紋・縦書き明朝・和紙調・シズル写真
地の質感: 赤・焦茶地には細かな雷文(回字)パターン、生成り地には和紙のざらつきテクスチャ
形: 角丸写真、アーチ形の白抜き、中華の組紐風コーナー枠、片側だけ丸いバナー
温度感: 暖色中心。朱赤と焼き色で温かく、深緑で引き締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#861B21`	朱赤のメイン地色	14%	画素の実測
`background`	`#F2E6D0`	生成り和紙調の地	25%	画素の実測
`background-alt`	`#FAF4E8`	店舗情報の淡い生成り地	12%	画素の実測
`surface`	`#FDFCFA`	白いカード・アーチ	8%	画素の実測
`cta`	`#2D533A`	深緑のピル型ボタン	3%	画素の実測
`on-cta`	`#FEFEFD`	ボタン上の白文字	0%	画素の主要色に補正
`dark-section`	`#24140B`	焦茶の雷文柄地・フッター	12%	画素の実測
`on-dark`	`#FEFEFD`	暗色地の白文字	1%	画素の主要色に補正
`text`	`#1C1C1C`	見出し・本文の墨色	2%	推定
`accent-1`	`#FEE18E`	金色のサブ見出し・帯	2%	画素の実測
`secondary`	`#84191F`	赤い強調見出し文字	1%	画素の主要色に補正
`accent-2`	`#2A1C3F`	姉妹店の紫地	4%	画素の実測
`line`	`#E3DDD3`	情報表の区切り線	0%	画素の主要色に補正
`tint-1`	`#F3EAE9`	赤地上の淡ピンクカード	2%	画素の実測

地色は朱赤→生成り→焦茶→生成り→朱赤の順で交互に切り替える
朱赤・焦茶地には必ず細かな雷文パターンを薄く敷く
CTA は全て深緑で統一し、赤地上でも緑を使う
金色は暗色地上のサブ見出しと帯のみに限定
見出しの強調語だけ朱赤文字にする
姉妹店紹介のみ紫地で区別する

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	縦書きのキャッチ・大見出し	明朝	Shippori Mincho	800	44px	1.2	0.08em
`headline-lg`	セクション見出し(横・縦)	明朝	Shippori Mincho	700	28px	1.4	0.15em
`headline-md`	下線付き小見出し	明朝	Noto Serif JP	700	22px	1.8	0.12em
`accent`	筆文字風のシズル擬音	手書き・筆	Yuji Syuku	400	64px	1.1	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	400	11px	2.0	0.1em
`label-button`	ボタン文字	明朝	Noto Serif JP	700	12px	1.4	0.1em
`note`	注釈・情報表	ゴシック	Noto Sans JP	400	10px	1.8	0.08em

見出しは明朝、本文はゴシックで役割を分ける
縦書き見出しを積極的に使い、白短冊や縦罫で挟む
擬音キャッチは筆文字で大きく傾けて配置
本文は字間 0.1em・行間 2 で余裕を持たせる
電話番号は明朝で大きめに表示
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、写真は左右に互い違い配置
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
本文ブロックは左右 16px 余白
写真は画面端まで寄せる裁ち落としと内側配置を混在
見出し直下に本文、その下に CTA の三段構成を繰り返す
装飾の雲紋は画面端からはみ出させる
情報表はラベルと値を縦に積み細線で区切る

Elevation & Depth

影はほぼ使わずフラット
白カードはごく薄い影か二重罫で浮かせる
写真は重ね配置で奥行きを出す

Shapes

角丸: 小 4px ／中 12px ／大 32px。ボタンはピル型。
写真の切り抜き: 角丸長方形、片側だけ大きく丸める、円形皿の切り抜き
セクション境界: 直線切替＋雷文の細帯ボーダー
ボタン両端に雷文アイコンを置く
キャッチ背景に上部アーチ形の白面
セクション四隅に中華組紐風のコーナー枠
お知らせは楕円の細線枠で囲む

Components

深緑ピル CTA（button-primary）: 両端に雷文の小アイコン、明朝白文字の横長ボタン
限定告知バナー（banner-limited）: 右端のみ半円の深緑帯に2行の告知
縦書き白短冊（tanzaku-vertical）: 写真上に重ねる白い縦長札に明朝縦書き
赤下線見出し（heading-underline）: 明朝見出しの各行に朱赤の細下線
筆ストローク見出し（brush-banner）: 朱赤の筆塗り帯の上に白明朝の大見出し
時間案内カード（info-card）: 赤地上の淡ピンク二重罫カード、罫線で区切る
FAQ アコーディオン（faq-accordion）: 白カード内に Q＋質問＋右シェブロン、下線区切り
固定フッターバー（sticky-footer）: 左に深緑の予約ボタン、右に電話・メニューの白ボタン

Do's and Don'ts

Do - 赤と焦茶の地には雷文パターンを敷く - 見出しは明朝の縦書きを優先する - 料理写真は湯気・照りが分かるアップを大きく使う - 雲紋の装飾を端からはみ出させる - CTA は深緑ピルで統一する

Don't - 青や蛍光色を入れない - 丸ゴシックやポップ書体を使わない - CTA を赤にして地色と同化させない - 無地のフラット地だけで構成しない - 影の強いカードを多用しない

Page Structure

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

ファーストビュー（看板料理とロゴで印象付け）: 赤地上に角丸の料理写真、中央に白い筆ロゴ
限定告知とコンセプト（期間限定と老舗の歴史を伝える）: 深緑の片丸バナー、金と白の明朝見出し、皿写真に縦書き短冊
店舗紹介文（店の成り立ちを説明）: 赤地に白文字本文、上下を二重線で挟む
名物料理（看板メニューの魅力訴求）: 生成り地、アーチ白面に筆文字擬音、写真を互い違い配置
営業時間の訴求（通し営業を伝える）: 焦茶地、緑枠写真、金帯と金の大見出し
宴会・座席（宴会利用を促す）: 個室写真スライダー、縦書き赤明朝の大見出し
店内案内（フロア構成を紹介）: 縦罫で挟んだ縦書き見出しと本文
テイクアウト（持ち帰り需要の獲得）: 筆帯見出し、弁当写真、赤地の電話番号と受取時間カード
よくある質問（不安解消）: コーナー枠付き白カードのアコーディオン
お知らせ・営業カレンダー（最新情報と定休日）: 楕円細線枠、埋め込みカレンダー
店舗情報・アクセス（来店情報を網羅）: ロゴ、電話、細線区切りの情報表、駐車場図、地図
姉妹店紹介（関連店舗への送客）: 紫の柄地に写真スライダーと枠ボタン
フッター（基本情報と共有）: 焦茶雷文地に白ロゴ、情報、固定予約バー

Imagery

料理は照り・湯気・ソースの流れを強調した暖色寄りのアップ
白い丸皿を俯瞰〜斜めで撮り、皿の縁を画面端で切る
鍋振りや箸で持ち上げる動きのあるカット
店内は暖色照明の円卓・座敷を広角で
朱赤の雲紋・龍イラストを装飾に
中華組紐風の線画コーナー枠
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は左サイドに縦ナビとロゴを置いた全面写真 FV
PC の紹介文は縦書き多段組
PC は写真とテキストを左右 2 カラムで交互配置
店舗情報は 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: Chinese Lacquer Red Town Restaurant LP
description: 雷文柄の朱赤地と生成りの和紙調地を交互に重ね、明朝の縦書き見出し・雲紋装飾・中華枠線で老舗中華の格と活気を出す飲食店 LP。CTA は深緑のピル型で統一。
colors:
  primary: '#861B21'
  background: '#F2E6D0'
  background-alt: '#FAF4E8'
  surface: '#FDFCFA'
  cta: '#2D533A'
  on-cta: '#FEFEFD'
  dark-section: '#24140B'
  on-dark: '#FEFEFD'
  text: '#1C1C1C'
  accent-1: '#FEE18E'
  secondary: '#84191F'
  accent-2: '#2A1C3F'
  line: '#E3DDD3'
  tint-1: '#F3EAE9'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.12em
  accent:
    fontFamily: Yuji Syuku
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.08em
rounded:
  sm: 4px
  md: 12px
  lg: 32px
  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.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 38px
  banner-limited:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 72px
  tanzaku-vertical:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 220px
  heading-underline:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 40px
  brush-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 80px
  info-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 320px
  faq-accordion:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 56px
  sticky-footer:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 60px
---

# DESIGN.md — 朱赤×生成り×深緑の老舗町中華 LP（Chinese Lacquer Red Town Restaurant LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、力強い・インパクト、レトロ、親しみ・手作り感
- **キーワード**: 朱赤・雷文柄・雲紋・縦書き明朝・和紙調・シズル写真
- **地の質感**: 赤・焦茶地には細かな雷文(回字)パターン、生成り地には和紙のざらつきテクスチャ
- **形**: 角丸写真、アーチ形の白抜き、中華の組紐風コーナー枠、片側だけ丸いバナー
- **温度感**: 暖色中心。朱赤と焼き色で温かく、深緑で引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#861B21` | 朱赤のメイン地色 | 14% | 画素の実測 |
| `background` | `#F2E6D0` | 生成り和紙調の地 | 25% | 画素の実測 |
| `background-alt` | `#FAF4E8` | 店舗情報の淡い生成り地 | 12% | 画素の実測 |
| `surface` | `#FDFCFA` | 白いカード・アーチ | 8% | 画素の実測 |
| `cta` | `#2D533A` | 深緑のピル型ボタン | 3% | 画素の実測 |
| `on-cta` | `#FEFEFD` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `dark-section` | `#24140B` | 焦茶の雷文柄地・フッター | 12% | 画素の実測 |
| `on-dark` | `#FEFEFD` | 暗色地の白文字 | 1% | 画素の主要色に補正 |
| `text` | `#1C1C1C` | 見出し・本文の墨色 | 2% | 推定 |
| `accent-1` | `#FEE18E` | 金色のサブ見出し・帯 | 2% | 画素の実測 |
| `secondary` | `#84191F` | 赤い強調見出し文字 | 1% | 画素の主要色に補正 |
| `accent-2` | `#2A1C3F` | 姉妹店の紫地 | 4% | 画素の実測 |
| `line` | `#E3DDD3` | 情報表の区切り線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#F3EAE9` | 赤地上の淡ピンクカード | 2% | 画素の実測 |

- 地色は朱赤→生成り→焦茶→生成り→朱赤の順で交互に切り替える
- 朱赤・焦茶地には必ず細かな雷文パターンを薄く敷く
- CTA は全て深緑で統一し、赤地上でも緑を使う
- 金色は暗色地上のサブ見出しと帯のみに限定
- 見出しの強調語だけ朱赤文字にする
- 姉妹店紹介のみ紫地で区別する

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 縦書きのキャッチ・大見出し | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.08em |
| `headline-lg` | セクション見出し(横・縦) | 明朝 | Shippori Mincho | 700 | 28px | 1.4 | 0.15em |
| `headline-md` | 下線付き小見出し | 明朝 | Noto Serif JP | 700 | 22px | 1.8 | 0.12em |
| `accent` | 筆文字風のシズル擬音 | 手書き・筆 | Yuji Syuku | 400 | 64px | 1.1 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 2.0 | 0.1em |
| `label-button` | ボタン文字 | 明朝 | Noto Serif JP | 700 | 12px | 1.4 | 0.1em |
| `note` | 注釈・情報表 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.08em |

- 見出しは明朝、本文はゴシックで役割を分ける
- 縦書き見出しを積極的に使い、白短冊や縦罫で挟む
- 擬音キャッチは筆文字で大きく傾けて配置
- 本文は字間 0.1em・行間 2 で余裕を持たせる
- 電話番号は明朝で大きめに表示
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、写真は左右に互い違い配置
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
- 本文ブロックは左右 16px 余白
- 写真は画面端まで寄せる裁ち落としと内側配置を混在
- 見出し直下に本文、その下に CTA の三段構成を繰り返す
- 装飾の雲紋は画面端からはみ出させる
- 情報表はラベルと値を縦に積み細線で区切る

## Elevation & Depth

- 影はほぼ使わずフラット
- 白カードはごく薄い影か二重罫で浮かせる
- 写真は重ね配置で奥行きを出す

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: 角丸長方形、片側だけ大きく丸める、円形皿の切り抜き
- **セクション境界**: 直線切替＋雷文の細帯ボーダー
- ボタン両端に雷文アイコンを置く
- キャッチ背景に上部アーチ形の白面
- セクション四隅に中華組紐風のコーナー枠
- お知らせは楕円の細線枠で囲む

## Components

- **深緑ピル CTA**（`button-primary`）: 両端に雷文の小アイコン、明朝白文字の横長ボタン
- **限定告知バナー**（`banner-limited`）: 右端のみ半円の深緑帯に2行の告知
- **縦書き白短冊**（`tanzaku-vertical`）: 写真上に重ねる白い縦長札に明朝縦書き
- **赤下線見出し**（`heading-underline`）: 明朝見出しの各行に朱赤の細下線
- **筆ストローク見出し**（`brush-banner`）: 朱赤の筆塗り帯の上に白明朝の大見出し
- **時間案内カード**（`info-card`）: 赤地上の淡ピンク二重罫カード、罫線で区切る
- **FAQ アコーディオン**（`faq-accordion`）: 白カード内に Q＋質問＋右シェブロン、下線区切り
- **固定フッターバー**（`sticky-footer`）: 左に深緑の予約ボタン、右に電話・メニューの白ボタン

## Do's and Don'ts

**Do**
- 赤と焦茶の地には雷文パターンを敷く
- 見出しは明朝の縦書きを優先する
- 料理写真は湯気・照りが分かるアップを大きく使う
- 雲紋の装飾を端からはみ出させる
- CTA は深緑ピルで統一する

**Don't**
- 青や蛍光色を入れない
- 丸ゴシックやポップ書体を使わない
- CTA を赤にして地色と同化させない
- 無地のフラット地だけで構成しない
- 影の強いカードを多用しない

## Page Structure

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

1. **ファーストビュー**（看板料理とロゴで印象付け）: 赤地上に角丸の料理写真、中央に白い筆ロゴ
2. **限定告知とコンセプト**（期間限定と老舗の歴史を伝える）: 深緑の片丸バナー、金と白の明朝見出し、皿写真に縦書き短冊
3. **店舗紹介文**（店の成り立ちを説明）: 赤地に白文字本文、上下を二重線で挟む
4. **名物料理**（看板メニューの魅力訴求）: 生成り地、アーチ白面に筆文字擬音、写真を互い違い配置
5. **営業時間の訴求**（通し営業を伝える）: 焦茶地、緑枠写真、金帯と金の大見出し
6. **宴会・座席**（宴会利用を促す）: 個室写真スライダー、縦書き赤明朝の大見出し
7. **店内案内**（フロア構成を紹介）: 縦罫で挟んだ縦書き見出しと本文
8. **テイクアウト**（持ち帰り需要の獲得）: 筆帯見出し、弁当写真、赤地の電話番号と受取時間カード
9. **よくある質問**（不安解消）: コーナー枠付き白カードのアコーディオン
10. **お知らせ・営業カレンダー**（最新情報と定休日）: 楕円細線枠、埋め込みカレンダー
11. **店舗情報・アクセス**（来店情報を網羅）: ロゴ、電話、細線区切りの情報表、駐車場図、地図
12. **姉妹店紹介**（関連店舗への送客）: 紫の柄地に写真スライダーと枠ボタン
13. **フッター**（基本情報と共有）: 焦茶雷文地に白ロゴ、情報、固定予約バー

## Imagery

- 料理は照り・湯気・ソースの流れを強調した暖色寄りのアップ
- 白い丸皿を俯瞰〜斜めで撮り、皿の縁を画面端で切る
- 鍋振りや箸で持ち上げる動きのあるカット
- 店内は暖色照明の円卓・座敷を広角で
- 朱赤の雲紋・龍イラストを装飾に
- 中華組紐風の線画コーナー枠
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は左サイドに縦ナビとロゴを置いた全面写真 FV
- PC の紹介文は縦書き多段組
- PC は写真とテキストを左右 2 カラムで交互配置
- 店舗情報は 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-ebd7d185`（元 LP の URL から採番）
- **元 LP**: https://www.hao-2.com/sangokushi/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 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.hao-2.com/sangokushi/（公開状況により表示できない場合があります）
この 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