--- version: alpha name: Soft Pastel Pet-Friendly Rental Housing LP description: 淡いブルーグレーと生成りの地に、オレンジのピル型CTAと青・緑の肉球アイコンを効かせたペット可賃貸の訴求LP。犬猫の切り抜き写真と吹き出しで親しみを出し、白い角丸カードで特長を整理する。 colors: primary: '#EE791D' on-cta: '#FEF9E9' cta: '#EE791D' background: '#FFFFFF' background-alt: '#F1F5F8' tint-1: '#E4EFF3' surface: '#FCF9F2' secondary: '#2CA9EB' accent-1: '#8EB83A' text: '#474648' text-body: '#666666' line: '#DA945E' accent-2: '#B4031B' cta-accessible: '#B6580E' secondary-accessible: '#1179B0' primary-accessible: '#B6580E' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px cta-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 150px speech-cloud: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 160px paw-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 100px summary-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 160px number-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 56px tag-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 34px fv-copy-strip: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px --- # DESIGN.md — 淡い水色×オレンジのペット可賃貸住宅 LP（Soft Pastel Pet-Friendly Rental Housing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、清潔・爽やか、信頼・誠実 - **キーワード**: ペット可・肉球モチーフ・淡いブルーグレー・オレンジCTA・白い角丸カード・吹き出し - **地の質感**: フラットな淡色面と明るいインテリア写真。影はほぼ無く軽い。 - **形**: 大きな角丸カード、ピル型ボタン、雲形の吹き出し、円形の番号バッジ、波形の境界。 - **温度感**: 明るく暖かい。寒色の地に暖色のアクセント。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EE791D` | CTA・見出し強調・番号バッジのオレンジ | 4% | 画素の実測 | | `on-cta` | `#FEF9E9` | CTAボタン上の白文字 | 0% | 画素の実測 | | `cta` | `#EE791D` | 主CTAボタン面 | 3% | 画素の実測 | | `background` | `#FFFFFF` | カード・ベースの白 | 23% | 画素の実測 | | `background-alt` | `#F1F5F8` | 特長セクションの淡いブルーグレー地 | 17% | 画素の実測 | | `tint-1` | `#E4EFF3` | 悩み提起セクションの淡い水色地 | 9% | 画素の実測 | | `surface` | `#FCF9F2` | CTA帯・まとめカードの生成り | 8% | 画素の実測 | | `secondary` | `#2CA9EB` | サービス系の青（肉球・番号） | 2% | 画素の実測 | | `accent-1` | `#8EB83A` | 性能系の黄緑（肉球・強調語） | 2% | 画素の実測 | | `text` | `#474648` | 見出しのダークグレー | 2% | 画素の実測 | | `text-body` | `#666666` | 本文グレー | 2% | 推定 | | `line` | `#DA945E` | タグ枠・区切り線 | 0% | 画素の実測 | | `accent-2` | `#B4031B` | ヘッダー・ページトップの赤 | 0% | 画素の実測 | | `cta-accessible` | `#B6580E` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1179B0` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B6580E` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡いブルーグレー・淡水色・生成りを交互に敷きセクションを区切る。 - 行動を促す要素はオレンジに統一する。 - サービス系は青、性能系は黄緑で色分けする。 - 見出しの強調語だけを青・黄緑・オレンジで着色する。 - 赤はヘッダーのメニューとページトップのみ。 - 大面積に濃色を使わず、写真以外は淡色で軽く保つ。 - `button-primary` は文字 `#FEF9E9` × 背景 `#EE791D` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B6580E`、4.54:1）を使う。 - `paw-badge` は文字 `#FEF9E9` × 背景 `#2CA9EB` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1179B0`、4.55:1）を使う。 - `number-circle` は文字 `#FEF9E9` × 背景 `#EE791D` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B6580E`、4.54:1）を使う。 - `tag-outline` は文字 `#EE791D` × 背景 `#FFFFFF` のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B6580E`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 悩み提起などの大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.08em | | `headline-md` | カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.08em | | `headline-sm` | FVの白帯コピー・リスト項目 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.6 | 0.12em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.06em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 欧文の縦書き背景文字・PICK UP | 欧文サンセリフ | Montserrat | 800 | 44px | 1.0 | 0.02em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.3 | 0.08em | - 字間は広めの0.05〜0.12em。 - 見出しは太字で、強調語だけ色を変える。 - 強調語にはオレンジの下線を引くことがある。 - 本文はグレーで行間を広く取る。 - セクション名は白い大きな欧文で縦書きにし、背景の飾りとして置く。 - お客様の声の見出しは縦書きにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、PC は中央寄せの 2 カラムカード - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約16pxの余白を取る。 - CTA帯は生成りの地で数セクションごとに繰り返す。 - 特長カードは縦に並べ、間に下向きの矢印タブを置く。 - 写真は片側を画面端まで寄せ、反対側に縦書きの欧文を置く。 - FVは写真全面にし、白帯のコピーを重ねる。 ## Elevation & Depth - 影はほぼ使わず、色面の差で階層を出す。 - 白カードには影なしかごく薄い影。 - 切り抜き写真の動物はボタンや枠の上に乗せて立体感を出す。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角、円形に切り抜くこともある。動物は切り抜いて配置する。 - **セクション境界**: 基本は直線の色面切替。写真の下端は波形にすることもある。 - CTAは高さのある完全なピル型にする。 - 特長カードは角丸を大きく取る。 - 番号は円形のオレンジ枠バッジ。 - 吹き出しは雲形の白い円の組み合わせ。 - タグは角丸小のオレンジ線枠。 ## Components - **主CTAピルボタン**（`button-primary`）: オレンジのピル型で白文字と右矢印。上に小さな補足コピーを入れ、左右の縁に犬猫の切り抜き写真を乗せる。 - **CTA帯**（`cta-band`）: 生成りの全幅帯に主CTAを中央配置。ページ内で繰り返す。 - **雲形吹き出し**（`speech-cloud`）: 白い雲形の中に悩みを中央揃えで書き、語尾を動物の口調にする。強調語は色を変え、周りに肉球の足跡を散らす。 - **肉球バッジ**（`paw-badge`）: 青か黄緑の肉球形の中に白抜きで数字とラベルを入れる。 - **要点まとめカード**（`summary-card`）: 生成りの角丸カード。左に肉球、点線で区切り、右に番号付きリストを3行並べる。 - **番号付き特長カード**（`feature-card`）: 白い角丸カードの上辺に円形の番号バッジをはみ出させる。オレンジの線アイコンと太字の見出しを入れ、下に矢印タブを付ける。 - **見出し数字の丸**（`number-circle`）: オレンジの円に白い数字。見出しの頭に置く。 - **属性タグ**（`tag-outline`）: オレンジの細枠とオレンジ文字で、地域・年代・間取りなどを並べる。 - **白帯コピー**（`fv-copy-strip`）: 写真の上に半透明白の帯を行ごとに敷き、太字コピーを置く。強調行はオレンジ文字。 ## Do's and Don'ts **Do** - CTAはすべて同じオレンジのピル型にそろえる。 - 犬猫の切り抜き写真を要素の縁に乗せ、親しみを出す。 - 肉球の足跡を装飾として散らす。 - サービスは青、性能は黄緑の色分けを守る。 - 強調語は色か下線で示す。 - 淡色の地を交互に敷いてリズムを作る。 **Don't** - 濃い色の背景面を広く使わない。 - オレンジ以外の色をCTAに使わない。 - 角ばったボタンやカードを使わない。 - 濃い影や光沢のある効果をつけない。 - 本文を黒くしすぎない。 - 装飾の肉球を多くしすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと各機能への導線）: 白地にロゴ、アイコン付きのボタン3つ、右端に赤いメニュー。 2. **ファーストビュー**（メリットとペット可を一目で伝える）: 明るいインテリア写真に白帯のコピーを重ねる。カードと猫の写真は円形に切り抜き、下にロゴを置く。 3. **CTA**（物件検索へ誘導）: 生成りの帯にオレンジのピル型ボタンを置き、犬猫を乗せる。 4. **悩みの提起**（ペットとの引っ越しの不安に共感する）: 淡い水色の地に斜めの小見出しと大見出し。雲形の吹き出しを3つ置き、下端に子犬と子猫の集合写真。 5. **解決の提示**（ブランドを解決策として示す）: 写真の上に半透明白のパネルを置き、ロゴを入れる。 6. **特長の概要**（サービス3つと性能3つを予告）: 波線の吹き出し、青と緑の肉球、PICK UPのロゴ文字。人物とペットの写真を波形で切り、まとめカードを2枚置く。 7. **サービス詳細**（サービスを1つずつ説明）: ブルーグレーの地。片側を端に寄せた写真に縦書きの欧文を添え、番号付きの白カードを縦に並べる。 8. **性能詳細**（建物性能を説明）: サービス詳細と同じ型。左右を入れ替えて写真を置く。 9. **関連バナー**（省エネ住宅への誘導）: 線画のイラストバナーに、緑の帯でボタンを付ける。 10. **お客様の声**（入居者の満足を伝える）: 縦書きの見出しの左右にオレンジ枠付きの写真を置く。カードは写真・属性タグ・本文の順で、スライダーにする。 11. **クロージング**（暮らしのイメージで背中を押す）: 全面写真に白帯のコピーを重ね、続けてCTA帯。 12. **フッター**（会社情報とリンク）: 白地に肉球の足跡、会社ロゴ、2列のリンク、コピーライト。 ## Imagery - 白・木目・グレーの明るいモダンなインテリア写真。自然光で撮る。 - 犬猫は正面を向いた可愛い表情で撮り、背景を抜いて縁に乗せる。 - 人物は30代前後のカップルや夫婦。ペットと寛ぐ自然なシーン。 - アイコンはオレンジの細い線のピクトにする。 - 肉球モチーフは塗りつぶしで、数字を入れたり足跡として散らしたりする。 - バナーには緑の差し色を入れた線画イラストを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央の約960px幅にまとめる。 - FVは横長の写真にし、ロゴとコピーを横に並べる。 - 吹き出しは横3つに並べる。 - まとめカード2枚は横に並べる。 - サービス・性能は白い大パネルの中に、写真と文を左右交互の2カラムで並べ、大きな番号を薄く敷く。 - CTAボタンは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-c8eebca2`（元 LP の URL から採番） - **元 LP**: https://www.droom-daiwaliving.net/d-room/lp002/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。