DESIGN.md — 水色×オレンジの手書き風 旅行割引 LP（Playful Regional Travel Coupon LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型
• キーワード: ご当地キャラ・手書き風見出し・ピル型ボタン・クーポン券・写真スライダー・生成り地
• 地の質感: 平塗りの面が中心。写真は角丸の矩形で切り抜き、FV だけは不定形の切り抜きで紅葉の和紙のような淡いグラデーションに重ねる。
• 形: 大きな角丸の白カード、ピル型ボタン、不定形の吹き出し、しずく型の番号ピン。
• 温度感: 暖かく陽気。家族旅行の楽しさを感じさせる。

Colors

• セクションごとに白・グレージュ・生成りの地を交互に切り替え、区切りを作る。
• 水色はブランド色として、セクション見出しの円、ナビ、サブCTAに使う。
• オレンジは主CTAと地域ラベルに限定し、ここを押してほしいと示す。
• 黄色の帯は小見出しと交通手段の見出しだけに使う。
• 文字は黒に近い色で統一し、リンクは青にする。
• FVだけは桃色と黄色の淡いグラデーションで華やかにする。
• button-primary は文字 #FEFCF1 × 背景 #FE8901 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AF5F01、4.58:1）を使う。
• button-secondary は文字 #FEFCF1 × 背景 #1BBDE2 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#127E97、4.58:1）を使う。
• section-title-bubble は文字 #1BBDE2 × 背景 #FFFFFF のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#127E97、4.59:1）を使う。
• region-tag は文字 #FEFCF1 × 背景 #FE8901 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AF5F01、4.58:1）を使う。

Typography

• 見出しとボタンは手書き風の太い丸みのある書体にそろえる。
• 本文は読みやすいゴシック体で 14px・行間 1.8 にする。
• 大見出しは「地名＋カテゴリ」の形にし、カテゴリ語を水色の円に白抜きで入れる。
• 大見出しの上に、薄いグレーの英小文字ラベルを添える。
• スポット名の背後に、筆記体の英字を薄く透かして重ねる。
• ボタンは小さい上段と大きい下段の 2 段組みにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サムネイルは 4 列で並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 主要なカードは左右に 16px 前後の余白を残して置く。
• クーポンのエリアごとに、黄色い見出し帯が上辺にかかる白い大カードを用意する。
• スポット紹介は、番号ピン＋見出し → 本文 → 点線 → 基本情報 → 写真 → サムネイルの順に並べる。
• 各セクションの最後に、CTAボタンを 2 つ縦に並べる。
• アクセスは「出発地ピル ― 所要時間 ― 到着地ピル」を横 3 点で並べる。

Elevation & Depth

• ボタンは真下にずらした淡いグレーの影を付け、押せそうに見せる。
• クーポン券には小さなぼかし影を付ける。
• カードには影を付けず、地色との差だけで浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 6px の矩形にする。FVは雲のような不定形の切り抜きにする。セクション冒頭は全幅の写真に不定形の白い吹き出しを重ねる。
• セクション境界: 地色を水平に切り替える。冒頭の写真の下端は、吹き出しの曲線でつなぐ。
• ボタンは必ずピル型にし、右端に「>」を入れる。
• クーポン券は左右に半円の切り欠きを入れたチケット型にする。
• 番号はしずく型の地図ピンに白抜き数字で入れる。
• 期間ラベルは点線枠のピル型にする。

Components

