--- version: alpha name: Green Trust Comparison Ranking Finance LP description: 深緑の帯見出しと、オレンジ・緑の立体ボタンで組んだ比較・ランキング型の金融サービス LP。白とごく薄いグレー・ミントの地色を交互に使って区切る。金メダル風の実績バッジ、番号付きのロゴ一覧、図解カードで信頼感と情報量を出している。 colors: primary: '#015C35' on-primary: '#F4FEFB' cta: '#F95E01' on-cta: '#FCFCF8' secondary: '#32C43D' background: '#FEFEFE' background-alt: '#FEFEFE' tint-1: '#EBF8F1' tint-2: '#FDFFD8' line: '#C2A184' accent-1: '#DC5B08' accent-2: '#5BD59E' marker: '#E5141E' text: '#000000' accent-3: '#333280' accent-2-accessible: '#228458' cta-accessible: '#C94C01' secondary-accessible: '#228529' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.35 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.1 rounded: sm: 4px md: 8px lg: 12px 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}' top-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 56px medal-badge: textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px compare-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 310px rank-number: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 70px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 80px guide-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 420px definition-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 250px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 42px heading-lined: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 46px --- # DESIGN.md — 深緑×オレンジの金融比較ランキングLP（Green Trust Comparison Ranking Finance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、力強い・インパクト - **キーワード**: 比較ランキング・深緑の帯見出し・立体ボタン・金メダルバッジ・図解・注意喚起の赤文字 - **地の質感**: フラットな単色面が中心。ボタンだけ下に濃い影を付けて立体に見せ、バッジは金の光沢グラデーションにする - **形**: 四角い枠のカードと帯見出しが基本。ボタンは小さめの角丸、番号は円にする - **温度感**: 深緑で落ち着かせ、オレンジで温度を上げる中間の温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#015C35` | 帯見出し・上部バー | 8% | 画素の実測 | | `on-primary` | `#F4FEFB` | 帯見出し上の文字 | 1% | 画素の実測 | | `cta` | `#F95E01` | 主CTAボタン | 4% | 画素の実測 | | `on-cta` | `#FCFCF8` | ボタン文字 | 0% | 画素の実測 | | `secondary` | `#32C43D` | サブCTAボタン（緑） | 3% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 34% | 画素の実測 | | `background-alt` | `#FEFEFE` | 薄グレー地のセクション・FAQ | 13% | 画素の実測 | | `tint-1` | `#EBF8F1` | ランキング誘導エリアの外側のミント地 | 8% | 画素の実測 | | `tint-2` | `#FDFFD8` | ランキング誘導ボックスのクリーム地 | 8% | 画素の実測 | | `line` | `#C2A184` | 誘導ボックスの金茶の枠線 | 0% | 画素の主要色に補正 | | `accent-1` | `#DC5B08` | キャッチの強調語オレンジ | 0% | 画素の実測 | | `accent-2` | `#5BD59E` | 番号の円（ミントグリーン） | 0% | 画素の実測 | | `marker` | `#E5141E` | 注意喚起の赤い下線付き文字 | 0% | 推定 | | `text` | `#000000` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-3` | `#333280` | FAQのQマーク（紺紫） | 0% | 画素の実測 | | `accent-2-accessible` | `#228458` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#C94C01` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#228529` | AA を満たす補正値（計算） | | 計算 | - 地色は白と薄いグレーを交互に敷いて、セクションの境目を作る - ランキングへ誘導するブロックだけは、ミント地の上にクリームの箱を置き、金茶の枠で囲む - 見出しの帯と最上部のバーは深緑の1色に揃える - 主CTAはオレンジ、2つ目の選択肢は緑。ボタンの下には同系色の濃い色で影を付ける - 注意書きや強調したい一文は、赤文字に下線を付ける - 見出しは基本黒。FAQ見出しとランキング見出しだけ深緑の文字にする - `rank-number` は文字 `#F4FEFB` × 背景 `#5BD59E` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#228458`、4.53:1）を使う。 - `button-primary` は文字 `#FCFCF8` × 背景 `#F95E01` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C94C01`、4.52:1）を使う。 - `button-secondary` は文字 `#FCFCF8` × 背景 `#32C43D` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#228529`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きなキャッチ | ゴシック | Dela Gothic One | 900 | 36px | 1.2 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.0em | | `headline-md` | 帯見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | 図解タイトル・リード | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.0em | | `body-md` | 本文・FAQの質問文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `note` | ※注釈・出典 | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 24px | 1.3 | 0.02em | | `accent` | バッジ内の数字 | ゴシック | Dela Gothic One | 900 | 30px | 1.1 | 0.0em | - 見出しはすべて極太のゴシック体にする - 数字（調査社数・時間・%）は周りの文字より一回り大きくし、色を変える - 見出しの両脇に斜線を置いて、サブ見出しを挟む - 注釈は9px前後の小さな文字で、ボックスの下に置く - 本文は左揃え。見出しとカードの文字は中央揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。定義カードのみ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの区切りは地色の切り替えで見せる - 比較ボックスは深緑の帯見出しと白い本体を、細い灰色の枠で囲む - ロゴ一覧は左に番号の円、右にロゴを置き、行と行の間に細い線を引く - CTAボタンは本文幅いっぱいに広げ、縦に並べる - FAQは白いカードを縦に並べ、間を12px程度あける ## Elevation & Depth - CTAボタンは下方向にぼかさない濃色の影（4〜6px）を付けて押せる見た目にする - FAQカードはごく薄い影か影なしにする - カードは影を付けず、1px の灰色の枠線だけにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は切り抜き。イラストは背景なしで配置する - **セクション境界**: 直線。地色の切り替えだけで区切る - 帯見出しは角丸なし - ボタンは角丸8px程度の長方形にし、右端に白い三角の矢印を付ける - 番号は塗りつぶした円にする - FAQカードは角丸8〜10px ## Components - **悩み呼びかけバー**（`top-banner`）: 最上部に置く深緑の帯。かぎ括弧で悩みを2行で書く - **金メダル実績バッジ**（`medal-badge`）: 金の光沢がある円を3つ横に並べ、実績の数字を赤で大きく入れる - **比較ボックス**（`compare-box`）: 深緑の帯見出しの下に、番号付きのロゴ3行を並べる - **番号の円**（`rank-number`）: ミント色の円の中に白い数字を入れる - **主CTA**（`button-primary`）: オレンジの立体ボタン。右端に三角の矢印を付ける - **緑CTA**（`button-secondary`）: 緑の立体ボタン。オレンジのボタンと縦に並べる - **ランキング誘導ボックス**（`guide-box`）: クリームの地に金茶の枠を付け、見出し・斜線サブ見出し・ボタン2つ・注釈を入れる - **定義カード**（`definition-card`）: 白地に枠線のカード。見出し・イラスト・説明を中央揃えで縦に並べる - **FAQカード**（`faq-item`）: 白地の角丸カード。左に紺のQ、右に質問文を置く - **上下線見出し**（`heading-lined`）: 上下に細い線を引き、深緑の文字を中央に置く ## Do's and Don'ts **Do** - 実績の数字は大きく、赤かオレンジで強調する - 選択肢が2つ以上あるときは、緑とオレンジのボタンで色分けする - 比較やランキングの要素には番号の円を付ける - 主張の根拠として、出典や※注釈を必ず添える - 仕組みは矢印と番号付きの図解で見せる **Don't** - パステル調やくすんだ色をメインに使わない - ボタンをピル型や影なしのフラットにしない - 細い明朝体で見出しを組まない - 深緑以外の色を帯見出しに使わない - 一つのセクションの中で地色を何色も混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **悩みの呼びかけ**（対象者を絞り込む）: 深緑の帯に白文字で書く 2. **ファーストビュー**（調査規模と比較の価値を伝える）: 淡い緑の斜めストライプ地に、女性の切り抜きと大きなキャッチを置き、金メダルバッジを3つ並べる 3. **属性別おすすめ比較**（対象者の属性ごとに候補を示す）: 帯見出し付きの比較ボックスを3つ並べ、それぞれ番号付きのロゴを入れる。最後のボックスにCTAを置く 4. **ランキング誘導CTA**（詳しいページへ送る）: ミント地の上にクリームの箱を置き、緑とオレンジのボタンを並べる 5. **サイト紹介**（調査方法の信頼性を示す）: 本文と赤い下線の強調文を置き、カオスマップとトロフィーのイラストを添える 6. **優良会社の定義**（選ぶ基準を示す）: 薄グレー地に、イラスト付きのカードを2カラムで5枚並べる 7. **仕組みの解説**（サービスの仕組みを理解してもらう）: 定義文の下に、番号付きの矢印フロー図を枠で囲んで置く 8. **ランキング誘導CTA（再掲）**（もう一度誘導する）: 先の誘導ブロックと同じ作りで繰り返す 9. **よくある質問**（不安を解消する）: 薄グレー地に、上下線の見出しとQ付きの白いカードを縦に並べる ## Imagery - スーツの女性をビジネス写真として切り抜き、明るい地に置く - 金のメダル風の円形バッジを作り、光沢のグラデーションを付ける - フラットなイラストを使う（電卓とコイン、手錠、握手、天秤など、意味がすぐわかるもの） - 図解は人物とビルのアイコンを番号付きの矢印でつなぎ、ラベルはオレンジ・緑・青の箱にする - トロフィーと表彰台で、ランキングを連想させる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央の約800px幅に収め、左右は余白にする - 比較ボックスは、PCでは3つを横並びの3カラムにする - CTAボタン2つは、PCでは横に並べる - 定義カードは、PCでは3列＋2列で並べる - 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-462a29cb`（元 LP の URL から採番） - **元 LP**: https://factoringselected.com/5/? - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。