---
version: alpha
name: Navy Trust Mortgage Refinance LP
description: 深い紺を軸に、山吹色の小見出しとピンクの数字で強調する金融サービス LP。白地と淡い水色地を交互に使い、斜線ストライプの紺帯で区切る。シミュレーションフォーム、3つの丸アイコンの事例、紺枠のステップカード、実績数字を大きく見せる体験談カードで、信頼感と得する感じを両立させている。
colors:
  primary: '#102189'
  on-primary: '#E7F0FD'
  background: '#FEFEFE'
  background-alt: '#F0F7FD'
  secondary: '#F2B01E'
  accent-1: '#C84D6B'
  cta: '#13238B'
  on-cta: '#FFFFFF'
  surface: '#E5E4E4'
  text-body: '#5B5B5B'
  line: '#DEE0E0'
  tint-1: '#FDDE9D'
  tint-2: '#A0A4D2'
  accent-2: '#F1B8C6'
typography:
  display:
    fontFamily: Shippori Mincho B1
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  accent:
    fontFamily: Roboto
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  button-secondary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  sim-form:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 470px
  stripe-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 85px
  case-icon:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 170px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 360px
  testimonial-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.accent}'
    rounded: '{rounded.md}'
    height: 560px
  cta-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 300px
  marker-text:
    typography: '{typography.body-md}'
    height: 20px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#102189` | ブランド紺（見出し・枠線・帯） | 8% | 画素の実測 |
| `on-primary` | `#E7F0FD` | 紺地の上の白文字 | 1% | 画素の実測 |
| `background` | `#FEFEFE` | 基本の白地 | 50% | 画素の実測 |
| `background-alt` | `#F0F7FD` | 淡い水色の見出し帯・写真脇 | 5% | 画素の実測 |
| `secondary` | `#F2B01E` | 山吹色の小見出し・キャッチ | 1% | 推定 |
| `accent-1` | `#C84D6B` | 実績数字のピンク | 1% | 画素の実測 |
| `cta` | `#13238B` | 主CTA（無料相談）ボタン紺 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 |
| `surface` | `#E5E4E4` | 体験談本文のグレー面 | 6% | 画素の実測 |
| `text-body` | `#5B5B5B` | 本文グレー文字 | 1% | 画素の実測 |
| `line` | `#DEE0E0` | 入力欄の枠線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#FDDE9D` | case アイコン円の淡い黄 | 2% | 画素の実測 |
| `tint-2` | `#A0A4D2` | case アイコン円の淡い藤色 | 2% | 画素の実測 |
| `accent-2` | `#F1B8C6` | case アイコン円の淡いピンク | 2% | 推定 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの太い明朝キャッチ | 明朝 | Shippori Mincho B1 | 800 | 26px | 1.4 | 0.04em |
| `headline-lg` | セクション主見出し（紺） | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.08em |
| `headline-sm` | 山吹の前ふり・ステップ名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.08em |
| `accent` | 実績の特大数字 | 欧文サンセリフ | Roboto | 700 | 40px | 1.1 | 0.0em |
| `body-md` | 本文・体験談 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.06em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.05em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em |
| `headline-md` | STEP番号・case番号 | 欧文サンセリフ | Montserrat | 600 | 24px | 1.1 | 0.05em |

- 明朝は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

```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-d897e066`（元 LP の URL から採番）
- **元 LP**: https://tagatame.sakura.ne.jp/creditsaison/credit-saisonLP20190122b_kinri_info/index.html
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。