DESIGN.md — 青グラデ×オレンジCTAの採用支援SaaS LP（Blue Gradient Corporate Recruiting SaaS LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか
• キーワード: 青グラデーション・オレンジCTA・白カード・データ図解・資料請求フォーム・ノートPCモックアップ
• 地の質感: フラットな単色面に、FV と CTA 帯だけ斜めに光が入る青グラデーション。カードは薄い影。
• 形: 角丸 8〜16px のカード、ピル型ボタン、平行四辺形のタグ、下向き山形のステップ区切り。
• 温度感: やや寒色寄り。青と白が中心で、オレンジと黄色が暖色アクセント。

Colors

• 地は白・淡い水色・ライトグレーを交互にしてセクションを分ける。
• FV と途中の CTA 帯は、左上が明るく右下が濃い青の斜めグラデーションにする。
• 主 CTA はオレンジ、サブ CTA（デモ申込）は青にして 2 色で役割を分ける。
• 見出しの中のキーワードだけ primary の青にし、残りは墨色。
• 濃紺カードの上の文字は白にする。
• グラフは青系が自社、黄〜ベージュ系が他社と色を分ける。

Typography

• 見出しは太字ゴシックで、キーワードを青にして下線を引く。
• セクション見出しの下に青の短い下線（幅 60px 前後）を置く。
• 数字の実績は 40px 前後の極太にし、単位は小さく縦に添える。
• 番号は斜体の英字（CASE / Feature）で小さなラベル＋大きな数字の二段にする。
• 本文は 13px・行間 1.75 で左揃え。リード文は中央揃え。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。チャートや比較表は全幅で使う。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 16〜24px の余白をとって中央に置く。
• CTA ボタンは中央揃え、幅は画面の 60% 前後。
• CTA 帯は白い内箱の中で上が資料・下がデモの 2 段構成。
• セクション見出しは中央揃えで、上下に 32px 以上の余白をとる。
• フォームはラベルを上、入力欄を全幅に置き、部署・役職と姓・名は 2 列にする。

Elevation & Depth

• 白カードは薄く広い影（0 4px 16px rgba(0,40,100,0.08)）。
• フォームカードの右下に、青グレーのずれた板を重ねて奥行きを出す。
• 濃紺カードは白の細い内枠線で縁取る。
• ボタンは影なしのフラット。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真はカード内で角丸 4px の横長長方形。人物は円形に切り抜く。
• セクション境界: 基本は直線。ステップ間は下向きの山形（シェブロン）で区切る。
• ボタンは完全なピル型で、右端に「>」を付ける。
• FV のタグは平行四辺形の白地＋紺文字。
• カード上部の英字ラベルは小さな白い角丸タブ。
• グラフの棒は上だけ角丸。

Components

• オレンジのピル CTA（button-primary）: 資料請求・送信に使う。右端に > 矢印。
• 青のピルボタン（button-secondary）: 無料デモ申込などのサブ CTA。白文字＋ > 矢印。
• 資料請求フォームカード（lead-form-card）: 白の角丸カード。上端に紺の見出しタブ（無料の文字を黄色に）、必須は赤。
• 月桂樹の実績数値（stat-laurel）: 金色の月桂樹で左右を囲んだ大きな数字。下に時点の注釈を付ける。
• 課題カード（case-card）: 白カードに斜体の CASE 番号、写真、2 行の課題文（キーワードは青）。
• 濃紺サービスカード（service-dark-card）: 濃紺地に白い内枠。上部に英字タブ、見出し、画像、白文字の説明。
• 紺の見出しラベル（label-chip）: グラフの項目名を、紺の角丸ボックスに白文字で入れる。
• ステップカード（step-card）: 淡い色の面に白い STEP タブ、紺の線画アイコン、説明文。下端は山形。
• FAQ アコーディオン（faq-row）: 「Q.」付きの青文字の質問と右端のシェブロン。下に青い罫線。

Do's and Don'ts

