--- version: alpha name: Sky Blue Mascot Transit Points LP description: 水色の水玉と街並みシルエットの背景の中央に、縦長のスマホ幅コンテンツを置く構成。青系の吹き出しタイル、黄色の地のステップ、ポイント数の大きな数字ボックスで、交通系電子マネーの使い方とおトク感をポップに伝える。 colors: primary: '#019ADC' secondary: '#014B9D' background: '#C7EEF5' background-alt: '#FAF2CC' accent-1: '#FEDC54' surface: '#FDFDFD' accent-2: '#24B9CD' cta: '#024B9C' on-cta: '#FFFFFF' accent-3: '#FD7C13' tint-1: '#64B6C6' text: '#1A2A4A' dark-section: '#004B9E' primary-accessible: '#017EB3' tint-1-accessible: '#347F8D' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 16px 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.sm}' height: 48px question-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px point-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 56px tab-heading: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 36px star-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px cloud-heading: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 110px marker-text: textColor: '{colors.surface}' typography: '{typography.headline-md}' height: 30px side-nav: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 240px --- # DESIGN.md — 水色×黄色のキャラ案内型ポイント活用 LP（Sky Blue Mascot Transit Points LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、清潔・爽やか、情報量多め・訴求型、かわいい - **キーワード**: 水色の水玉背景・街並みシルエット・マスコットキャラ・吹き出しタイル・大きなポイント数字・黄色マーカー - **地の質感**: フラットな塗りのみ。水玉と街並みのシルエットで軽い奥行きを出す - **形**: 角丸カード、吹き出し型の質問タイル、ギザギザ星形バッジ、雲形の見出し - **温度感**: 明るく爽やか。黄色とオレンジで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#019ADC` | ブランドの青（帯・見出し） | 7% | 画素の実測 | | `secondary` | `#014B9D` | 濃紺（ボタン・見出しラベル） | 5% | 画素の実測 | | `background` | `#C7EEF5` | 外側の水色背景 | 35% | 画素の実測 | | `background-alt` | `#FAF2CC` | 薄クリームの地 | 4% | 画素の主要色に補正 | | `accent-1` | `#FEDC54` | 黄色の帯・枠 | 4% | 画素の実測 | | `surface` | `#FDFDFD` | 白カード | 9% | 画素の実測 | | `accent-2` | `#24B9CD` | ターコイズ（キャンペーン帯） | 4% | 画素の実測 | | `cta` | `#024B9C` | 主ボタン（濃紺） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-3` | `#FD7C13` | オレンジ強調 | 1% | 画素の実測 | | `tint-1` | `#64B6C6` | ポイント箱の水色 | 2% | 画素の主要色に補正 | | `text` | `#1A2A4A` | 本文の濃紺文字 | 1% | 推定 | | `dark-section` | `#004B9E` | 外枠の濃紺帯 | 2% | 画素の実測 | | `primary-accessible` | `#017EB3` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#347F8D` | AA を満たす補正値（計算） | | 計算 | - 外側は水色の水玉背景にし、中央のコンテンツ列を色付きの帯で区切る - セクションの地は青、黄色、ターコイズ、クリームを順番に替えてリズムを出す - ボタンはすべて濃紺の面に白文字と白い丸矢印をつける - 重要な語は黄色の文字かオレンジ文字、または黄色マーカーで強調する - ポイント数は水色の箱（塗り）と白い箱（青枠）を並べて比べる - オレンジは最大の数字にだけ使う - `question-tile` は文字 `#FFFFFF` × 背景 `#019ADC` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017EB3`、4.53:1）を使う。 - `point-box` は文字 `#FFFFFF` × 背景 `#64B6C6` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#347F8D`、4.6:1）を使う。 - `cloud-heading` は文字 `#019ADC` × 背景 `#FDFDFD` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017EB3`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風見出し | ゴシック | Dela Gothic One | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.35 | 0.05em | | `headline-md` | カード見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.03em | | `headline-sm` | 質問タイル・ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.8 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `accent` | ポイント数字・英字見出し | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | - 文章は太字で中央揃えにし、短い改行で読みやすくする - 見出しの上に小さなリード文をスラッシュで挟んで置く - 数字は大きく、単位の「ポイント」は小さくする - 質問タイルには縦書きと横書きを混ぜる - 英字の大見出し（POINT・CAMPAIGN）は半透明で背景に敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央 375px 幅の列と左右の固定装飾 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - PC でもコンテンツはスマホ幅の縦長列に収める - カードは色付きの地の上に左右 16px の余白で置く - 質問タイルは 2 列のモザイク状に、高さをばらして並べる - ステップのカードは縦に並べ、間を + や ▼ でつなぐ - ボタンはカード幅いっぱいで高さ 48px にする ## Elevation & Depth - 影はほとんど使わず、塗り分けで階層を表す - ポイント箱は青い 2px 枠で浮かせる - 雲形見出しは白地に薄い水色の縁取りをつける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品カードやアプリ画面は角丸の切り抜き。キャラクターは背景を抜いて配置 - **セクション境界**: 直線で切り替え、山形や雲形の上辺を差し込む - 見出しラベルは上側だけ大きく丸めたタブ型にする - 質問タイルは右下に小さな＋がある吹き出し型にする - 強調バッジは星形のギザギザにする - 数値の単位バッジは正円にする ## Components - **濃紺リンクボタン**（`button-primary`）: 白い細枠と右端の白い丸矢印がついた四角いボタン - **質問吹き出しタイル**（`question-tile`）: 青系の吹き出しに質問を書き、黄色の語で強調。右下に＋ - **ポイント数字ボックス**（`point-box`）: 大きな数字と小さな「ポイント」。塗りと枠線の 2 種類を＋でつなぐ - **タブ型見出し**（`tab-heading`）: カード上辺に乗る白いタブに濃紺の文字 - **星形バッジ**（`star-badge`）: 黄色のギザギザ星の中に倍率などを書く - **雲形見出し**（`cloud-heading`）: 白い雲の形にキャラクターを添えた呼びかけ見出し - **マーカー強調**（`marker-text`）: 白文字の下にオレンジ／黄色の太い線を引く - **PC 左固定ナビ**（`side-nav`）: 白い角丸パネルに、丸い点がついたページ内リンクを並べる ## Do's and Don'ts **Do** - 背景には水玉と街並みシルエットを必ず敷く - セクションごとに地の色を替えて区切りをはっきりさせる - 数字や倍率は大きく、目に飛び込むようにする - マスコットを要所に置いて親しみを出す - ボタンは濃紺に白矢印で統一する **Don't** - 暗い背景や黒を大きく使わない - 明朝体や細い字にしない - コンテンツ列をPCで広げすぎない - オレンジを多用しない - 写真を全面に敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマを印象づける）: 水色の地にロゴ風の大見出しを置き、下からマスコットが顔を出す 2. **バナー帯**（キャンペーンへ誘導する）: 青い帯の上にバナーを横に並べる 3. **概要説明**（サービスの意味を伝える）: 青い地に半透明のカードを置き、マーカーで強調 4. **呼びかけ**（始めようと背中を押す）: 雲形の見出しとキャラクター 5. **よくある疑問**（疑問を入口にする）: 黄色の地に青系の質問タイルをモザイク状に並べる 6. **ポイントまとめ**（手順を簡単に示す）: 黄色の地に白カード。ステップごとの数字ボックスとボタン 7. **キャンペーン**（参加を促す）: ターコイズの地に英字の透かしとバナー、一覧ボタン 8. **上級者編**（ポイントを重ねて貯める方法を示す）: クリームの地に白カードを＋でつなぎ、星形バッジで締める 9. **モデルケース**（どれだけ貯まるか試算する）: 黄色の枠の中に利用シーン別の数字ボックスを並べ、合計を大きく出す 10. **さらに上乗せ**（上位の使い方を訴える）: 薄水色のカードに、オレンジの大きな数字 11. **ポイントの使い方**（使い道を示す）: 濃紺の地に青いカードを縦に並べ、タブ見出しと 1ポイント＝1円の図を置く ## Imagery - 丸いくちばしのデフォルメ動物キャラを、表情豊かに描く - アイコンは線画の買い物袋やカップを白や水色で描く - カードやスマホ画面は平面のモックで見せる - 背景は大小の白っぽい円と、低い街並みのシルエット - 紙吹雪や小さな星のきらめきで祝う感じを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央の 375px 列をそのまま使い、左右に水玉背景を広げる - PC の左に固定ナビ、右にキャラ付きの誘導看板を置く - SP では左右の装飾を外し、列を全幅にする - 文字サイズは 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-89a8651e`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/icoca/icocatsu/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。