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

• 地は白と淡い青灰を交互に置き、白カードを浮かせる
• 見出しの強調語や番号バッジは 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

• 大見出しの下に、小さな英字ラベルを青で添える
• 実績数値は本文の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

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

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