DESIGN.md — 青グラデと波形の人事評価SaaS LP（Blue Gradient Cloud HR SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: 青グラデーション・波形の区切り・白カード・アイソメトリックイラスト・管理画面モック・2つのCTA
• 地の質感: フラットな面に青のグラデーションをかける。薄い格子柄の背景を少し使う。
• 形: 角丸カード、ピル型ボタン、セクション境界は大きな波形の曲線
• 温度感: 寒色寄りで、すっきりとした信頼感

Colors

• 地は白・薄い灰青・青グラデの3種類を交互に使う
• 青グラデ面の上には白カードを置き、濃紺の文字で読ませる
• ピンク赤は「無料」バッジと数字の強調だけに使う
• 黄色はマーカーと、青地の上で目立たせたい短い言葉にだけ使う
• 主CTAは青グラデのピル型、サブCTAは白地に青い枠線
• 濃い青のセクションは連携やFAQなど後半に置く
• button-primary は文字 #FFFFFF × 背景 #238CD4 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1F7BBA、4.56:1）を使う。
• badge-free は文字 #FFFFFF × 背景 #E8195A のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E71759、4.5:1）を使う。

Typography

• 見出しは中央揃えにし、下に短い青の線を置く
• 大事な数字は色を変えて大きくする（青やピンク赤）
• ボタンは小さい前置きの1行と大きい行動の1行の2段で組む
• 本文は14pxで行間を広めにとり、1ブロックは4行前後にする
• 青地の上の見出しは白文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは2列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 機能紹介は画像と文章を左右交互に置き、SPでは縦に積む
• アイコンカードはPCで4〜5列、SPでは2列
• CTAは資料請求と料金シミュレーションの2つを並べ、セクションごとに入れる
• 導入事例は横スクロールのカルーセルにする
• フォームは1列で、項目名の横に必須バッジをつける

Elevation & Depth

• 白カードには薄くぼかした影（0 4px 12px rgba(0,60,120,.1)）をつける
• 主ボタンには少し影をつけて浮かせる
• 管理画面のモックは影をつけて重ね、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 画面モックとイラストは切り抜いて配置。事例写真は角丸の四角
• セクション境界: 大きな波形の曲線と、下向きの三角
• ボタンはすべてピル型
• カードは角丸8px前後
• 番号やチェックは青い丸のバッジにする
• FAQの各行は角丸のバー

Components

• 主CTA（button-primary）: 青グラデのピル型ボタン。右上にピンク赤の丸い「無料」バッジをつける
• サブCTA（button-secondary）: 白地に青い枠線のピル型。資料請求に使う
• 無料バッジ（badge-free）: ピンク赤の小さな丸に白い文字
• 悩みカード（card-worry）: 白カードの左上に青い丸のチェックをつけ、青い見出しと説明文を入れる
• POINTカード（card-point）: 上に青いタブで番号ラベルを置き、赤い見出しと短い説明を入れる
• 流れのステップカード（card-step）: 青い枠線のカードの左上に青い四角の番号。中にアイコンと見出しと説明
• 見出しの上のラベル（heading-pill-label）: 濃い青のピル型に白文字で短い前置きを書き、下に三角のしっぽをつける
• FAQのアコーディオン（faq-bar）: 水色のバーで、左にQ、右に＋。濃い青の地に置く
• フォーム入力欄（form-input）: 淡い水色の地に細い枠線。項目名の横に赤い必須バッジ

Do's and Don'ts

Do - 青のグラデーション面と白地を交互に置き、波形の境界でつなぐ - 機能は管理画面のモックとアイソメトリックの人物で見せる - CTAは2つを並べて何度も出す - アイコンは青い線画でそろえる - 数字や価格はいちばん大きく、色を変えて見せる

Don't - 暖色を広い面に使わない - 角ばったボタンにしない - 写真をそのまま全面の背景にしない - ピンク赤や黄色の強調を本文中で多用しない - 手書き風や明朝の書体を混ぜない

Page Structure

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

1. ファーストビュー（実績と価格を見せて信頼をつくる）: 左に受賞バッジ・大見出し・価格・2つのCTA、右にアイソメトリックのイラスト。下を波形で区切る
2. 資料ダウンロード（早めにリードを取る）: 青グラデの地に資料の表紙モック。右に見出し・説明・白いボタン
3. 悩みの提起（共感を得る）: 灰色の地に、チェックつきの悩みカードを4枚。中央に頭を抱える人物のイラスト
4. 解決の提示（商品が解決すると伝える）: 下向きの三角で受け、ピル型のラベルと大きなロゴ風の見出し
5. 価格訴求とCTA（安さを伝えて行動を促す）: 青グラデの帯にデバイスのモック、枠で囲んだ価格、2つのCTA
6. 特長（要点を4つで伝える）: POINTカードを4列。そのあと画像と文章を左右交互に並べた詳細
7. 主要機能一覧（機能の網羅）: 青グラデの地に白いアイコンカードを5列
8. 無料体験（体験の申込を促す）: 白い大きなカードにモックと2つのボタン
9. サポート（導入の不安を消す）: 淡い水色のパネルに、括弧で囲んだ見出しと黄色のマーカー。丸いアイコンを4つ
10. 導入事例（社会的な証明）: 白い事例カードを横スクロールのカルーセルに
11. 導入の流れ（手順をわかりやすくする）: 格子柄の白地に、番号つきステップカードを3列×2段
12. 連携サービス（付加価値を見せる）: 水色グラデにアイコンカード5列と緑の帯。濃い青の地に連携図の白カード
13. よくある質問（疑問を解消する）: 濃い青の地に水色のアコーディオンバー
14. お問い合わせフォーム（申込を受ける）: 白地にバナーと1列のフォーム、青いピル型の送信ボタン。フッターにはイラストを入れる

Imagery

• アイソメトリックのフラットなイラストで、青系の服を着たビジネス人物と画面を描く
• PC・スマホのデバイスに管理画面を入れたモックを重ねる
• アイコンは青い線画に水色のアクセントを入れる
• 淡いハーフトーンの点や格子柄を背景に少し使う
• 女性スタッフの線画イラストでサポートを表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは画像と文章の2カラム。SPでは画像を上、文章を下に積む
• PCで4〜5列のカードは、SPでは2列にする
• 2つのCTAはPCでは横並び、SPでは縦に積み、横幅いっぱいにする
• 大見出しはPCの約36pxからSPでは28pxに下げる
• 事例のカルーセルはSPで1枚ずつのスワイプにする

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