DESIGN.md — ベージュ×黄色の家族向け住宅来場予約 LP（Warm Beige Family Housing Visit Campaign LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、情報量多め・訴求型
• キーワード: ベージュ地・オレンジの見出し・黄色の下線・手描きイラスト・家族向け・来場予約
• 地の質感: フラットな単色面に、線画イラストと紅葉の装飾を重ねる。影はほぼ使わない
• 形: 角丸の小さいカード、円形のアイコン台座、角型の番号ラベル
• 温度感: 暖かい。ベージュ・黄・オレンジの暖色が中心

Colors

• 地は白を基本にする。特典条件・フォーム見出し・フッターはベージュのボックスで区切る
• 商品の特長ブロックは黄色の面に白カードを載せる
• 事例カードは薄いグレーの面にし、見出しはくすんだ青にする
• オレンジはキャンペーン見出しと特長ラベルだけに使う
• 主 CTA は緑、サブ導線は抹茶色にして役割を分ける
• 見出しの下には必ず黄色の短い下線を引く
• button-secondary は文字 #FFFFFF × 背景 #9EBB72 のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#657F3D、4.51:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #4CBD89 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#31845E、4.57:1）を使う。

Typography

• 見出しは中央揃えで太字にし、字間を広めに取る
• 本文は行間を広めにとる（1.8〜1.9）
• 数字や日付は大きい太字で目立たせる
• 手書き書体は写真に重ねる番号だけに使う
• ヒーローは丸く太い書体でポップにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。事例カード内の写真は 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しと本文は中央揃えにする
• ステップは左に円形アイコン、右にテキストを置く横並びにする
• ボックスは画面端から 12〜18px 内側に置く
• フォームは 1 項目 1 行で縦に積む

Elevation & Depth

• 影はほぼ使わない
• 階層は面の色の違いで表す
• フォームの入力欄は細いグレーの枠線だけにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角。ポイント写真は下部に白い半円を重ねて番号を入れる。ステップアイコンは円形台座
• セクション境界: 直線。色面のボックスで区切る
• ボタンは角丸 4px 程度の長方形にする
• 特長ラベルはピル型にする
• 番号は茶色の四角ラベルにする

Components

• 下線付き見出し（heading-underline）: 中央の太字見出しの下に、黄色の短い太線を引く
• 黄色の特長ボックス（feature-box）: 黄色の面に白い角丸カードを並べ、オレンジのピル型ラベルで項目名を示す
• 条件ボックス（condition-box）: ベージュの角丸ボックスに条件を番号付きで並べ、下に注意事項を詰めて書く
• ステップ項目（step-item）: 茶色の番号ラベル、薄い黄色の円に入れた線アイコン、下向きの矢印、右側の太字テキストで構成する
• ポイント写真（point-photo）: 四角い写真の下中央に白い半円を重ね、手書き風の番号を入れる
• 事例カード（case-card）: グレーの角丸カード。小さなリード文、青い見出し、写真 2 枚、キャプションの順に置く
• サブボタン（button-secondary）: 抹茶色の長方形ボタン。白文字の末尾に >>> を付ける
• フォーム項目（form-field）: 左に黒い縦線を付けたラベル、赤い必須バッジ、白い入力欄の順に置く
• 送信ボタン（button-primary）: 緑の横幅いっぱいのボタン。文字は白の太字

Do's and Don'ts

Do - 暖色のベージュと黄色を地の基本にする - 人物と家は線画のやさしいイラストで描く - 見出しには必ず黄色の下線を付ける - 手順はアイコンと番号で視覚化する - 面の色を変えてブロックを区切る

Don't - 濃い寒色や黒を背景に使わない - 強い影やグラデーションのボタンは使わない - オレンジを本文に多用しない - 角ばった硬い装飾を入れない - 主 CTA の緑を他の要素に使わない

Page Structure

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

1. ファーストビュー（キャンペーンと特典を一目で伝える）: ベージュ地に丸ゴシックの大見出しを置く。家族の線画イラスト、家のイラスト、特典の商品写真を組み合わせる
2. 特典訴求バナー（ギフト特典の金額を強調する）: 紅葉や木の実の装飾をベージュ地に散らし、金額をオレンジの特大文字で見せる
3. 導入文（キャンペーンの趣旨を説明する）: 白地に中央揃えの見出しと短い本文を置く
4. こだわり紹介（商品の 2 つの強みを伝える）: 黄色のボックスを 2 つ置き、白カード・図解・ピル型ラベルで説明する
5. 開催期間（日程を示す）: 下線付き見出しの下に、日付を大きな太字で置く
6. 特典の条件（特典をもらえる条件と注意事項を示す）: ベージュの角丸ボックスに、黒丸の番号リストと細かい注意書きを入れる
7. 受け取りの流れ（手順を 5 ステップで示す）: 番号ラベル・円形アイコン・テキストを縦に並べる
8. 見学のポイント（来場するメリットを示す）: 写真・手書きの番号・小見出し・本文を 3 つ繰り返す
9. 拠点マップ（会場の場所を伝える）: 拠点の写真を横に並べた帯と、埋め込み地図の下に抹茶色のサブボタンを置く
10. 設計の提案（子育て向けの設計の強みを伝える）: グレーのカードを 4 枚置き、それぞれに青い見出しと写真 2 枚を入れる
11. 予約フォーム（来場予約を受け付ける）: ベージュの見出し帯の下にグレーのフォーム面を置き、最後に緑の送信ボタンを置く
12. フッター（著作権を表示する）: ベージュ地に小さな文字を中央揃えで置く

Imagery

• 人物は細い線と淡い塗りのイラストで描く。手描きのタッチを残す
• 家の写真は明るく自然光が入るように撮り、木目や白壁を見せる
• 子どもの生活シーンを自然なスナップで撮る
• 季節の植物（落ち葉・木の実）をフラットなイラストで散らす
• アイコンは茶色の細い線で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 70% 幅のコンテンツを置き、左右を余白にする
• PC のこだわりボックスは 2 列で横に並べる
• PC の手順は 5 ステップを横に並べ、間に矢印を入れる
• PC の見学ポイントは 3 列、事例カードは 2 列×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 行書くと起動時に読み込まれる。