DESIGN.md — 若草×水色の手描き風 子育て戸建て LP（Pastel Green & Sky Family Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、清潔・爽やか
• キーワード: 若草色・水色の空・手描きイラスト・紙テクスチャ・家形バッジ・チェックリスト
• 地の質感: 地は細かい紙の粒状感があるパステル単色。雲は水彩のにじみ風にする。
• 形: 角丸 12px 前後の白カード、ピル型ボタン、ちぎれた紙のような波打つセクション境界、三角屋根の家形バッジ
• 温度感: やや暖かい。明るく穏やかで家族的な温度感。

Colors

• 地はセクションごとに若草・生成り・水色を切り替え、波打つ境界でつなぐ
• 緑系のセクションでは強調文字を緑、水色系のセクションでは青とオレンジにする
• 見出しの強調語だけ色を変える。それ以外の見出しは濃いグレーで残す
• ボタンは役割で色を分ける。主ボタンはオレンジ、詳細は青緑、問い合わせは赤
• 白カードは淡い地の上にだけ置き、影は付けずに面のコントラストで浮かせる
• 彩度の高い色は小さい面積に限り、全体はパステルを保つ
• pill-band は文字 #FEF8ED × 背景 #3CAA55 のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8241、4.53:1）を使う。
• button-primary は文字 #FEF8ED × 背景 #EA5503 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C74803、4.56:1）を使う。

Typography

• 見出しは 2 段構成にする。上に小さい前置き、下に大きい色付きの強調語を置く
• 数値は本文より大きく、色付きの太字にする
• 見出しの字間は 0.08em 以上取り、ゆったり見せる
• 本文の行間は 2 前後に広く取る
• 数字の番号だけ細い斜体の欧文にして軽さを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。物件カードは横スライダー
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの下にしずく形ドットの横並びの区切りを置く
• 白カードは左右に約 7% の余白を残す
• イラストはカードの角や見出しの横に重ねて配置する
• 物件カードは前後のカードの端を少し見せて、スワイプできることを示す
• アクセス時間は 2 列の表組みで並べる

Elevation & Depth

• 影はほぼ使わず、白カードと淡い地の明度差で階層を作る
• 主ボタンだけに白い縁取りを付けて浮かせる
• 雲のイラストを白カードの背後に重ねて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形。カード内の写真は上辺だけ角丸にする
• セクション境界: ちぎった紙のような不規則な波線
• タイトルは三角屋根付きの家形白バッジに収める
• 帯見出しと主ボタンはピル型にする
• 物件カード内のボタンは角丸小の横長矩形にする
• 写真上の駅名タグは荷札形にする

Components

• 家形タイトルバッジ（house-badge）: 屋根形の白い枠にリボンと大見出しを収め、FV 写真の中央に重ねる
• 2 段見出し＋ドット区切り（heading-two-tier）: 小さい前置きの下に色付きの強調語を置き、その下にしずくドットを並べる
• 緑のピル帯（pill-band）: アクセスの要点を白文字 2 行で載せる帯
• 物件スライダーカード（property-card）: 上に写真、下に物件名と箇条書きの情報、ボタン 2 つを積む白カード。左右に丸い矢印、下にドットのページャー
• 公式サイトボタン（button-secondary）: 青緑の横長ボタン
• 問い合わせボタン（button-inquiry）: 赤の横長ボタン
• 番号付きチェックリストカード（numbered-checklist）: #数字の見出しの下に白カードを置き、チェック印＋強調語の項目を点線で区切って並べる
• 主ボタン（一覧へ戻る）（button-primary）: 家アイコン付きのオレンジのピル。白い縁取り付き
• 荷札タグ（tag-label）: 写真の角に重ねる赤い荷札形の駅名ラベル

Do's and Don'ts

Do - 地色はパステルの単色にし、紙の粒状感を付ける - 家族・子ども・木・電車などの手描き風イラストを各セクションに添える - 強調語と数値だけ色を変えて太字にする - セクションの境界は波打つ紙の形でつなぐ - 白カードは角丸 12px でフラットにする

Don't - 濃い色やダークな面を大きく使わない - 強いドロップシャドウやグラデーションの多用は避ける - 直線的で硬いセクション区切りにしない - ボタンの色の役割を混ぜない - 写真やイラストのない文字だけの長いブロックを作らない

Page Structure

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

1. ヘッダー（ロゴと問い合わせへの導線）: 白い細帯の左にロゴ、右に赤い四角のメールアイコンを置く
2. ファーストビュー（街の魅力と特集テーマの提示）: 外観と内観の写真を上下に重ね、中央に家形の白バッジでタイトルを置く
3. 導入・アクセス訴求（エリアの特長と都心への近さの提示）: 若草色の地に 2 段見出しとリード文を置く。緑のピル帯の下に駅名と所要分を 2 列で並べる
4. エリアマップ（物件の位置関係を示す）: 手描き風のイラストマップを横スクロールで見せ、スワイプ案内を重ねる
5. 物件一覧（各物件の詳細と問い合わせへの誘導）: 生成りの地にガーランド付きの見出しを置き、白カードのスライダーにボタン 2 つを付ける
6. 地域の魅力・導入（子育て環境の訴求開始）: 水色の地に 2 段見出しと青のドット区切りを置く
7. 魅力ポイント（番号付き）（子育て・環境・教育の支援内容を列挙）: #1〜#3 の斜体番号見出しと短いリードの下にチェックリストカードを置く。周囲に人物イラストと雲を添える
8. アクセスと自然（交通の利便性と自然環境の訴求）: 緑の丘のイラストで若草色に切り替える。駅写真に荷札タグを重ね、本文段落を続ける
9. CTA（物件一覧へ戻す）: 電車と木のイラストの下にオレンジのピル型大ボタンを置く
10. フッター（ロゴとコピーライトの表示）: 白地の中央にロゴと小さな注記を置く

Imagery

• 人物・木・電車・バス・給食などのイラストは、輪郭線の細いフラットな手描き風にする
• 人物は家族や子ども中心で、くすんだ暖色の服装にする
• 雲は白の水彩にじみ風にしてカード背後に置く
• 建物写真は晴天の外観と明るいリビングにし、自然光で彩度は控えめにする
• 見出し横にガーランドの旗やしずくドットなどの小さな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 960px 幅で SP の構成をそのまま広げる
• FV は外観と内観の写真を左右に並べ、中央に家形バッジを置く
• 物件スライダーは 4 枚程度を同時に表示し、左右に矢印を置く
• アクセスセクションは写真と本文を左右 2 カラムにする
• チェックリストカードは横長にし、1 行で収める

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