--- version: alpha name: Spring Pink Festive Bank Campaign LP description: 淡いピンクとクリームの斜めストライプに、桜の花びらや風船を散らした春らしいキャンペーンLP。赤い太字の金額ロゴと赤ピル型CTAで特典を強く打ち出す。白カード、STEPカード、番号付き理由カードで手続きのわかりやすさと金融機関らしい信頼感も保っている。 colors: primary: '#E50101' cta: '#EB434B' on-cta: '#FFF1F3' secondary: '#FE75C4' background: '#FFFFFF' background-alt: '#FFFFFF' tint-1: '#FEFFD5' tint-2: '#FFD4E8' accent-1: '#F33C72' accent-2: '#F9ABA9' accent-3: '#ED6479' marker: '#FCEB02' text: '#222222' line: '#D16679' cta-accessible: '#DC1721' secondary-accessible: '#D8027D' accent-1-accessible: '#DD0E4B' primary-accessible: '#D30101' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px 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: 44px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-arch-header: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 110px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 600px price-logo: backgroundColor: '{colors.primary}' textColor: '{colors.marker}' typography: '{typography.display}' height: 180px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px accordion: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 44px faq-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 64px menu-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 270px --- # DESIGN.md — 桜ピンク×赤の銀行口座開設キャンペーンLP（Spring Pink Festive Bank Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型、信頼・誠実 - **キーワード**: 春の新生活・桜の花びら・風船・金額ロゴ・ステップ図解・パステル - **地の質感**: フラットな塗りに斜めストライプと市松模様を薄く重ねる。紙吹雪や風船のイラストで祝祭感を出す - **形**: 角丸の白カード、ピル型ボタン、アーチ型のセクション見出し帯、下向き三角の矢印 - **温度感**: 暖色寄り。ピンクと赤が中心で、クリーム色が柔らかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E50101` | ブランドの赤（CTA・強調の文字・枠線） | 4% | 画素の実測 | | `cta` | `#EB434B` | 主CTAボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFF1F3` | CTAボタンの文字 | 0% | 画素の実測 | | `secondary` | `#FE75C4` | サブボタン（エントリー）のピンク | 1% | 画素の実測 | | `background` | `#FFFFFF` | ページの地色 | 50% | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | 特典紹介・FAQエリアの淡いピンクの地 | 7% | 画素の実測 | | `tint-1` | `#FEFFD5` | 手順エリアのクリーム色の地 | 6% | 画素の実測 | | `tint-2` | `#FFD4E8` | アコーディオン見出し・ステップ図の淡いピンク | 4% | 画素の実測 | | `accent-1` | `#F33C72` | 見出し帯・カード見出しのローズピンク | 4% | 画素の実測 | | `accent-2` | `#F9ABA9` | 見出し帯グラデーションの終点（ピーチ） | 2% | 画素の主要色に補正 | | `accent-3` | `#ED6479` | お子さま向け帯・STEPバッジのくすみピンク | 2% | 画素の実測 | | `marker` | `#FCEB02` | 金額の下に引く黄色マーカー | 0% | 画素の実測 | | `text` | `#222222` | 見出し・本文の濃いグレー | 3% | 推定 | | `line` | `#D16679` | カードの枠線・点線区切り | 0% | 画素の主要色に補正 | | `cta-accessible` | `#DC1721` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#D8027D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DD0E4B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D30101` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にする。セクションごとに淡いピンクとクリーム色を切り替えて区切る - 金額・条件・強調語は赤の太字にする。数値には黄色のマーカーを敷く - 主CTAは赤、サブCTAはピンクのピル型にする。行動の重みを色の濃さで分ける - セクション見出しの帯はローズピンクからピーチへの横グラデーションにする - ピンクの強い色は帯・バッジ・枠線に絞る。本文の背景は白に保つ - 注意書きは薄いグレーの面に赤い警告アイコンを添える - `button-primary` は文字 `#FFF1F3` × 背景 `#EB434B` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DC1721`、4.57:1）を使う。 - `button-secondary` は文字 `#FFF1F3` × 背景 `#FE75C4` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D8027D`、4.53:1）を使う。 - `section-arch-header` は文字 `#FFF1F3` × 背景 `#F33C72` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DD0E4B`、4.51:1）を使う。 - `price-logo` は文字 `#FCEB02` × 背景 `#E50101` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D30101`、4.51:1）を使う。 - `menu-box` は文字 `#F33C72` × 背景 `#FFFFFF` のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DD0E4B`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特典金額のロゴ（立体的な極太文字） | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.0 | -0.02em | | `headline-lg` | セクション見出し帯の白文字 | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.05em | | `headline-md` | カード内の金額・特典条件 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.0em | | `headline-sm` | STEPのタイトル・理由カードのピル型見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.0em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.0em | | `note` | ※から始まる注釈・期間の表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | | `accent` | STEPバッジ・MENUなどの英字ラベル | 欧文サンセリフ | Montserrat | 800 | 11px | 1.2 | 0.05em | - 文字はすべてゴシック体の太字を基本にする。明朝体は使わない - 金額は数字だけを大きくし、「円」は小さく添える - 本文中の強調語は赤の太字にする。下線は使わない - 見出し帯の文字は白の極太で中央に揃える - 注釈は※で始め、本文より小さいグレーの文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。理由セクションのアイコンだけ円形に放射状に並べる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツは中央の白カードに収め、左右には地色を見せる - STEPカードは左にテキスト、右に淡いピンク地の図解を置く2分割にする - STEPカードの間に赤い下向き三角を置いて流れを示す - 特典の足し算は「＋」と「＝」の記号でカードをつなぐ - 特典の各ブロックの後に主CTAとサブCTAを縦に並べる ## Elevation & Depth - 白カードには薄い影（0 2px 8px、ピンクがかったグレー）をつける - FVのメインカードは下側に濃いピンクの縁取りを入れ、少し浮かせる - CTAボタンは下に濃い赤の影を落として押せる感じを出す - アコーディオン・FAQは影なしで線と面で区切る ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は使わない。フラットなイラストを四角い図解枠やカード内に配置する - **セクション境界**: 見出し帯は上辺をアーチ状に膨らませたグラデーション帯。セクションの地色は直線で切り替える - 理由カードは左上に円形の番号バッジを重ね、太いピンクの枠で囲む - STEPバッジは赤のピル型の小さなラベルにする - 「エントリー要」は黒い枠で囲んだ白い小さなラベルにする - アコーディオンは上辺を赤い線にした淡いピンクの矩形にする ## Components - **主CTAボタン**（`button-primary`）: 赤のピル型ボタン。右端に「>」の矢印をつける - **エントリーボタン**（`button-secondary`）: ピンクのピル型ボタン。主CTAの直下に置く - **アーチ型の見出し帯**（`section-arch-header`）: 上辺が弧になったピンクからピーチへのグラデーション帯。両脇に風船と花びらを飾る - **特典カード**（`benefit-card`）: ピンクの見出し帯と「エントリー要」ラベルがついた白カード。金額に黄色のマーカーを敷く - **金額ロゴ**（`price-logo`）: 赤い台形の上に黄色グラデーションの極太数字を重ねる。周囲に紙吹雪を散らす - **STEPカード**（`step-card`）: 左にSTEPバッジとタイトル、右に淡いピンク地の図解。カードの間に三角の矢印を置く - **番号付きの理由カード**（`reason-card`）: 太いピンク枠のカード。円形の番号、ピル型の見出し、点線の区切りの下に本文を置く - **特典詳細のアコーディオン**（`accordion`）: 上辺を赤い線にした淡いピンクの帯。中央に見出し、右に開閉のシェブロンを置く - **FAQリスト**（`faq-list`）: 白い角丸カード内に、赤いQ番号・質問文・右端の赤い＋を1行ずつ並べ、線で区切る - **ページ内メニュー**（`menu-box`）: ピンクの枠の角丸ボックスに、ピンクの太字の項目とシェブロンを縦に並べる ## Do's and Don'ts **Do** - 特典の金額は立体的な極太ロゴにし、ページ内で繰り返し見せる - セクション見出しは必ずアーチ型のグラデーション帯で統一する - 手順はSTEPカードと三角の矢印で縦に並べ、短い2行の文にする - 主CTAとサブCTAは赤とピンクのピル型をセットで置く - 条件・期間・注釈は小さな文字で漏れなく添える **Don't** - 暗い背景やモノトーンの配色にしない - 寒色をメインに使わない。青は風船のアクセント程度にとどめる - 実写の写真を多用しない。フラットなイラストで統一する - 本文の背景に濃いピンクを敷かない - CTAを角張った四角のボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と最大の特典金額を一目で伝える）: ストライプの地に花びらと風船を散らす。白い角丸カードに金額ロゴと期間枠を入れ、その下に赤CTAと注意書きを置く 2. **ページ内メニュー**（長いページを移動しやすくする）: ピンクの枠のボックスに6項目とシェブロンを並べる 3. **特典紹介**（特典の組み合わせを足し算で見せる）: 淡いピンクの地に特典カードを置く。＋と＝でつなぎ、合計の金額ロゴの後にCTAを2つ並べる 4. **追加特典（紹介）**（上乗せの特典を伝える）: 「さらに！」の見出しの下に、人物イラストと大きな金額を入れたカードを置く 5. **シェア**（SNSでの拡散を促す）: 白い角丸ボックスにSNSアイコンを2つ並べる 6. **申込方法**（手続きが簡単だと示す）: クリーム色の地にSTEPカードを縦に並べる。子ども向けの手順はくすみピンクの帯で分ける 7. **選ばれる理由**（サービスの利点を3つ伝える）: 市松模様の地に番号付きの理由カードを3枚置く。図解・イラスト・赤の強調語を入れた本文で構成する 8. **特典詳細**（条件を網羅して掲載する）: アコーディオンを縦に並べる。同意事項はグレーの見出しにする 9. **よくある質問**（不安を解消する）: 淡いピンクの地に、Q番号付きの開閉リストを入れた白カードを置く 10. **過去のキャンペーン・問い合わせ・フッター**（関連情報と窓口を示す）: 赤い見出しの枠ボックス、注釈リスト、赤い線のフッターで構成する ## Imagery - 人物は細い線画に赤・ピンク・青の面をのせたフラットなイラストにする - スマホやカードは赤い端末のアイコン風の図解で描く - 装飾は桜の花びら・パステルの風船・リボン状の紙吹雪を使う - 背景は淡いピンクの斜めストライプに、黄色とピンクの三角形を大きく重ねる - 金額ロゴは黄色からオレンジのグラデーション文字に赤い縁取りをつける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央に幅約360pxのSPカラムを置き、レイアウトはそのまま使う - PCの左右の余白には、ストライプ・三角形・雲・花びらの装飾背景を全面に敷く - PCのFVでは、カラムの左右に買い物をする人物のイラストを配置する - 要素の大きさや並びはSPのまま変えない ## 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-23a22000`（元 LP の URL から採番） - **元 LP**: https://www.bk.mufg.jp/kouza/lp/mtto/presents/plan/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/）からご連絡ください。