DESIGN.md — 青グラデと橙CTAのAI業務SaaS LP（Bright Blue Gradient AI SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 淡い水色の地・白カード・青のピル型ラベル・オレンジのグラデCTA・フラットイラスト・製品画面のモック
• 地の質感: フラットで光沢はない。背景に大きな半透明の円弧やぼかした光の模様を薄く敷く
• 形: 角丸カード（約12px）とピル型のボタン・ラベル。シアンのグラデ帯で区切る
• 温度感: クールで明るい青が基調。オレンジを温度差のアクセントに使う

Colors

• 地は白と淡い水色を交互にし、白カードは水色の地に置いて浮かせる
• 見出しの強調語・ラベル・番号はすべてprimaryの青にする
• オレンジのグラデは「無料で試す」系の主CTAと実績グラフだけに使う
• CTA帯は青→シアンの斜めグラデの全幅帯にし、白文字で乗せる
• 本文の要点には黄色マーカーを引く。1段落に2〜3箇所まで
• 比較表では自社の列をprimaryの見出しとtint-1のセルで目立たせる
• button-primary は文字 #FFFFFF × 背景 #FD7B16 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C25602、4.54:1）を使う。

Typography

• 見出しは中央揃えにし、強調語だけ青（一部はオレンジ）に変える
• セクション見出しの上に英字のピル型ラベルを置く
• 数値の実績は数字を大きな太字にし、単位は小さくする
• 本文は左揃えで、行間を1.9前後に広く取る
• 製品名の読み仮名は小さい文字で括弧書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。使い方と実績の一覧は 2 カラムのカードグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面の左右に約12〜24pxの余白を取って置く
• セクションの頭は「英字ラベル→2〜3行の見出し→リード文」の順にする
• 強みのブロックは「番号ラベル→見出し→本文→画面モック」を縦に並べ、ブロック間を細い線で区切る
• 導入ステップは縦に積んだカードを青い下向き三角でつなぐ
• CTA帯は全幅のグラデ地で、上にノートPCのモック、下に見出しとボタンを置く

Elevation & Depth

• 白カードには青みのある大きくぼかした薄い影を付ける（0 8px 24px rgba(30,99,233,0.08) 程度）
• FAQのアコーディオンにも同じ薄い影を付ける
• ボタンはフラットで、影は付けないかごく薄くする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 製品画面はノートPCやモニターの枠にはめたモックで見せる。イラストは角丸の淡い青パネルの中に置く
• セクション境界: 直線で区切る。CTA帯はグラデの全幅帯にし、背景には大きな円弧の装飾を重ねる
• ボタン・英字ラベル・番号バッジはすべてピル型にする
• 番号ラベルは縦線で「語｜番号」に分けて表記する
• 問い合わせのブロックは淡い青の大きな角丸枠の中に白カードを入れる二重構造にする

Components

• 主CTA（button-primary）: 左のオレンジから右の黄へ流れるグラデのピル型ボタン。左にアイコン、右に矢印を付ける
• 資料ダウンロードのボタン（button-outline）: 白地に青い枠線のピル型ボタン。ダウンロードアイコンを付ける
• 青ボタン（button-blue）: 青のベタ塗り、または青→シアンのグラデのピル型ボタン。右端に矢印を付ける
• 英字セクションラベル（section-label）: 青地に白い英字の小さなピル型ラベル。見出しの上に中央揃えで置く
• 番号バッジ（number-badge）: 「強み｜01」「STEP｜01」のように縦線で区切った青いピル型バッジ
• 課題カード（problem-card）: 白カードに、青いラベル→見出し（下線付きの青文字）→イラスト→黄色マーカー付きの本文を並べる
• 比較表（comparison-table）: 一般的な製品の列はグレーがかった青の見出し、自社の列は青の見出しとtint-1のセルにする。見出しの上に吹き出しのバッジを付ける
• 実績カード（case-card）: 左上にCASE番号のタブを付け、大きな青の数値と小さなグラフ、区切り線の下に本文と企業名を置く
• FAQのアコーディオン（faq-item）: 白カードの左に青い丸のQアイコン、右に下向きのシェブロンを置く
• 実績数値の並び（stat-item）: 丸いアイコンの横に、小さなラベル、大きな青の数値、注釈を縦に並べる。2×2の点線グリッドにする

