--- version: alpha name: Blue Gradient Recruiting SaaS LP description: 白と淡い青の地に、ロイヤルブルーからシアンへのグラデを差し色にした BtoB 採用支援サービスの LP。フラットな線画イラストと棒グラフ・地図などのデータ図解で実績を見せる。白カードを並べて特長を番号付きで解説し、要所に入れる青帯の CTA ではオレンジのボタンを目立たせている。 colors: primary: '#2B74FC' secondary: '#0185D0' cta: '#E4540C' on-cta: '#FFFFFF' accent-1: '#42CBF1' tint-1: '#AAEDF6' background: '#FEFFFE' background-alt: '#EAF0FF' surface: '#ECF3FD' text: '#202020' text-body: '#444444' accent-2: '#4663A7' line: '#D7D9DC' dark-section: '#EEEEEE' primary-accessible: '#216DFC' cta-accessible: '#CE4C0B' accent-2-accessible: '#4562A5' secondary-accessible: '#018DDD' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 36px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px 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.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px stat-band: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' height: 200px number-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px pill-heading: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px cta-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 460px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px --- # DESIGN.md — 青グラデと線画イラストの採用支援SaaS LP（Blue Gradient Recruiting SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型 - **キーワード**: ロイヤルブルー・シアングラデ・白カード・データ図解・線画イラスト・番号付き特長 - **地の質感**: フラットな白カードに、ごく弱い影と淡い青のドットや斜線の地紋を重ねる - **形**: 角丸 12〜16px のカード、円形の番号バッジ、角丸の小さいボタン - **温度感**: 青を主体にしたクールで清潔な寒色系。CTA だけオレンジで暖色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2B74FC` | 見出し文字・番号バッジ・ボタンの基調ブルー | 6% | 画素の実測 | | `secondary` | `#0185D0` | 実績帯・CTA帯の濃い青 | 8% | 画素の実測 | | `cta` | `#E4540C` | CTA帯の申込ボタン（オレンジ） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#42CBF1` | グラデボタンの終点シアン | 2% | 画素の実測 | | `tint-1` | `#AAEDF6` | 見出しピル・グラフ見出しの水色 | 2% | 画素の実測 | | `background` | `#FEFFFE` | 基本の白地・カード地 | 46% | 画素の実測 | | `background-alt` | `#EAF0FF` | 特長セクションの淡い青灰地 | 14% | 画素の実測 | | `surface` | `#ECF3FD` | 機能一覧パネルの淡青 | 4% | 画素の実測 | | `text` | `#202020` | 大見出しのほぼ黒 | 1% | 画素の実測 | | `text-body` | `#444444` | 本文の濃いグレー | 2% | 推定 | | `accent-2` | `#4663A7` | サブ見出しの紺寄りブルー文字 | 1% | 画素の主要色に補正 | | `line` | `#D7D9DC` | 区切り線・FAQ罫線 | 1% | 画素の主要色に補正 | | `dark-section` | `#EEEEEE` | フッターの明るいグレー地 | 6% | 画素の実測 | | `primary-accessible` | `#216DFC` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#CE4C0B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#4562A5` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#018DDD` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い青灰を交互に置き、白カードを浮かせる - 見出しの強調語や番号バッジは primary の青で統一する - 主ボタンは primary から accent-1 への横グラデにして白文字を載せる - CTA帯は濃い青のグラデ地に白カードを3枚並べ、ボタンだけオレンジにする - グラフの見出しは水色のピルにし、自社のデータは濃い青、比較対象は淡い青で塗る - 暖色はオレンジの CTA だけに使う - `button-primary` は文字 `#FFFFFF` × 背景 `#2B74FC` のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#216DFC`、4.51:1）を使う。 - `button-outline` は文字 `#2B74FC` × 背景 `#FEFFFE` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#216DFC`、4.55:1）を使う。 - `button-cta` は文字 `#FFFFFF` × 背景 `#E4540C` のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE4C0B`、4.5:1）を使う。 - `pill-heading` は文字 `#4663A7` × 背景 `#AAEDF6` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#4562A5`、4.56:1）を使う。 - `cta-band` は文字 `#202020` × 背景 `#0185D0` のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#018DDD`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインタイトル | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.04em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.04em | | `headline-md` | 特長カード内の見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | 青文字のサブ見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 実績数値・見出し下の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 36px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 大見出しの下に、小さな英字ラベルを青で添える - 実績数値は本文の2〜3倍の大きさにし、単位は小さくする - 強調語だけ青色にして、文中で目立たせる - 注釈は※番号付きの小さなグレー文字でまとめる - CTAボタンの上に、斜線で挟んだ短い一言を置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦積みで、機能アイコンは 2 列にする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 特長は1つずつ大きな白カードに収め、上端に番号バッジを重ねる - 特長カードの最後に、グラデの問い合わせボタンを中央に置く - データ図解はカード内に全幅で置き、水色ピルの見出しを付ける - 同じ CTA帯を 3 回以上くり返し挿入する - FAQ はアコーディオンを縦に並べ、行の間に罫線を引く ## Elevation & Depth - 白カードは0 4px 16px rgba(30,80,180,0.08)程度の弱い影 - CTAボタンはごく薄い影のみ - FAQや一覧は影なしで罫線区切り ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 事例写真は角丸の横長矩形で切り抜く。イラストは背景なしの線画 - **セクション境界**: 特長セクションの上端を下向きの三角に切る。それ以外は直線で地色を切り替える - 番号バッジは円形にし、上に小さな「特長」ラベルを載せる - CTA帯のボタンは角丸大のピル寄りで、オレンジにする - 見出しピルは full の角丸にする - 主ボタンは角丸6px程度の横長にする ## Components - **グラデ問い合わせボタン**（`button-primary`）: 青からシアンへの横グラデに白文字を載せた横長ボタン - **資料請求枠線ボタン**（`button-outline`）: 白地に青い枠線と青文字のサブボタン - **オレンジ申込ボタン**（`button-cta`）: CTA帯のカード内に置く丸みの強いオレンジボタン - **実績数値帯**（`stat-band`）: 青グラデの帯に、月桂冠の装飾で囲んだ大きな数値を3つ並べる - **特長番号バッジ**（`number-badge`）: 青い円に白で2桁の番号を入れ、カード上端に重ねる - **特長カード**（`feature-card`）: 大きな白カード。見出しの下に青線を引き、小見出し・本文・図解を順に置く - **水色ピル見出し**（`pill-heading`）: グラフや機能パネルの上に置くピル型のラベル - **3択CTA帯**（`cta-band`）: 濃い青の帯に、アイコン・見出し・説明・ボタンを入れた白カードを3枚並べる - **FAQアコーディオン**（`faq-item`）: 円で囲んだQアイコン・質問・開閉矢印の行。回答は青丸のAで示す - **事例カード**（`case-card`）: 写真・タイトル・社名・青いタグを縦に並べた白カード ## Do's and Don'ts **Do** - 実績は数値と※注釈を必ずセットで示す - 特長は番号付きのカードで3つに整理する - グラフでは自社を濃い青、比較対象を淡い青で塗る - 線画イラストは青と白の2色を基調にする - 各特長の最後とページ途中に CTA を繰り返し置く **Don't** - オレンジをCTA以外に使わない - 写真を全面背景に敷かない - 濃い影や立体的な装飾を付けない - 明朝体や手書き書体を使わない - 青以外の色相を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値を一言で伝え、資料請求と問い合わせへ誘導する）: 左に大見出し、右に商談シーンの線画イラストを置く。下に枠線ボタンとグラデボタンを並べる 2. **実績数値帯**（利用率などの数値で信頼を示す）: 青グラデの帯に、月桂冠で囲んだ数値を3つ並べ、注釈を添える 3. **特長の目次**（3つの特長を一覧で見せる）: 番号バッジ付きの枠線カード3枚を横に並べ、ページ内リンクにする 4. **特長詳細（3つ）**（特長ごとにデータで根拠を示す）: 淡い青の地に大きな白カードを置き、グラフ・地図・比較棒グラフ・アイコン列で図解する 5. **CTA帯**（問い合わせ・見積もり・資料請求の3つの入口を示す）: 青グラデの帯に白カード3枚を並べ、オレンジボタンを置く 6. **機能・オプション**（機能の一覧を見せる）: 淡青のパネルにピル見出しを付け、アイコン付きの白タイルを並べる 7. **お客様の声**（導入事例で効果を示す）: 写真付きの事例カードを3列に並べ、タグを添える。下に枠線ボタンを置く 8. **関連サービス**（周辺サービスへ誘導する）: 循環図のイラストで全体像を見せ、その下に 2x2 のサービスカードと青ボタンを置く 9. **よくある質問**（導入前の不安を解消する）: Q/Aの円アイコンを付けたアコーディオンを罫線で区切って並べる 10. **フッター**（サイト内リンクと運営情報を載せる）: グレー地にロゴ・横並びのリンク・関連サービスのロゴを置く ## Imagery - 人物はフラットな線画イラストで描き、スーツ姿を青と白で塗る - PC画面・虫眼鏡・ハートなど、採用を連想させる小物を添える - アイコンは青い線の細いラインアイコンで統一する - データは棒グラフ・折れ線・日本地図などで単純化して図解する - 事例写真はオフィスで撮った明るい人物写真を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは特長の目次やCTAカードを3列に並べる。SPでは縦積みにする - FVはPCのテキストとイラストの左右2分割から、SPではイラストを下に回す縦積みにする - 実績数値はSPで縦積みか2列にする - グラフの2列比較はSPで1列にする - 機能アイコンはPCの4列からSPでは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-f7ac16b7`（元 LP の URL から採番） - **元 LP**: https://service.onecareercloud.jp/service/scout - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。