---
version: alpha
name: Bright Red Trust Banking App LP
description: 白地に鮮やかな赤を主役に据えた、銀行の総合金融サービスLP。淡いピンクベージュの角丸パネルにサービスを1つずつ載せ、赤のピル型CTAと金色のサブボタンで導線を分けている。大きなリング状ロゴ透かし、タレント写真、アプリ画面モックで親しみと信頼を両立させている。
colors:
  primary: '#CD0507'
  cta: '#E40202'
  on-cta: '#FFF2EF'
  background: '#FEFEFE'
  background-alt: '#FCFCFC'
  secondary: '#BA9245'
  surface: '#FEFEFE'
  text: '#262625'
  text-muted: '#666666'
  dark-section: '#FFFFFF'
  tint-1: '#EBEBEB'
  tint-2: '#F5FAFE'
  marker: '#FEF4C5'
  line: '#EDECEC'
  cta-accessible: '#E10202'
  secondary-accessible: '#886B32'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 52px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.02em
rounded:
  sm: 8px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  button-secondary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  service-panel:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 600px
  feature-row-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 320px
  anchor-nav:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 130px
  slash-lead:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 30px
  accordion:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 80px
  badge-ribbon:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 30px
  sticky-cta-bar:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 90px
  link-button-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 46px
---

# DESIGN.md — 赤×淡ピンク×金の銀行アプリ総合金融 LP（Bright Red Trust Banking App LP）

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

## Overview

- **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、ポップ・元気
- **キーワード**: 鮮やかな赤・淡ピンクのパネル・金色サブボタン・リング透かし・アプリ画面モック・注釈多め
- **地の質感**: フラットな白地に淡色パネルとやわらかい落ち影。写真は明るい自然光
- **形**: 大きめ角丸のカード、ピル型ボタン、円形リングのモチーフ
- **温度感**: 暖色寄り（赤・ピンク・金）を白とグレーで中和

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CD0507` | ブランド赤（見出し・アイコン・強調） | 4% | 画素の実測 |
| `cta` | `#E40202` | 主CTAボタンの面 | 2% | 画素の実測 |
| `on-cta` | `#FFF2EF` | CTAボタン上の文字 | 0% | 画素の実測 |
| `background` | `#FEFEFE` | ページ基本の白地 | 37% | 画素の実測 |
| `background-alt` | `#FCFCFC` | サービス紹介パネルの淡ピンク地 | 15% | 画素の実測 |
| `secondary` | `#BA9245` | サブボタンの金色 | 2% | 画素の実測 |
| `surface` | `#FEFEFE` | パネル内の白カード | 8% | 画素の実測 |
| `text` | `#262625` | 見出し・本文の濃グレー文字 | 3% | 画素の実測 |
| `text-muted` | `#666666` | 注釈・補足のグレー文字 | 1% | 推定 |
| `dark-section` | `#FFFFFF` | フッター周辺のライトグレー地 | 8% | 画素の実測 |
| `tint-1` | `#EBEBEB` | お問い合わせ等のグレーパネル | 7% | 画素の実測 |
| `tint-2` | `#F5FAFE` | 動画ギャラリーの淡い水色地 | 3% | 画素の実測 |
| `marker` | `#FEF4C5` | 手順案内ボックスの淡黄色 | 0% | 画素の実測 |
| `line` | `#EDECEC` | アウトラインボタン・区切り線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#E10202` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#886B32` | AA を満たす補正値（計算） |  | 計算 |

- 地は白が基本。サービス単位のまとまりは淡ピンク#F8EEEDの角丸パネルで囲む
- 赤は大見出し・主CTA・本文中の強調語・アイコンに限定する
- 主CTA（申込）は赤、サービス詳細へのサブ導線は金色で分ける
- 大きな数字（還元率等）は赤または金のグラデで最大級に扱う
- 動画・ブランドストーリー部は淡い水色地に切り替えて空気を変える
- 問い合わせ・関連リンク・法定表記はライトグレー地にまとめる
- `button-primary` は文字 `#FFF2EF` × 背景 `#E40202` のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E10202`、4.56:1）を使う。
- `button-secondary` は文字 `#FFF2EF` × 背景 `#BA9245` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#886B32`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション大見出し（赤・太字2行） | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.04em |
| `headline-lg` | パネル内見出し（濃グレー太字） | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.03em |
| `headline-md` | リード文・3項目ナビのラベル | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | ※注釈・法定表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em |
| `accent` | キャッチの斜体・CMタイトル | 明朝 | Shippori Mincho | 500 | 26px | 1.4 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `headline-sm` | 還元率など大数字 | 欧文サンセリフ | Montserrat | 800 | 52px | 1 | -0.02em |

- 大見出しは赤の極太ゴシックで左揃え2行
- パネル内見出しは濃グレー太字で中央揃え
- 本文中の強調語は赤太字で1〜2箇所だけ
- CTA上の導入句は『＼ ／』の斜線で挟む短い一文
- 数字は単位より大きく斜体気味に強調する
- 注釈は※付きの小さいグレー文字でまとめて置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。パネル内の手続き例は2列グリッド
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 淡ピンクのパネルは左右約20pxの余白で配置
- 大見出しの右上にリング状ロゴ透かしを重ねる
- 本文は左寄せ、横に人物写真を切り抜きで添える
- ファーストビュー直下に3項目のアンカーナビを縦線区切りで並べる
- 各サービスブロックの末尾に金色サブボタンを中央配置
- 画面下部に固定のCTAバーを置く

## Elevation & Depth

- 淡ピンクパネルの下にぼかしの大きい柔らかい影
- 白カード・アウトラインボタンに軽いドロップシャドウ
- アプリアイコン風の白角丸タイルに影
- 固定CTAバーは白地で上に浮く