Do - CTA ボタンは数セクションごとに繰り返し、オレンジ（資料）と青（デモ）を組で出す。 - 実績・優位性は円グラフ・棒グラフ・比較表で見せる。 - 見出しの中のキーワードだけを青にして強調する。 - 画面キャプチャはノートPCのモックアップに入れて見せる。 - 淡い水色と白の地を交互にして、セクションの区切りをはっきりさせる。

Don't - オレンジを CTA 以外の大きな面に使わない。 - 角ばったボタンや影の強いボタンにしない。 - 明朝体や手書き書体を混ぜない。 - 濃紺面の上に墨色の文字を置かない。 - 写真を暗く加工しすぎない（明るいオフィス調を保つ）。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（価値提案と実績で信頼をつかむ）: 青グラデの地に白と黄の極太キャッチ、平行四辺形のタグ 3 つ、PC モックアップ、月桂樹付きの実績数値 2 つ。
2. 資料請求フォーム（すぐに資料請求してもらう）: FV の下に白い角丸フォームカードを重ね、オレンジの送信ボタンを置く。
3. 導入企業ロゴ（社会的証明）: グレー地にロゴを 2 段並べて横に流す。
4. アプローチ紹介（サービスの全体像を示す）: 中央揃えの見出し（キーワードは青＋下線）、リード文、オレンジと青のボタン 2 つ、PC モック。
5. 悩みの提起（課題に共感してもらう）: 人物イラストと「?」を添えた大見出し。CASE 番号付きの写真カードを 3 枚縦に並べ、青い下矢印でつなぐ。
6. 解決策（サービス紹介）（3 つの機能を見せる）: 濃紺カードを 3 枚。英字タブ、画像、白文字の説明。
7. 選ばれる理由（他社との差を見せる）: 白カードの中に紺ラベル＋棒グラフを 3 組。自社は青、他社はベージュ。
8. 中間 CTA（資料とデモへ誘導する）: 青グラデの帯の中に白い箱を置き、上段は冊子画像＋オレンジボタン、下段は PC モック＋青ボタン。吹き出し風のスラッシュ付き小見出し。
9. 特長（Feature 01〜03）（データと支援体制で裏付ける）: 斜体の Feature 番号、円グラフ、比較表、イラスト、人物の円形写真を白カードで見せる。
10. 導入までの流れ（申込後の不安をなくす）: 淡い青と淡い緑の面を山形で区切る STEP カードを 3 つ。線画アイコン付き。
11. 導入事例（具体的な成果を見せる）: 写真＋社名（青）＋成果の要約を入れたカードを横スライダーにし、左右に青い丸矢印。
12. よくある質問（疑問を解消する）: Q. 付きのアコーディオンを青い罫線で区切る。
13. 資料ダウンロード（最終コンバージョン）: グレー地に冊子画像、チェックリスト、FV と同じフォームカード。
14. お問い合わせ・フッター（目的別の窓口を示す）: 青グラデ地に白カードを 3 枚（アイコン・説明・オレンジボタン）。その下にグレーのフッター。

Imagery

• スーツ姿の人物を、明るいオフィスで自然光の中で撮った写真。顔は写さず手元や後ろ姿にして、課題を表す。
• 管理画面のスクリーンショットをシルバーのノートPCモックアップに入れる。
• 青系のフラットなアイソメトリック風イラスト（人物・グラフ・データベース）。
• 担当者の写真は円形に切り抜き、淡い黄・灰・緑の円の背景に役割ラベルを添える。
• 紺の線画アイコン（書類・握手・会議）。
• 資料の冊子を斜めに 2 冊重ねたモック画像。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の右にフォームを固定配置し、左にキャッチと実績を置く 2 カラムにする。
• 課題カード・サービスカード・STEP・お問い合わせカードは PC で 3 列に並べる。
• 棒グラフ 3 組は PC で 1 枚のカードに横並びにする。
• 中間 CTA は PC で資料とデモを左右 2 列にする。
• PC ではヘッダーにナビとオレンジ・白の 2 ボタンを置く。SP では右上に小さなオレンジボタンだけ置く。
• 導入事例のスライダーは PC で 5 枚程度を同時に表示する。

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 行書くと起動時に読み込まれる。