---
version: alpha
name: Washi Beige Red-Accent Regional Tourism Campaign LP
description: 和紙のような生成り地とベージュ帯を交互に重ね、朱赤の CTA と明朝見出しで和の上品さを出す観光キャンペーン LP。エリアごとに大きな風景写真、額縁風の名所名カード、淡色カードの特別企画を繰り返す。縁起物キャラと破れ紙の境界で親しみやすさを足す。
colors:
  background: '#F5F4EF'
  background-alt: '#EDDDB9'
  surface: '#FFFFFF'
  primary: '#E60012'
  cta: '#E50112'
  on-cta: '#FFFFFF'
  text: '#27231F'
  line: '#1F1512'
  secondary: '#A08848'
  tint-1: '#EED8D1'
  tint-2: '#D9E6EC'
  accent-1: '#EBF1D5'
  accent-2: '#0B880C'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  accent:
    fontFamily: M PLUS Rounded 1c
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.05em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.12em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
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.sm}'
    height: 60px
  frame-title-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 130px
  plum-badge:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 110px
  tint-event-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 800px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 150px
  area-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 200px
  step-number:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 44px
  coupon-ticket:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-2}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 120px
  pill-period-label:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 30px
---

# DESIGN.md — 和紙地と朱赤の地域観光キャンペーン LP（Washi Beige Red-Accent Regional Tourism Campaign LP）

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

## Overview

- **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: 和紙テクスチャ・朱赤アクセント・明朝見出し・額縁カード・破れ紙の境界・エリア別の色分け
- **地の質感**: 生成りの和紙風ノイズ地。ベージュ帯の上下は手でちぎった紙のようなギザギザ境界。
- **形**: 角丸 12px 前後のカード。額縁風の四隅装飾付き矩形。梅の花形の番号とバッジ。ボタンは角丸小さめの横長矩形。
- **温度感**: 暖かい。ベージュと朱赤が主で、エリアごとに淡いピンク・水色・若草色を添える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F5F4EF` | 和紙風の生成り地（メイン地色） | 30% | 画素の主要色に補正 |
| `background-alt` | `#EDDDB9` | クーポン・おもてなし帯のベージュ地 | 14% | 画素の実測 |
| `surface` | `#FFFFFF` | 白カード・額縁カードの面 | 9% | 画素の実測 |
| `primary` | `#E60012` | ブランドの朱赤（見出し強調・番号・地名） | 2% | 推定 |
| `cta` | `#E50112` | 予約・プランへの主ボタン | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#27231F` | 見出し・本文の墨色 | 4% | 画素の実測 |
| `line` | `#1F1512` | 額縁カードの濃茶枠線 | 0% | 画素の実測 |
| `secondary` | `#A08848` | 金茶のラベル帯（手順見出し） | 0% | 推定 |
| `tint-1` | `#EED8D1` | 東部エリア特別企画カードの淡ピンク | 5% | 画素の実測 |
| `tint-2` | `#D9E6EC` | 中部エリア特別企画カードの淡い水色 | 4% | 画素の実測 |
| `accent-1` | `#EBF1D5` | 西部エリア特別企画カードの若草色 | 5% | 画素の実測 |
| `accent-2` | `#0B880C` | クーポン金額の緑文字 | 0% | 画素の実測 |

