--- 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/）からご連絡ください。