---
version: alpha
name: Washi Gold and Ink Heritage Tourism LP
description: 和紙風のオフホワイト地に墨色の帯と金箔の円をあしらった、地域観光と宿泊予約をつなぐ記事広告型 LP。明朝体の縦書き見出しや金色の雲紋で格調を出す。後半はホテルカードと CTA を並べた送客型に切り替わる。
colors:
  background: '#F6F6F6'
  dark-section: '#1D2226'
  primary: '#DABE73'
  cta: '#760A03'
  on-cta: '#FFFFFF'
  surface: '#FEFEFE'
  text: '#1C222A'
  on-dark: '#F8FAFC'
  secondary: '#535353'
  background-alt: '#E4E4E4'
  line: '#D6A452'
  accent-1: '#8B1A1A'
  accent-2: '#D6A452'
  accent-3: '#1A5FB4'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Great Vibes
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 8px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-pill-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  button-pill-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  button-bar-gold:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 46px
  button-hotel:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 30px
  heading-gold-circle:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.full}'
    height: 260px
  heading-line:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 70px
  label-dashed:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    height: 28px
  tab-course:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 64px
  badge-start:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 44px
  card-hotel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 380px
---

# DESIGN.md — 墨黒×金箔×和紙の歴史観光・宿泊 LP（Washi Gold and Ink Heritage Tourism LP）

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

## Overview

- **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、信頼・誠実、情報量多め・訴求型
- **キーワード**: 和紙テクスチャ・金箔の円・墨色の帯・縦書き明朝・雲紋・歴史旅
- **地の質感**: 地は細かな和紙の繊維テクスチャ。金色は箔のようなざらつきとムラを持たせる。墨色帯はフラットに近い。
- **形**: 大きな金色の正円を見出しの台座に使う。ボタンはピル型と角ばったバーを使い分ける。雲紋や紙吹雪状の金箔片を散らす。
- **温度感**: やや暖かい。落ち着いた墨と金に深紅を少量差す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F6F6F6` | 和紙風の地色 | 45% | 画素の実測 |
| `dark-section` | `#1D2226` | 導入やセクション見出しの墨色帯 | 13% | 画素の実測 |
| `primary` | `#DABE73` | 金箔の円・金色バーボタン | 7% | 画素の実測 |
| `cta` | `#760A03` | 予約・詳細ボタンの深紅 | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 深紅ボタン上の文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | クーポン案内などの白カード | 12% | 画素の実測 |
| `text` | `#1C222A` | 見出し・本文の墨色 | 4% | 画素の主要色に補正 |
| `on-dark` | `#F8FAFC` | 墨色帯上の白文字 | 1% | 画素の実測 |
| `secondary` | `#535353` | ホテルカードのサブボタン灰 | 2% | 画素の実測 |
| `background-alt` | `#E4E4E4` | 注意書きのピル枠 | 1% | 画素の実測 |
| `line` | `#D6A452` | 見出し脇の金線・ピルボタン枠 | 0% | 画素の主要色に補正 |
| `accent-1` | `#8B1A1A` | 小見出し・誘導ラベルの深紅文字 | 0% | 推定 |
| `accent-2` | `#D6A452` | 案内リードの金茶文字 | 0% | 画素の主要色に補正 |
| `accent-3` | `#1A5FB4` | テキストリンク青 | 0% | 推定 |

- 地は和紙テクスチャの #F6F6F6。章の切り替えに墨色帯を全幅で入れる。
- 章タイトルは墨色帯または写真の上に金箔の正円を置き、その上に縦書きで載せる。
- 金色は円・雲紋・バーボタン・見出し線に限定する。本文には使わない。
- 深紅は予約導線と小ラベルだけに使う。面積は 3% 程度に抑える。
- ホテルカードのボタンは深紅（主）と灰色（副）で階層を分ける。
- 情報カードは白で浮かせる。注意書きは淡いグレーのピル枠に収める。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV ロゴ風タイトル・章タイトル（縦書き） | 明朝 | Shippori Mincho | 500 | 30px | 1.3 | 0.08em |
| `headline-lg` | 導入リード・セクション見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.05em |
| `headline-md` | スポット名・プラン名 | 明朝 | Noto Serif JP | 500 | 22px | 1.4 | 0.03em |
| `headline-sm` | スポットのキャッチ・小見出し | 明朝 | Noto Serif JP | 400 | 15px | 1.6 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em |
| `note` | 注釈・外部遷移の表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0em |
| `accent` | 円見出しに添える欧文筆記体・ステップ番号 | 欧文スクリプト | Great Vibes | 400 | 20px | 1.2 | 0em |
| `label-button` | ボタンラベル | 明朝 | Noto Serif JP | 500 | 14px | 1.4 | 0.05em |

