--- version: alpha name: Orange and Indigo AI SaaS Lead-Gen LP description: 白とライトグレーの地に、ビビッドなオレンジの帯と青紫グラデーションの資料請求帯を交互に挟む、BtoB SaaSの資料請求型LP。ゴシック太字の中央揃え見出し、白カード、比較表、導入ロゴ、受賞バッジで信頼感と分かりやすさを両立させている。 colors: primary: '#FF8931' cta: '#FB7414' on-cta: '#FFFFFF' secondary: '#4968D2' dark-section: '#101D47' background: '#FFFFFF' background-alt: '#F3F3F3' tint-1: '#BEBFFF' tint-2: '#FFF9ED' text: '#1E1E1E' text-muted: '#808080' accent-1: '#455DC5' line: '#E7EBF4' marker: '#F9C23C' cta-accessible: '#C45403' primary-accessible: '#C55400' typography: display: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 30px fontWeight: 600 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.01em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 74px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 74px pain-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 125px solution-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 170px doc-banner: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 340px compare-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1180px review-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px required-badge: backgroundColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px heading-gradient-bar: backgroundColor: '{colors.marker}' height: 3px --- # DESIGN.md — オレンジ×藍の資料請求型AI SaaS LP（Orange and Indigo AI SaaS Lead-Gen LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか - **キーワード**: 白地とグレー地の交互配置・オレンジのグラデーション帯・青紫グラデーションの資料帯・フラットなイラスト・比較表・導入ロゴ - **地の質感**: フラットで影はほぼ使わない。オレンジと青の帯だけに縦方向のゆるいグラデーションをかける - **形**: 角丸6〜10pxのカードと角丸4pxのボタン。全体に直線的で端正 - **温度感**: 暖色オレンジでCTAを目立たせ、藍・青紫で知的な落ち着きを出す中間の温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF8931` | ブランドオレンジ（課題解決の帯・CTAの色） | 9% | 画素の実測 | | `cta` | `#FB7414` | 主CTAボタン（資料請求） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#4968D2` | 資料請求帯の青紫グラデーション | 6% | 画素の実測 | | `dark-section` | `#101D47` | 比較表の見出し列（濃紺） | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 48% | 画素の実測 | | `background-alt` | `#F3F3F3` | 悩み・設置方法セクションのグレー地 | 13% | 画素の実測 | | `tint-1` | `#BEBFFF` | フォームセクションのラベンダーグラデーション | 6% | 画素の実測 | | `tint-2` | `#FFF9ED` | 比較表の自社列のクリーム | 2% | 画素の実測 | | `text` | `#1E1E1E` | 見出し・本文の文字 | 3% | 推定 | | `text-muted` | `#808080` | 口コミ投稿者名などの補足 | 0% | 推定 | | `accent-1` | `#455DC5` | 必須バッジ・リンクの青 | 0% | 画素の実測 | | `line` | `#E7EBF4` | 入力欄・カードの細い枠線 | 0% | 画素の主要色に補正 | | `marker` | `#F9C23C` | キャッチ上の黄色系下線マーカー | 0% | 推定 | | `cta-accessible` | `#C45403` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C55400` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーを交互にし、セクションの境目を色の切り替えで示す - オレンジはCTAボタン・課題解決の帯・比較表の自社列だけに使う - 資料請求の中間CTAは青紫グラデーションの帯に置き、オレンジのボタンで目立たせる - 比較表は見出し列を濃紺、他社列をグレー、自社列をオレンジ枠とクリーム地にする - フォームはラベンダーの淡いグラデーション地に白い入力欄を並べる - オレンジの帯の上の文字はすべて白にする - `button-primary` は文字 `#FFFFFF` × 背景 `#FB7414` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C45403`、4.55:1）を使う。 - `button-outline` は文字 `#FF8931` × 背景 `#FFFFFF` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C55400`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインキャッチ | ゴシック | Noto Sans JP | 700 | 36px | 1.35 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.02em | | `headline-md` | 特長の大きな番号（01〜04） | 欧文サンセリフ | Montserrat | 600 | 30px | 1.2 | 0.0em | | `headline-sm` | カード見出し・特長の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.02em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.03em | | `accent` | FVの実績数字の強調 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.0 | -0.01em | - 見出しは中央揃えの太字ゴシックにし、2行に収める - 本文は左揃えで12px前後、行間は1.8にする - CTAボタンは上に小さいマイクロコピー、下に大きいボタン文言の2段構成にする - 数字はオレンジのグラデーションで大きく見せる - 装飾書体は使わず、ゴシックとサンセリフだけで統一する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ロゴ一覧は 4 列、事例カードは 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右16px程度の余白をとって全幅で縦に積む - セクションの上下に60〜80pxの余白をとる - 特長は番号→小見出し→イラスト→本文の順で縦に並べる - 資料請求の帯はページ中で2回以上繰り返す - フォームは1列で、姓と名だけ2列にする ## Elevation & Depth - 影はほぼ使わず、地との色差でカードを浮かせる - FVの製品画面のモックにだけ、薄くぼかした影を付ける - 事例カードは極細の枠線と、ごく薄い影にする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸の小さい長方形。イラストは背景なしで切り抜いて置く - **セクション境界**: 直線の水平境界で、地色を切り替える - ボタンは角丸4〜6pxの長方形にし、右端に「>」の矢印を付ける - カードは角丸8〜10pxの白い面にする - バッジは角丸2pxの小さな長方形にする - 受賞ロゴは円形やメダル形のまま並べる ## Components - **主CTAボタン**（`button-primary`）: オレンジのグラデーション地に白文字。上段に小さな補足、下段に太字の文言、右に矢印 - **問い合わせのサブボタン**（`button-outline`）: 白地にオレンジの1.5px枠とオレンジ文字。主CTAと同じ幅 - **悩みカード**（`pain-card`）: グレー地に置く白カード。線画アイコンと太字の悩み1行を中央揃えにする - **解決カード**（`solution-card`）: オレンジの帯に置く白カード。オレンジ・青のフラットなイラストと太字の説明 - **資料請求の帯**（`doc-banner`）: 青紫グラデーションの帯に資料の表紙画像、白文字の説明、オレンジの小さなボタンを置く - **比較表**（`compare-table`）: 濃紺の見出し列、グレーの他社列、オレンジ枠とクリーム地の自社列。記号は○◎△× - **口コミカード**（`review-card`）: グレー地のカードに星評価、太字のタイトル、本文、グレーの投稿者名を並べる - **必須バッジ**（`required-badge`）: 青地に白文字の小さなラベル。フォーム項目名の左に置く - **見出し下のグラデーション線**（`heading-gradient-bar`）: 見出しの下に置く、オレンジ→黄→青の短い横線 ## Do's and Don'ts **Do** - CTAは資料請求をオレンジの塗り、問い合わせをオレンジの枠線にして2種類を並べる - 導入ロゴや受賞バッジなど、第三者の評価を何度も見せる - イラストはオレンジと青紫の2色を中心に、統一したテイストで描く - 比較表では自社列だけをオレンジで囲んで目立たせる - セクションごとに白とグレーの地を交互にする **Don't** - オレンジを本文の色や広い背景に多用しない（帯は1か所までにする） - 濃い影や立体的な装飾を付けない - 明朝体や手書き風の書体を使わない - ボタンをピル型にしない - イラストと写真を同じカードの中に混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（何を解決するサービスかを一目で伝える）: マーカー付きの小見出し、大きな2行キャッチ、実績バッジ3つ、製品画面のモック、CTAボタン2つ 2. **導入ロゴ**（導入実績で信頼を示す）: 白地に中央の見出しを置き、企業ロゴを横スクロールで1列に流す 3. **悩みの提起**（担当者の課題に共感する）: グレー地に白カード3枚。線画の困り顔アイコンと短い悩み文、締めの一文 4. **解決策**（導入後の効果を示す）: オレンジのグラデーション帯に白い見出しと白カード3枚のイラスト、白文字のまとめ 5. **資料請求の帯**（途中で資料請求へ誘導する）: 青紫のグラデーション地に資料の画像、白文字の説明、オレンジのボタン 6. **特長**（技術とサポートの強みを説明する）: 白地に大きな番号01〜04、太字の小見出し、フラットなイラスト、左揃えの本文 7. **他社比較**（サポートの手厚さで差別化する）: リード文の下に3列の比較表。自社列はオレンジの枠で囲む 8. **導入事例**（業界ごとの成果を見せる）: ロゴのグリッドと、写真に社名ラベルを重ねた2列の事例カード 9. **設置方法**（導入のしやすさを伝える）: グレー地に白カード3枚。画面の図、太字の見出し、説明文 10. **受賞・評価**（第三者の評価で後押しする）: グラデーション線付きの見出し、受賞ロゴ、評価スコア、注釈、グレーの口コミカード 11. **資料請求フォーム**（リードを獲得する）: ラベンダーのグラデーション地に資料のスライダーと1列のフォーム、大きなオレンジのボタン 12. **問い合わせ・会社情報**（別の導線と信頼情報を示す）: 薄いグレー地に枠線ボタン、その下に会社概要の表とフッター ## Imagery - 人物はオレンジと青紫を基調にしたフラットなベクターイラストで描く。顔は簡略化し、グラデーションで陰影を付ける - 課題は黒の線画アイコンで表す（ヘッドセットを付けた困り顔など） - グラフや検索窓などのUIはオレンジと青の淡いグラデーションで抽象的に描く - 事例の写真は明るいオフィスで人物が笑顔の写真にし、左下に白い社名ラベルを重ねる - 製品画面はブラウザ風の枠に入れたスクリーンショットを重ねて見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVを左右2列にし、左にキャッチとCTA、右に製品画面を置く - 悩みカード・解決カード・設置方法カードはPCで3列に並べる - 特長はPCでテキストとイラストを左右交互に並べる - 資料請求の帯はPCで画像を左、テキストとボタンを右に置く - フォームはPCで左に資料のスライダー、右に入力欄の2列にする - 事例カードと口コミはPCで3列・2列にする ## 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-2303d1b9`（元 LP の URL から採番） - **元 LP**: https://www.helpfeel.com/landing-faq_4 - **解析に使った画像**: 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/）からご連絡ください。