---
version: alpha
name: Dark Washi Japanese Hotpot Mail-Order LP
description: 黒い外枠に和紙調ベージュのパネルを重ねた、老舗料理店風の食品通販LP。明朝体の大見出し、えんじ色の購入ボタン、セット価格表のくり返しで「本格感」と「お得感」を両立させる。
colors:
  background: '#000000'
  dark-section: '#23282A'
  surface: '#E9E5DC'
  background-alt: '#F7F5EF'
  primary: '#B04248'
  cta: '#A42C2C'
  on-cta: '#F7F5EF'
  secondary: '#AA9A62'
  accent-1: '#AEB692'
  accent-2: '#B79270'
  text: '#191210'
  text-body: '#23282A'
  on-dark: '#F7F5EF'
  line: '#DFD0C0'
  primary-accessible: '#AE4147'
  secondary-accessible: '#EAE6D7'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
  accent:
    fontFamily: Noto Serif JP
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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.sm}'
    height: 40px
  price-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 130px
  bonus-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 56px
  arrow-ribbon:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 44px
  point-heading:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 48px
  dark-title-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 56px
  step-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 90px
  info-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 40px
  qa-block:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 40px
---

# DESIGN.md — 黒地×和紙ベージュの老舗鍋お取り寄せLP（Dark Washi Japanese Hotpot Mail-Order LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 和風、上品・高級、情報量多め・訴求型、力強い・インパクト
- **キーワード**: 老舗・和紙・黒地・明朝・シズル写真・セット価格
- **地の質感**: 和紙のような細かい繊維ノイズのあるベージュ面と、墨色のグラデーション帯
- **形**: 角の小さい四角パネルを縦に積む。価格番号は丸、セット間は下向き矢印の帯
- **温度感**: 温かい（暖色の料理写真とえんじ・金茶を落ち着いた黒が引き締める）

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページ外枠の黒地 | 17% | 画素の実測 |
| `dark-section` | `#23282A` | 見出し帯・価格表エリアの墨色 | 12% | 画素の主要色に補正 |
| `surface` | `#E9E5DC` | 和紙調ベージュのコンテンツパネル | 30% | 画素の実測 |
| `background-alt` | `#F7F5EF` | 白に近い本文ボックス | 4% | 画素の主要色に補正 |
| `primary` | `#B04248` | えんじ色・ブランド強調と見出し文字 | 3% | 画素の実測 |
| `cta` | `#A42C2C` | 購入ボタンのえんじ | 1% | 画素の実測 |
| `on-cta` | `#F7F5EF` | 購入ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#AA9A62` | 特典帯の金茶（オリーブゴールド） | 3% | 画素の実測 |
| `accent-1` | `#AEB692` | 野菜紹介セクションの抹茶グリーン | 9% | 画素の主要色に補正 |
| `accent-2` | `#B79270` | 手順番号の丸・矢印の焦茶ベージュ | 3% | 画素の主要色に補正 |
| `text` | `#191210` | 見出しの墨黒文字 | 2% | 画素の実測 |
| `text-body` | `#23282A` | 本文のダークグレー | 3% | 画素の主要色に補正 |
| `on-dark` | `#F7F5EF` | 黒帯上の白文字 | 1% | 画素の主要色に補正 |
| `line` | `#DFD0C0` | リストの区切り点線 | 0% | 画素の主要色に補正 |
| `primary-accessible` | `#AE4147` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#EAE6D7` | AA を満たす補正値（計算） |  | 計算 |