## Shapes

- **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 人物は背景を抜いた切り抜き、FVは横長矩形、アイコンはアプリ風角丸
- **セクション境界**: 直線。FVは上下を赤い細線で挟む
- CTAは完全なピル型
- パネルは大きめ角丸
- アコーディオンは角丸枠+赤い丸の＋アイコン
- FVと最下部に赤い水平ライン

## Components

- **主CTAボタン**（`button-primary`）: 赤のピル型、白太字と右端に細い矢印線
- **サービス詳細ボタン**（`button-secondary`）: 金色のピル型、2行の白文字と右矢印
- **サービスパネル**（`service-panel`）: 淡ピンクの角丸パネル。上にアプリアイコンをはみ出させ、内側に白カード
- **特長リストカード**（`feature-row-card`）: 白カード内で左アイコン+右本文の行を細線で区切る
- **3項目アンカーナビ**（`anchor-nav`）: アイコン・小ラベル・太字名・赤い▼を縦線区切りで3列
- **斜線リード**（`slash-lead`）: CTA上の短文を左右の斜線で挟む
- **注意事項アコーディオン**（`accordion`）: 白地グレー枠、赤文字と右に赤丸＋
- **さらに！リボン**（`badge-ribbon`）: 赤い台形リボンに白文字で追加特典を示す
- **固定CTAバー**（`sticky-cta-bar`）: 画面下部の白帯にキャッチ一文と赤ピルボタン、注釈
- **関連リンクボタン**（`link-button-list`）: グレーパネル内の白角丸ボタンを縦に並べる

## Do's and Don'ts

**Do**
- 赤は主CTAと大見出しに集中させる
- サービスごとに淡ピンクパネルで区切る
- 数字の訴求は大きく、注釈は※でまとめて近くに置く
- アプリ画面モックとアイコンで機能を見せる
- 主CTAは数セクションごとに繰り返す
- 人物写真は明るく笑顔の切り抜きを使う

**Don't**
- 赤以外の鮮やかな色をボタンに使わない
- 濃い背景のセクションを多用しない
- 角の立った四角ボタンにしない（CM導線除く）
- 注釈を省略・本文と同じ大きさにしない
- パネルを影なしの線だけで囲まない
- 見出しを細字にしない

## Page Structure

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

1. **ヘッダー**（ブランドの明示）: 白地に左ロゴ・右社名、下に赤の細線
2. **ファーストビュー**（親しみと認知）: タレント3人の明るい写真に赤いサービスロゴを重ね、上下を赤線で挟む
3. **コンセプト**（サービスの一言説明）: 斜体明朝の下線付きキャッチと太字のリード3行を中央揃え
4. **アンカーナビ**（3つの柱へ誘導）: アイコン+ラベル+赤▼を縦線区切りの3列
5. **アプリ紹介**（口座アプリの機能説明）: 赤い大見出し+リング透かし、淡ピンクパネルにスマホモックと手続き名ボタン
6. **機能詳細**（カスタマイズ機能の説明）: 人物切り抜き+本文、パネル内に線画イラストと画面キャプチャ
7. **CTA**（口座開設へ誘導）: 斜線リード+赤ピルボタン
8. **カード特典**（ポイント還元の訴求）: カード画像と大きな赤%数字、さらに！リボン付き白カードに金色の大数字、注釈リスト、金ボタン
9. **資産運用**（2つの運用サービス紹介）: アイコンをはみ出させたパネル2枚、白カードにアイコン+本文行、金ボタン
10. **口座開設の流れ**（申込手順と注意事項）: 淡ピンク地に赤ヘッダー付き白カード、黄色の手順ボックス、赤CTA、アコーディオン
11. **CMギャラリー**（ブランドストーリー）: 淡水色地に明朝斜体タイトル、動画サムネと再生ボタン、金色の角丸ボタン
12. **お問い合わせ・関連サービス**（連絡先と関連リンク）: グレー角丸パネルに赤縦線見出し、白ボタンを縦並び
13. **法定表記・フッター**（登録情報の開示）: 小さな文字で枠囲みラベル付き、最下部に赤線とコピーライト

## Imagery

- 人物は自然光で明るく、笑顔のカジュアル服の切り抜き
- スマホを持つ人物写真でアプリ利用を想起させる
- アプリ画面は端末モックに実寸感のある赤系UI
- 説明図は黒の細い線画イラストに赤をワンポイント
- 大きな赤いリング状ロゴを半透明グラデで背景透かしに
- 動画サムネは映画的な落ち着いたトーン、白丸に赤い再生三角
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは本文幅を約960pxに収め中央配置
- PCは見出しを1行化しリング透かしを左に置く
- 手続き名ボタンはPCでスマホモックの左右に2つずつ
- CMギャラリーはPCで本文と動画の2カラム
- 関連サービスボタンはPCで3列グリッド
- 固定CTAバーはPCで横並び（キャッチ左・ボタン右）

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

:root {
  --color-primary: #cd0507;
  --color-cta: #e40202;
  --color-on-cta: #fff2ef;
  --color-background: #fefefe;
  --color-background-alt: #fcfcfc;
  --color-secondary: #ba9245;
  --color-surface: #fefefe;
  --color-text: #262625;
  --color-text-muted: #666666;
  --color-dark-section: #ffffff;
  --color-tint-1: #ebebeb;
  --color-tint-2: #f5fafe;
  --color-marker: #fef4c5;
  --color-line: #edecec;
  --color-cta-accessible: #e10202;
  --color-secondary-accessible: #886b32;
  --spacing-unit: 8px;
  --spacing-card: 16px;
  --spacing-section: 72px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 20px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。