---
version: alpha
name: Dark Sumi Heritage Tourism LP
description: 墨色の地に、和紙色のカードと朱赤・金茶の和柄ボタンを置いた観光案内 LP。明朝の大きな見出しを字間広めで組み、青海波と雲の文様、地図のシルエットで歴史の重みを出している。
colors:
  background: '#222222'
  background-alt: '#2B2B2B'
  surface: '#F1E9C5'
  primary: '#860203'
  on-primary: '#FFFFFF'
  cta: '#836B02'
  on-cta: '#F6F0DA'
  accent-1: '#C9A43A'
  on-dark: '#F2F2F2'
  text: '#2A2929'
  tint-1: '#D2CDA5'
  line: '#343433'
  text-muted: '#EAEAEA'
typography:
  display:
    fontFamily: Cormorant Garamond
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.3em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Shippori Mincho
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.15em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.95
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  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-nav-red:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    height: 64px
  tag-asset-gold:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 36px
  card-washi:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 1200px
  label-anniversary:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 24px
  heading-heritage:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 140px
  panel-assets:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 180px
  map-silhouette:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    height: 200px
  icon-sns-circle:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    height: 64px
---

# DESIGN.md — 墨黒×朱赤×金の和風観光 LP（Dark Sumi Heritage Tourism LP）

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

## Overview

- **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、ラグジュアリー・ダーク、信頼・誠実
- **キーワード**: 墨色の地・和紙カード・朱赤の額縁ボタン・金茶の資産タグ・青海波と雲文様・字間の広い明朝
- **地の質感**: 地は墨色のマット。青海波・雲の文様をうっすら重ね、和紙カードには筆の跡のようなかすれを入れる
- **形**: 角丸なしの四角。ボタンは内側に細い線を引いた額縁型。地図はシルエットで切り抜く
- **温度感**: 暗くて落ち着いた色に、朱と金で温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#222222` | ページ全体の墨色の地 | 55% | 画素の実測 |
| `background-alt` | `#2B2B2B` | 構成資産パネルの少し明るい地 | 8% | 画素の実測 |
| `surface` | `#F1E9C5` | 導入文の和紙色カード | 11% | 画素の実測 |
| `primary` | `#860203` | 朱赤のナビボタン・SNS アイコン・地図マーカー | 3% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 朱赤ボタン上の文字 | 0% | 推定 |
| `cta` | `#836B02` | 構成資産の金茶タグボタン | 2% | 画素の実測 |
| `on-cta` | `#F6F0DA` | 金茶タグ上の文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#C9A43A` | 記念年の金色ラベル文字 | 0% | 推定 |
| `on-dark` | `#F2F2F2` | 墨地の上の見出し・本文 | 6% | 推定 |
| `text` | `#2A2929` | 和紙カード上の見出し・本文 | 3% | 画素の主要色に補正 |
| `tint-1` | `#D2CDA5` | 墨地に置いた地図の生成り色 | 2% | 画素の実測 |
| `line` | `#343433` | セクションを区切る細い罫線 | 0% | 画素の主要色に補正 |
| `text-muted` | `#EAEAEA` | SNS 見出し下の小さな補足文字 | 0% | 画素の実測 |

- 地は全体を墨色 #222 にする。和紙色のカードは導入部と最後のバナー枠だけに使う
- 朱赤は、セクション内リンクのボタン、SNS の丸アイコン、地図マーカーに使う
- 金茶は構成資産のタグだけに使い、朱赤と役割を分ける
- 記念年などのラベルは金色の文字にし、面には使わない
- 墨地の上の文字は白に近い色、和紙の上の文字は焦げ茶黒にする
- 鮮やかな色は写真だけに任せ、UI の色は朱・金・生成りの 3 色までに絞る

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの欧文ロゴ風の大見出し | 欧文セリフ | Cormorant Garamond | 500 | 64px | 1.1 | 0.3em |
| `headline-lg` | 各遺産セクションの 2 行見出し | 明朝 | Shippori Mincho | 400 | 36px | 1.5 | 0.15em |
| `headline-md` | 和紙カード内の見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.5 | 0.02em |
| `headline-sm` | 構成資産・SNS などの小見出し | 明朝 | Noto Serif JP | 400 | 19px | 1.5 | 0.05em |
| `accent` | 記念年の金色ラベル、FV のサブタイトル | 明朝 | Shippori Mincho | 500 | 15px | 1.5 | 0.15em |
| `body-md` | 墨地の上の長い本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `body-lg` | 和紙カード内の明朝本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.95 | 0.05em |
| `label-button` | 朱赤ボタン・金茶タグの文字 | 明朝 | Noto Serif JP | 400 | 14px | 1.4 | 0.05em |

- 見出しは明朝で細めにし、字間を 0.15em ほど広げて品よく見せる
- 遺産の見出しは 2 行に分け、セクションごとに右寄せと左寄せを交互にする
- 長い本文は読みやすさを優先してゴシック、行間は 1.9 にする
- 金色のラベルは見出しのすぐ上に 1 行で置く
- ボタンの文字は中央揃えにし、太字にはしない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。構成資産のタグだけ 2 列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は画面幅の 95% 近くまで広げ、片側の端に寄せる
- 見出しは写真の下に重ねるように、文様の背景の上に置く
- 各遺産セクションの最後に、地図シルエットと構成資産パネルを置く
- セクションの終わりは横幅いっぱいの細い罫線で区切る
- 朱赤ボタンは縦に 3 つ、間隔 16px ほどで並べる

