--- version: alpha name: Clean Blue Gradient Recruiting SaaS LP description: 白地にロイヤルブルー1色で組んだ、端正なBtoB採用SaaSのLP。ファーストビューは人物写真、続いて深海グラデーションの氷山図で概念を説明する。円形の線囲みで機能を3つ並べ、グレー地のカードで導入事例を見せ、細い罫線のFAQで締める。 colors: primary: '#2869D0' cta: '#1D74F5' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F7F7F7' surface: '#F4F4F4' text: '#3E3E3E' text-body: '#4C5766' line: '#EBEBE9' dark-section: '#124A9D' tint-1: '#689AD8' on-dark: '#FFFFFF' accent-1: '#C9A227' cta-accessible: '#166FF5' typography: display: fontFamily: Noto Sans JP fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em 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.9 letterSpacing: 0.03em accent: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 80px 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.md}' height: 48px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px section-title: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px feature-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 230px feature-panel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 190px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 300px faq-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 43px contact-split: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 220px logo-strip: backgroundColor: '{colors.background}' height: 90px --- # DESIGN.md — 白×ロイヤルブルーの採用SaaS LP（Clean Blue Gradient Recruiting SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、清潔・爽やか - **キーワード**: ロイヤルブルー単色・白基調・氷山グラデーション・円形線囲み・英字サブ見出し・PC画面モック - **地の質感**: フラットで装飾は少ない。概念図のセクションだけ、白から濃紺へ縦グラデーションをかけて奥行きを出す - **形**: 角丸は小さめ（4〜8px）。機能紹介は正円の線囲み。カードは薄い影つきの角丸 - **温度感**: 青寄りの涼しく知的な温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2869D0` | 見出し・リンク・ブランド色 | 3% | 画素の実測 | | `cta` | `#1D74F5` | 主CTAボタン面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地 | 58% | 画素の実測 | | `background-alt` | `#F7F7F7` | 事例・問い合わせの地 | 13% | 画素の実測 | | `surface` | `#F4F4F4` | 特徴画像の背景パネル | 3% | 画素の実測 | | `text` | `#3E3E3E` | 小見出し・事例タイトル | 1% | 画素の実測 | | `text-body` | `#4C5766` | 本文 | 2% | 画素の主要色に補正 | | `line` | `#EBEBE9` | FAQ罫線・カード境界 | 0% | 画素の主要色に補正 | | `dark-section` | `#124A9D` | 氷山図の濃紺グラデ下端 | 4% | 画素の実測 | | `tint-1` | `#689AD8` | グラデーション上部の淡い青 | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 濃い地の上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#C9A227` | 受賞バッジの金 | 0% | 推定 | | `cta-accessible` | `#166FF5` | AA を満たす補正値（計算） | | 計算 | - 色は白地とロイヤルブルー1色を基本とし、強調はすべて青で行う - 見出しは青、本文は青みのあるダークグレーにする - セクションの区切りは白と#F7F7F7の地色の交互切り替えで表す - 濃い色の面を使うのは概念図セクションの白→青→濃紺グラデーションだけにする - 金は受賞バッジだけに使い、ほかの装飾には使わない - サブボタンは白地に青の線と青文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#1D74F5` のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#166FF5`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな実績数字 | 欧文サンセリフ | Noto Sans JP | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（青・中央） | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em | | `headline-md` | 円内の機能名・リード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | 特徴の小見出し・事例タイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.03em | | `accent` | 見出し下の英字サブタイトル | 欧文サンセリフ | Noto Sans JP | 700 | 9px | 1.4 | 0.02em | | `label-button` | ボタンラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | | `note` | FAQの質問・フッターリンク | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | - セクション見出しは、青い和文の下に小さな青い英字サブタイトルを置く2段構成にする - 書体はゴシック1系統だけを使い、太さで階層をつける - 本文は小さめにして行間を広く取り（1.9前後）、読みやすくする - 数字の実績は極太で大きく見せ、単位は小さく添える - FAQの質問文には頭に「Q.」を付け、細めの字で並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC では特徴・事例を 3 カラムにする - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算） - 見出しは中央揃え、本文ブロックは左揃えにする - セクション間は広めに空け、余白で区切る - 円形の機能紹介は SP で縦に積み、円同士の間に細い縦線を入れる - 特徴は「画像パネル→青い小見出し→本文」を1セットにして縦に3つ並べる - 事例カードは写真・ロゴ・社名・タイトルの順に縦積みする ## Elevation & Depth - 事例カードと問い合わせカードだけに、ごく薄いドロップシャドウを付ける - ボタンには影を付けず、フラットにする - PC画面モックは軽い影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸の小さい長方形で切る。人物のアップは正円で切り、太い青枠で囲む - **セクション境界**: 直線で区切り、地色の切り替えで表す。概念図だけは上端を白から青へのグラデーションでなじませる - ボタンは角丸8px前後の長方形にし、ラベルの右に→を付ける - 機能は青い細線の正円の中に、太字の青文字を置く - FAQは上下の細い罫線で区切り、右端に＋を置く ## Components - **資料請求ボタン**（`button-primary`）: 青い面に白い太字、右に→。中央に配置する - **サブボタン**（`button-outline`）: 白地に青の1px線と青文字、→付き。一覧へのリンクや問い合わせに使う - **和英2段見出し**（`section-title`）: 青い太字の和文見出しの下に、小さい英字サブタイトルを中央に置く - **円形機能バッジ**（`feature-circle`）: 直径約230pxの青い線の円に、機能名を2〜3行で入れる - **特徴画像パネル**（`feature-panel`）: 薄いグレーの面に、UIの図解や数値の青い丸バッジを載せる - **導入事例カード**（`case-card`）: 白いカードに、写真・企業ロゴ・青い社名・太字タイトルを入れる - **FAQアコーディオン行**（`faq-row`）: 「Q.」付きの質問と右端の＋を、細い罫線で区切って並べる - **2択問い合わせカード**（`contact-split`）: 白いカードの中を左右2つに分け、それぞれ見出しとボタン（塗りと線）を置く - **導入企業ロゴ帯**（`logo-strip`）: FVの直下に、企業ロゴを横スクロールで並べる ## Do's and Don'ts **Do** - 青は1色に絞り、見出し・ボタン・線を統一する - 見出しには必ず英字サブタイトルを添える - 余白を広く取り、情報を整理された印象で見せる - 製品UIはPC画面モックに入れ、人物の丸切り抜きと組み合わせる - 数値の実績は青い丸バッジで目立たせる **Don't** - 暖色系やほかの強調色を足さない - ボタンをピル型にしたり、グラデーションをかけたりしない - 濃い色の面を複数のセクションで多用しない - 装飾的な手書き書体や明朝体を混ぜない - カードに強い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績の数値と価値提案を伝える）: ビル街を背景にした人物写真に、月桂樹の飾りで囲んだ大きな数字と白い見出しを重ね、受賞バッジを添える 2. **導入企業ロゴ**（信頼を示す）: 白地に有名企業のロゴを横に並べる 3. **サービス概要**（サービスとは何かを説明する）: 英字ラベル、青い2行リード、本文、CTA、PC画面モックの順に並べる 4. **概念説明**（顕在層と潜在層の違いを図で見せる）: 白→青→濃紺の縦グラデーションに氷山の図を置き、点線で層を分けて白文字のラベルを付ける 5. **実現できること**（提供価値を3つに要約する）: 青い線の正円を3つ縦に並べ、その下にまとめの見出しと本文を置く 6. **特徴**（3つの強みを具体的に説明する）: グレーの画像パネル、青い小見出し、本文を3セット並べ、最後にCTAを置く 7. **導入事例**（社会的な証明を示す）: グレー地に、写真付きの白カードを3枚並べ、線のボタンで一覧へ誘導する 8. **よくある質問**（導入前の不安を解消する）: 罫線で区切った約11行のアコーディオンにする 9. **問い合わせCTA**（資料請求と相談の2つの動線を用意する）: グレー地に青い大見出しを置き、白カードを左右に分けて塗りボタンと線ボタンを並べる 10. **フッター**（ブランドと認証を示す）: ロゴ、一行の説明、認証バッジ、規約リンクを並べる ## Imagery - 人物写真はビジネスカジュアルの男女を自然光で撮り、背景はビル街や緑を浅いピントでぼかす - 人物は正円で切り抜き、太い青枠で囲む - 製品UIは白基調のダッシュボードをノートPCのモックに入れ、検索条件のチップを重ねる - 概念図は、ローポリゴン調の半透明な白い氷山を深い青の中に描く - 図解は、グレーの四角い枠で表したプロフィール画面に、青い丸の数値バッジを添えるフラットなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではヘッダーにナビゲーションと右上の青いCTAを表示する - PCのFVはテキストを左、人物を右に置き、CTAもFVの中に入れる - PCでは概要と概念図を左右2カラムにする（図と文を左右に分ける） - PCでは円形機能・特徴・事例を横3カラムに並べる - FAQはPCでも中央の狭い幅のまま表示する - 問い合わせカードはPCで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-4107d5b0`（元 LP の URL から採番） - **元 LP**: https://www.autohunt.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。