DESIGN.md — 紺×山吹の誠実な住宅ローン借り換え LP（Navy Trust Mortgage Refinance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 紺の太枠・斜線ストライプ帯・山吹の小見出し・ピンクの大きな数字・マーカー下線・人物写真
• 地の質感: 白と淡い水色のフラットな面。紺帯だけ細い斜線ストライプ。ステップ部分の背景はぼかした室内写真。
• 形: 四角い太枠カード、円形アイコン、ピル型ボタン、逆三角の吹き出し
• 温度感: 紺で落ち着かせた中に、山吹とピンクで温かみを足したやや涼しめのトーン

Colors

• 白地を基本に、区切りの見出し帯だけ淡い水色を敷く。
• セクション見出しとCTA帯は紺地に細い斜線ストライプを重ねる。
• 小見出しの前ふり（短い一言）は山吹色にし、続く主見出しは紺にする。
• 減額・短縮の数字はピンクで特大にし、単位は黒で小さくする。
• 強調したい本文は山吹のマーカー下線を引く。
• case の円は黄・藤色・ピンクの淡い色で 3 色に分ける。

Typography

• 明朝はFVキャッチだけ。ほかはゴシックで統一する。
• 見出しは中央揃えにし、前ふり（山吹）と主見出し（紺）の 2 段で組む。
• 本文は字間を少し広げ、行間 1.8 で読みやすくする。
• 数字は単位の約 3 倍の大きさにして目立たせる。
• case 番号は丸みのある手書き風の欧文をアーチ状に並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は case を 3 列、ステップを 3 列×2 段にする
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約 9% の余白をとって中央に置く。
• ステップカードの間には紺の下向き山形矢印を入れる。
• 写真は横幅いっぱいに近く置き、左右の余白に水色の帯を見せる。
• CTA帯はセクションの合間に 2 回入れる。

Elevation & Depth

• 基本は影なし。枠線と色面で区切る。
• 体験談の顧客名バッジだけ紺の円をカードの上辺に重ねる。
• PC の吹き出しボックスだけ薄い影をつけて浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 四角く切り抜き、角丸なし。悩み人物は背景を抜いた切り抜き写真
• セクション境界: 直線で切り替える。悩み見出しの帯は下に逆三角の突起をつける
• ステップカードは角丸なしで紺の 3px 枠。
• 体験談カードは角丸 8px で紺の 2px 枠。
• ボタンはすべてピル型。
• case アイコンは大きな正円。

Components

• 無料相談ボタン（button-primary）: 紺地に白文字、右端に丸囲み矢印をつけたピル型
• シミュレーションボタン（button-secondary）: 白地に紺枠・紺文字のピル型、丸囲み矢印つき
• シミュレーションフォーム（sim-form）: 2 つのタブ（選択中は紺、ほかはグレー）の下に紺枠の入力フォーム。入力欄はグレー枠の角丸で、送信ボタンは幅いっぱいのピル型
• 斜線ストライプ見出し帯（stripe-band）: 紺地に細い斜線を重ね、白い太字見出しを中央に置く。下に逆三角をつける
• case 丸アイコン（case-icon）: 淡い色の円に白い線画アイコン。上にアーチ状の case 番号、下にマーカーつきの条件文
• ステップカード（step-card）: 白地に紺の太枠。STEP と番号、紺の太字のステップ名、写真、短い説明を縦に並べる
• 体験談カード（testimonial-card）: 紺枠の角丸カード。上に地域・年代を書いた紺の円バッジ、山吹の見出し、ピンクの特大数字、グレー面の本文を並べる
• CTA帯（cta-band）: ストライプの紺帯の中に白いパネルを置く。人物写真を淡く重ね、黄色の四角に 1 字ずつ入れた訴求語と 2 つのボタン、電話の案内を並べる
• マーカー下線（marker-text）: 強調したい文の下半分に山吹の太い下線を引く

Do's and Don'ts

Do - 紺を見出し・枠・ボタン・帯に一貫して使う。 - 見出しの前に山吹色の短い前ふりを添える。 - 金額や期間の成果はピンクの特大数字で見せる。 - 手続きは番号つきのカードと矢印で順番に見せる。 - CTA は相談とシミュレーションの 2 つを並べる。

Don't - 紺以外の濃い色をメインに使わない。 - カードに強い影やグラデーションをつけない。 - 数字と単位を同じ大きさにしない。 - 明朝を本文や小見出しに使わない。 - case 円の色を原色にしない。必ず淡いトーンにする。

Page Structure

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

1. ヘッダー（ロゴと即時導線）: 左にロゴ。右上に紺枠と紺地の四角いボタンを 2 つ並べる
2. ファーストビュー（誰向けの何の提案かを伝える）: 紺の太い明朝 3 行。下に住宅街の写真と、手のひらに家の模型を乗せた写真を組み合わせる
3. シミュレーション（その場で試算させる）: 山吹の前ふりと紺見出し。2 タブと紺枠のフォームを置く
4. 悩みの提起（手続きの面倒さに共感する）: ストライプ帯の見出し。悩む女性の切り抜き写真と山吹の吹き出し文、マーカーで結論を示す
5. 解決提案（サポート体制を打ち出す）: 水色の帯に手書き風の前ふりと紺見出し。担当者写真と無料の訴求を交互に並べる
6. 対象者（メリットが出やすい条件を示す）: case01〜03 の色違いの丸アイコンと、数字を強調した条件文
7. 手続きステップ（申込から契約までの流れ）: ぼかした写真背景の上に紺枠のカードを 6 枚、矢印でつなぐ
8. CTA（相談・試算へ誘導する）: ストライプ帯の中に白パネル。黄色の四角に入れた訴求語と 2 つのボタン
9. お客様の声（実際の削減効果で納得させる）: 紺の円バッジつきの体験談カードを 3 つ。ピンクの大きな数字とグレー面の本文
10. CTA・フッター（最後のひと押しと著作権表記）: 同じCTA帯を繰り返し、中央に小さなコピーライト、右下にページトップへ戻る丸ボタン

Imagery

• 人物はスーツの男性担当者やエプロン姿の女性など、明るい白背景で笑顔のストック写真。
• 悩みの場面は背景を抜いた切り抜き人物に、線で描いたもやもやの記号を添える。
• 手続きの写真は、手元・書類・判子・ノートPCなど明るい室内の物撮り。
• アイコンはカード・タイマー・グラフなどの白い単純な線画。
• 背景には住宅や青空の写真を淡くぼかして敷く。
• PC の体験談には、人物の簡単なフラットイラストを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダー右にピル型ボタンを 2 つ置く。
• PC の FV は写真を横に広げ、フォームを空の背景の上に中央で浮かせる。
• case は PC で 3 列、ステップカードは 3 列×2 段で横向き矢印にする。
• PC の体験談は数字を横に並べ、右にイラストを置く。
• 解決提案は PC で写真と文を 2×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 行書くと起動時に読み込まれる。