--- version: alpha name: Pastel Green & Sky Family Housing LP description: 若草色と水色の紙質感の地に、手描き風の家族・木・電車のイラストを散らした子育て世帯向けの新築戸建て LP。ファーストビューは家形の白いバッジにタイトルを載せる。物件カードはスライダーで見せる。地域の魅力を番号付きチェックリストで並べ、やわらかく親しみのある信頼感を出している。 colors: primary: '#3CAA55' background: '#E6F2C1' background-alt: '#D4EDF1' tint-1: '#F9F9DE' surface: '#FFFFFF' text: '#333333' cta: '#EA5503' on-cta: '#FEF8ED' secondary: '#2A6979' accent-1: '#CB000E' accent-2: '#16A3BD' accent-3: '#D47E53' marker: '#FCD414' line: '#555555' primary-accessible: '#2E8241' cta-accessible: '#C74803' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 300 lineHeight: 1.0 body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' house-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.md}' height: 200px heading-two-tier: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px pill-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 60px property-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 560px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-inquiry: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px numbered-checklist: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 380px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px tag-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 70px --- # DESIGN.md — 若草×水色の手描き風 子育て戸建て LP（Pastel Green & Sky Family Housing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、清潔・爽やか - **キーワード**: 若草色・水色の空・手描きイラスト・紙テクスチャ・家形バッジ・チェックリスト - **地の質感**: 地は細かい紙の粒状感があるパステル単色。雲は水彩のにじみ風にする。 - **形**: 角丸 12px 前後の白カード、ピル型ボタン、ちぎれた紙のような波打つセクション境界、三角屋根の家形バッジ - **温度感**: やや暖かい。明るく穏やかで家族的な温度感。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3CAA55` | 見出し強調・帯・ドット装飾の緑 | 2% | 画素の実測 | | `background` | `#E6F2C1` | 若草色の基本地 | 30% | 画素の実測 | | `background-alt` | `#D4EDF1` | 水色の地（地域魅力セクション） | 20% | 画素の実測 | | `tint-1` | `#F9F9DE` | 生成り色の地（物件一覧） | 5% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード・ヘッダー・フッター | 22% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `cta` | `#EA5503` | ページ下部の主ボタンのオレンジ | 2% | 画素の実測 | | `on-cta` | `#FEF8ED` | ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#2A6979` | 公式サイトボタンの青緑 | 1% | 画素の実測 | | `accent-1` | `#CB000E` | 問い合わせボタンの赤 | 1% | 画素の実測 | | `accent-2` | `#16A3BD` | 水色セクションの強調文字・番号 | 0% | 画素の実測 | | `accent-3` | `#D47E53` | チェックリスト強調文字・番号のオレンジ | 0% | 画素の実測 | | `marker` | `#FCD414` | 見出し上の黄色リボン | 0% | 画素の実測 | | `line` | `#555555` | リスト区切りの点線 | 0% | 推定 | | `primary-accessible` | `#2E8241` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#C74803` | AA を満たす補正値（計算） | | 計算 | - 地はセクションごとに若草・生成り・水色を切り替え、波打つ境界でつなぐ - 緑系のセクションでは強調文字を緑、水色系のセクションでは青とオレンジにする - 見出しの強調語だけ色を変える。それ以外の見出しは濃いグレーで残す - ボタンは役割で色を分ける。主ボタンはオレンジ、詳細は青緑、問い合わせは赤 - 白カードは淡い地の上にだけ置き、影は付けずに面のコントラストで浮かせる - 彩度の高い色は小さい面積に限り、全体はパステルを保つ - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.06em | | `headline-lg` | セクション見出しの強調語 | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.08em | | `headline-md` | 見出しの前置き小見出しや番号付き項目名 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.1em | | `accent` | #1 などの斜体の数字 | 欧文サンセリフ | Montserrat | 300 | 34px | 1.0 | 0.0em | | `body-lg` | リード文と本文 | ゴシック | Noto Sans JP | 400 | 15px | 2.0 | 0.06em | | `body-md` | カード内の物件情報やリスト本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.04em | | `note` | 注釈とコピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.08em | - 見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-449e2ee7`（元 LP の URL から採番） - **元 LP**: https://kanju-minoh.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。