DESIGN.md — 緑×水色の子育て街見学ツアー LP（Fresh Green Family Town Tour LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ナチュラル、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 子育て世帯・街歩き・手描きイラスト・若葉グリーン・数字で見せる・繰り返しCTA
• 地の質感: フラットな淡色の面に線画イラストと葉っぱ飾りを散らす。グラデーションはほぼ使わない
• 形: 角丸カード、片側だけ大きく丸めた写真、丘のような波形の境界、吹き出し型見出し
• 温度感: 明るく爽やかで、やや涼しめの暖かさ

Colors

• 地は白・淡い水色・淡い黄緑を章ごとに切り替える
• 深緑は申込帯と見出しラベルに限定し、ページのリズムを作る
• CTA ボタンは黄色地に深緑文字で目立たせる
• 無料・特典はサーモンの丸バッジで最小限に
• 数字はカテゴリごとに黄緑・シアンで色分けする
• 本文はグレー、見出しは深緑で黒は使わない
• button-primary は文字 #1F7A6C × 背景 #F5F342 のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#1E786A、4.5:1）を使う。
• stat-card は文字 #87BE4F × 背景 #EBFCFC のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#557C2E、4.61:1）を使う。
• feature-number は文字 #46998D × 背景 #FFFFFF のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#3C8278、4.51:1）を使う。

Typography

• 見出しは丸ゴシックの太字で親しみを出す
• 数字は大きく、単位は小さく添える
• 見出しの上に手書き風の英字を小さく置く
• 本文はセンター揃えで短く改行する
• 地名などのロゴ風文字は一部の字を大きくして遊ぶ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数字カードと特長は SP でも 2 列可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 2〜3 セクションごとに深緑の申込帯を全幅で挟む
• 数字セクションは白い大枠の中にカテゴリ別の 2 列カード
• 見出しは中央揃え、下にラベル帯を置く
• 特長は番号付きで写真 2 枚＋説明文
• 白・水色・黄緑の地を交互に切り替える

Elevation & Depth

• 基本はフラットで影なし
• カードは淡い面色か細い枠で区切る
• 概要ボックスは緑の太枠と少しずらした影で浮かせる
• フッター固定バーだけ軽い影

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 片側の角だけ大きく丸めた写真、ひし形の写真コラージュ、円形アイコン
• セクション境界: 丘のような緩い波形と、写真下部の白い曲線
• 申込ボタンはピル型
• 見出しラベルは吹き出し・リボン型
• 無料バッジは正円
• 数字カードは角丸 12px

Components

• 申込帯（cta-band）: 深緑の全幅帯。左に特典写真と吹き出し、中央に見出しと黄色ボタン、右に小さな人物イラスト
• 申込ボタン（button-primary）: 黄色のピル型ボタン。深緑文字に矢印を添える
• 無料バッジ（badge-free）: サーモンの正円に白文字で無料・特典と入れる
• 吹き出し見出し（heading-bubble）: 深緑の吹き出し型ラベルの上に手書き英字を添える
• 数字カード（stat-card）: 淡い色の角丸カードに項目名、大きな数字、線画イラストを入れる
• 番号付き特長（feature-number）: 葉っぱ型の番号アイコン、見出し、角丸写真 2 枚、説明文の組み合わせ
• FAQ カード（faq-item）: 白いカードに Q と A を緑の丸記号で示す
• 参加者の声（voice-card）: 円形のイラスト顔、年代ラベル、短い感想を縦に並べ、縦線で区切る
• 固定フッター（fixed-footer-bar）: 深緑のバーに電話番号ボタンと申込ボタンを並べる

Do's and Don'ts

Do - 淡い地色を章ごとに替えて区切る - 数字は単位付きで大きく見せる - 線画の人物・木・街のイラストを余白に散らす - 申込帯を同じデザインで何度も出す - 写真は家族や緑のある日常を明るく見せる

Don't - 黒や濃いグレーの重い面を使わない - 鋭い角や直線だけの硬い区切りにしない - 原色の赤で強く煽らない - 写真に濃いフィルターをかけない - 長い本文を左詰めでぎっしり並べない

Page Structure

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

1. ファーストビュー（ツアーの存在と無料・特典を一目で伝える）: ひし形の写真コラージュ、中央に大見出し、黄色の受付帯、若葉色の丘
2. 街の紹介（街の魅力を数字と地図で直感的に伝える）: タグ群、丸い数字バッジ 3 つ、手描きの街マップ
3. ツアーの種類（選べるコースを比較させる）: 水色地に白カード 3 列。チェックリストと QR を配置
4. おすすめ対象（自分ごと化させる）: 家族写真の間に円形の悩みカードを並べ、チェックリストで締める
5. ツアー概要（内容と所要時間を示す）: 緑枠のクリーム色ボックスに円形写真 3 つ
6. 参加のメリット（参加価値を示す）: 角丸写真 3 列＋見出しと短文
7. 満足度と参加者の声（信頼を補強する）: 緑の大きな満足度バナー、イラスト顔の声 3 列
8. 特典と申込の流れ（申込を後押しする）: 暖色の特典バナー、番号付きの手順
9. 目次と街の詳細（深掘り情報へ誘導する）: クリーム色のメニュー枠、写真＋文章の紹介
10. コンセプト（街の理念を印象づける）: 空撮写真の上に白い大見出し、下に黄緑の丘
11. 5 つの魅力（特長を整理して伝える）: 番号付きの 2 列ブロックと写真
12. 数字で見る街（データで安心させる）: 水色地の白い大枠にカテゴリ別の数字カード
13. よくある質問（不安を解消する）: Q&A カードを縦に並べる
14. クロージング CTA（申込へ導く）: 丘のイラスト、吹き出し、丸アイコン 3 つ、申込帯と固定フッター

Imagery

• 自然光の明るい家族写真。緑や公園を背景に笑顔で
• 街並み・駅・商業施設は青空の下で撮る
• 細い線画の手描き人物・木・建物を淡い色でアクセントに
• 葉っぱや草の小さな装飾を余白の端に散らす
• 数字カードには単色線画のピクトを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅にまとめ、左右に淡いグレーの余白を出す
• SP ではツアーカード 3 列を縦積みにする
• 数字カードは SP でも 2 列を保ち、数字を少し縮める
• 申込帯は SP で写真と見出しを縦に積み、ボタンを全幅に
• SP は固定フッターに電話と申込の 2 ボタンを並べる

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