- 見出しは明朝、本文はゴシックで役割を分ける。
- 章タイトルは縦書きの明朝 2〜3 行で、金の円の中に置く。
- 円見出しには深紅または金の欧文筆記体を斜めに添える。
- スポット名には、小さな明朝キャッチと大きな明朝名称を上下に組む。
- 料理名は縦書き 2 文字程度にして、左右に細い縦線を入れる。
- ホテルカードの名称だけは太いゴシックで実用的に見せる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ホテル一覧のみ 2 カラムのカードグリッド
- **本文ブロックの幅**: 画面幅の約 91%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は左右 16px の余白を取った全幅で配置する。
- テキストブロックは写真の下に置き、16〜24px の余白をとる。
- プラン紹介では縦書き見出しと横書き本文を左右に並べ、ブロックごとに左右を入れ替える。
- ステップは左に円形ラベル、右に番号と説明を置き、金の細線と下向き矢印でつなぐ。
- CTA ボタンは幅 80% で中央に置き、下に外部遷移の注釈を添える。

## Elevation & Depth

- 基本はフラット。白カードは影なしで地との色差だけで浮かせる。
- ホテルカードのボタンには下方向の薄い影（0 2px 3px rgba(0,0,0,.2)）を付ける。
- 円形ラベルの背景はぼかした淡いグレーの円で柔らかく見せる。

## Shapes

- **角丸**: 小 2px ／ 中 8px ／ 大 40px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの横長矩形（約 3:2）が基本。イベント紹介だけ正円に切り抜く。
- **セクション境界**: 墨色帯との境界は直線。章見出しの下端は大きな円弧で地色に食い込ませる。白カードの上辺は雲形にする。
- 主導線のボタンは墨色または白のピル型にし、金の細い枠を付ける。
- クーポン・外部リンクは角ばった金色バーにし、右端に > を付ける。
- ホテルの予約ボタンは角丸なしの矩形にし、右端に丸矢印アイコンを付ける。
- 雲紋は金箔の質感で描き、淡い七宝柄を重ねて四隅に置く。
- 金の正円は画面幅の 60〜70% で大きく描く。

## Components

- **墨色ピル CTA**（`button-pill-dark`）: 墨色のピル型で、金の細い枠と白い明朝ラベルを持つ。右端に > を置く。プラン一覧への主導線に使う。
- **白ピル詳細ボタン**（`button-pill-outline`）: 白地のピル型で、金の枠線と墨色の文字を持つ。外部詳細ページへのリンクに使う。
- **金色バーボタン**（`button-bar-gold`）: 幅いっぱいの金色の矩形で、墨色の文字と右端の > を持つ。クーポン・寄付・ガイド申込に使う。
- **ホテル予約ボタン群**（`button-hotel`）: 深紅の予約ボタン 1 つと灰色のサブボタン 2 つを縦に積む。どれも右端に白丸の矢印アイコンを付ける。
- **金箔円の章見出し**（`heading-gold-circle`）: 墨色帯や暗い写真の上に金箔の正円を置き、縦書き明朝の見出しを載せる。深紅の縦線と欧文筆記体を添える。
- **左右金線の見出し**（`heading-line`）: 明朝の見出しの左右に金の横線を引き、下に深紅の欧文筆記体を小さく添える。
- **斜め点線の誘導ラベル**（`label-dashed`）: 深紅の短い明朝文の左右に、金の斜め点線を「ハ」の字に配置する。ボタンの直上に置く。
- **コース切替タブ**（`tab-course`）: 3 つ並びのタブ。選択中は墨色地に白文字と金の内枠、非選択は白地に灰文字にする。
- **スタート地点バー**（`badge-start`）: 左側は深紅のピル型で旗アイコンと地点名、右側は白地に深紅の枠で所要時間を示す。
- **ホテルカード**（`card-hotel`）: 2 カラムで、写真・太字の施設名・プラン概要・ボタン 3 段の順に縦に並べる。

## Do's and Don'ts

**Do**
- 和紙テクスチャの地に、墨・金・深紅の 3 色で格調を保つ。
- 章ごとに金箔円の縦書き見出しを入れて、物語の区切りを示す。
- スポット紹介は「写真→小キャッチ→名称→本文→罫線→住所」の型をそろえる。
- 外部リンクのボタン下には必ず小さな注釈を添える。
- 金箔片や雲紋を余白に散らし、静かな華やかさを出す。

