--- version: alpha name: Bold Navy Multicolor Bank Campaign LP description: 濃紺の地に白カードを重ね、オレンジとコーラルピンクで 2 つのキャンペーンを色分けした金融キャンペーン LP。ファーストビューは斜めの多色ストライプと太い白抜き文字で勢いを出す。金額は特大の太字に黄色い波線マーカーを敷いて目立たせる。人物はフラットな線画イラストで、親しみやすさを添える。 colors: primary: '#003895' background: '#FDFDFD' secondary: '#0092D6' accent-1: '#F2944C' accent-2: '#EC6F7F' cta: '#018A8B' on-cta: '#FFFFFF' accent-3: '#0582D4' background-alt: '#EBF8FE' marker: '#FFF100' text: '#02358D' text-body: '#222222' surface: '#EFEFEF' tint-1: '#DBEBF8' cta-accessible: '#018283' accent-3-accessible: '#057AC8' accent-2-accessible: '#E32941' accent-1-accessible: '#BD5A0E' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 900 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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-entry: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-sub: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px campaign-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 40px condition-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px amount-marker: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 56px plus-divider: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 32px step-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px tel-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 120px accordion: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 52px --- # DESIGN.md — 紺×オレンジ×ピンクの銀行キャンペーン LP（Bold Navy Multicolor Bank Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺の地・白カード・2 色の色分け・特大の金額・黄色マーカー・斜めストライプ - **地の質感**: フラットな塗り。陰影はボタンの影だけ - **形**: 角丸の小さいカード、ピル型ボタン、台形のラベル - **温度感**: 信頼感のある寒色の地に、暖色で明るさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#003895` | ブランドの濃紺。セクションの地とフッター | 10% | 画素の主要色に補正 | | `background` | `#FDFDFD` | カードと本文の地 | 40% | 画素の実測 | | `secondary` | `#0092D6` | ファーストビューの空色 | 5% | 画素の実測 | | `accent-1` | `#F2944C` | キャンペーン 1 の色（オレンジ） | 8% | 画素の実測 | | `accent-2` | `#EC6F7F` | キャンペーン 2 の色（コーラルピンク） | 6% | 画素の実測 | | `cta` | `#018A8B` | 申込ボタン（ティールのグラデーション） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-3` | `#0582D4` | エントリーボタンの青 | 2% | 画素の実測 | | `background-alt` | `#EBF8FE` | 特典例セクションの淡い水色の地 | 9% | 画素の実測 | | `marker` | `#FFF100` | 金額下の黄色マーカー・矢印 | 2% | 画素の実測 | | `text` | `#02358D` | 見出しの紺文字 | 1% | 画素の実測 | | `text-body` | `#222222` | 注意事項の本文 | 3% | 推定 | | `surface` | `#EFEFEF` | 店舗相談・注意事項の灰色の地 | 6% | 画素の実測 | | `tint-1` | `#DBEBF8` | アコーディオンの淡い青 | 1% | 画素の実測 | | `cta-accessible` | `#018283` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#057AC8` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#E32941` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BD5A0E` | AA を満たす補正値（計算） | | 計算 | - 地の色は、濃紺の帯 → 白カード → 淡い水色の帯 → 灰色の帯の順に切り替える - キャンペーン 1 はオレンジ、キャンペーン 2 はピンクで、ラベル・見出し・条件文までまとめて色分けする - 金額と条件のキーワードには、黄色の太いマーカーを下半分に敷く - 申込はティール、エントリーは青のグラデーションのピル型ボタンにする - 注意事項は白地に黒い小さな文字。見出しの頭に小さな色付きの四角を置く - `button-primary` は文字 `#FFFFFF` × 背景 `#018A8B` のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#018283`、4.64:1）を使う。 - `button-entry` は文字 `#FFFFFF` × 背景 `#0582D4` のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#057AC8`、4.54:1）を使う。 - `button-sub` は文字 `#FFFFFF` × 背景 `#EC6F7F` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E32941`、4.51:1）を使う。 - `campaign-label` は文字 `#FFFFFF` × 背景 `#F2944C` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5A0E`、4.53:1）を使う。 - `condition-tag` は文字 `#FFFFFF` × 背景 `#F2944C` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5A0E`、4.53:1）を使う。 - `amount-marker` は文字 `#F2944C` × 背景 `#FFF100` のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5A0E`、4.58:1）を使う。 - `step-card` は文字 `#FFFFFF` × 背景 `#F2944C` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5A0E`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのタイトル（斜体の極太） | 欧文サンセリフ | Dela Gothic One | 900 | 64px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（紺色・字間広め） | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.12em | | `headline-md` | キャンペーン名・条件文 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em | | `accent` | 特大の金額数字 | 欧文サンセリフ | Montserrat | 900 | 44px | 1.1 | 0.0em | | `body-md` | 説明文・期間表示 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em | | `note` | 注意事項・※の注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.04em | - 金額の数字は特大にし、『円』や後ろの語は 6 割ほどの大きさに落とす - 見出しは中央揃えの太字にし、字間を広めにとる - 条件文はキャンペーンの色で 3〜4 行に分け、中央揃えにする - 注意事項だけは左揃えの小さな文字で、ぎっしり組んでよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典例の 3 ステップは PC で横 3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 濃紺の帯の上に、左右 5% の余白をとって白カードを置く - カード内は帯ラベル → キャンペーン名 → 金額 → 条件 → ボタンの順に縦に並べる - 条件 A と B は、点線と中央の丸い『＋』アイコンで区切る - 合計は『＝』アイコンの区切りのあとに出す ## Elevation & Depth - ボタンには、下方向にやわらかい影をつける - カードは影なしのフラットにする - 電話番号の枠は紺の太い線と、薄い影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: イラストは切り抜きでカードの上端からはみ出させる - **セクション境界**: 直線で地の色を切り替える。ファーストビューの下端は斜めの黄色い帯 - キャンペーンのラベルは角のない横長の帯 - 条件ラベルは、下に小さな三角がついたピル型 - ボタンの上に、白い吹き出しのピルを重ねて補足を書く ## Components - **申込ボタン**（`button-primary`）: ティールのグラデーションのピル型ボタン。上に白い吹き出しの補足を重ねる - **エントリーボタン**（`button-entry`）: 青のグラデーションのピル型ボタン。吹き出しをつける - **案内ボタン**（`button-sub`）: ピンクのピル型ボタン。2 行の文字と右端に三角をつける - **キャンペーン帯ラベル**（`campaign-label`）: カードの上部に置く、横幅いっぱいの色帯の白文字 - **条件タグ**（`condition-tag`）: 下に三角がついたピル型のラベル - **金額の強調**（`amount-marker`）: 特大の数字に、黄色い波線マーカーを敷く - **＋の区切り**（`plus-divider`）: 紺の点線の中央に、紺の円形の＋または＝を置く - **ステップカード**（`step-card`）: オレンジとピンクを交互に使うカード。白文字とイラストを入れ、カードの間に黄色の矢印を置く - **電話番号枠**（`tel-box`）: 紺の太枠の角丸ボックスに、大きな紺の番号を入れる - **注意事項のアコーディオン**（`accordion`）: 淡い青の帯に太字の項目名を置き、右端に＋をつける ## Do's and Don'ts **Do** - 2 つの施策は、色をはっきり分けて対比させる - 金額は必ず特大の数字にして、黄色いマーカーを敷く - 人物は同じタッチの線画イラストに統一する - 申込ボタンはカード内と終盤の CTA で繰り返して置く **Don't** - 写真を多用して、フラットな統一感を崩さない - グレー系の暗い配色にしない - オレンジとピンクを同じ施策の中で混ぜない - 注意事項を省いたり、大きな文字にしたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンを一目で伝える）: 空色の地に斜めの多色ストライプを敷き、極太の白・オレンジ・ピンクの文字と人物イラストを置く。下端は黄色の斜め帯に最大の特典額 2. **期間と案内ボタン**（開催期間の明示と初心者への誘導）: 濃紺の地に白文字で期間を書き、ピンクのピル型ボタンを置く 3. **キャンペーン1**（施策 1 の条件と特典を説明する）: 白カードにオレンジの帯ラベル、金額、条件 A・B を並べ、＋で区切る。申込ボタンを入れる 4. **キャンペーン2**（施策 2 の条件と特典を説明する）: 同じ構成をピンクで組み、エントリーボタンを入れる 5. **特典の受け取り例**（家族の例で流れを具体化する）: 淡い水色の地に、ステップカード 3 枚と黄色矢印を並べる。その後に白カードで金額の合計を示す 6. **まとめの CTA**（申込への最終誘導）: 濃紺の地に白カードを置き、マーカー付きの見出しと 2 つのボタン、期間を並べる 7. **お問い合わせ**（電話窓口の案内）: 白地に中央見出しと、紺の太枠の電話番号ボックスを置く 8. **店舗相談**（来店予約への誘導）: 灰色の地に、白い枠線のボタンを置く 9. **バナー**（関連イベントへの誘導）: ファーストビューと同じストライプ調の横長バナー 10. **注意事項**（規約の提示）: 小さな文字の本文を置き、その下にアコーディオンを 3 つ並べる 11. **フッター**（会社情報とページトップへの導線）: 濃紺の地に白文字。上にページトップへ戻る帯を置く ## Imagery - 人物は、細い紺の線と青・ピンク・ベージュの平塗りで描いたフラットなイラスト - ガッツポーズなど前向きなポーズにし、黄色いキラキラを添える - ファーストビューは、青・オレンジ・赤・緑の太い斜めストライプで、文字の影を伸ばしたように見せる - 写真は使わず、イラストとタイポグラフィで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% 幅のカードにし、外側は濃紺の地を広く見せる - ファーストビューは PC で横長にし、文字を左、人物を右に置く - ステップカードは PC で横 3 列にし、間に右向きの黄色矢印を置く - 受け取り例の合計カードは、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-a64a0ba5`（元 LP の URL から採番） - **元 LP**: https://www.hokuyobank.co.jp/person/deposit/fund/lp/nisa_campaign/202508/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。