DESIGN.md — 青×紺×黄の資料DL型BtoB SaaS LP（Corporate Blue BtoB SaaS Whitepaper LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: 資料DL・フォーム先出し・青帯セクション・白カード・黄色ピルバナー・ビジネスイラスト
• 地の質感: フラットな単色面が中心。悩みセクションだけ紺地にポリゴン模様を敷く
• 形: 角丸小さめの白カード、ピル型ボタン、淡い青の太枠で囲んだ資料紹介パネル
• 温度感: クールで誠実。黄とオレンジが温かみのアクセントになる

Colors

• 地色は白→淡い青→ロイヤルブルー→紺の帯を交互に切り替え、セクションの区切りを示す
• 見出しの強調語はオレンジ文字か、青・オレンジ地に白文字のラベルにする
• フォーム送信だけをオレンジにして、最終CVを目立たせる
• 資料DLの誘導バナーとサブボタンは黄色地に黒文字で統一する
• 資料DLボタンは青地に白文字のピル型
• 濃色帯の上にはコンテンツを白カードで載せる
• button-submit は文字 #FFFFFF × 背景 #E6963D のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6516、4.54:1）を使う。
• step-flow は文字 #FFFFFF × 背景 #00BBFF のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#007FAD、4.53:1）を使う。

Typography

• 書体はゴシック1種で統一し、太さで階層をつける
• FVコピーは2行にし、強調語だけオレンジにする
• 悩みの前振りは『＼ ／』で囲み、続けて『とお悩みの方へ』と小さく添える
• 数字実績はラベル地に白抜きの太字で見せる
• 本文は中黒の箇条書きで短く並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みの吹き出しは 3+2 の格子、アイコン群は 5〜6 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• FV直下にフォームを置き、スクロールせずにCVできる構成にする
• 資料ごとに同じ型のパネルを3回繰り返す
• セクションの間に黄色の資料DLバナーを挟む
• 濃色帯の中に白カードを積む
• 見出しは中央揃え、箇条書きは左揃え

Elevation & Depth

• 白カードは影なし、または非常に薄い影
• 黄色バナーには軽いドロップシャドウ
• 資料の書影は斜めに重ねて立体感を出す
• メダルは光沢のある金で強調する

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は円形に切り抜くか、切り抜きの全身イラスト。書影は角版を斜めに配置
• セクション境界: 直線で地色を切り替える
• ボタンとバナーはピル型
• カードの角丸は8px前後
• 資料パネルは淡い青の8px幅ほどの太枠で囲む
• ステップは角版の見出し帯＋細枠の箱を下向き矢印でつなぐ

Components

• 資料DLフォーム（lead-form）: 淡い青の枠に入った白いフォーム。2列のセレクトと入力欄に、オレンジの必須バッジを付ける
• 送信ボタン（button-submit）: オレンジのピル型。白文字を中央に置く
• 資料DLボタン（button-download）: 青のピル型。白文字の右にダウンロードアイコンを置く
• 黄色誘導バナー（banner-cta）: 黄色のピル型の帯。両端に男女ビジネスパーソンの全身イラストを配置する
• 悩み吹き出し（speech-bubble）: 紺地の上の白い吹き出しに短い悩み。下に円形の人物イラストと補足を添える
• 資料紹介パネル（whitepaper-panel）: 太枠の白パネルに、前振り見出し、枠付きキャッチ、青の大見出し、書影、箇条書き、ボタンを順に並べる
• 実績ラベル（stat-label）: 青またはオレンジ地に白太字で数字の実績を載せる角丸ラベル
• 番号付き強みカード（numbered-card）: 紺地の上の白カード。番号付きの青見出しと短い説明を入れる
• ステップフロー（step-flow）: 水色→青のグラデーションで色を変える見出し帯の下に細枠の説明箱。山形矢印で縦につなぐ

Do's and Don'ts

Do - CVはフォームと資料DLボタンに集中させ、セクションごとに導線を置く - 地色は白・淡青・青・紺のリズムで切り替える - 機能説明は線画アイコンと人物イラストを点線でつないで図解する - 悩みは人物イラストと吹き出しでペルソナ化する - 強調色のオレンジと黄は面積を小さく保つ

Don't - 写真を全面に敷いて文字を読みにくくしない - 青系以外の主色を増やさない - 角丸を大きくしすぎてポップにしない - 装飾フォントや明朝を使わない - 長い段落を書かない。箇条書きで区切る

Page Structure

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

1. ヘッダー（ブランドを示す）: 濃紺の細い帯の中央にロゴ
2. ファーストビュー＋フォーム（対象者への呼びかけと即CV）: 淡い背景に2行の太字コピーと書影3冊を置き、直下に太枠の白フォーム
3. 悩みの提起（利用者の声）（既存ツールへの不満に共感する）: 紺のポリゴン地に、吹き出し5つと円形の人物イラスト
4. 実績紹介（信頼の担保）: 淡い青地に数字ラベルを並べ、黄色バナーを置く
5. 資料紹介×3（悩み別に資料を提案する）: 太枠の白パネルを3つ繰り返す。前振り→キャッチ→見出し→書影→箇条書き→DLボタン
6. 製品概要（製品の信頼性を示す）: 青帯に金メダル2つとPC・スマホのモックアップ。黄色ボタンを2つ並べる
7. 特長（機能価値を図解する）: 青帯の上の白カードに、線画アイコンと人物イラストを点線でつないだ図
8. 強み（サポート体制の差別化）: 紺帯に番号付き白カードを4枚積む
9. 導入プロセス（導入後の安心感）: 白カードの中に縦のステップフロー。最後をきらめくアイコンで締める
10. 提供サービス一覧（サービス範囲を示す）: 淡い青のグループ枠の中に白いリスト項目
11. フッター（会社情報）: 薄いグレー地にロゴ・住所・コピーライトを中央揃え

Imagery

• ビジネスパーソンは、スーツ姿のセミリアルなデジタルイラストで描く
• 悩みの人物は困り顔のバストアップを円形に切り抜く
• 機能説明は黒の線画アイコンに青のアクセントを入れ、太めの線で統一する
• 書影は暗いトーンの表紙のホワイトペーパーを斜めに重ねて見せる
• 実績は金色の勲章メダルと赤リボンのグラフィックで表す
• 製品画面はノートPCとスマホのモックアップでダッシュボードを見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを左コピー・右フォームの2カラムにする
• PCでは悩みの吹き出し5つを横1列に並べる
• PCの資料パネルは書影を左、箇条書きを右に並べる
• PCでは強みカードを2列、ステップフローを横並びにする
• PCではサービス一覧を2グループ横並びにする
• コンテンツ幅はPCで約900pxに収める

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