DESIGN.md — 淡い青×オレンジCTAのBtoB SaaS LP（Soft Blue Gradient SaaS Marketing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: 淡いブルーグラデーション・白カード・オレンジCTA・UIスクリーンショット・数値実績・ロゴの帯
• 地の質感: フラットな面に、ぼかした淡い青・ピーチのグラデーションと薄い影を重ねる
• 形: 角丸12〜16pxのカードと、角丸4pxの四角いボタン。吹き出しは角丸に三角のしっぽ
• 温度感: クールな青を基調に、オレンジでほどよく温かさを足す

Colors

• 地は白と淡い青ラベンダーを交互に使い、セクションを区切る
• オレンジは主CTAとブランド名の強調だけに使う
• 見出しの強調語・数値・カードの見出しは青にする
• ピーチから淡い青へのグラデーションは、ファーストビューとCTA帯に限って使う
• フッターは濃い黒の面に白い文字で締める
• サブボタンはグレーの面か、オレンジの線だけのボタンにして主CTAと差をつける
• button-primary は文字 #FFFFFF × 背景 #FB7313 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C35303、4.61:1）を使う。
• button-outline は文字 #FB7313 × 背景 #FEFEFE のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C35303、4.57:1）を使う。
• pain-bubble は文字 #FFFFFF × 背景 #A3BCFE のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3169FD、4.6:1）を使う。

Typography

• 見出しは中央揃えで、強調する語だけ青かオレンジに変える
• 数字は大きい欧文、単位は小さい和文にしてサイズ差をつける
• 本文は左揃えで、行間を1.8と広めにとる
• 注釈は数字のすぐ下に小さいグレーで添える
• ボタンの文字は太字にし、右端に「>」を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードの並びは縦積みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに中央の見出しを置き、その下に内容を続ける
• 機能の紹介は白いカードの中にテキストとUI画像を組み合わせる
• 3つの特長は3枚のカードで見せる（SPでは縦に積む）
• 資料請求の帯は、資料の画像とCTAをセットにして2〜3回挟む
• ロゴは横一列（SPでは2〜3列のグリッド）に並べる

Elevation & Depth

• 白カードには、ぼかしの大きい薄い影（0 4px 20px rgba(60,90,160,0.08)）を付ける
• UIスクリーンショットは軽い影で浮かせる
• CTAボタンは影を付けないフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: UIのスクリーンショットは角丸の四角。人物写真は四角で切り抜く
• セクション境界: 直線で地の色を切り替える。悩みの後には下向きのオレンジ三角を置く
• 主CTAは角丸4pxの横長の長方形にする
• サブボタン（詳細リンク）はピル型のグレーにする
• 吹き出しは角丸10pxに三角のしっぽを付ける
• カードの角丸は12〜16pxで揃える

Components

• 資料請求CTA（button-primary）: オレンジの面に白い太字、右端に矢印
• 枠線ボタン（button-outline）: 白い面にオレンジの線とオレンジの文字
• 詳細リンク（button-detail）: グレーのピル型に黒い文字と「>」
• 悩みの吹き出し（pain-bubble）: 青いグラデーションの吹き出しを3つ、ずらして配置する
• 機能カード（feature-card）: 白いカードの左に青い見出し・本文・詳細ボタン、右にUI画像
• 実績の数値（stat-number）: 大きな青い数字に小さい単位と注釈を添える
• 資料DL帯（cta-band）: 左にグラデーション地の資料画像、右に白地のCTA
• 資料請求フォーム（lead-form）: 青い「必須」バッジ、薄い枠の入力欄、オレンジの送信ボタン
• 導入企業ロゴ帯（logo-strip）: 白い地にロゴを均等に並べる

Do's and Don'ts

Do - 淡い青の地と白カードの組み合わせを全体で統一する - CTAは常にオレンジにして、何度も繰り返し置く - 数値の実績には必ず出典の注釈を添える - 機能は実際のUI画面を見せて説明する - 見出しは2行に収め、強調語だけ色を変える

Don't - オレンジを見出しや面に多用しない - 濃い色の背景をフッター以外に使わない - 角の立ったカードや強い影を使わない - 明朝体や手書き風の書体を混ぜない - 本文の行間を詰めすぎない

Page Structure

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

1. ファーストビュー（価値の提示と資料請求への誘導）: ピーチから青へのグラデーション地。左にキャッチ・バッジ・黒いCTA、右に事例のスライダーカード
2. 導入企業ロゴ（信頼の獲得）: 白い帯にロゴを横一列に並べる
3. 悩みの提起（課題への共感）: 白カードの中に、青い見出しと青い吹き出し3つ。下にオレンジの三角
4. 解決策の提示（手法の全体像を見せる）: UI画像を左、オレンジの小見出しと説明3項目を右に置く
5. 資料DLのCTA（途中での離脱を防ぐ）: 資料の画像とオレンジのCTAの帯
6. 実績の数値と導入企業（規模の証明）: 大きな青い数字を2つ並べ、その下にロゴのグリッド
7. 導入事例（成果の具体例）: 人物写真と成果の見出しを載せたスライダーカード
8. 調査データ（課題の根拠を示す）: 淡い青の地に、強調見出しと青系の円グラフ
9. 機能の詳細（主要な機能の説明）: 白い横長カードを3枚縦に並べ、テキストとUI画像を組む
10. その他の効果（副次的な価値を伝える）: アイコンイラスト付きのカード3枚
11. 支援体制（伴走支援で安心してもらう）: 人物とUIの合成写真、その下に支援内容のアイコン一覧
12. 設置方法（導入のしやすさを示す）: 淡い青のパネルに、イラスト付きのカード3枚
13. 受賞・セキュリティ・メディア掲載（権威付け）: 白い地にバッジとロゴを中央に並べ、細い線で区切る
14. 資料請求フォーム（コンバージョン）: 左に資料画像とチェックリスト、右にフォームとオレンジの送信ボタン
15. 問い合わせ導線とフッター（別の導線を用意する）: 青いグラデーションの上に白カード3枚、その下に黒いフッター

Imagery

• UIは白基調のスクリーンショットを角丸で切り抜き、少し傾けたり重ねたりして見せる
• 人物はオフィスで笑顔のビジネスパーソンを自然光で撮る
• アイコンは青とオレンジの2色のフラットなイラストにする
• 背景にぼかした青やピーチの光の円を置く
• グラフは青のグラデーションで描き、数値を白い文字で入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCで2カラムのテキストと画像は、SPでは画像を下にして縦に積む
• 3枚並びのカードは、SPでは1列で縦に積む
• ロゴの帯は、SPでは横スクロールか3列のグリッドにする
• フォームは、SPでは資料画像の下に全幅で置く
• CTAは、SPでは全幅のボタンにする

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