--- version: alpha name: Clean Blue Corporate HR SaaS LP description: 鮮やかな青を主色に、白と淡いグレーの地を交互に敷いた BtoB 採用支援サービスの LP。フラットな人物イラストと画面キャプチャを組み合わせる。角丸の白カードと青いピル型ボタンで、情報が多くても整理されて見える。 colors: primary: '#0086CF' cta: '#0185CD' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5F6FA' surface: '#FDFEFE' tint-1: '#FAFEFF' secondary: '#4591BD' tint-2: '#9DC1D4' text: '#1F2A37' text-muted: '#8D9294' line: '#F5F6FA' accent-1: '#F4E40B' dark-section: '#0086CE' cta-accessible: '#017BBE' primary-accessible: '#007CC0' text-muted-accessible: '#6D7274' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 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: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 16px 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.full}' height: 48px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px service-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px point-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 36px stat-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 180px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px cta-band: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 260px tag-chip: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px --- # DESIGN.md — 青×白の採用支援 BtoB サービス LP（Clean Blue Corporate HR SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型 - **キーワード**: 鮮やかな青・白カード・フラットイラスト・ピル型ボタン・グリッド・整理された情報 - **地の質感**: 質感のないフラットな面。淡いグレー地に白カードを浮かせる - **形**: 角丸カード（12〜16px）とピル型ボタン。円グラフやドーナツ図形も使う - **温度感**: やや寒色寄りで爽やか。黄色を差し色に入れて親しみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0086CF` | ブランド青。見出しの強調・ボタン・帯面に使う | 8% | 画素の実測 | | `cta` | `#0185CD` | 主 CTA ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白い地 | 44% | 画素の実測 | | `background-alt` | `#F5F6FA` | セクションを交互に切り替える淡いグレーの地 | 20% | 画素の実測 | | `surface` | `#FDFEFE` | グレー地に置く白カード | 10% | 画素の実測 | | `tint-1` | `#FAFEFF` | FV と図解まわりの淡い水色の地 | 3% | 画素の実測 | | `secondary` | `#4591BD` | 円グラフなどに使う中間の青 | 2% | 画素の主要色に補正 | | `tint-2` | `#9DC1D4` | 円グラフ・ドーナツに使う淡い青 | 4% | 画素の主要色に補正 | | `text` | `#1F2A37` | 見出し・本文の濃い文字 | 3% | 推定 | | `text-muted` | `#8D9294` | 注釈・補足の灰色の文字 | 1% | 画素の実測 | | `line` | `#F5F6FA` | カード枠・タグ枠の細い線 | 1% | 画素の主要色に補正 | | `accent-1` | `#F4E40B` | イラストの差し色の黄色 | 1% | 画素の実測 | | `dark-section` | `#0086CE` | 資料 DL と最終 CTA の青い帯 | 7% | 画素の実測 | | `cta-accessible` | `#017BBE` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#007CC0` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#6D7274` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレーをセクションごとに交互に置く - 青い帯面は資料 DL と最終 CTA の 2 か所だけに使う - 見出しは濃い文字にし、キーワード 1 語だけを青にする - 主ボタンは青地に白文字、サブボタンは白地に濃い文字と細い枠線 - 数字（順位・%・件数）は大きな青文字で見せる - 黄色はイラストの差し色にだけ使い、UI には使わない - `button-primary` は文字 `#FFFFFF` × 背景 `#0185CD` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#017BBE`、4.59:1）を使う。 - `point-badge` は文字 `#FFFFFF` × 背景 `#0086CF` のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#007CC0`、4.52:1）を使う。 - `stat-panel` は文字 `#0086CF` × 背景 `#FAFEFF` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#007CC0`、4.58:1）を使う。 - `tag-chip` は文字 `#8D9294` × 背景 `#F5F6FA` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6D7274`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | ゴシック | Noto Sans JP | 900 | 30px | 1.35 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.04em | | `headline-md` | カード見出し・理由の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.45 | 0.02em | | `headline-sm` | 見出し下のリード文・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文・カードの説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 見出し下の英字ラベル・STEP 番号 | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - セクション見出しは中央揃えにし、下に小さな英字の大文字ラベルを添える - 見出しのキーワードだけを青にして強調する - 数字は本文の 2〜3 倍の大きさで太字の青にする - 本文は行間 1.8 で、1 段落を 3〜4 行に収める - 全体をゴシック体で統一し、明朝体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PC はカード 3〜4 列、理由セクションは左見出し＋右カードの 2 カラム） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの上下余白は 64〜80px - カード同士の間隔は 12〜16px - 見出しブロックとコンテンツの間は 32px - ボタンはカードの下端に中央揃えで置く - 取引先ロゴは小さく横に並べ、複数段で見せる ## Elevation & Depth - 白カードは影をごく薄く（0 2px 8px rgba(0,0,0,.04)）するか、影を付けない - グレー地と白カードの明度差で奥行きを作る - ボタンには影を付けない ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 画面キャプチャと写真は角丸の四角。イラストは切り抜きで背景なし - **セクション境界**: 直線で背景色を切り替える - ボタンはすべてピル型にし、右端に白丸の矢印アイコンを付ける - 番号バッジは青い円形にする - タグは小さい角丸で、グレー地に細い文字 - STEP カードは右側を矢羽根形にして流れを表す ## Components - **主ボタン**（`button-primary`）: 青いピル型ボタン。右端に丸い矢印アイコンを付ける - **サブボタン**（`button-secondary`）: 白地のピル型ボタン。細い枠線と濃い文字、矢印付き - **セクション見出し**（`section-heading`）: 青文字の見出しの下に英字ラベルとリード文を置き、中央揃えにする - **サービスカード**（`service-card`）: 画面キャプチャ＋見出し＋説明＋ボタンを縦に並べた白カード - **理由の番号バッジ**（`point-badge`）: 小さな英字の上に 2 桁の数字を載せた青い円 - **数値パネル**（`stat-panel`）: 淡い水色の地に大きな数字とドーナツ図や表を置く - **STEP カード**（`step-card`）: 青丸の STEP 番号、イラスト、短い説明を 4 つ横に並べる - **CTA 帯**（`cta-band`）: 青い帯の中に白カードを 2 枚並べ、それぞれに資料 DL と問い合わせの導線を置く - **タグ**（`tag-chip`）: 事例カードに付ける # 付きの小さな角丸タグ ## Do's and Don'ts **Do** - 主ボタンは青のピル型にし、矢印アイコンを統一して付ける - セクションの地は白とグレーを交互に置き、情報の区切りを明確にする - 数値の実績は大きな青い数字と図形で視覚化する - フラットな人物イラストで、働く場面を具体的に描く - 資料 DL と問い合わせの 2 導線を何度も並べて置く **Don't** - 青以外の強い色をボタンや見出しに使わない - グラデーションや装飾的なテクスチャを入れない - 角のとがった四角いボタンにしない - 明朝体や手書き風の書体を混ぜない - カードに強い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（価値を一言で伝え、資料 DL へ誘導する）: 左に大きなコピーと 2 つのボタン、右に画面キャプチャを人物イラストで囲む。地は淡い水色 2. **導入企業ロゴ**（実績の規模で信頼を示す）: 社数を青い数字で見せ、小さなロゴを 2 段に並べる 3. **提供価値の全体像**（サービスが生む変化を図で示す）: 青系の 4 分割リング図の周りに人物イラストを配置する 4. **サービス一覧**（提供メニューを網羅して見せる）: グレー地に、上段 3 枚・下段 4 枚の白カードを置き、それぞれにボタンを付ける 5. **活用シーン**（課題別・規模別に自分ごと化させる）: イラスト付きのタイルカードを 3 列に並べ、小見出しで分類する 6. **選ばれる理由**（数値の根拠で差別化する）: 左に見出しとデバイス画像、右に番号付きカード 3 枚。各カードに数値パネルを付ける 7. **資料ダウンロード**（リードを獲得する）: 青い帯に白カードを 2 枚置き、資料の画像とボタンを載せる 8. **導入事例**（具体的な成功例を見せる）: 写真付きカードを 3 列に並べ、企業名・タグ・ボタンを載せる 9. **セミナー・お役立ち資料**（継続接点を作る）: 2 カラムに、サムネイル付きのリスト型カードを並べる 10. **導入までの流れ**（導入の不安を減らす）: STEP カードを 4 つ並べ、その下に運用サポートの一覧をチェック付きで置く 11. **お問い合わせ CTA**（相談へのハードルを下げる）: 青い角丸ボックスに白いボタンを 2 つとイラストを置く 12. **お知らせ**（最新情報を伝える）: 日付・カテゴリタグ・タイトルを 1 行ずつのリストで並べる 13. **最終 CTA**（最後のコンバージョン）: 青い帯にコピーを置き、資料 DL と問い合わせの白カードを 2 枚並べる ## Imagery - スーツ姿の人物を、青・白・黒・黄で描いたフラットなイラストにする - 人物は全身で描き、PC や吹き出しなどの小物と組み合わせる - サービスの画面キャプチャは PC とスマホのモックアップに入れる - 事例写真はオフィスで撮った明るい実写にする - 資料の表紙は少し傾けて重ねて見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカードを 1 列に積み、活用シーンのタイルは 2 列にする - FV はコピー→ボタン→イラストの順に縦に並べる - 理由セクションは見出し→カード→数値パネルを縦に並べる - ヘッダーのナビはハンバーガーメニューにまとめ、資料 DL ボタンは常に表示する - STEP は縦に並べ、矢羽根の向きを下向きにする ## 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-f7cff2da`（元 LP の URL から採番） - **元 LP**: https://service.onecareer.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。