- 外周は黒、中身は和紙ベージュのパネルを浮かせる二層構成にする
- 見出し帯・価格表まわりは墨色グラデーションで締める
- えんじ色は価格・購入ボタン・特典文言・リスト記号に限定する
- 金茶は特典帯とセット番号ラベルにだけ使う
- 抹茶グリーンは素材・野菜紹介など自然を語る1セクションのみ
- 本文はベージュ地に濃灰、黒地には生成り白文字
- `price-card` は文字 `#B04248` × 背景 `#E9E5DC` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AE4147`、4.58:1）を使う。
- `bonus-band` は文字 `#B04248` × 背景 `#AA9A62` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#EAE6D7`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名など最大見出し | 明朝 | Shippori Mincho | 700 | 36px | 1.2 | 0.05em |
| `headline-lg` | セクション見出し・ポイント見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.3 | 0.05em |
| `headline-md` | お客様の声の小見出し・特典帯 | 明朝 | Noto Serif JP | 700 | 18px | 1.4 | 0.02em |
| `headline-sm` | 左縦線付きの情報ブロック見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.5 | 0em |
| `accent` | 価格の大きな数字 | 欧文セリフ | Noto Serif JP | 700 | 32px | 1.1 | 0em |
| `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `note` | 送料注記・特商法表 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em |
| `label-button` | 購入ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1 | 0.05em |

- 見出しはすべて明朝で、商品名だけ極端に大きくする
- 見出し内で小さい語と大きい語を混ぜ、主語を大きくするジャンプ率を作る
- 本文と注記はゴシックで小さめに詰める
- 価格は明朝の太い数字をえんじで、単位の円は少し小さく
- 写真上の文字は白か赤文字に濃い影を付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真と本文の 2 列は縦積みにする
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
- 黒地の上にパネルを縦に積み、パネル間は黒の隙間 16〜24px
- パネル内は見出し帯→写真→本文の順
- 価格表は 1・2・3 セットを縦に並べ、間に下向き矢印帯
- 価格表と CTA はページ中盤と終盤の 2 回出す
- 情報ブロックは左縦線見出し＋赤ひし形の箇条書き＋点線区切り

## Elevation & Depth

- パネルは影なしで、黒地とのコントラストだけで浮かせる
- 写真上の文字には濃いドロップシャドウ
- 購入ボタンにうすいベベル風の上下グラデーション
- 特典の丸い商品写真に白枠と軽い影

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角い写真に細い白枠。特典品は円形に切り抜き
- **セクション境界**: 直線で区切り、黒い隙間を挟む。誘導は下向きの赤い矢印リボン
- 角丸はほぼ使わず 2〜4px まで
- 番号は丸（セット番号は黒丸、手順は焦茶丸）
- 見出しの区切りは左の赤い縦線
- パネル同士は重ねない

## Components

- **購入ボタン**（`button-primary`）: カートアイコン付きのえんじ色の角ボタン。価格行の右下に置く
- **セット価格カード**（`price-card`）: ベージュ地に左に料理写真、黒丸のセット番号、えんじの大きな価格、小さな送料注記
- **特典帯**（`bonus-band`）: 金茶の帯に赤い明朝で追加特典を書き、右端に丸い商品写真を重ねる
- **下向き矢印リボン**（`arrow-ribbon`）: 赤い下向き五角形に白文字で『さらにお得』のような誘導を書く
- **POINT番号見出し**（`point-heading`）: 黒い四角に POINT と大きな数字、右に大きな明朝見出し
- **墨色見出し帯**（`dark-title-band`）: 墨色グラデーションに白の明朝見出しを置くセクション頭
- **作り方ステップ**（`step-item`）: 左に写真と焦茶の丸番号、右に説明、間に薄い焦茶の下矢印
- **注意事項リスト**（`info-list`）: 赤い縦線見出し、赤ひし形の行頭、点線区切りの表
- **Q&Aバブル**（`qa-block`）: 黒丸のQとAに続けて悩みと回答、最後にえんじの結論文

## Do's and Don'ts

**Do**
- 黒地にベージュの和紙パネルを積む構成を守る
- 見出しは明朝で大小の差を大きくつける
- 料理写真は湯気と照りが見える寄りのカットにする
- 購入ボタンと価格はえんじで統一する
- 価格表は中盤と終盤の 2 回出す

**Don't**
- 丸いピル型ボタンやパステル色を使わない
- 見出しに丸ゴシックやポップ体を使わない
- えんじ色を本文や広い面に使わない
- 白一色の無地背景にしない（和紙の質感を残す）
- パネルに大きな角丸や強い影を付けない

## Page Structure

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

1. **ファーストビュー**（シズル感と老舗の格を一目で伝える）: 鍋の全面写真に縦書きの店ロゴ、下に墨色帯で小さい前置きと巨大な明朝商品名
2. **ブランド紹介**（料理店監修の信頼を示す）: ベージュパネルに短い紹介文、厨房・店内・暖簾の写真を並べる
3. **お客様の声（導入）**（味の満足感を先に見せる）: 黒地に料理写真、金色の太字感想3つと短い補足、下に矢印で『秘密は？』へ誘導
4. **素材のこだわり**（主原料の質を説明）: 寄りの素材写真に赤い大きなキャッチ、下に白ボックスで本文と器写真
5. **特長ポイント**（2つの強みを整理）: 墨色見出し帯の下に POINT 番号見出し＋本文＋右写真を 2 つ
6. **副材料の紹介**（セット全体の品質を伝える）: 抹茶グリーン地に笹の葉装飾、白枠写真と名前・効能をリスト化
7. **締め麺の紹介**（付属品の魅力）: 全面写真に半透明の暗いボックスで感想を重ねる
8. **価格・購入（1回目）**（セット別価格と特典で購入を促す）: 家族の笑顔写真の見出し、1〜3セットの価格カードを矢印リボンでつなぐ
9. **作り方**（調理の手軽さを示す）: 同梱品リスト、箱写真、番号付き6ステップ、最後に電話窓口
10. **不安解消Q&A**（初心者の不安を消す）: 墨色見出し帯、Q/A丸アイコン、えんじの結論文、レシピ冊子写真
11. **購入実績**（社会的証明）: スクロール枠に購入者イニシャルと日付を点線区切りで並べる
12. **価格・購入（2回目）**（最後のひと押し）: 鍋写真に赤帯見出しと吹き出し風の声、再度価格カード3段
13. **お届け・支払い・特商法**（購入条件の明示）: ベージュパネルに赤縦線見出しと赤ひし形リスト、表形式の特商法

## Imagery

- 鍋料理は暗めの背景で照明を当て、湯気・照り・赤唐辛子と緑のニラの対比を強調
- 素材は黒い器や木のスプーンに寄りで盛り、浅い被写界深度
- 店舗写真は暖色照明の和風店内・暖簾・料理人
- 家族の笑顔写真を丸く柔らかく切り抜いて見出しに合成
- 装飾は和紙テクスチャ、筆文字ロゴ、笹の葉の線画
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は幅約730pxの中央固定、外側は黒で埋める
- SP では横並びの写真＋本文を写真上・本文下に積む
- 商品名の巨大明朝は SP で 32〜36px に縮める
- 価格カードは SP で写真を上、価格とボタンを下に並べ、ボタンは全幅
- 特商法の表は 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-14f61792`（元 LP の URL から採番）
- **元 LP**: http://kyushu-zanmai.com/lp1/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。