--- version: alpha name: Bold Red Cashless Campaign LP description: 真っ赤な地に放射状の集中線、立体アイコン、極太ゴシックで特典率を大きく見せるキャンペーンLP。白カードに親子イラストと青・赤のポイント表示を並べ、後半はクリーム地の手順と赤ピルCTAで設定を促す。 colors: primary: '#F32F3E' secondary: '#2F6FE8' dark-section: '#A21218' background: '#FEFEFE' background-alt: '#FFF0AB' cta: '#F32F3D' on-cta: '#FEFAFA' marker: '#FCF705' text: '#0C0C0C' accent-1: '#DA3040' tint-1: '#FEE3E4' tint-2: '#E4F1FE' accent-2: '#0153A3' surface: '#EBE9EA' cta-accessible: '#E70D1D' secondary-accessible: '#2D6DE8' primary-accessible: '#E70D1E' typography: display: fontFamily: Montserrat fontSize: 96px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 64px compare-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px point-pill-blue: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 46px point-pill-red: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 46px badge-burst: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 50px section-kicker: textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 230px step-timeline: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px ribbon-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — 赤×黄の集中線で押すキャッシュレス特典LP（Bold Red Cashless Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 赤一色・集中線・極太数字・親子比較・立体アイコン・黄色強調 - **地の質感**: フラットな赤地に放射状の集中線とグラデーション。白カードは影なしで平面的。 - **形**: 角丸カード・ピルボタン・ギザギザ星バッジ・円形番号 - **温度感**: 暖色寄りで熱量が高い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F32F3E` | ブランド赤・セクション地 | | 画素の主要色に補正 | | `secondary` | `#2F6FE8` | 親側の青ボタン・青見出し | | 推定 | | `dark-section` | `#A21218` | 濃赤の帯・ジッパー部 | | 画素の主要色に補正 | | `background` | `#FEFEFE` | カード・白地 | | 画素の実測 | | `background-alt` | `#FFF0AB` | 手順セクションのクリーム地 | | 画素の実測 | | `cta` | `#F32F3D` | 主CTAボタン | | 画素の実測 | | `on-cta` | `#FEFAFA` | CTA文字 | | 画素の実測 | | `marker` | `#FCF705` | 見出しの黄色強調文字 | | 画素の実測 | | `text` | `#0C0C0C` | 見出し・本文の黒 | | 画素の実測 | | `accent-1` | `#DA3040` | 本文中の赤強調語 | | 画素の実測 | | `tint-1` | `#FEE3E4` | 子ラベル円の淡ピンク | | 画素の実測 | | `tint-2` | `#E4F1FE` | 親ラベル円の淡青 | | 画素の実測 | | `accent-2` | `#0153A3` | FV上部の青帯 | | 画素の実測 | | `surface` | `#EBE9EA` | FV下部の淡グレー地 | | 画素の実測 | | `cta-accessible` | `#E70D1D` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#2D6DE8` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E70D1E` | AA を満たす補正値（計算） | | 計算 | - ページの大半は赤地。セクションごとに赤の明度を上下させて区切る。 - 赤地の上の見出しは白、最重要語だけ黄色にする。 - 比較カードは白地。親側を青、子側を赤で一貫して色分けする。 - 後半の説明・手順はクリーム地に切り替えて落ち着かせる。 - 本文の強調語は赤太字。他の色は使わない。 - `button-primary` は文字 `#FEFAFA` × 背景 `#F32F3D` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E70D1D`、4.53:1）を使う。 - `point-pill-blue` は文字 `#FEFAFA` × 背景 `#2F6FE8` のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#2D6DE8`、4.54:1）を使う。 - `point-pill-red` は文字 `#FEFAFA` × 背景 `#F32F3E` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E70D1E`、4.53:1）を使う。 - `badge-burst` は文字 `#FEFAFA` × 背景 `#F32F3E` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E70D1E`、4.53:1）を使う。 - `ribbon-label` は文字 `#FEFAFA` × 背景 `#F32F3E` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E70D1E`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特典率の巨大数字 | 欧文サンセリフ | Montserrat | 900 | 96px | 1.0 | -0.02em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.0em | | `headline-md` | カード見出し・ポイント見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.35 | 0.0em | | `headline-sm` | 小見出し・ラベル帯 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-lg` | 特長の説明文 | ゴシック | Noto Sans JP | 500 | 17px | 1.6 | 0.0em | | `note` | 注意事項の箇条書き | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.05em | - 見出しは極太ゴシック。助詞だけ小さくして文字サイズに強弱をつける。 - 数字は欧文の極太書体で大きく、単位は小さく添える。 - 最重要語は大きなダブルクォーテーションで囲み、黄色にする。 - 伸ばし音は長い横線で表してリズムを出す。 - 注釈は小さな文字の箇条書きにまとめ、白文字で赤地の上に置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較カード内は親・子の 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 比較カードは左に親、中央に矢印、右に子を置く対称レイアウト。 - 各キャンペーン段は小ラベル→見出し→比較カード→注釈の順で繰り返す。 - 特長カードは見出しタブ、その下に写真左・テキスト右の横並び。 - 手順は左に縦線と円形番号を置くタイムライン。 ## Elevation & Depth - カードには基本的に影を付けない。 - 立体アイコンのイラストだけで奥行きを出す。 - CTAには影を付けずフラットにする。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形。人物は角丸の正方形に近い比率で切り抜く。 - **セクション境界**: V字のくさび型、ジッパー風のギザギザ、上向きの円弧で区切る。 - 特典率バッジはギザギザの星形にする。 - 親・子のラベルは円形の淡い色の地に置く。 - 特長カードは太い赤枠＋角丸にし、見出しは片側が斜めに切れたタブにする。 ## Components - **主CTAピルボタン**（`button-primary`）: 幅いっぱいの赤ピル。右端に白丸の矢印アイコン - **親子比較カード**（`compare-card`）: 白い角丸カード。親と子のイラストと矢印、ポイント額ボタンを並べる - **親側ポイント表示**（`point-pill-blue`）: 青地の角丸。アイコンと大きな金額の白文字 - **子側ポイント表示**（`point-pill-red`）: 赤地の角丸。＋記号と金額の白文字 - **星形の率バッジ**（`badge-burst`）: 赤地のギザギザ星に、白文字で何％獲得かを書く - **斜線つき小ラベル**（`section-kicker`）: キャラアイコンと短い言葉を、左右の斜線二本で挟む - **番号つき特長カード**（`feature-card`）: 太い赤枠のカードに、番号と見出しの赤タブ、写真、赤強調の説明文を入れる - **手順タイムライン**（`step-timeline`）: 黒丸に白い番号を入れ、縦線でつなぐ。親・子の円ラベルとアプリ画面図を添える - **赤リボン見出し帯**（`ribbon-label`）: 赤い帯に白文字。下に三角のしっぽを付ける ## Do's and Don'ts **Do** - 赤地には放射状の集中線を薄く敷き、熱量を出す。 - 特典の数字は画面幅の半分以上の大きさにする。 - 親は青、子は赤の色分けをすべてのカードで守る。 - 背景に立体の四角アイコンを傾けて散らす。 - 注釈は各ブロックの直後に小さな文字でまとめる。 **Don't** - 淡いパステルだけの配色にしない。 - 細い明朝体や細字の見出しを使わない。 - カードに強いドロップシャドウを付けない。 - 黄色の文字を白地の上に置かない。 - 親と子の色を入れ替えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（親子で特典が増えることを一目で伝える）: 青帯に白の太字コピー、淡グレー地にキャラクター写真と上向き矢印を置く 2. **特典の要約**（最大の還元率を印象づける）: 赤地の集中線、親・子の吹き出しで巨大な数字を挟み、ジッパー柄で締める 3. **特典段階1**（基本の特典例を示す）: 斜線ラベル→見出し→親子比較カード→注釈 4. **特典段階2**（条件を満たすと親にも付くことを示す）: V字区切りの濃赤地。黄色の強調見出しと比較カード 5. **特典段階3**（最大特典の条件を示す）: 集中線と黄色のキラキラ装飾。比較カード内にプラン詳細へのテキストリンク 6. **注意事項**（条件や期間を明示する）: 赤地に白い小さな箇条書き 7. **特長**（使う利点を3つ伝える）: 円弧で白地に切り替え、リボン帯と大見出しの下に番号つき特長カードを3枚 8. **設定手順**（4ステップで簡単だと示す）: クリーム地にタイムラインとアプリ画面のイラスト 9. **CTA**（設定へ誘導する）: 大きな赤ピルボタンと小さな注記 ## Imagery - 親子の人物は線画イラストにし、髪と服の一部だけ青・赤で塗る。 - 赤い立体アイコンキューブを傾けて背景に散らす。 - 実写は明るい自然光で、スマホを見る親子や学生を撮る。 - アプリ画面はグレー線の簡略図で描き、要所に赤丸の指示を入れる。 - 黄色の4点キラキラと集中線で盛り上げる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央約900px幅に固定し、両端まで背景色を伸ばす。 - FVの見出しは2行から1行に近づけて横長に配置する。 - 特長カードはPCで3列の縦型カードにし、写真を上に置く。 - 手順の画面図はPCで3枚を横に並べる。 - 比較カードの構成はSPと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-c334a280`（元 LP の URL から採番） - **元 LP**: https://www.softbank.jp/mobile/campaigns/list/okozukai/ - **解析に使った画像**: 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/）からご連絡ください。