DESIGN.md — 水色×ピンクCTAの訳あり不動産買取LP（Aqua Blue Trust Real Estate Buyout LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 水色基調・家形見出し・ピンクCTA・実績数字・白カード・チェックリスト
• 地の質感: 淡い水色の地に街並み写真を薄く敷き、白カードに軽い影を付ける
• 形: 角丸は小さめ。家の屋根形の見出しと、立体感のある横長ボタン
• 温度感: 爽やかで少し温かみがある。ピンクで親しみやすさを足す

Colors

• 地は白と淡い水色を交互にし、実績事例は濃い水色の地に白カードを並べる
• 主CTAはピンク、LINE相談は緑と役割で色を分ける
• 強調語は水色かピンクの文字色で一部だけ色を変える
• チェックリストの強調語はピンク＋下線にする
• 金色は実績バッジの月桂冠と王冠だけに使う
• 見出しのキーワード下に黄色マーカーを引く
• button-primary は文字 #FFFFFF × 背景 #DC368D のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DA2986、4.52:1）を使う。
• button-line は文字 #FFFFFF × 背景 #03A402 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#028802、4.64:1）を使う。
• heading-house は文字 #FFFFFF × 背景 #35A2C4 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7F9A、4.56:1）を使う。
• badge-laurel は文字 #DC368D × 背景 #FEFEFE のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DA2986、4.55:1）を使う。
• case-card は文字 #35A2C4 × 背景 #FEFEFE のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7F9A、4.53:1）を使う。
• form-field は文字 #9FA09F × 背景 #FEFEFE のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757675、4.52:1）を使う。

Typography

• 数字は欧文書体で大きくし、単位は小さく添える
• 見出しの先頭1文字やキーワードだけ水色にする
• 訴求一文は斜線を左右に置いて挟む
• 本文は字間を少し広めにし、行間1.8程度にする
• 強調したい文は太字の水色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。物件カテゴリだけ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約5%の余白を取る
• CTAブロック（査定ボタン＋電話・LINE）をFV直後と中盤で繰り返す
• STEPは写真カードを縦に3つ並べる
• 事例カードは写真→価格→地名タグ→本文の順にする
• フォームは白カードの中に縦に並べる

Elevation & Depth

• 白カードはぼかしの大きい薄い影（0 4px 16px rgba(0,0,0,.08)）
• CTAボタンの下に濃い色のずらし影を付けて立体的にする
• 吹き出しラベルにはグレーのドロップシャドウを付ける

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: カード幅いっぱいの長方形で角丸なし
• セクション境界: 直線の境界。家の屋根形の見出しや斜めの面で区切る
• 見出しは屋根付きの家形シルエットにする
• STEP番号も小さな家形アイコンにする
• タグは細い枠線の長方形にする
• CTAの右端に白い丸＋再生三角アイコンを置く

Components

• 査定フォームCTA（button-primary）: ピンクの横長ボタン。上部に白い受付時間帯ラベル、右に白丸の矢印
• LINE相談ボタン（button-line）: 緑の横長ボタン。上に白い補足ラベル、右に矢印
• 家形見出し（heading-house）: 水色の屋根形シルエットに白文字の見出しと英字小ラベル
• 実績月桂冠バッジ（badge-laurel）: 白い円を金の月桂冠と王冠で囲み、ピンクの大きな数字を入れる
• 物件カテゴリカード（card-category）: 白カードに枠付き見出し、写真、下に小タグ2つ
• STEPカード（step-card）: 家形番号＋見出し、右上にピンクの吹き出しラベル、写真と説明文
• チェックリスト（check-list）: ピンクのチェックボックスと強調語、下に罫線
• 買取事例カード（case-card）: 写真、大きな価格数字、地名、水色ベタの条件タグ、本文
• 問い合わせフォーム（form-field）: ピンクの必須／水色枠の任意ラベル、グレー枠の入力欄

Do's and Don'ts

Do - CTAブロックはページ内で複数回繰り返す - 数字実績を大きく見せ、単位は小さくする - 水色の面と白いカードではっきり差をつける - 強調語は色を変えて、拾い読みできるようにする - 家のモチーフを見出しやアイコンに使い回す

Don't - ピンクを地色の広い面に使わない - 丸いピル型ボタンにしない - 暗い背景や重い色調にしない - 明朝体で堅くしすぎない - CTAの立体影や矢印アイコンを省かない

Page Structure

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

1. ヘッダー（ロゴと連絡手段の提示）: 白地。左にロゴ、右に電話・LINE・メールの丸アイコン
2. ファーストビュー（対象物件と強みの提示）: 空と街並みの写真にスタッフ写真。物件種別のタグ、枠付きの大見出し、水色の特長ボックス3つ、月桂冠バッジ3つ
3. CTA（無料査定への誘導）: 水色の帯に斜線で挟んだ訴求文とピンクのボタン。下のグレー地に電話・メール・LINEボタン
4. 対応物件（買取できる物件の種類を示す）: 黄色マーカー付きの見出しと、2列の白カード4枚
5. 訴求バナー（他社で断られた物件も売れることを訴える）: 斜線で挟んだ大きな数字の一文と、水色の写真帯に白い吹き出し文
6. 取引の流れ（3ステップの手軽さを示す）: 家形見出しとSTEPカード3枚。ピンクの吹き出しラベル付き
7. メリット一覧（安心材料を並べる）: 白パネルにピンクのチェック6項目と罫線
8. CTA再掲（再度の申込誘導）: FV直後と同じCTAブロック
9. 買取事例（実績による信頼）: 濃い水色地に白カード3枚。写真、大きな価格、地名タグ、本文
10. お問い合わせフォーム（査定の申込）: 家形見出しと白カードのフォーム。ピンクの送信ボタン
11. まとめと電話案内（最後の後押し）: チェック5項目と、水色枠に吹き出し付きの電話番号ボックス
12. フッター（ナビとコピーライト）: 水色の地に白いロゴ、ナビ、区切り線

Imagery

• スーツ姿の女性スタッフの笑顔写真を、空や街並みの写真と組み合わせる
• 古い空き家や土地など実物件の写真を自然光で撮る
• 住宅模型、紙幣、虫眼鏡など取引を表すモチーフ写真
• 街並みの写真を水色の半透明で重ね、背景の模様にする
• 線画の家アイコン・電話アイコンなどシンプルな記号
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで最大幅約900pxにする
• 物件カテゴリカードはPCで4列にする
• STEPはPCで3列に並べる
• CTAブロックはPCで訴求文とボタンを左右に配置する
• 事例カードはPCで写真と価格を左右交互に並べる
• フォームはPCでチェックリストと左右2カラムにする

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