Do's and Don'ts

Do - 見出しの強調語は青で色を変え、必要に応じて下線を引く - 白カードは淡い水色の地に置き、薄い青の影で浮かせる - 主CTAはオレンジのグラデに統一し、複数のCTA帯で同じボタンを繰り返す - イラストは青いスーツのフラットな人物と、角丸のUIパーツで描く - 数値の実績は大きな数字とアイコンで見せる

Don't - オレンジを見出しや面の広い場所に多用しない - 暗い背景や黒の大きな面を使わない - 角ばったボタンや角丸のないカードを混ぜない - 写真の人物をリアルに使わない。フラットイラストで統一する - 1枚のカードに黄色マーカーを入れすぎない

Page Structure

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

1. ファーストビュー（価値を一言で伝え、資料請求と無料トライアルへ誘う）: 淡い水色の地にグラデ文字の大きなキャッチとサブコピーを置き、2つのボタンを縦に並べる。下に製品画面と人物、機能の吹き出しを組み合わせたイラストを置く
2. 導入企業のロゴと実績数値（信頼を補強する）: 白いタイルに入れた企業ロゴを横に流し、その下に数値実績を2×2で並べる
3. 悩みの提起（現場の課題に共感させる）: 英字ラベルと問いかけの見出しの後に、課題カードを3枚縦に積む。背景に?マークを薄く散らす
4. 解決後の姿（導入後の変化を示す）: 下向きの点の矢印で場面を転換し、角に山形の装飾を付けた白カード3枚でビフォーアフターを見せる
5. 解決策の提示（製品の位置づけを伝える）: グラデのタブ見出し、大きな見出し、リード文の後に、キャラクター付きのノートPCモックを置く
6. 3つの強み（機能の差別化を伝える）: 番号バッジ、2色の見出し、本文、モニターのモックを1ブロックとし、細線で区切って3つ繰り返す
7. 使い方（操作の簡単さを示す）: 2×2の白カードに、イラストのパネル、番号の丸、見出し、本文を入れる
8. CTA帯（途中で行動を促す）: 青→シアンのグラデの全幅帯に、ノートPCのモック、白い見出し、オレンジのCTAを置く
9. 他社との比較（優位性を一覧で見せる）: 3列の比較表で、自社の列を青で強調する
10. 導入実績（定量的な効果を証明する）: CASE番号付きの実績カードを3枚並べる
11. 信頼性（セキュリティ面の安心を伝える）: 淡い青の太枠カードに認証マークと説明文を入れる
12. 料金と導入の流れ（検討の次の段階へ進める）: 料金は見出しとグラデのボタンだけにする。流れは4つのSTEPカードを三角でつなぐ
13. よくある質問（不安を取り除く）: Qアイコン付きのアコーディオンを4つ並べる
14. 最終CTAと問い合わせ（資料請求・問い合わせ・電話へ誘導する）: CTA帯の後に、淡い青枠の中に白カードを入れた窓口ブロックを3つ並べ、フッターでナビゲーションと2つのボタンを示す

Imagery

• 人物は青いスーツのビジネスパーソンを、フラットで線のないイラストで描く
• 製品画面はノートPCやモニターのモックにはめ込み、白基調のUIを見せる
• 白と紺の丸い小型ロボットのマスコットを要所に添える
• UIの抽象パーツ（Qアイコンの行・検索バー・グラフ）を淡い青の角丸パネルで描く
• 背景には大きな淡い円弧、ぼかした光の斜線、?マークを薄く敷く
• アイコンは青とライトブルーの2色で描くフラットなもの
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左右 2 分割にし、左にコピーとボタン、右にイラストを置く
• PC では課題・解決後の姿・実績のカードを 3 列、使い方と STEP を 4 列で横に並べる
• PC の強みのブロックはテキストと画面を左右交互に配置する
• PC の CTA 帯は左にモック、右に見出しとボタンを置いた横長にする
• PC はヘッダーにナビゲーション、電話番号、2 つのボタンを常に表示する。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 行書くと起動時に読み込まれる。