--- version: alpha name: Clean Royal Blue B2B Recruiting SaaS LP description: 白とライトグレーを地にして、濃いロイヤルブルー1色で信頼感を出す BtoB 採用サービスの LP。淡い水色グラデーションの FV と CTA 帯で区切り、課題→解決ブロックを青い線の枠で左右交互につなぐ。線画アイコンと UI モック画像で情報を整理し、お問い合わせと資料請求の 2 ボタンをくり返し置く。 colors: primary: '#1544B6' cta: '#1544B5' on-cta: '#EFFAFE' background: '#FFFFFF' background-alt: '#F7F7F7' tint-1: '#D4E9FE' tint-2: '#F2F5FE' text: '#080808' text-body: '#3A3A3A' secondary: '#212121' dark-section: '#071C89' accent-1: '#CFEAFE' marker: '#F5E66B' line: '#1A3682' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px 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: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Poppins fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 32px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px problem-frame: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 760px label-problem: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 48px case-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 700px flow-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 650px step-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px feature-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 160px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px --- # DESIGN.md — 白×ロイヤルブルーの採用支援SaaS LP（Clean Royal Blue B2B Recruiting SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、クール・先進的 - **キーワード**: ロイヤルブルー単色・淡い水色グラデ・線画アイコン・課題と解決・UIモック・2択CTA - **地の質感**: フラットな面に淡いグラデーションと薄いネットワーク模様。影は弱めのドロップシャドウのみ - **形**: 角丸小〜中の長方形カード、大きな角丸の青い線枠、円形の特長バッジ - **温度感**: やや寒色寄りで、落ち着いた信頼感がある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1544B6` | ブランド青・見出し強調・ボタン面 | 7% | 画素の実測 | | `cta` | `#1544B5` | 主CTA（お問い合わせ）ボタン | 2% | 画素の実測 | | `on-cta` | `#EFFAFE` | CTAボタン上の文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 49% | 画素の実測 | | `background-alt` | `#F7F7F7` | コンセプト・FAQセクションの地 | 10% | 画素の実測 | | `tint-1` | `#D4E9FE` | FV・CTA帯の淡い水色 | 7% | 画素の実測 | | `tint-2` | `#F2F5FE` | 事例カード・ステップカードの地 | 5% | 画素の実測 | | `text` | `#080808` | 見出しの文字 | 2% | 画素の実測 | | `text-body` | `#3A3A3A` | 本文 | 3% | 推定 | | `secondary` | `#212121` | 課題ラベルの黒い面 | 0% | 画素の実測 | | `dark-section` | `#071C89` | フローの最終段・成果ボックス | 1% | 画素の実測 | | `accent-1` | `#CFEAFE` | FAQ英字・フロー中間段の明るい青 | 1% | 画素の実測 | | `marker` | `#F5E66B` | 成果文中の黄色強調文字 | 0% | 推定 | | `line` | `#1A3682` | 課題ブロックの枠線・区切り線 | 0% | 画素の主要色に補正 | - 地は白とライトグレーを交互に置き、FVとCTA帯だけ淡い水色のグラデーションにする - 強調色はロイヤルブルー1色に絞り、解決見出し・小見出し・ボタン・線に使う - 課題ラベルだけ黒の面、解決ラベルは青い線の白抜きにして対比させる - 工程フローは明るい青から濃紺へ段階的に濃くする - 黄色は濃紺の上の成果の一文だけに使う - サブCTAは白地に青い枠と青い文字 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.6 | 0.02em | | `headline-md` | 解決の青い見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | セクションの青い小ラベル・カード見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `note` | 調査の注釈・※印 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字ラベル（PROBLEM・STEP・FAQ・CASE） | 欧文サンセリフ | Poppins | 700 | 14px | 1.2 | 0.05em | | `label-button` | CTAボタンの2段の文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | - 見出しは太いゴシックで黒、要点だけ青にする - 本文は行間を2.0前後と広めにとる - セクション見出しの上に、青い小ラベルを日本語で置く - 英字ラベルは幾何学的なサンセリフの太字にする - CTAは小さい補足文と大きいボタン名の2段組 - 数字（-90%・01など）は大きく、中抜きの数字も使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長バッジは 2×2 グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約18px - 課題ブロックは大きな角丸の青い線枠で囲み、左右交互にS字でつなげる - 枠の端に縦書きのPROBLEM番号タブを付ける - FV・中盤・最後に同じ2ボタンCTAを置く - セクションの間は細い青線で区切ることもある ## Elevation & Depth - CTAボタンとFAQカードには弱いドロップシャドウ（0 2px 6px 程度の青灰色） - 事例・ステップカードは影なしのフラットな淡い面 - FVのPCモックには自然な影 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 32px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物写真はFV・CTA帯の背景に半透明でなじませる - **セクション境界**: 直線。背景色の切り替えか細い青線で区切る - ボタンは角丸4px前後の長方形 - FAQとステップのカードは角丸10px - 特長は青い線の正円に、チェックアイコンを付ける - 課題枠は角丸32px程度の線のみ ## Components - **お問い合わせボタン**（`button-primary`）: 青い面に小さい補足文と大きいボタン名の2段。右端にサポート担当の線画アイコン - **資料請求ボタン**（`button-secondary`）: 白い面に青い枠と青い文字。右端に本のアイコン - **課題・解決ブロック**（`problem-frame`）: 青い線の角丸枠。縦書きのPROBLEM番号タブ、黒い課題ラベル、白抜きの解決ラベル、本文、図解 - **課題ラベル**（`label-problem`）: 黒い正方形に白い文字。隣にグレーの課題文 - **導入事例カード**（`case-card`）: 淡い青のカードに、英字のCASE番号・チェック付きタグ・写真・グレーの課題欄・濃い青の成果欄。左右に矢印を置くスライダー - **支援工程フロー**（`flow-table`）: 左に縦書きの工程名を、矢羽根形で淡い青から濃紺へ。右に青い丸の箇条書き - **導入ステップ**（`step-card`）: 淡い青のカードに、中抜き数字・線画アイコン・期間タグ・青い見出し。カードの間はシェブロンでつなぐ - **プラン特長の円**（`feature-circle`）: 青い線の正円の中に、チェックアイコンと、黒い前置き＋青い太字の要点 - **FAQアコーディオン**（`faq-item`）: 白いカードに影。左に青いQ、右に＋アイコン ## Do's and Don'ts **Do** - 色はロイヤルブルーとその淡い色に絞る - アイコンは青い単色の線画にそろえる - 課題と解決をラベルで対比させ、1ブロック1テーマにする - 2つのCTAを縦に並べ、ページ内で3回くり返す - 数値やNo.1の主張には注釈を小さく添える **Don't** - 暖色やビビッドな多色を使わない - ピル型や丸すぎるボタンにしない - 影を強くしたり立体的な装飾を入れたりしない - 本文の行間を詰めない - 写真をFVやCTA帯の主役にして文字を読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と実績を一目で伝え、すぐ問い合わせへ導く）: 淡い水色グラデにネットワーク模様。極太の黒見出し、金の月桂冠のNo.1バッジ、PCのUIモック、注釈、2ボタン 2. **導入企業ロゴ**（社会的な信用を示す）: 白い地に企業ロゴを2段で横に流す 3. **サービス概要**（仕組みを図で説明する）: グレーの地。ロゴ入りの見出しと、青い箱の4機能・企業と学生の人物イラストのマッチング図 4. **課題と解決**（よくある悩み4つに解決策を示す）: 青い線の角丸枠を左右交互につなぎ、PROBLEM番号タブ・ラベル・図解を置く 5. **中間CTA**（興味を持った段階で行動してもらう）: 人物写真が淡くなじむ水色の帯に、見出しと2ボタン 6. **導入事例**（成果の実例で納得させる）: スライダー式のケースカード。課題をグレー、成果を濃い青で示す 7. **サポート体制**（手厚い伴走支援を示す）: 段階的に濃くなる青の工程タブと、箇条書きの表 8. **導入ステップ**（始めやすさを伝える）: 3つのステップカードをシェブロンでつなぎ、期間タグを付ける 9. **料金プラン**（プランの特長と見積もりへ導く）: 2×2の円形特長と、淡い青の見積もり依頼ボタン 10. **よくある質問**（不安を取り除く）: グレーの地。淡い青の英字FAQと、影付きのアコーディオンカード 11. **クロージングCTA**（最後のひと押し）: FVと同じ水色の地に、人物写真・ロゴ入りの見出し・2ボタン ## Imagery - アイコンは青単色の線画。人物・書類・PC・吹き出しを使う - 説明図はフラットなイラストで、スーツの人物を青と紺で描く - 製品画面はノートPCのモックにUIを入れて見せる - ビジネスパーソンの笑顔の写真を、水色の地に半透明でなじませる - 背景には人物アイコンをつないだネットワーク模様を薄く入れる - No.1の表現には金色の月桂冠を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは、FVを左に見出しとボタン、右にモックの2カラムにする - PCの課題ブロックは、本文と図解を左右に並べ、左右交互に入れ替える - PCの工程フローは横向きの矢羽根の5列にする - PCのステップは3列、料金の特長円は4列で横に並べる - PCのCTA帯は2ボタンを横に並べる - PCの本文幅は約800〜900pxで中央にそろえる ## 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-09ed792a`（元 LP の URL から採番） - **元 LP**: https://biz.techoffer.jp/lp/service4_v2/? - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。