• 主CTAボタン（button-primary）: オレンジのピル型ボタン。2 段組みの白文字と右矢印を入れ、下に影を付ける。
• サブCTAボタン（button-secondary）: 水色のピル型ボタン。エリア別に 2 つ縦に並べる。
• 吹き出し型セクション見出し（section-title-bubble）: 全幅写真に白い不定形の吹き出しを重ね、英字ラベル・地名・水色の円の文字・キャラを入れる。
• 黄色の見出し帯（area-label-bar）: 黄色の帯。左上に手書き風の吹き出し文字を添え、白カードの上辺にかける。
• クーポン券（coupon-ticket）: 左右に切り欠きのあるチケット。上に種別ラベルと割引額、下に取得ボタンを入れる。
• 番号ピン付きスポット見出し（number-pin）: 水色のしずく型ピンに番号を入れ、波線を下に引いたキャッチとスポット名を添える。
• 地域タグ（region-tag）: オレンジのピル型ラベル。グルメ名の左に置く。
• 経路表示（route-pill）: 淡いベージュのピルを 2 つ置き、点線でつないで上に所要時間を書く。
• アンカーナビ（anchor-nav）: 水色の帯に、手書き風の文字のページ内リンクを 5 つ並べる。

Do's and Don'ts

Do - キャラクターのイラストを見出しの横や写真の角に置き、名前を縦書きで添える。 - 各テーマセクションの最後に、予約へのCTAを繰り返し置く。 - 写真はスライダーにし、ドットまたはサムネイルで切り替えられるようにする。 - 注意書きは、薄いグレーの角丸ボックスにまとめる。 - 地色を変えて、テーマの区切りを明確にする。

Don't - 明朝体や細いフォントを見出しに使わない。 - オレンジを装飾に多用せず、CTAとタグに限定する。 - 角の立った四角いボタンを使わない。 - 暗い背景の大きなセクションを作らない。 - 写真に強いフィルターをかけない。

Page Structure

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

1. ファーストビュー（キャンペーン名と割引の訴求）: 淡いグラデーションの地に、不定形に切り抜いた写真 6 枚とキャラを散らし、中央に大きなロゴを置く。下に特典の帯を入れる。
2. 導入（旅先の魅力と行きやすさを伝える）: 白地に、1 文字目だけオレンジにした手書き風見出しと本文を置く。地図イラストにオレンジの円で所要時間を示す。
3. アンカーナビ（各セクションへ移動させる）: 水色の帯に、テキストリンクを 5 つ並べる。
4. クーポン一覧（特典の内容と期間を示す）: グレージュの地に、期間カード、黄色の帯付きの白い大カード、チケット型のクーポン、オレンジのCTAを並べる。
5. 体験紹介（アクティビティの魅力を伝える）: 生成りの地。冒頭に全幅写真と吹き出し見出しを置き、番号ピンのスポットスライダーとサムネイルを続ける。
6. 観光紹介（名所の魅力を伝える）: 体験紹介と同じ型で作り、最後に水色のCTAを 2 つ置く。
7. グルメ紹介（食の魅力を伝える）: グレージュの地に、写真、地域タグ、名称、本文の順で縦に並べ、写真の角にキャラを置く。
8. アクセス（交通手段ごとの所要時間を示す）: 角丸の地図の下に、黄色の帯の見出しと経路のピルを並べる。
9. 空室検索フォーム（その場で予約させる）: ベージュの枠線の中に、ラジオボタン、日付、人数のフォームを置き、赤い検索ボタンで締める。
10. 問い合わせ・主催者（信頼性を補う）: グレーの見出しセルを持つ枠線の表とバナーを置く。

Imagery

• 写真は、晴天の自然・名所・料理を明るく彩度高めに撮る。
• 料理は真上から斜め上の寄りで撮り、器ごと見せる。
• キャラは黒い太線で描いた、お椀型のゆるいイラストにする。
• FVでは紅葉の葉のシルエットを淡く散らす。
• 地図は、白黒の点線と丸い駅マークでシンプルに描いたイラストにする。
• アイコン（飛行機・車・バス）は、黒い太線の手描き風にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約 70% 幅に内容を収め、左右に地色を見せる。
• PCではクーポン券とグルメを 2 列のグリッドにする。
• PCではスポット紹介を写真と本文の左右 2 カラムにする。
• PCではサブCTAを 2 つ横に並べる。
• PCのアクセスは、交通手段を 2 カラムで並べる。
• PCでは空室検索フォームを横長に圧縮して配置する。

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