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

• 色は白地とロイヤルブルー1色を基本とし、強調はすべて青で行う
• 見出しは青、本文は青みのあるダークグレーにする
• セクションの区切りは白と#F7F7F7の地色の交互切り替えで表す
• 濃い色の面を使うのは概念図セクションの白→青→濃紺グラデーションだけにする
• 金は受賞バッジだけに使い、ほかの装飾には使わない
• サブボタンは白地に青の線と青文字にする
• button-primary は文字 #FFFFFF × 背景 #1D74F5 のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#166FF5、4.54:1）を使う。

Typography

• セクション見出しは、青い和文の下に小さな青い英字サブタイトルを置く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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。