DESIGN.md — 藍紫グラデと黒の採用支援SaaS LP（Indigo Gradient HR SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 藍→紫グラデーション・黒ボタン・英字ラベル見出し・透かし英字・薄グレー地・SaaS画面モック
• 地の質感: フラットな面に、ぼかした藍紫のグラデーションと柔らかい影のカードを重ねる
• 形: 角丸が小さい四角カードと黒い四角ボタン、黒丸の矢印アイコン
• 温度感: クールで知的。紫が少し柔らかさを足す

Colors

• 白とごく薄いグレー(#ECF0F1)のセクションを交互に並べる
• 藍→紫のグラデはファーストビュー、CTA枠、製品紹介の上部だけに使う
• 主ボタンはグラデにせず黒の面に白文字
• 実績数値やメディア紹介は黒帯で全幅にし、数値の下に青→紫のグラデ線を引く
• 見出しの強調語は青紫の文字にする
• バッジは受付中ならオレンジ、アーカイブなら薄紫

Typography

• 見出しの上に、青紫の丸点＋小さな英字ラベルを置く
• 見出しの右後ろに、極薄の大きな英字を透かしで重ねる
• 特長は青紫の 01〜05 の番号を見出しの上に置く
• 本文は左揃え、行間 1.8 で詰めない
• 実績数値は縦長の太い欧文書体で、%だけ小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴ・カードは横スクロール、アイコン特長は 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 16px でそろえる
• セクションは背景色を切り替えて区切る
• リストは上下に細い区切り線を引く
• 一覧への導線として、各セクションの最後に中央寄せで『一覧を見る＋黒丸矢印』を置く
• CTA 枠はグラデ背景の上に白い箱を重ね、少し内側に入れて縁取りに見せる

Elevation & Depth

• 白カードには薄く広い影を付ける(0 4px 16px rgba(0,0,0,.08))
• FAQ の行は白い面に弱い影
• 黒帯とグラデ帯は影なしのフラット

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形、事例写真は角丸なしの長方形、製品はノートPCモックアップに収める
• セクション境界: 直線で背景色を切り替える
• 主ボタンは角丸 4px の黒い四角
• サブボタンは白いピル型
• 矢印ボタンは直径 40px の黒丸
• ラベルバッジは角を立て、青→紫のグラデ

Components

• 黒の主CTA（button-primary）: アイコン付きの全幅の黒ボタン。資料請求・問い合わせに使う
• 白ピルのサブボタン（button-sub-pill）: FV 上で 2 つ横に並べる白いピル。外部リンクアイコン付き
• 一覧を見るリンク（link-arrow-circle）: 太字テキストの右に黒丸の矢印を置く
• 英字ラベル見出し（section-label）: 丸点・英字ラベル・日本語見出しの組み合わせ。右に透かし英字を重ねる
• 頭文字の縦カラム（pillar-columns）: 英字の頭文字を5本の縦長カラムに並べ、青→紫に色を変えていく。白アイコン付き
• タグ付き機能カード（feature-tile）: 左上にグラデの英字タグを付けた白カード。中央にアイコンと短い説明
• 実績数値（stat-block）: 黒地に巨大な白い数値と、その下の青→紫グラデ線と説明
• グラデ縁CTAボックス（cta-box）: グラデ帯の上の白い箱に、見出し・一言・黒ボタン2段を入れる
• FAQ行（faq-row）: 白い行の左に Q と縦線、右に＋アイコン
• サムネ付きリスト（list-item-thumb）: 左にサムネ、右に状態バッジ・タイトル・日時を並べ、区切り線で分ける

Do's and Don'ts

Do - 見出しには必ず英字ラベルと透かし英字を添える - グラデは藍→紫の一方向にそろえる - 主CTAは黒、強調文字は青紫に限る - 製品はノートPCやスマホのモックで見せる - セクション末に一覧への導線を置く

Don't - CTA ボタンを原色やグラデにしない - 暖色を大きな面に使わない（バッジ程度にとどめる） - 大きな角丸や丸みの強い書体を使わない - 本文を中央揃えで長く続けない - 装飾的な区切り（波形など）を入れない

Page Structure

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

1. ファーストビュー（サービスの価値と主CTAを示す）: 藍紫グラデの背景に白の見出し、大きなロゴ、黒の資料請求ボタン、白ピル2つ、PC画面モック
2. 導入企業ロゴ（実績で信頼を得る）: 白地にロゴを2段並べ、導入社数の注釈を添える
3. サービス概念の説明（カテゴリの定義を伝える）: グレー地に英字ラベル見出しと本文、マルチデバイスのモック
4. 必要性（導入理由を示す）: グラデのアイコンと太字の短文を4行、区切り線で並べる
5. できること（特長）（機能を体系的に見せる）: 頭文字の縦カラム、01〜05 の番号付き特長、機能カード、図解やグラフ
6. サポート体制（運用の負担が少ないことを示す）: 円形の背景に置いたフラットイラストと中央揃えの短文を、区切り線で3つ並べる
7. 実績数値（効果を数字で示す）: 黒帯に巨大な数値とグラデ線
8. 中間CTA（資料請求・問い合わせを促す）: グラデ縁の白い箱に黒ボタン2段
9. 導入事例（社会的証明）: 写真付き白カードの横スクロール
10. セミナー・資料一覧（見込み客の接点を増やす）: サムネ付きリストとバッジ
11. オウンドメディア紹介（専門性を伝える）: 黒帯にグラデ文字のロゴと記事カードの横スクロール
12. よくある質問（不安を解消する）: 白い FAQ 行の開閉式アコーディオン
13. 関連サービス（他サービスへ誘導する）: グラデ帯の画面モックに白カードを重ねる
14. 最終CTA（最後のひと押し）: 藍色の帯に白い大見出し、白い箱に黒ボタン2段

Imagery

• SaaS の管理画面をノートPC・スマホのモックに入れ、少し俯瞰で見せる
• 人物はスーツやオフィスカジュアルの自然な笑顔。円形に切り抜く
• 紫・黄・ピンクのフラットなイラストで人物を描く。背景は白い円
• アイコンは青→紫グラデの線と面の組み合わせ
• 背景は藍から紫のぼかしグラデで、光が滲むように見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左にテキスト、右にモックの2カラムにする
• PC は見出しを左、本文や図を右に置く2カラム構成が多い
• PC の必要性アイコンは4列横並び、サポートは3列
• PC では実績数値を横に2つ並べ、CTA は見出しとボタンを左右に分ける
• 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 行書くと起動時に読み込まれる。