---
version: alpha
name: Watercolor Seaside Travel Campaign LP
description: 水彩風の海・和紙テクスチャを背景に、赤いカニのキャラクターと手描きの魚イラストを散らした地方観光×鉄道キャンペーンLP。赤・青・緑の太い見出しで元気さを出し、白い角丸カードに情報をまとめて読みやすくしている。
colors:
  primary: '#E0262E'
  secondary: '#0294D4'
  cta: '#13853A'
  on-cta: '#FFFFFF'
  background: '#FEFEFD'
  background-alt: '#FEFEFC'
  tint-1: '#ACDBE3'
  tint-2: '#DED1C9'
  accent-1: '#BADC8D'
  accent-2: '#C4AC4D'
  accent-3: '#64346B'
  text: '#222836'
  dark-section: '#1B5559'
  line: '#DED1C9'
  marker: '#FBD5D8'
  secondary-accessible: '#027DB3'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.15
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.06em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.06em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  button-more:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  label-red:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 30px
  region-tab:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 40px
  article-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 200px
  price-bar:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 34px
  carousel-arrow:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 36px
  spot-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 220px
---

# DESIGN.md — 水彩の海と赤キャラの観光キャンペーンLP（Watercolor Seaside Travel Campaign LP）

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

## Overview

- **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、親しみ・手作り感、和風、情報量多め・訴求型
- **キーワード**: 水彩の海・和紙テクスチャ・ゆるキャラ・地方グルメ・鉄道割引・セクションごとの色替え
- **地の質感**: 水彩のにじみ、和紙の繊維感、細かいドット地。面はベタ塗りにせず、紙の質感を残す
- **形**: 白い角丸カード、ピル型ボタン、波形・手描き風のセクション境界
- **温度感**: 暖色の赤と寒色の水色を組み合わせた、明るくにぎやかな温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E0262E` | ブランド赤（見出し・ラベル・キャラ） | 4% | 推定 |
| `secondary` | `#0294D4` | 海の青（見出し・タブ・矢印） | 3% | 画素の実測 |
| `cta` | `#13853A` | 割引セクションの緑（主ボタン・帯） | 4% | 推定 |
| `on-cta` | `#FFFFFF` | 緑帯上の文字 | 1% | 画素の主要色に補正 |
| `background` | `#FEFEFD` | 基本の白地 | 38% | 画素の実測 |
| `background-alt` | `#FEFEFC` | ドット入りの生成り地 | 6% | 画素の実測 |
| `tint-1` | `#ACDBE3` | 水彩の水色地（マップ・コース） | 10% | 画素の実測 |
| `tint-2` | `#DED1C9` | 和紙のくすみピンク地（郷土料理） | 7% | 画素の主要色に補正 |
| `accent-1` | `#BADC8D` | 若草色の和紙地（割引） | 5% | 画素の実測 |
| `accent-2` | `#C4AC4D` | からし金（丸矢印・縦線） | 1% | 画素の実測 |
| `accent-3` | `#64346B` | 会員向け紫（別商品ボタン） | 1% | 画素の実測 |
| `text` | `#222836` | 見出し・本文の濃紺 | 2% | 画素の実測 |
| `dark-section` | `#1B5559` | 深い青緑（波の濃色） | 4% | 画素の主要色に補正 |
| `line` | `#DED1C9` | カード枠・薄グレー | 1% | 画素の主要色に補正 |
| `marker` | `#FBD5D8` | お得額の薄赤 | 1% | 推定 |
| `secondary-accessible` | `#027DB3` | AA を満たす補正値（計算） |  | 計算 |

