DESIGN.md — 青×黄の波形ポップな観光キャンペーン LP（Bright Blue Wave Regional Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: 鮮やかな青・黄色アクセント・波形境界・ブロブ写真・縦書きキャッチ・マスコット
• 地の質感: フラットな単色面に、薄い水玉・波線・十字のドット柄や紙吹雪を散らす
• 形: 波打つセクション境界、不定形のブロブで切り抜いた写真、ピル型ボタン、角丸カード
• 温度感: 明るく涼しげな夏の色。オレンジで温度を足す

Colors

• カテゴリごとに地色を変える。観光地とグルメは濃い青、体験と歴史は水色、キャンペーンは黄色。
• 青の地の上では本文を白、施設名とサブ見出しを黄色にする。
• 水色の地の上では本文を濃いグレー、見出しを濃紺にする。
• オレンジは予約 CTA だけに使う。サブの誘導は青のボタンか白い枠のボタンにする。
• 黄色のピル型帯は、セクション見出しの下に置くサブキャッチに使う。
• 地色の上には、同系色を少し明るくした水玉・波線柄をうっすら重ねる。
• button-primary は文字 #FFFFFF × 背景 #F47C02 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B75D02、4.59:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #017BED のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0174E0、4.59:1）を使う。

Typography

• 見出しには手書き風や丸ゴシックの太い書体を使い、親しみを出す。
• セクション見出しは「日本語の小見出し＋大きな英字イタリック＋上下の細い罫線」の 3 段で組む。
• 写真の横に縦書きのキャッチを添える。白い枠のボックスに入れるか、黄色・白の手書き風文字で直接置く。
• 住所などのデータは●を頭に付けた箇条書きにし、紹介文より一段小さくする。
• 紹介文は左揃えにする。キャンペーンの説明は中央揃えでよい。
• 金額・日付などの数字は大きく太くして強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と本文の 2 カラムを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• スポットごとに「写真スライダー → 施設名と地域名 → 紹介文 → 区切り線 → データの箇条書き」の順で並べる。
• カテゴリの境目は波形の境界で区切り、地色を切り替える。
• カテゴリの冒頭に、マスコットのロゴ・左右に浮かぶブロブ型の写真 2 枚・3 段の見出しを置く。
• 各カテゴリの最後に、予約 CTA と注釈を中央揃えで置く。
• キャンペーンの情報は、白くて角の丸い大きなカードに 1 つにまとめる。
• 写真は左右に約 4% の余白を残して置く。

Elevation & Depth

• CTA ボタンには、下に少しずらした濃い色の影（2〜4px）を付ける。
• カードはほぼフラットにし、影の代わりに青の枠線で区切る。
• スライダーの矢印は白い丸に薄い影を付ける。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 体験と観光地の写真はブロブ型か波形で切り抜く。歴史とグルメの写真は角丸の長方形にする
• セクション境界: 大きくうねる波形の曲線
• ボタンはすべてピル型にし、右端に「>」を付ける。
• フロート配置の小さな写真は、不定形のブロブで切り抜く。
• 縦書きキャッチの箱は、白地に青の二重線で囲む。
• 区切り線は点線か細い実線にする。
• STEP カードは上部に青い帯を付けた角丸の箱にし、間を▼でつなぐ。

Components

• 予約 CTA（button-primary）: オレンジのピル型ボタン。右端に「>」、下に濃い影を付け、下に注釈を添える
• 青のサブボタン（button-secondary）: キャンペーン詳細や外部の体験ページへ誘導する青のピル型ボタン
• 白い枠のボタン（button-outline）: 白地に青い枠のピル型ボタン。交通手段の見出しにはアイコンを付ける
• 3 段のセクション見出し（section-title）: 「…」で挟んだ日本語の小見出し、上下に罫線を引いた英字イタリック、黄色のピル型帯のサブキャッチの 3 段
• 縦書きキャッチの箱（vertical-catch）: 写真の端に重ねて置く縦書きコピー。白い箱を青の二重線で囲む
• キャンペーンのカード（campaign-card）: 白くて角の丸い大きなカード。中に特典の帯・説明・期間・STEP をまとめる
• 期間の番号バッジ（period-badge）: 黄色の四角の中に第◯弾と書き、右側に大きな日付を並べる
• STEP カード（step-card）: 上部に青い帯で STEP 番号を入れ、下にイラストと説明を横に並べる
• スポットのサブタイトル枠（spot-subtitle-bar）: 歴史セクションの施設名の上に置く、白地に青の二重線の横長ラベル
• 施設データの箇条書き（info-list）: 区切り線の下に、住所・時間・料金・電話を●付きで並べる

