--- version: alpha name: Bright Sky Blue and Lemon Mobile Payment LP description: 鮮やかな空色と淡いレモン黄でまとめた、交通系モバイル決済サービスの案内 LP。流れ星のような斜めのグラデーション帯でスピード感を出している。大きな角丸の黄色ブロック、シアンの番号付きステップカード、FAQ アコーディオンを縦に並べた、親しみやすく清潔感のある構成。 colors: primary: '#00A1E9' secondary: '#03C3DD' background: '#FFFFFF' background-alt: '#E7FCFF' accent-1: '#FEFF7F' tint-1: '#ABDDF6' tint-2: '#FEFDDE' cta: '#1BA0E5' on-cta: '#FFFFFF' text: '#0A5CA1' text-body: '#4A4A4A' line: '#70CFE4' marker: '#FEFF7A' dark-section: '#0F78C8' cta-accessible: '#147DB3' secondary-accessible: '#028092' primary-accessible: '#0078AE' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 36px section-title-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 62px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 600px highlight-block: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 640px tab-switch: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 100px link-card: textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px sticky-cta-pair: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px carousel: rounded: '{rounded.md}' height: 400px --- # DESIGN.md — 空色×レモン黄の爽快モバイル決済 LP（Bright Sky Blue and Lemon Mobile Payment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 清潔・爽やか、ポップ・元気、信頼・誠実、やさしい・柔らかい - **キーワード**: 空色・レモン黄・スピード感・角丸・キャラクター・ステップ解説 - **地の質感**: 白地と淡い水色・淡黄の地を基本にする。FV と導入部には、斜めに流れるぼかしグラデーション帯を散らして疾走感を出す。 - **形**: 大きな角丸ブロック（約40px）、角丸カード、ピル型ボタン、円形の番号バッジ - **温度感**: 明るく軽やかで、ややクールな寒色寄り。黄色で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00A1E9` | ブランドの空色。FV の地、見出し文字 | 11% | 画素の実測 | | `secondary` | `#03C3DD` | ステップカードの枠と見出し帯に使うシアン | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の実測 | | `background-alt` | `#E7FCFF` | おトク情報エリアの淡い水色地 | 8% | 画素の実測 | | `accent-1` | `#FEFF7F` | 強調ブロックのレモン黄（メリット・キャスト紹介） | 8% | 画素の実測 | | `tint-1` | `#ABDDF6` | 画像を置く枠の淡い水色 | 6% | 画素の実測 | | `tint-2` | `#FEFDDE` | アプリ DL 枠の淡いクリーム | 3% | 画素の実測 | | `cta` | `#1BA0E5` | 主ボタン（さらに詳しく）の青 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#0A5CA1` | ステップ見出しに使う濃い青 | 1% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文のダークグレー | 2% | 推定 | | `line` | `#70CFE4` | FAQ の区切り線 | 0% | 画素の主要色に補正 | | `marker` | `#FEFF7A` | 数字やタグラインに引く黄色マーカー | 0% | 画素の主要色に補正 | | `dark-section` | `#0F78C8` | 下部固定 CTA の濃い青ボタン | 1% | 推定 | | `cta-accessible` | `#147DB3` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#028092` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#0078AE` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡水色・淡黄を交互に切り替え、セクションの区切りを色で示す - 強く訴えたいブロックだけ、大きな角丸のレモン黄の面にする - 見出しは空色、ステップ見出しは濃い青、本文はダークグレーと使い分ける - 数字の強調やタグラインには黄色のマーカー下線を引く - ボタンは青系で統一し、文字は白にする - 赤や暖色の強い色は使わない - `button-primary` は文字 `#FFFFFF` × 背景 `#1BA0E5` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#147DB3`、4.55:1）を使う。 - `section-title-pill` は文字 `#FFFFFF` × 背景 `#03C3DD` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#028092`、4.66:1）を使う。 - `highlight-block` は文字 `#00A1E9` × 背景 `#FEFF7F` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0078AE`、4.61:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#03C3DD` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#028092`、4.66:1）を使う。 - `faq-item` は文字 `#00A1E9` × 背景 `#FFFFFF` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0078AE`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白・斜体風） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `accent` | 大きな実績数字 | 欧文サンセリフ | Montserrat | 800 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-md` | ステップ見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em | | `headline-sm` | FAQ の質問文 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しと本文は基本中央揃えにする - 導入の本文は行間を2.0前後と広めにとる - 数字は本文の2〜3倍の大きさで、黄色マーカーを添える - 単位や『突破』などの語は数字より小さく付ける - 見出しは太字のゴシックだけで構成し、明朝は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。導入リンクとキャスト紹介は 2 列 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約20pxにする - セクション見出しの下に約24pxの余白をとる - ステップカードは縦に並べ、間を約40pxあける - ナビ用のリンクカードは 2 列で並べる - FAQ は全幅のリストで、項目間に線を引く ## Elevation & Depth - 影はほとんど使わず、面の色と枠線で区切る - スライダーの矢印は白か黄の円で、薄い影を付ける - 下部 CTA ボタンは下側に濃い青の帯を付け、立体感を出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。人物は背景を切り抜いて配置する - **セクション境界**: 直線で区切らず、大きな角丸ブロックや地の色の切り替えで区切る - 強調ブロックは画面ほぼ全幅で、角丸40pxにする - ステップカードはシアンの2px枠で、角丸16pxにする - 番号は円形で、カード上辺にまたがせて配置する - タブの選択側は吹き出しのような三角を下に付ける ## Components - **ピル型主ボタン**（`button-primary`）: 全幅の青いピル型ボタン。白い太字を載せる - **ピル型見出し帯**（`section-title-pill`）: シアンのピル型の帯に白い見出しを載せ、下に黄色のドットを5つ並べる - **番号付きステップカード**（`step-card`）: 白地にシアンの枠。上端に円形の番号を置き、見出し・3点ドット・本文・画像の順に並べる - **黄色の角丸ブロック**（`highlight-block`）: メリットやキャスト紹介を包む大きなレモン黄の面 - **2択タブ**（`tab-switch`）: 左がシアンの塗り、右が枠線のみ。選択側に下向きの三角を付ける - **FAQ アコーディオン**（`faq-item`）: 青い円の Q アイコン、空色の質問文、右端の＋を並べる。下に区切り線を引く - **画像付きリンクカード**（`link-card`）: 上に画像、下に白地のラベルと下向きの矢印を置くカード - **2連の吹き出し付き CTA**（`sticky-cta-pair`）: 白いピル型の吹き出しの下に、濃い青のアイコン付きボタンを 2 つ並べる - **バナースライダー**（`carousel`）: 角丸の画像に、左右の円形矢印とドットのインジケーターを付ける ## Do's and Don'ts **Do** - 空色と黄色の2色を軸に、淡いトーンの地を交互に重ねる - FV や導入部には、斜めのぼかし帯を散らしてスピード感を出す - 手順は番号付きカードで、1 ステップずつ見せる - キャラクターや人物の切り抜きで親しみを出す - 本文は中央揃えで、行間を広めにとる **Don't** - 黒地や濃い暖色の面を使わない - 角張ったボックスや直線の区切りを多用しない - 本文を左揃えで詰め込まない - 装飾フォントや明朝体を混ぜない - 影を強く付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値を一瞬で伝える）: 空色の地に白い太字のキャッチを置く。端末のモックアップ、ロゴの並び、人物2名の切り抜き、斜めの黄色いぼかし帯で構成する 2. **実績**（利用者数で信頼感を出す）: 上辺が角丸の淡色グラデーション地に、巨大な数字と黄色マーカー、注釈を置く 3. **サービス概要**（何ができるかを説明する）: 空色の見出しと、中央揃えで行間の広い短文を数行 4. **ページ内ナビ**（主要セクションへ誘導する）: 2 列の画像付きリンクカード 5. **メリット**（使う利点を見せる）: 黄色の角丸ブロックの中に、角丸のバナースライダーとピル型ボタンを置く 6. **おトク情報**（特典・キャンペーンを訴求する）: 淡い水色の地に、斜線で囲んだリード文とバナーのスライダーを置く 7. **利用の流れ**（始め方を手順で示す）: ピル型の見出し帯、対応機種確認のカード、2択タブ、番号付きステップカード3枚の順に並べる 8. **CM 動画**（広告映像で認知を補強する）: 角丸の動画サムネイルを黄色い円形矢印のスライダーで見せ、下にキャプションを置く 9. **キャスト紹介**（出演者で親しみを出す）: 黄色の角丸ブロックに、人物の切り抜きを 2 列で並べ、下に名前を置く 10. **よくある質問**（疑問を解消する）: Q アイコン付きのアコーディオンを区切り線で並べる 11. **締めの CTA**（利用開始へ誘導する）: マーカー付きのタグライン、吹き出し付きの青いボタン 2 つ ## Imagery - 人物は明るい無地の背景で笑顔を撮影し、切り抜いて使う。服は青と黄に合わせる - マスコットキャラクターの3DCGを、淡い水色の地に置く - 端末のモックアップで画面を見せる - 斜めに流れる黄・白のぼかし帯で、流れ星のようなスピード感を出す - アイコンはシンプルなフラット線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約375px）の縦長カラムを置き、外側を淡い水色の地にする - PC の左側には、キャラクター・アプリアイコン・QR コードの案内パネルを固定する - PC の右側には、ページ内リンクのテキストナビを固定する - 中のレイアウトは SP と同じ 1 カラムのままにする ## 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-2c38e900`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/icoca/applepay/sungoi_smooth_03240126/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。