## Elevation & Depth

- 影はほぼ使わず、色の明暗で面を分ける
- 構成資産パネルは半透明の明るい墨色で、地図シルエットに重ねる
- ボタンの立体感は、影ではなく内側の細い線で出す

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの横長の四角。片側を画面の端まで寄せる
- **セクション境界**: 細い横罫線。背景は雲と青海波の文様でゆるやかに切り替える
- ボタン・カードはすべて角丸なしにする
- 朱赤ボタンと金茶タグには、内側 4px の位置に細い線を引いて額縁にする
- SNS アイコンだけは円形にする
- 地図は県の形のシルエットにし、所在地を朱の丸で示す

## Components

- **朱赤の額縁ボタン**（`button-nav-red`）: ページ内のセクションへ飛ぶボタン。朱赤の地に細い内枠の線、文字は白の明朝
- **金茶の資産タグ**（`tag-asset-gold`）: 構成資産の名前を 2 列で並べるタグ。金茶の地に内枠の線を引く
- **和紙の導入カード**（`card-washi`）: ファーストビューの写真に一部重ねて置く生成り色のカード。筆のかすれ模様と地図を入れる
- **記念年ラベル**（`label-anniversary`）: 見出しの上に置く金色の明朝 1 行
- **文様つき 2 行見出し**（`heading-heritage`）: 青海波と雲の文様の上に、大きな明朝の 2 行見出しを置く
- **構成資産パネル**（`panel-assets`）: 地図シルエットに重ねる半透明のパネル。中央に小見出しを置き、その下にタグを並べる
- **地図シルエット**（`map-silhouette`）: 生成り色の県の形に、朱の丸と小さな明朝の注記を添える
- **SNS の丸アイコン**（`icon-sns-circle`）: 朱赤の円に白のアイコン。3 つを横に並べる

## Do's and Don'ts

**Do**
- 墨の地・朱・金・生成りの 4 色でまとめる
- 見出しは字間を広げた明朝で、余白を多めにとる
- 青海波や雲の和柄を、背景にうっすら敷く
- 写真は青空や緑など、色の鮮やかなものを選んで暗い地に映えさせる
- ボタンは四角の額縁型でそろえる

**Don't**
- 角丸のボタンやポップなグラデーションを使わない
- 朱赤と金茶の役割を入れ替えない
- 見出しに太いゴシックを使わない
- 背景を白い地にしない（和紙色は部分使いだけにする）
- 強い影や光沢を付けない

## Page Structure

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

1. **ファーストビュー**（土地の象徴的な風景で興味を引く）: 画面幅いっぱいの風景写真に、白の明朝のサブタイトルと、字間を大きく空けた欧文の大見出しを重ねる
2. **導入**（テーマの概要と全体像を伝える）: 写真に重なる和紙色のカードに、見出し・明朝の本文・地図を入れる
3. **ページ内ナビ**（各テーマのセクションへ誘導する）: 朱赤の額縁ボタンを縦に 3 つ並べる
4. **テーマ紹介 1**（1 つめの遺産を詳しく説明する）: 写真→金色ラベル→右寄せの 2 行明朝見出し→ゴシックの長い本文の順に並べる
5. **構成要素一覧 1**（含まれる施設を一覧にする）: 地図シルエットに半透明パネルを重ね、金茶のタグを並べる
6. **テーマ紹介 2**（2 つめの遺産を説明する）: 写真の位置と見出しの寄せる向きを左右反転させる
7. **構成要素一覧 2**（施設を一覧にする）: 金茶のタグを 2 列 × 4 行で並べる
8. **テーマ紹介 3**（3 つめの遺産を説明する）: 森の写真、金色ラベル、右寄せの見出し、長い本文
9. **構成要素一覧 3**（施設を一覧にする）: 地図と金茶のタグのパネル
10. **公式サイトバナー**（外部の詳しい情報へ誘導する）: 写真 3 枚を並べた横長のバナーに、朱赤の帯の文字を重ねる
11. **SNS**（公式アカウントへ誘導する）: 欧文セリフの見出し、小さな補足、朱赤の丸アイコン 3 つ
12. **関連キャンペーンバナー**（関連サイトへ送客する）: 和紙色の帯にバナー画像を置き、下に朱赤の文字リンクを添える

## Imagery

- 史跡や自然は晴天の下で撮り、色の鮮やかな写真を選ぶ
- 古い建物は夕方の斜光で撮り、陰影を深く出す
- 参道や森は暗めで、しっとりした緑の写真にする
- 背景には青海波と雲の文様を、黒に近い灰色でうっすら敷く
- 地図は生成り色の平たいシルエットにし、朱の丸の目印を付ける
- 和紙カードには、淡い筆のかすれのような円弧を入れる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では導入カードを横並びにし、地図を左、本文を右に置く
- PC ではナビボタン 3 つを横 1 列に並べる
- PC では写真を幅 40% ほどにして左右の端に寄せ、反対側に見出しを置く
- PC では構成資産タグを 4 列にする
- PC では本文を幅 55% ほどの段落にして、地図の横に置く

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