- 地は和紙風の生成りが基本。クーポンと各エリアのおもてなし紹介はベージュ帯に切り替える。
- 朱赤は CTA・番号・地名・英字ラベル・梅形バッジに限って使う。
- エリアごとに特別企画カードの淡色を変える（東=淡ピンク、中=水色、西=若草）。地図の塗りも同じ系統にそろえる。
- 本文は墨色。グレーの文字は注釈だけに使う。
- 額縁カードは白地に濃茶の細枠。四隅に濃茶の装飾を置く。
- 金茶は手順見出しなど小さなラベルだけに使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション大見出し・名所名 | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.08em |
| `headline-lg` | 名所のキャッチ（2 行） | 明朝 | Shippori Mincho | 700 | 21px | 1.5 | 0.08em |
| `headline-md` | 特別企画やおもてなし店舗の名前 | 明朝 | Shippori Mincho | 600 | 22px | 1.35 | 0.05em |
| `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 2 | 0.05em |
| `note` | 住所・電話・料金などの詳細と注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.03em |
| `accent` | 見出し上の弧を描く英字ラベル（朱赤） | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 16px | 1 | 0.1em |
| `headline-sm` | エリア名の背後に置く大きな白い透かし英字 | 欧文サンセリフ | Montserrat | 500 | 56px | 1 | 0.05em |
| `label-button` | CTA ボタンの文字 | 明朝 | Shippori Mincho | 700 | 15px | 1.4 | 0.12em |

- 見出しとボタンは明朝、本文と詳細はゴシックに分ける。
- 大見出しの左右に朱赤の小さな放射線を添え、下に朱赤の点線を短く引く。
- エリア見出しは《 》形の山括弧で挟む。背後には白の巨大な英字を透かしで置く。
- 本文の行間は 2.0 前後と広く取り、字間も少し空ける。
- 詳細情報は『項目名: 値』の形で並べ、注釈は小さくする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。おもてなし紹介だけ 2 カラムのカード
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 名所ブロックは『全幅写真 → 写真に重なる額縁カード → キャッチ → 本文 → 点線 → 詳細』の順に並べる。
- 特別企画カードは上端に梅形バッジを重ね、カード内に写真・見出し・本文・詳細を収める。
- エリアごとに『エリア見出し＋地図 → 名所 ×2 → CTA → おもてなし 2 カラム』を繰り返す。
- CTA はエリアの区切りごとに全幅に近い幅で置く。

## Elevation & Depth

- カードは影をほぼ付けず、地色との差と枠線で区切る。
- 額縁カードは写真の下端に半分重ねて立体感を出す。
- クーポン券カードにはごく薄い影を付ける。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 名所は全幅の縦長写真。カード内とおもてなしの写真は角丸 8〜10px の矩形。手順イラストは白い正円の中に置く。
- **セクション境界**: ベージュ帯の上下は破れ紙のようなギザギザ線。和紙地どうしはそのまま続ける。
- 番号とバッジは梅の花形（5 弁）の朱赤や白にする。
- 額縁カードの四隅には濃茶の L 字装飾を付ける。
- クーポン券は左右に半円の切り欠きを付けたチケット形にする。
- 手順ラベルは雲形・楕円の金茶帯にする。

## Components

- **朱赤 CTA ボタン**（`button-primary`）: 角丸が小さい横長の朱赤ボタン。明朝の白文字を中央に置き、右端に > 矢印を付ける。
- **額縁風の名所名カード**（`frame-title-card`）: 白地に濃茶の細枠と四隅の装飾。明朝の名所名、朱赤の点線、朱赤の地名を縦に並べる。
- **梅形の特別企画バッジ**（`plum-badge`）: 白い梅形を朱赤の縁で囲む。中に朱赤の小見出しと縁起物キャラを入れ、カード上端に重ねる。
- **エリア色の特別企画カード**（`tint-event-card`）: エリアごとの淡色地に角丸の写真、明朝の見出し、本文、点線区切り、詳細リストを収める。
- **英字ラベル付き大見出し**（`section-heading`）: 朱赤の弧状の英字とキャラを上に置き、明朝の見出しを朱赤の放射線と点線で飾る。
- **エリア見出し＋地図**（`area-heading`）: 山括弧で挟んだ明朝のエリア名。背後に白い透かし英字を置き、対象エリアだけ色を塗った県地図を添える。
- **梅形の手順番号**（`step-number`）: 朱赤の梅形に白い明朝数字（01〜03）。白い円形イラストの左上に重ねる。
- **チケット形クーポン**（`coupon-ticket`）: 白地で左右に切り欠きを付ける。緑の大きな金額と小さなラベル、下段に取得リンクを置く。
- **期間ラベル**（`pill-period-label`）: 黒の細枠のピル形ラベルに項目名を入れ、下に日付を太字で添える。

## Do's and Don'ts

**Do**
- 地は和紙風の生成りにし、ベージュ帯の上下は破れ紙の境界にする。
- 見出しは明朝にし、朱赤の点線と放射線を添える。
- 名所ごとに全幅写真と額縁カードを重ねる型を守る。
- エリアごとに淡い色を 1 色決め、地図とカードで共通に使う。
- CTA は朱赤 1 色にそろえ、各エリアの終わりに置く。

**Don't**
- 朱赤を広い面の地色にしない。
- ゴシックの太字を大見出しに使わない。
- カードに強いドロップシャドウを付けない。
- ネオンや寒色の強いグラデーションを使わない。
- 詳細情報を罫線の表にせず、点線区切りの『項目: 値』リストで並べる。

## Page Structure

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

1. **ファーストビュー**（キャンペーンの世界観と特典を一目で伝える）: 全幅の雄大な風景写真のスライダー。中央に和柄の扇形ロゴ、右上に朱赤の丸い特典バッジを置く。
2. **導入文**（地域の魅力と企画の趣旨を語る）: 和紙地に左寄せの本文。名物イラストを散らし、右下にベージュの県地図と斜めの英字を置く。
3. **写真コラージュ**（名所の多様さを見せる）: 縦長写真を横に並べ、上端は波形にする。
4. **クーポン**（特典の取得と予約へ誘導する）: ベージュ帯に英字ラベル付き見出し、期間ラベルの白カード、注釈、チケット形クーポン、朱赤 CTA の順に置く。
5. **キャンペーン概要**（公式の大型企画であることを示す）: 白地の額縁ボックスに朱赤の見出し、ロゴ、本文、点線区切りの開催期間を入れる。
6. **宿泊プラン**（主商品の案内）: ベージュ帯に見出し、短い説明、朱赤 CTA を置く。
7. **特典サービスの説明・利用方法**（特典の仕組みを 3 ステップで示す）: 白カードの中に金茶ラベルを置く。白い円の線画イラストに梅形の番号を重ね、縦に 3 つ並べる。
8. **みどころ導入**（エリア別の紹介に入る）: 英字ラベルとキャラ付きの大見出しに短い説明を添える。
9. **エリア見出し**（エリアの特徴と所属市町を示す）: 透かし英字の上に山括弧の見出しを置き、色分けした地図、本文、所属地域の一覧を続ける。
10. **名所紹介**（スポットごとの魅力と基本情報）: 全幅写真に額縁カードを重ね、2 行の明朝キャッチ、本文、点線、住所・電話を並べる。
11. **特別企画**（期間限定の体験を訴求する）: 梅形バッジを付けたエリア色のカードに、写真・見出し・本文・詳細リストを入れる。
12. **おもてなし店舗**（エリア内の特典店舗を紹介する）: ベージュ帯に 2 カラムの店舗カードを並べる。角丸写真、明朝の店名、朱赤の地名、短い説明の順に置く。
13. **グルメ**（地域の食の魅力を紹介する）: 英字ラベル付き見出しの下に、料理写真と説明を 2 カラムのグリッドで並べる。
14. **アクセス・空室検索**（移動手段と予約の導線）: 地図の埋め込みと、交通手段別の所要時間の白い表。朱赤の枠の検索フォームを続ける。

## Imagery

- 風景は晴天で彩度高めの広角写真。青空・紅葉・海の色を鮮やかに見せる。
- 名所写真は全幅の縦長で、下部に小さな朱赤のスライダーインジケーターを付ける。
- 縁起物（だるま風）のキャラを見出しやバッジに小さく繰り返し配置する。
- 地域の名物（酒器・鳥居・魚など）を淡い色のフラットイラストで余白に散らす。
- 手順は黒い単線の線画イラストを白い円に入れる。
- 県の地図はベージュの塊で描き、対象エリアだけ色を塗る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央寄せで、本文幅は約 900px 前後にする。
- PC の導入文は縦書きの明朝にし、右から左へ流す。
- PC の名所ブロックは写真を左右交互に大きく置き、名所名は縦書きの額縁カードで写真の横に重ねる。
- PC の特別企画カードは本文と写真を左右 2 カラムにし、詳細は項目ラベル付きの表形式にする。
- PC の手順やグルメは 3〜2 カラムの横並びにする。
- CTA は PC では幅 400px 程度に縮めて中央に置く。

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