DESIGN.md — 淡い水色×オレンジのペット可賃貸住宅 LP（Soft Pastel Pet-Friendly Rental Housing LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、清潔・爽やか、信頼・誠実
• キーワード: ペット可・肉球モチーフ・淡いブルーグレー・オレンジCTA・白い角丸カード・吹き出し
• 地の質感: フラットな淡色面と明るいインテリア写真。影はほぼ無く軽い。
• 形: 大きな角丸カード、ピル型ボタン、雲形の吹き出し、円形の番号バッジ、波形の境界。
• 温度感: 明るく暖かい。寒色の地に暖色のアクセント。

Colors

• 地は白・淡いブルーグレー・淡水色・生成りを交互に敷きセクションを区切る。
• 行動を促す要素はオレンジに統一する。
• サービス系は青、性能系は黄緑で色分けする。
• 見出しの強調語だけを青・黄緑・オレンジで着色する。
• 赤はヘッダーのメニューとページトップのみ。
• 大面積に濃色を使わず、写真以外は淡色で軽く保つ。
• 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

• 字間は広めの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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。