**Don't**
- ビビッドな原色やポップな丸ゴシックを使わない。
- 金色を本文テキストや広い面の背景に使わない。
- 深紅を装飾目的で多用しない（予約導線とラベルに限る）。
- 写真に角丸や影を付けない。
- 縦書き見出しを 4 行以上にしない。

## Page Structure

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

1. **ファーストビュー**（地域の名物写真と縦書きコピーで旅情を喚起する）: 料理や名所のクローズアップ写真を全面に敷く。縦書き明朝のキャッチと大きな地名ロゴを重ね、金の円弧と欧文筆記体を添える。
2. **導入・アクセス**（旅のテーマと主要空港からの近さを伝える）: 墨色帯に白い明朝リードと本文を置く。白抜きの地図シルエットと、深紅の円形バッジで所要時間を示す。
3. **記念イベント紹介**（周年イベントを紹介する）: 和紙の地に、上下を七宝柄の帯で挟んで配置する。正円写真と金縦線の見出しを組み、白ピルボタンを置く。
4. **特別宿泊プラン**（テーマ別の宿泊プランへ誘導する）: 夕景の写真の上に金箔円の章見出しを置く。写真と縦書き見出しを左右交互に組み、墨色ピルボタンを置く。
5. **クーポン・返礼品案内**（クーポンの使い方を手順で説明する）: 雲形の上辺を持つ白カードにする。グレーの強調ラベルと 4 ステップの縦フローを置き、金色バーボタンを 2 つ並べる。
6. **モデルコース**（歴史スポットを巡るコースを紹介する）: 紺色の夜景に金箔円の見出しを置く。コース切替タブ、スタート地点バー、スポットカードを縦に並べる。
7. **ガイド案内**（ガイド付き観光の申込へ誘導する）: 手書き風の円形吹き出し見出しと写真を横に並べる。金色バーボタンと墨色ピルボタンを 2 つ置く。
8. **ご当地グルメ**（郷土料理の背景とストーリーを伝える）: 金箔円の見出しの下に白カードでイベントを紹介する。料理写真、縦書きの料理名、本文を繰り返し、金の雲紋を散らす。
9. **おすすめ宿泊プラン一覧**（個別ホテルの予約へ送客する）: 墨色帯の下端を円弧にして見出しを置き、その下に 2 カラムのホテルカードを並べる。
10. **観光情報・アクセス・空室検索**（外部の観光情報と予約検索で締める）: 深紅のバーボタン、グレーのピル注意書き、左右金線の見出しを使う。地図埋め込みと検索フォームを置く。
11. **お問い合わせ**（問い合わせ先と情報提供元を明記する）: 灰色見出しの罫線表で、シンプルに示す。

## Imagery

- 料理は暖色の照明で寄りのアングルから撮り、湯気や照りを強調する。
- 史跡・銅像・城門は青空の下で順光で撮り、彩度をやや高めにする。
- 章見出しの背景は夕景・夜景・暗い店内など低輝度の写真にする。
- 宿泊施設は外観と客室を明るく水平に撮る。
- 装飾は金箔の円、金の雲紋、淡い七宝柄、散らした金箔片で構成する。
- 地図は白い島形シルエットで描き、対象エリアだけを金で塗る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅を約 70% にして中央に寄せ、背景の和紙と墨色帯は全幅にする。
- PC の導入では本文と地図シルエットを左右 2 カラムに並べる。
- スポット・料理紹介は、PC では写真と文章を左右交互の 2 カラムにする。
- ホテルカードは PC で 3 カラムにする。
- クーポン手順は PC で横 4 列にし、矢印でつなぐ。
- 章見出しの金箔円は PC で写真の中央に置き、リード文は右下の半透明黒ボックスに収める。

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

:root {
  --color-background: #f6f6f6;
  --color-dark-section: #1d2226;
  --color-primary: #dabe73;
  --color-cta: #760a03;
  --color-on-cta: #ffffff;
  --color-surface: #fefefe;
  --color-text: #1c222a;
  --color-on-dark: #f8fafc;
  --color-secondary: #535353;
  --color-background-alt: #e4e4e4;
  --color-line: #d6a452;
  --color-accent-1: #8b1a1a;
  --color-accent-2: #d6a452;
  --color-accent-3: #1a5fb4;
  --spacing-unit: 8px;
  --spacing-card: 24px;
  --spacing-section: 80px;
  --rounded-sm: 2px;
  --rounded-md: 8px;
  --rounded-lg: 40px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。