--- version: alpha name: Bright Blue Gradient AI SaaS LP description: 淡い水色の地に白カードを並べ、鮮やかな青を主色、オレンジのグラデーションを主CTAにしたBtoB SaaS向けLP。ビジネスパーソンのフラットイラストと製品画面のモックで、課題から解決、強み、比較、実績、導入の流れ、FAQ、問い合わせへと順に説明していく。 colors: primary: '#1E63E9' on-primary: '#EBFAFF' cta: '#FD7B16' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F4F9FF' tint-1: '#E2ECFE' dark-section: '#0187E0' secondary: '#05D9EC' text: '#0F101A' text-body: '#333840' marker: '#FFF3A0' accent-1: '#DC6029' line: '#B7CDEB' cta-accessible: '#C25602' typography: display: fontFamily: Noto Sans JP fontSize: 33px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px 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: 54px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px button-blue: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 30px problem-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px comparison-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 900px case-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 250px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 70px stat-item: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 70px --- # DESIGN.md — 青グラデと橙CTAのAI業務SaaS LP（Bright Blue Gradient AI SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的、情報量多め・訴求型 - **キーワード**: 淡い水色の地・白カード・青のピル型ラベル・オレンジのグラデCTA・フラットイラスト・製品画面のモック - **地の質感**: フラットで光沢はない。背景に大きな半透明の円弧やぼかした光の模様を薄く敷く - **形**: 角丸カード（約12px）とピル型のボタン・ラベル。シアンのグラデ帯で区切る - **温度感**: クールで明るい青が基調。オレンジを温度差のアクセントに使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1E63E9` | ブランドの青（ラベル・見出しの強調・ボタン） | 4% | 推定 | | `on-primary` | `#EBFAFF` | 青の面の上の白文字 | 1% | 画素の実測 | | `cta` | `#FD7B16` | 主CTA（オレンジ→黄のグラデ） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAの上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 40% | 画素の実測 | | `background-alt` | `#F4F9FF` | 淡い水色のセクション地 | 20% | 画素の実測 | | `tint-1` | `#E2ECFE` | イラスト枠・比較表の強調セル | 6% | 画素の実測 | | `dark-section` | `#0187E0` | CTA帯（青→シアンのグラデ） | 8% | 画素の実測 | | `secondary` | `#05D9EC` | サブボタン・グラデの終点に使うシアン | 2% | 画素の実測 | | `text` | `#0F101A` | 見出しの濃紺がかった黒 | 2% | 画素の実測 | | `text-body` | `#333840` | 本文の濃いグレー | 2% | 推定 | | `marker` | `#FFF3A0` | 本文の黄色マーカー | 0% | 推定 | | `accent-1` | `#DC6029` | 強調文字・グラフのオレンジ | 0% | 画素の実測 | | `line` | `#B7CDEB` | 強みの区切り線・枠線 | 0% | 推定 | | `cta-accessible` | `#C25602` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互にし、白カードは水色の地に置いて浮かせる - 見出しの強調語・ラベル・番号はすべてprimaryの青にする - オレンジのグラデは「無料で試す」系の主CTAと実績グラフだけに使う - CTA帯は青→シアンの斜めグラデの全幅帯にし、白文字で乗せる - 本文の要点には黄色マーカーを引く。1段落に2〜3箇所まで - 比較表では自社の列をprimaryの見出しとtint-1のセルで目立たせる - `button-primary` は文字 `#FFFFFF` × 背景 `#FD7B16` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C25602`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（シアン→青のグラデ文字） | ゴシック | Noto Sans JP | 900 | 33px | 1.45 | 0.02em | | `headline-lg` | セクション見出し（中央揃え・2〜3行） | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.02em | | `headline-md` | 強み・カードの見出し（青とオレンジの2色） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | カード内の小見出し・FAQの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.02em | | `note` | 注釈（実績の算出根拠など） | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字のセクションラベル・STEPやCASEの番号・大きな数字 | 欧文サンセリフ | Montserrat | 800 | 13px | 1.2 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - 見出しは中央揃えにし、強調語だけ青（一部はオレンジ）に変える - セクション見出しの上に英字のピル型ラベルを置く - 数値の実績は数字を大きな太字にし、単位は小さくする - 本文は左揃えで、行間を1.9前後に広く取る - 製品名の読み仮名は小さい文字で括弧書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。使い方と実績の一覧は 2 カラムのカードグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - カードは画面の左右に約12〜24pxの余白を取って置く - セクションの頭は「英字ラベル→2〜3行の見出し→リード文」の順にする - 強みのブロックは「番号ラベル→見出し→本文→画面モック」を縦に並べ、ブロック間を細い線で区切る - 導入ステップは縦に積んだカードを青い下向き三角でつなぐ - CTA帯は全幅のグラデ地で、上にノートPCのモック、下に見出しとボタンを置く ## Elevation & Depth - 白カードには青みのある大きくぼかした薄い影を付ける（0 8px 24px rgba(30,99,233,0.08) 程度） - FAQのアコーディオンにも同じ薄い影を付ける - ボタンはフラットで、影は付けないかごく薄くする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 製品画面はノートPCやモニターの枠にはめたモックで見せる。イラストは角丸の淡い青パネルの中に置く - **セクション境界**: 直線で区切る。CTA帯はグラデの全幅帯にし、背景には大きな円弧の装飾を重ねる - ボタン・英字ラベル・番号バッジはすべてピル型にする - 番号ラベルは縦線で「語｜番号」に分けて表記する - 問い合わせのブロックは淡い青の大きな角丸枠の中に白カードを入れる二重構造にする ## Components - **主CTA**（`button-primary`）: 左のオレンジから右の黄へ流れるグラデのピル型ボタン。左にアイコン、右に矢印を付ける - **資料ダウンロードのボタン**（`button-outline`）: 白地に青い枠線のピル型ボタン。ダウンロードアイコンを付ける - **青ボタン**（`button-blue`）: 青のベタ塗り、または青→シアンのグラデのピル型ボタン。右端に矢印を付ける - **英字セクションラベル**（`section-label`）: 青地に白い英字の小さなピル型ラベル。見出しの上に中央揃えで置く - **番号バッジ**（`number-badge`）: 「強み｜01」「STEP｜01」のように縦線で区切った青いピル型バッジ - **課題カード**（`problem-card`）: 白カードに、青いラベル→見出し（下線付きの青文字）→イラスト→黄色マーカー付きの本文を並べる - **比較表**（`comparison-table`）: 一般的な製品の列はグレーがかった青の見出し、自社の列は青の見出しとtint-1のセルにする。見出しの上に吹き出しのバッジを付ける - **実績カード**（`case-card`）: 左上にCASE番号のタブを付け、大きな青の数値と小さなグラフ、区切り線の下に本文と企業名を置く - **FAQのアコーディオン**（`faq-item`）: 白カードの左に青い丸のQアイコン、右に下向きのシェブロンを置く - **実績数値の並び**（`stat-item`）: 丸いアイコンの横に、小さなラベル、大きな青の数値、注釈を縦に並べる。2×2の点線グリッドにする ## Do's and Don'ts **Do** - 見出しの強調語は青で色を変え、必要に応じて下線を引く - 白カードは淡い水色の地に置き、薄い青の影で浮かせる - 主CTAはオレンジのグラデに統一し、複数のCTA帯で同じボタンを繰り返す - イラストは青いスーツのフラットな人物と、角丸のUIパーツで描く - 数値の実績は大きな数字とアイコンで見せる **Don't** - オレンジを見出しや面の広い場所に多用しない - 暗い背景や黒の大きな面を使わない - 角ばったボタンや角丸のないカードを混ぜない - 写真の人物をリアルに使わない。フラットイラストで統一する - 1枚のカードに黄色マーカーを入れすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（価値を一言で伝え、資料請求と無料トライアルへ誘う）: 淡い水色の地にグラデ文字の大きなキャッチとサブコピーを置き、2つのボタンを縦に並べる。下に製品画面と人物、機能の吹き出しを組み合わせたイラストを置く 2. **導入企業のロゴと実績数値**（信頼を補強する）: 白いタイルに入れた企業ロゴを横に流し、その下に数値実績を2×2で並べる 3. **悩みの提起**（現場の課題に共感させる）: 英字ラベルと問いかけの見出しの後に、課題カードを3枚縦に積む。背景に?マークを薄く散らす 4. **解決後の姿**（導入後の変化を示す）: 下向きの点の矢印で場面を転換し、角に山形の装飾を付けた白カード3枚でビフォーアフターを見せる 5. **解決策の提示**（製品の位置づけを伝える）: グラデのタブ見出し、大きな見出し、リード文の後に、キャラクター付きのノートPCモックを置く 6. **3つの強み**（機能の差別化を伝える）: 番号バッジ、2色の見出し、本文、モニターのモックを1ブロックとし、細線で区切って3つ繰り返す 7. **使い方**（操作の簡単さを示す）: 2×2の白カードに、イラストのパネル、番号の丸、見出し、本文を入れる 8. **CTA帯**（途中で行動を促す）: 青→シアンのグラデの全幅帯に、ノートPCのモック、白い見出し、オレンジのCTAを置く 9. **他社との比較**（優位性を一覧で見せる）: 3列の比較表で、自社の列を青で強調する 10. **導入実績**（定量的な効果を証明する）: CASE番号付きの実績カードを3枚並べる 11. **信頼性**（セキュリティ面の安心を伝える）: 淡い青の太枠カードに認証マークと説明文を入れる 12. **料金と導入の流れ**（検討の次の段階へ進める）: 料金は見出しとグラデのボタンだけにする。流れは4つのSTEPカードを三角でつなぐ 13. **よくある質問**（不安を取り除く）: Qアイコン付きのアコーディオンを4つ並べる 14. **最終CTAと問い合わせ**（資料請求・問い合わせ・電話へ誘導する）: CTA帯の後に、淡い青枠の中に白カードを入れた窓口ブロックを3つ並べ、フッターでナビゲーションと2つのボタンを示す ## Imagery - 人物は青いスーツのビジネスパーソンを、フラットで線のないイラストで描く - 製品画面はノートPCやモニターのモックにはめ込み、白基調のUIを見せる - 白と紺の丸い小型ロボットのマスコットを要所に添える - UIの抽象パーツ（Qアイコンの行・検索バー・グラフ）を淡い青の角丸パネルで描く - 背景には大きな淡い円弧、ぼかした光の斜線、?マークを薄く敷く - アイコンは青とライトブルーの2色で描くフラットなもの - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左右 2 分割にし、左にコピーとボタン、右にイラストを置く - PC では課題・解決後の姿・実績のカードを 3 列、使い方と STEP を 4 列で横に並べる - PC の強みのブロックはテキストと画面を左右交互に配置する - PC の CTA 帯は左にモック、右に見出しとボタンを置いた横長にする - PC はヘッダーにナビゲーション、電話番号、2 つのボタンを常に表示する。SP はハンバーガーメニューにする ## 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-cb3d1aed`（元 LP の URL から採番） - **元 LP**: https://wisbit.net/service/ai-faq/ - **解析に使った画像**: 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/）からご連絡ください。