- セクションごとに地の色を変える：白ドット→水彩ピンク→水彩水色→若草和紙→白
- 情報は必ず白カードに載せ、地のテクスチャと分離する
- 赤はキャラ・ラベル・強調語だけに使い、見出しの一部の語を赤で強調する
- 割引セクションは緑で統一し、お得額のみ赤の吹き出しで目立たせる
- 地域タブや矢印ボタンは青、補助の丸矢印はからし金
- 別商品・会員系は紫で区別する
- `region-tab` は文字 `#0294D4` × 背景 `#FEFEFD` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027DB3`、4.54:1）を使う。
- `carousel-arrow` は文字 `#FFFFFF` × 背景 `#0294D4` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027DB3`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大ロゴ風コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.15 | 0.0em |
| `headline-lg` | セクション大見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.04em |
| `headline-md` | カード見出し・料理名 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.04em |
| `headline-sm` | 赤ラベル・帯見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.06em |
| `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.06em |
| `note` | 注釈・小さな補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 英字の飾り見出し・県名ローマ字 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.2em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.06em |

- 大見出しは極太で、キーワードだけ赤色にする
- 本文は中央揃え・行間広めで短い行に区切る
- 見出しの下に県名ローマ字を小さく字間広めで添える
- 価格の数字は大きく太く、単位「円」は小さくする
- 背景の飾りに薄い点線の巨大英字を敷く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、記事カードは 2 列グリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 白カードは画面幅の約90%で中央配置
- カルーセルは左右に丸矢印ボタンを重ねる
- 割引表は 区間帯→比較バー→通常価格 の縦積み
- タブは県ごとに4つ並べ、SPは2×2
- キャラクターはカードの角にはみ出して配置

## Elevation & Depth

- カードは影なし、薄いグレー線か色線で囲む
- 白カードは背景テクスチャとの対比で浮かせる
- 吹き出しのみ小さな影を許容

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 記事サムネは角丸小の縦長、料理写真は角丸の横長、商品は切り抜き
- **セクション境界**: 水彩の波形・にじみ境界、和紙のちぎれた縁
- 主要ボタンは白地に枠線のピル型＋右端の丸矢印
- ラベルは赤のピル型、和柄の波模様を添える
- タブは上だけ角丸の白タブ
- 地図・カードは青や緑の太枠で囲む

## Components

- **詳細ピルボタン**（`button-primary`）: 白地に緑枠のピル型、中央に文字、右端に緑の丸矢印
- **続きを見るボタン**（`button-more`）: 白地に赤枠のピル型、右に赤丸矢印
- **赤ラベル見出し**（`label-red`）: 赤いピルに白文字、両脇に波模様
- **県別タブ**（`region-tab`）: 白い上角丸タブに青文字＋ローマ字小書き
- **記事サムネカード**（`article-card`）: 縦長写真＋番号バッジ＋手書き風タイトル
- **割引比較バー**（`price-bar`）: 緑の割引価格バーと灰の通常価格バー、差額を赤い吹き出しで表示
- **丸矢印**（`carousel-arrow`）: カード両脇の円形矢印、セクション色に合わせる
- **スポット情報カード**（`spot-card`）: 番号バッジ・見出し・灰の情報表・写真の2段組

## Do's and Don'ts

**Do**
- 地色には水彩・和紙のテクスチャを使う
- キャラクターを各セクションに1〜3体ずつ表情を変えて置く
- 手描き風の魚介イラストを群れのように散らす
- 情報は白カードにまとめ、余白を広めにとる
- 割引額は数字を大きくし、赤い吹き出しで示す

**Don't**
- フラットな単色ベタの背景だけで組まない
- 暗い・高級感のある色調にしない
- 赤を本文の大部分に使わない
- カードに強い影をつけない
- 細い明朝体で見出しを組まない

## Page Structure

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

1. **ファーストビュー**（旅とグルメの魅力を一目で伝える）: 左に赤と青の極太コピー、右に海鮮丼の写真とキャラクター
2. **キャンペーンバナー**（お得なきっぷへの誘導）: 赤枠に囲まれたにぎやかなイラストバナー
3. **キャラクター紹介**（世界観とキャラクターの紹介）: 中央揃えの短文→水彩の海にキャラ3体→白抜き大見出し
4. **メンバー紹介**（キャラ個別プロフィール）: 点線の巨大英字地にキャラと白カードのカルーセル
5. **特集記事一覧**（現地取材記事への回遊）: 赤ラベル＋見出し、3列（SPは2列）写真カード、続きを見るボタン
6. **海の幸図鑑**（名物の魚介を紹介）: 水彩の海の上に魚介イラストを並べて名前を添える
7. **郷土料理**（各県のおすすめ料理）: ピンク和紙地、縦長の見出しカードと料理カードのカルーセル
8. **旅行マップ**（現地スポットの位置）: 水色地、県別タブと青枠のイラスト地図
9. **モデルコース**（巡り方の提案）: 番号付きスポットカードのカルーセル、情報表と写真
10. **旅行商品誘導**（県別の予約導線）: 写真と車両のバナー、2×2のピルボタン
11. **割引料金**（価格メリットの訴求）: 若草和紙地に白カード、区間ごとの緑帯と比較バー、注釈と詳細ボタン
12. **特典案内**（利用者向け特典）: 緑枠カード、イラストと吹き出し、期間表とボタン
13. **会員向けきっぷ**（別商品の紹介）: 紫ラベルと横長写真帯、紫ボタン

## Imagery

- 赤いカニのゆるキャラを太い線と水彩塗りで描く
- 魚・エビ・貝などを手描き水彩風イラストに
- 人物は冬服で市場や駅を歩く自然光の取材写真
- 料理は真上〜斜めから撮った明るい写真
- 背景は水彩の波、和紙の繊維、小魚の群れを散らす
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央寄せの広いカード、SPは幅90%の1カラム
- 記事カードはPC3列→SP2列
- FVはPCの左右分割をSPではコピー上・写真下の縦積みに
- 県別ボタン・タブはSPで2×2
- カルーセル矢印は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-2f720569`（元 LP の URL から採番）
- **元 LP**: https://www.jreast.co.jp/nihonkai/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。