DESIGN.md — 深ティール×淡水色の住宅ローン相談LP（Teal Clean Trust Real Estate Loan LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 深ティール・淡水色の地・白カード・黄色マーカー・赤CTA・フラットアイコン
• 地の質感: フラットな単色面。影はごく薄く、質感表現なし
• 形: 角丸小さめの白カードと四角いラベル帯。リボン型POINTタグ
• 温度感: やや寒色寄りで落ち着いた、誠実な温度感

Colors

• 地は白と淡水色を交互に使い、FAQだけくすみ水色で区切る
• ブランド色ティールはFV面・ラベル帯・数字・強調語に限定
• キャッチ下に黄色の太線マーカーを敷く
• 主CTAだけ赤で塗り、他に赤は『手数料あり』等の否定要素に限る
• 本文は濃いグレー、白抜きはティール面上のみ

Typography

• 見出しは中央揃え、本文は短い行で中央または左揃え
• 強調語だけティール色に変え、同行の他は濃グレー
• 数字・番号は細い欧文で大きく
• 全体にやや字間を空けて読みやすく
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、悩みケースのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右16px余白で幅いっぱい
• カード間は12〜16px
• セクション見出し上下に32px前後
• フローは縦積みで下向き三角で接続

Elevation & Depth

• カードは影なしまたはごく薄い影
• フロー枠に薄い水色の外影
• CTAに軽い下影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は白フチ付きの正円
• セクション境界: 直線で背景色を切り替え
• カードは角丸8px程度
• ラベル帯は角丸4px
• POINTタグは下端がV字切欠きのリボン
• 強調吹き出しはピル型白ボックス

Components

• 主CTAボタン（button-primary）: 赤の横長角丸ボタン、白文字と右矢印、画面下固定も
• 黄マーカー見出し（marker-heading）: 見出し下半分に黄色太線を敷く
• CASEラベル帯（case-label）: ティール帯に白の欧文番号、下に悩み文、点線区切り
• POINTカード（point-card）: 白カード右上にティールのリボン型番号タグ
• 番号メリットカード（merit-card）: 左に細い大きな番号、右に見出しと説明
• お客様の声カード（voice-card）: 上に円形写真、ティールの属性、太字タイトル、灰色本文ボックス
• フローステップ（flow-step）: ティール細線枠の淡色箱、最終段のみティール塗り
• FAQアコーディオン（faq-item）: 白カードに細いティールのQ、右に開閉矢印。上にタブ切替
• 丸バッジ（circle-badge）: 比較図の左上に赤/ティールの正円バッジ

Do's and Don'ts

Do - ティール・白・淡水色の3色で面を構成する - 情報は必ず白カードに入れて整理する - 強調語はティール色、キャッチは黄マーカー - 番号付き要素で比較・手順を見せる - 料金比較は棒グラフ型の簡易図で示す

Don't - 赤をCTAと否定要素以外に使わない - グラデーションや派手な装飾を入れない - 大きな角丸やピルCTAにしない - 明朝や手書き書体を混ぜない - 写真を全面背景に使わない

Page Structure

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

1. ファーストビュー（サービスの約束を即伝える）: ティール全面にロゴ、白ピルラベル、黄マーカー付き白抜きキャッチ、3点の箇条書き
2. リード・対象者（相談対象を明示）: 淡水色地に大見出し、中央揃え本文、白カード内に2列×4段のCASEラベル
3. 特長（強みを4点で説明）: 薄い大型欧文透かし背景、POINTリボン付き白カードを縦積み
4. 価格比較（節約額を可視化）: 大見出し+注釈、自社と他社の棒グラフ、ピル型吹き出しで差額強調
5. 仕組み図解（手数料が不要な理由）: 丸バッジ付き白カードに人物アイコンと矢印で流れを図示
6. メリット（利点を3つ提示）: ティール帯の上に番号付き白カードを重ねる
7. お客様の声（実例で安心感）: 円形写真をカード上端に食い込ませた白カードを縦積み
8. 取引の流れ（手順を明確化）: 白地に枠付きステップを下向き三角で連結、最後はティール塗り
9. よくある質問（不安解消）: くすみ水色地、2×2タブ、白カードのアコーディオン
10. フッター・固定CTA（会社情報と相談導線）: 白地にリンク2列、ロゴ、住所、画面下に赤CTA固定

Imagery

• 人物アイコンはティール系服のフラットイラスト
• PCのFVはアイソメトリックなビル・書類のイラスト
• お客様写真は明るい自然光のスナップを正円に切り抜き白フチ
• 矢印は水色線のアウトライン矢印
• 背景に薄い白の大型欧文透かし
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約60%幅のコンテナに収める
• PCのFVは左テキスト右イラストの2カラム
• POINT・お客様の声はPCで2列、メリットは3列
• フローはPCで縦書き横並びの8ステップ
• PCではセクション間に濃紺の帯+赤CTAを複数回挿入

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