DESIGN.md — 水色×黄色の紙吹雪ポップな観光キャンペーンLP（Pop Confetti Regional Tourism Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、清潔・爽やか
• キーワード: 紙吹雪・コイン・リボン見出し・パステルブロブ・不定形写真・3カテゴリ導線
• 地の質感: FVは集中線と紙吹雪でにぎやかにする。本編は白地にパステルのぼかし図形をふわっと置く。
• 形: 黒いフチのラベル帯、オレンジのピル型リボン、角丸カード、丸いCTAバブル、有機的なブロブ形の写真で構成する。
• 温度感: 明るく暖かい。夏の行楽らしく楽しげな温度感。

Colors

• 地は白を基本にする。水色はFVと最後のCTAだけに使い、ページの上下を挟む。
• 黄色は黒フチのラベル帯と大見出しの強調に限定する。
• オレンジはセクション見出しのリボンと写真キャプションのピルに使う。
• 予約カテゴリは「宿＝青」「体験＝茶/オレンジ」「グルメ＝赤」で色分けし、全箇所で統一する。
• 市町村の詳細リンクは薄紫の帯にして、オレンジと役割を分ける。
• パステルのブロブは背景の飾りに留め、本文の下には重ねない。
• ribbon-heading は文字 #FFFFFF × 背景 #F07A2A のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C2570E、4.5:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #1E7FC0 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1D7CBC、4.51:1）を使う。
• photo-caption は文字 #FFFFFF × 背景 #F07A2A のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C2570E、4.5:1）を使う。

Typography

• FVの見出しは極太の書体に白フチと影をつけ、緑・黄の多色で組む。
• 市町村名はレトロな装飾明朝を大きく置く。英字ルビは斜めに添える。
• キャッチは手書き風にし、写真の近くへ斜めに配置する。
• 期間の日付は大きな数字で組み、曜日だけ色付きの丸で囲む。
• 本文は13px前後で短めの段落にし、重要な一文は太字と下線マーカーで強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。予約導線はSPでは縦並び、または3列の小バブルにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 市町村紹介は写真と文章を左右交互にずらし、ジグザグに流す。
• 1つの市町村は「キャッチ→大見出し→本文→薄紫リンク帯→小写真2枚」の順に組む。
• 条件の流れはタイムラインの表にし、パターン別に横矢印でつなぐ。
• キャンペーン説明は中央揃え、条件は左揃えの箇条書きにする。

Elevation & Depth

• ブロブ写真やカードに影はほぼつけず、平面で見せる。
• FVの文字だけは白フチとドロップシャドウで浮かせる。
• CTAバブルの下には柔らかい影を薄く落とす。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: メイン写真は有機的なブロブ形に切り抜く。補助写真は角丸の長方形にし、左下にオレンジのピル型キャプションを重ねる。
• セクション境界: 直線で区切る。FVと最下部には街並みのシルエットを線画で敷く。
• ラベル帯は黒フチ付きの平行四辺形にする。
• 予約カードはブラシ風の円形にする。
• ボタンはピル型で統一する。

Components

• 黒フチ黄ラベル帯（label-band）: 黄色の帯に黒い線と黒文字。訴求の一文を目立たせる。
• オレンジリボン見出し（ribbon-heading）: オレンジのピル型に白文字。両端を少し切り欠いて見出しにする。
• カテゴリ別予約バブル（category-bubble）: 淡い色のブラシ円の中に、大きなカテゴリ名とCLICKピルを置く。3色で色分けする。
• CLICKピル（button-primary）: 小さな色付きのピルに白い英字と矢印アイコンを入れる。
• 規約ボタン（button-outline）: 白地に黒の太枠、中央の丸アイコンと文字で構成する。
• 写真キャプションピル（photo-caption）: 写真の左下にオレンジのピルを重ね、小さな白文字で名称を入れる。
• 観光情報リンク帯（area-link）: 薄紫の帯に、市町村名＋誘導文を濃紫の文字で入れる。
• ポイント付与フロー表（flow-table）: 淡い黄の地に、旅の前・当日・翌日・旅の後を矢印で並べる。対象部分は赤い点線で囲む。

Do's and Don'ts

Do - カテゴリの3色(青・オレンジ系・赤)を全ての導線で統一する。 - 市町村紹介は写真をブロブに切り抜き、左右交互にリズムよく置く。 - 背景には淡いパステルのブロブを大きく配置して、空気感を出す。 - 日付・%・ポイント数は大きく太く見せる。 - 注意事項は小さい文字で、条件のすぐ下に置く。

Don't - 本編の背景を濃い色で塗らない。 - 写真をすべて同じ四角で並べない。 - オレンジと薄紫の役割を混ぜない。 - FV以外で紙吹雪を多用しない。 - 細い明朝の本文にしない。

Page Structure

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

1. 告知バー（期間と回次を即座に伝える）: 水色の地に黄色の帯を敷き、日付を大きく、曜日を丸で囲む。
2. ファーストビュー（キャンペーンの名前と還元率を訴求する）: 集中線・紙吹雪・コインの上に、多色の極太見出しと期間を置く。
3. 対象カテゴリ紹介（泊・遊・食の3カテゴリが対象と示す）: アイコン付きの角丸カードを3つ横に並べる。
4. キャンペーン概要（付与上限と条件を要約する）: 黄ラベル帯の下に、中央揃えの本文を置く。
5. 対象期間（チェックイン期間を明示する）: オレンジのリボン見出しと大きな日付で示す。
6. 条件と流れ（付与の流れをパターン別に説明する）: 箇条書きの下にタイムライン表を置き、最後に注意事項を添える。
7. 予約導線（各予約サイトへ誘導する）: 3色のブラシ円バブルにCLICKピルを置き、下に規約ボタンを付ける。
8. 地域の魅力導入（観光への興味をつくる）: 吹き出し、手書きのロゴ風見出し、地図イラストと導入文で構成する。
9. 市町村紹介（各地の見どころを紹介する）: ブロブ写真・装飾見出し・本文・リンク帯・小写真を1セットにし、ジグザグに繰り返す。
10. 締めCTA（最後に予約を促す）: 水色の集中線の地に黄ラベル帯を置き、3つのバブルを並べる。最下部は街並みのシルエットにする。

Imagery

• 観光写真は晴天の高彩度で撮る。温泉の湯気、海、城、料理などを選ぶ。
• メイン写真は不定形のブロブに切り抜き、補助写真は小さな角丸の長方形にする。
• 背景には建物・名所の線画イラストを薄いグレーで散らす。
• FVは金色のコイン、カラフルな紙吹雪、集中線で祝祭感を出す。
• 淡い桃・緑・紫のパステル図形を、ぼかし気味に重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約480px相当の幅に組み、左右の余白にパステル図形と線画を置く。
• SPではカテゴリカードと予約バブルを1列か2列に縮め、タップしやすい大きさにする。
• 市町村紹介のジグザグは、SPでは「写真→見出し→本文」の縦積みに簡略化する。
• フロー表はSPで横スクロールにするか、縦のステップ表示に変える。
• FVの見出しはSPで約32〜36pxにし、改行位置を調整する。

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 行書くと起動時に読み込まれる。