--- version: alpha name: Sky Blue Trust Financial Coaching LP description: 空色のグラデーション地に白い角丸カードを重ね、紺の見出しとオレンジの強調で信頼感と親しみを両立させた金融伴走サービスの LP。悩み→解決→3つのポイント→流れ→料金→FAQ を縦一列で丁寧に見せる。 colors: primary: '#194D83' secondary: '#62B6EA' background: '#FFFFFF' background-alt: '#E0E0E0' tint-1: '#E3F5FE' tint-2: '#FFF9E6' accent-1: '#FE982C' accent-2: '#EED592' cta: '#55A431' on-cta: '#FFFFFF' text: '#333333' dark-section: '#013D6E' line: '#4A90D0' text-muted: '#555555' cta-accessible: '#458528' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Roboto fontSize: 22px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px 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.md}' height: 48px worry-card: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 700px number-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px check-list: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 24px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px phase-label: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px faq-item: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 90px brand-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — 空色×白カードの家計コーチング LP（Sky Blue Trust Financial Coaching LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 空色グラデーション・白い角丸カード・紺の見出し・オレンジの強調・線画イラスト・ステップフロー - **地の質感**: フラットな単色面と、セクション単位の縦グラデーション（青→砂色）。影はほぼ使わない。 - **形**: 角丸 8〜16px のカード、小さな下向き三角の連結、丸い番号バッジ。 - **温度感**: やや涼しめ。青基調に暖色（オレンジ・砂色）を差して温かさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#194D83` | 見出し・番号バッジ・ロゴ帯の紺青 | 3% | 画素の実測 | | `secondary` | `#62B6EA` | ポイント・流れセクションの空色地 | 20% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 44% | 画素の実測 | | `background-alt` | `#E0E0E0` | 悩みセクションの薄グレー地 | 4% | 画素の実測 | | `tint-1` | `#E3F5FE` | カード内サブパネル・CTA帯の淡い水色 | 12% | 画素の実測 | | `tint-2` | `#FFF9E6` | お話しすること枠の淡いクリーム | 3% | 画素の実測 | | `accent-1` | `#FE982C` | 強調文字・チェックアイコン・開始ラベル帯のオレンジ | 2% | 画素の実測 | | `accent-2` | `#EED592` | 流れ後半のグラデーション終点の砂色 | 6% | 画素の実測 | | `cta` | `#55A431` | 予約ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#333333` | 本文・見出しの濃いグレー | 3% | 推定 | | `dark-section` | `#013D6E` | フッターと案内ラベル帯の紺 | 2% | 画素の実測 | | `line` | `#4A90D0` | FAQ質問下の青い区切り線 | 0% | 推定 | | `text-muted` | `#555555` | 注釈の小さいグレー文字 | 0% | 推定 | | `cta-accessible` | `#458528` | AA を満たす補正値（計算） | | 計算 | - 地は白・薄グレー・空色・淡い水色をセクションごとに切り替える。 - 訴求の本体セクションは空色地に白カードを重ねる。 - 見出しは紺、強調したい語はオレンジ文字か下線で示す。 - CTA ボタンだけ緑にし、ほかで緑は使わない。 - ステップフローは空色から砂色へ縦にグラデーションさせ、後半はオレンジ見出しに切り替える。 - カード内の補足は淡い水色かクリームのパネルで囲む。 - `button-primary` は文字 `#FFFFFF` × 背景 `#55A431` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#458528`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きなキャッチ | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-md` | ポイント見出し・料金見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | カード内小見出し・FAQ質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.03em | | `note` | 注釈・免責 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 価格の大きな数字 | 欧文サンセリフ | Roboto | 700 | 22px | 1.2 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - 見出しは中央揃え、本文は左揃え。 - 強調語はオレンジの太字か下線で示す。 - 価格は数字だけを大きくし、単位と税込は小さくする。 - 注釈は「※」で始め、中央揃えの小さな文字で置く。 - FAQ の質問は「Q」を頭に付けた紺の太字にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内のチェックリストは 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 空色地の上の白カードは左右 12px ほど余白を空けて置く。 - カードの中にさらに淡色パネルを入れ子にする。 - ステップは白カードを縦に並べ、小さな三角でつなぐ。 - CTA 帯は淡い水色の全幅帯に、上にマイクロコピー、下に注釈を添える。 ## Elevation & Depth - 影はほぼ使わず、色面の差でカードを浮かせる。 - スクリーンショット画像に薄い影を付ける程度にとどめる。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしか小さい角丸の横長の四角。イラストは白地に切り抜きで置く。 - **セクション境界**: 直線で切り替える。 - CTA は角丸 8px 程度の横長ボタンにする。 - 番号は紺の丸バッジにする。 - サービス名は紺の四角帯に白文字で置く。 ## Components - **予約CTAボタン**（`button-primary`）: 緑の横長ボタンに白太字。上に斜線で囲んだマイクロコピーを添える - **悩みカード**（`worry-card`）: 薄グレー地に白カード。左に線画人物、右に紺太字で悩みを書く - **ポイントカード**（`point-card`）: 空色地に乗る白カード。上部に番号丸バッジ、紺見出し、本文、淡水色の例パネル - **番号バッジ**（`number-badge`）: 紺の丸に白い2桁の数字 - **チェックリスト**（`check-list`）: オレンジの四角チェックか青いチェック記号つきの箇条書き - **ステップカード**（`step-card`）: 白カードに見出し、本文、クリームの話題パネル、線画イラスト。カードの間は下向き三角でつなぐ - **フェーズ帯**（`phase-label`）: 紺またはオレンジの全幅帯に白太字で段階名を書く - **FAQ項目**（`faq-item`）: Q付きの紺太字の質問、その下に青い線、さらに下に回答本文 - **サービス名帯**（`brand-band`）: 紺の四角に白抜きのサービス名を置く ## Do's and Don'ts **Do** - 空色地＋白カードの重なりを本体セクションの基本形にする。 - 人物は統一した線画イラストで描き、差し色に水色とピンクを使う。 - 料金や手続きに関わる箇所には必ず注釈を添える。 - CTA は料金の直後とページ末尾に繰り返し置く。 - 実際の画面キャプチャや図表で中身を具体的に見せる。 **Don't** - 緑を CTA 以外に使わない。 - 濃い影や光沢グラデーションのボタンにしない。 - 派手な赤や黒背景で煽る表現にしない。 - 収益や成果を断定する大きなコピーを置かない。 - イラストのタッチを混在させない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（何をどれくらいの期間で叶えるかを示す）: 左が空色地の白抜きキャッチ（キーワードは白枠で囲む）、右が手描き風の人物イラスト 2. **ベネフィット要約と提供元**（要点3つと信頼の裏付けを示す）: オレンジのチェック付き3行と、提供元ロゴを白地中央に置く 3. **悩みの提起**（共感を得る）: 薄グレー地に、線画人物と紺文字の白カードを3枚縦に並べる 4. **サービス紹介**（解決策を提示する）: オレンジ強調の中央見出し、紺帯のサービス名、面談写真、下線で強調した説明文 5. **3つのポイント**（特長を具体的に伝える）: 空色地に番号つきの白カードを3枚。中に図表やキャプチャを入れた淡水色の例パネルを入れ子にする 6. **料金**（価格を明示する）: 白地の中央に紺見出し、月額の大きな数字、注釈 7. **CTA**（予約へ誘導する）: 淡水色の帯に、マイクロコピー、緑のボタン、注釈を置く 8. **プログラムの流れ**（申込から修了までの流れを示す）: 空色から砂色へのグラデーション地に、白いステップカードを三角でつないで並べる。途中にフェーズ帯を挟む 9. **修了後サポート**（継続プランを案内する）: 淡水色地に月額と、白パネルの箇条書きを置く 10. **よくある質問**（不安を解消する）: 白地に、Q付きの紺の質問、青線、回答の順で縦に並べる 11. **フッター**（規約と問い合わせへのリンク）: 紺帯に白文字のリンクと注意書き、その下の白地にロゴとコピーライト ## Imagery - 人物は細い線画に、水色・ピンク・ベージュの淡い差し色を入れる。 - FV は柔らかな水彩風・アニメ調で、スーツ姿の女性アドバイザーを描く。 - 写真は明るいオフィスや自宅で面談している様子。自然光で青みの強い色調にする。 - 図表やアプリ画面のキャプチャを角丸の白パネルに入れて見せる。 - アイコンは家・グラフ・書類などをシンプルに描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 800px 幅で配置し、外側は同じ地色を全幅に敷く。 - 悩みカードは PC で横 3 列にする。 - ポイント内の例パネルは PC で 2 列に並べる。 - FV は PC でも左がコピー、右がイラストの 2 分割を保ち、文字を大きくする。 - ステップフローと FAQ は PC でも 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-b699dd25`（元 LP の URL から採番） - **元 LP**: https://pf-business-development.nikkei.com/wealth-adviser - **解析に使った画像**: 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/）からご連絡ください。