Do's and Don'ts

Do - カテゴリごとに地色を切り替え、境目を波形にする。 - 写真の横には、手書き風の縦書きキャッチを必ず添える。 - 予約 CTA はオレンジのピル型にし、各セクションの最後に繰り返し置く。 - 地色の上に、うっすらした柄（水玉・波線・紙吹雪）を重ねる。 - 金額などの特典の数字は、黄色と白で大きく見せる。 - マスコットのロゴのような、手描きのキャラクター要素を見出しに添える。

Don't - オレンジを予約以外のボタンや装飾に使わない。 - 写真をすべて四角に揃えて、硬い印象にしない。 - 暗い色や黒の地を使わない（交通のフォームの下部は例外）。 - 明朝体などの上品な書体で見出しを組まない。 - セクションの境目を直線だけにしない。 - 青の地の上の本文をグレーにしない。白にする。

Page Structure

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

1. ファーストビュー（地域の魅力と特典の金額を一目で伝える）: 周りにブロブ型の写真を散らし、中央の白い雲形にロゴとタイトルを置く。下に青い帯で特典の金額を大きく見せる
2. 導入・アクセス地図（地域の魅力と近さを伝える）: 青の地に、中央揃えの白い短文を数段置く。続けて白い地図のイラストに新幹線の路線と所要時間の丸いバッジを重ねる
3. キャンペーン概要（特典の内容・期間・参加方法を伝える）: 黄色の地にクーポン柄を敷き、白い角丸カードの中に特典の帯・注意ボックス・期間リスト・3 つの STEP をまとめる
4. キャンペーン CTA（詳細ページと使えるお店へ誘導する）: 青のピル型ボタンと白い枠のピル型ボタンを縦に並べ、それぞれの下に外部リンクの注記を置く
5. 観光スポット（定番のスポットを紹介する）: 濃い青の地。写真スライダー、黄色の施設名、縦書きの手書きキャッチ、データの順に並べ、スポットの間は波形で区切る
6. 予約 CTA（宿泊予約へ誘導する）: オレンジのピル型ボタンを置き、下に注釈を中央揃えで添える
7. 体験・アクティビティ（体験型のスポットを紹介する）: 水色の地。ブロブ型の写真に、白い箱に入れた縦書きキャッチを重ね、点線の区切りとデータを並べる
8. グルメ（名産品を紹介する）: 青の地に雲形の線のイラストを添え、縦書きの黄色い名前と料理の写真、紹介文を並べる
9. 歴史スポット（寺社や史跡を紹介する）: 水色の地に斜線の柄を敷く。角丸の写真、二重線のサブタイトル枠、中央揃えの施設名の順に並べる
10. 交通アクセス（行き方を案内する）: 青の地に波線の柄を敷く。埋め込み地図と、交通手段ごとの白い枠のボタン見出しの下に経路のテキストを置く
11. 空室検索フォーム（その場で予約の検索をしてもらう）: 白の地。ラジオボタン、日付、人数のセレクトを並べ、赤い検索ボタンを置く
12. 問い合わせ・広告主（問い合わせ先を案内する）: グレーの見出し帯が付いた罫線の表

Imagery

• 観光地の写真は晴天で彩度が高いものを選び、青い空や海を多く入れる。
• 家族や子どもが楽しむ人物写真を多めに使う。
• 料理はアップで撮り、皿ごと切り抜くか角丸で見せる。
• 装飾は手描き風にする。集中線・恐竜の足跡・波・キラキラなどの小さなアイコンを黄色と白で描く。
• 地図はシンプルな白いシルエットにし、オレンジの点線ルートとピンを描く。
• STEP には、青の線画に黄色を差したシンプルなイラストを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に収め、スポットは写真と本文の 2 カラムを左右交互に並べる。
• PC ではキャンペーンの STEP を横 3 列にする。
• PC では交通アクセスのボタンを横 3 列に並べ、地図を横に広く見せる。
• PC では右端に、カテゴリへのリンクを集めた追従ナビを置く。
• SP では写真を幅いっぱいに使い、縦書きキャッチを写真の端に重ねる。

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。