--- version: alpha name: Warm Beige Family Housing Visit Campaign LP description: ベージュの地にオレンジと黄色を差し、手描きイラストを添えた住宅メーカーのモデルハウス来場予約キャンペーン LP。白地に黄色の下線付き見出しを置き、ステップ・ポイント・事例カードを経て予約フォームへ導く。 colors: primary: '#EC6A18' background: '#FFFFFF' background-alt: '#ECDFCF' surface: '#F5F5F5' tint-1: '#FFED6D' tint-2: '#FFF4CB' marker: '#F8CB6A' secondary: '#B19A7E' accent-1: '#4B606B' text: '#2A2C2E' cta: '#4CBD89' on-cta: '#FFFFFF' accent-2: '#9EBB72' accent-3: '#E06060' accent-2-accessible: '#657F3D' cta-accessible: '#31845E' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Yomogi fontSize: 32px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px feature-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 340px condition-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 580px step-item: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px point-photo: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 160px case-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 170px button-secondary: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px form-field: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 32px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px --- # DESIGN.md — ベージュ×黄色の家族向け住宅来場予約 LP（Warm Beige Family Housing Visit Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、ナチュラル、情報量多め・訴求型 - **キーワード**: ベージュ地・オレンジの見出し・黄色の下線・手描きイラスト・家族向け・来場予約 - **地の質感**: フラットな単色面に、線画イラストと紅葉の装飾を重ねる。影はほぼ使わない - **形**: 角丸の小さいカード、円形のアイコン台座、角型の番号ラベル - **温度感**: 暖かい。ベージュ・黄・オレンジの暖色が中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC6A18` | キャンペーン見出しとラベルのオレンジ | 2% | 画素の実測 | | `background` | `#FFFFFF` | ページ全体の白地 | 40% | 画素の実測 | | `background-alt` | `#ECDFCF` | ヒーローと条件ボックスのベージュ地 | 14% | 画素の実測 | | `surface` | `#F5F5F5` | フォーム面の薄いグレー | 10% | 画素の実測 | | `tint-1` | `#FFED6D` | こだわり紹介ボックスの黄色 | 4% | 画素の実測 | | `tint-2` | `#FFF4CB` | ステップアイコンの円形台座 | 2% | 画素の実測 | | `marker` | `#F8CB6A` | 見出し下の黄色い下線 | 0% | 推定 | | `secondary` | `#B19A7E` | 番号ラベルと線アイコンの茶色 | 1% | 画素の主要色に補正 | | `accent-1` | `#4B606B` | 事例カード見出しのくすんだ青 | 0% | 画素の実測 | | `text` | `#2A2C2E` | 見出しと本文の濃いグレー | 3% | 画素の実測 | | `cta` | `#4CBD89` | 送信ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字の白 | 0% | 画素の主要色に補正 | | `accent-2` | `#9EBB72` | イベントへのサブボタンの抹茶色 | 0% | 画素の実測 | | `accent-3` | `#E06060` | 必須バッジの赤 | 0% | 推定 | | `accent-2-accessible` | `#657F3D` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#31845E` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にする。特典条件・フォーム見出し・フッターはベージュのボックスで区切る - 商品の特長ブロックは黄色の面に白カードを載せる - 事例カードは薄いグレーの面にし、見出しはくすんだ青にする - オレンジはキャンペーン見出しと特長ラベルだけに使う - 主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローのキャンペーン名 | 丸ゴシック | M PLUS Rounded 1c | 900 | 36px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.08em | | `headline-md` | 事例カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em | | `headline-sm` | ステップ文・ポイントの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.6 | 0.06em | | `body-md` | 本文・説明文 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.9 | 0.05em | | `note` | 注意事項・キャプション | ゴシック | Zen Kaku Gothic New | 400 | 10px | 1.8 | 0.03em | | `accent` | 写真に重ねるポイント番号 | 手書き・筆 | Yomogi | 400 | 32px | 1.0 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.05em | - 見出しは中央揃えで太字にし、字間を広めに取る - 本文は行間を広めにとる（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 ```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-232a2530`（元 LP の URL から採番） - **元 LP**: https://campage.jp/iwanami-web/model_autumu2024 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。