DESIGN.md — 水色×レモン黄の水彩旅スタンプラリー LP（Seaside Watercolor Travel Stamp Rally LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 瀬戸内の海・水彩レモン・点線の旅路・円形バッジ・スタンプラリー
• 地の質感: フラットな水色の面に、水彩のにじみ玉と手描き風の波線・雲・鳥を重ねる
• 形: 大きな正円・ピル型ボタン・下向き山形の区切り・角丸カード
• 温度感: 明るく爽やか。水色を基調に黄色で暖かみを足す

Colors

• セクションごとに地色を水色→白→レモン黄→クリーム→白と切り替える
• 地域は赤・紺・緑の円で色分けし、同色を他用途に使わない
• 賞品の数字はオレンジ／赤の太字＋黄色マーカーで最大強調
• 白ピルボタンは紺文字で、水色や黄色の地に浮かせる
• 下部の情報セクション見出しは青ベタ帯＋白文字
• 水彩の黄緑レモン玉を各セクションに散らして統一感を出す

Typography

• 見出しの左右に斜線（＼ ／）を付けて導入句にする
• 強調語だけを大きくして色を変え、残りは小さくして文字サイズに強弱を付ける
• 数字は極太イタリックにして黄色マーカーと組む
• 注釈は※付きで 11px 前後の中央揃え
• 欧文の地名はタイトル円の外周や地域円の下部に字間を広げて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 地域円は左右交互にずらして縦に並べ、点線でつなぐ
• ボタンは画面幅の約 82% で縦に 2 本並べる
• 賞品ブロックは点線の区切りで上下に分ける
• 下部の情報エリアは全幅の青帯見出し＋バナー画像を並べる

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白ピルボタンは色地とのコントラストだけで浮かせる
• ステップカードは細い黒線の枠のみ

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は波形・雲形のマスクで切り抜き、乗り物は輪郭で切り抜く
• セクション境界: 水色パネルの下端は下向き山形、黄色エリア上端は白の大きな弧
• 主役の要素は正円にする
• 見出しの吹き出しは角丸ピル＋小さな尻尾
• ステップカードは角丸 24px の線枠
• 規約ボタンだけは角丸 4px の紺ベタ長方形

Components

• 円形 ENTRY ボタン（entry-circle）: 紺の大きな正円に内側の白い細線リング。細い欧文の ENTRY と白い小ピルを置く
• 地域円カード（area-circle）: 赤・紺・緑の円に大きな地名と白ピル『詳しく見る』、注釈、欧文地名
• 白ピルリンクボタン（button-pill-white）: 白地に紺の太字、右端に細い山形矢印
• 吹き出し見出し（speech-heading）: 白い角丸枠の吹き出しに、2 行の見出しと強調語の拡大
• 賞品数字ブロック（prize-number）: 極太イタリックの数字＋黄色マーカー＋右に人数の円バッジ
• ステップカード（step-card）: 線枠カードに Step 番号の大きな斜体数字とスマホ画面のスライダー
• 青帯見出し（band-heading）: 全幅の青ベタ帯に白い太字見出し
• 限定ラベル（label-pill-navy）: 紺のピルに白文字で対象者を示す

Do's and Don'ts

Do - 水彩のレモン玉と点線の旅路を各セクションに散らす - 地域ごとに色を変えた正円で回遊を表す - ボタンはピル型の白地＋紺文字で統一する - 数字は極太にして黄色マーカーを引く - 地色はセクションごとに淡い色で切り替える

Don't - 濃い影やグラデーションボタンを使わない - 原色の赤やオレンジを広い面に使わない - 四角い写真をそのまま並べない - 明朝体でかたい印象にしない - 装飾の点線を太い実線にしない

Page Structure

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

1. ファーストビュー（企画名と期間の告知）: 海の空撮写真の上に白い大きな円形タイトル。下部はくすみ水色の地に期間の大数字と乗り物写真
2. 巡る地域の紹介（対象エリアと遊び方の導入）: 吹き出し見出しの下、淡水色パネルに赤・紺・緑の地域円を左右交互に置き、点線でつなぐ
3. 会員登録の案内（応募条件を伝える）: 短い説明文と白ピルボタン 2 本。パネル下端は山形
4. 賞品（特典で参加意欲を上げる）: 斜線付きの導入見出し、吹き出し条件、極太の数字＋マーカーを 2 段
5. エントリー CTA（参加ボタンへ誘導）: レモン黄の地に紺の円形 ENTRY、注釈、白ピルボタン 2 本
6. 参加方法（手順の説明）: クリームの地に字間を広げた見出し＋下線。線枠のステップカードにスマホ画面をスライダー表示
7. 注意事項・規約（条件の補足）: 小さな本文と紺ベタの規約ボタン
8. おすすめ商品（関連商品へ送客）: 青帯見出し＋横長バナー。淡水色の地に限定ラベルと 2 枚目のバナー
9. イベント紹介（関連施策の告知）: 青帯見出し、本文、キャラクターのイラストバナー

Imagery

• 晴れた海と島・橋の空撮写真。彩度を少し抑えて爽やかにする
• 黄〜黄緑の水彩でにじませた丸いレモン玉を装飾に使う
• 手描き風の波線・雲・カモメ・点線の軌跡を細い線で描く
• 乗り物や名所の写真は切り抜いて円の周りに配置する
• 線画のポップなキャラクターイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 375px）のカラムを固定して表示する
• PC 左右の余白はくすみ水色で埋め、左にタイトル縮小版、右に ENTRY 円と参加方法ボタンを固定する
• 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 行書くと起動時に読み込まれる。