DESIGN.md — 青紫グラデとオレンジCTAのAI SaaS LP（Indigo Gradient AI SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、清潔・爽やか、シンプル・ミニマル
• キーワード: 青紫グラデーション・オレンジCTA・白カード・チェックリスト・フラットイラスト・ラベンダー地
• 地の質感: フラット。グラデーションはヒーローとフォーム背景だけ。それ以外は単色の面と薄い影。
• 形: 角丸8〜12pxのカードとボタン。POINTラベルは片側だけ角を落としたタブ型。イラスト背後にはブロブ形を置く。
• 温度感: 寒色が中心。CTAのオレンジだけが暖色のアクセント。

Colors

• 地は白と薄ラベンダーを交互に使い、セクションの切れ目をはっきりさせる。
• オレンジは主CTAと送信ボタンだけに使う。
• サブCTAは白地にオレンジの枠線とオレンジ文字にする。
• 詳細ボタン・見出し帯・チェックアイコン・POINTタブはすべて青紫で統一する。
• 中間CTAは青紫のベタ塗り帯にし、オレンジCTAを重ねる。
• イラストは青紫・淡紫・グレーの3色に絞る。
• button-primary は文字 #FFF5E9 × 背景 #F67C3D のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C44909、4.53:1）を使う。
• button-secondary は文字 #F67C3D × 背景 #FFFFFF のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C44909、4.5:1）を使う。

Typography

• 見出しは太字で中央揃え。強調したい語だけ青紫で大きくする。
• 本文はグレーにして、見出しの黒と差をつける。
• カードの上には小さな青紫ラベルで「対象者」を書く。
• チェックリストは太字の黒にし、青紫の丸チェックを付ける。
• 数字や英字はラテン書体で少し大きくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。連携ツールだけ2列グリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは見出し、サブ説明、カード群の順に縦に積む。
• カードは左右16pxの余白で横幅いっぱいに置く。
• 特長は大きいイラスト、POINTタブ、見出し、説明、チェックリストの順に並べる。
• FAQとお知らせは区切り線だけのリスト型にし、カードにしない。
• フォームは白カードにして、紫の写真背景の上に浮かせる。

Elevation & Depth

• カードには影 0 4px 16px rgba(80,70,200,0.08) を付ける。
• CTAボタンには軽いドロップシャドウを付ける。
• セキュリティ系のカードは影なしにし、1pxの線で囲む。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで、背後に淡紫の不定形ブロブを置く。アイコンは淡紫の円の中に入れる。
• セクション境界: 直線で背景色を切り替える。
• ボタンは角丸8pxの長方形にする。
• POINTタブは右下を大きく丸めた吹き出し型にする。
• お知らせタグはピル型にする。
• AIエージェント紹介カードは左辺に4pxの青紫ボーダーを付ける。

Components

• 主CTAボタン（button-primary）: オレンジのベタ塗りに白い太字。幅いっぱいに置く。
• サブCTAボタン（button-secondary）: 白地にオレンジ枠とオレンジ文字。主CTAのすぐ下に置く。
• 詳細ボタン（button-detail）: 青紫のベタ塗りに白文字と「›」。カードの中に置く。
• 実績月桂樹バッジ（badge-laurel）: 白い月桂樹と王冠の中に数値を入れる。3つ横に並べる。
• POINTタブ（tab-point）: 青紫の地に白抜きで「POINT 0X」と書く。左端に寄せる。
• 見出し帯付きカード（card-phase）: 上部に青紫の帯見出し。下にイラスト、小見出し、チェックリストを入れた白カード。
• チェックリスト（check-list）: 青紫の丸チェックと太字の項目を3行並べる。
• 連携ツールチップ（chip-integration）: 白地に青紫の枠線と青紫文字。2列グリッドで並べる。
• FAQ項目（faq-item）: 淡紫の円に青紫の「Q」と太字の質問。その下に「A」とグレーの回答。項目の間は区切り線。
• フォーム入力欄（form-field）: 薄グレーの塗りで枠なし。プレースホルダは太めのグレー。

Do's and Don'ts

Do - CTAはオレンジのベタとオレンジ枠の2段セットで出す。 - 機能説明はすべて「見出し＋チェックリスト3項目」の型に揃える。 - イラストは青紫系フラットで統一し、淡紫のブロブを添える。 - 白とラベンダーの地を交互に使う。 - ヒーローの下に導入企業ロゴを横一列で並べる。

Don't - オレンジをCTA以外の装飾に使わない。 - 実写の人物写真を本文に多用しない。 - 濃い影や立体的なボタンにしない。 - 青紫以外の有彩色をイラストに足さない。 - 本文を黒にしない（見出しとの差が消えるため）。

Page Structure

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

1. お知らせバー・ヘッダー（告知とトライアル導線）: 最上部に青紫帯の告知。下は白ヘッダーにロゴ、青紫の小ボタン、ハンバーガー。
2. ファーストビュー（価値提示と即CTA）: 濃紺から青紫への斜めグラデ。白い大見出し、ノートPCのUIモック、説明、CTA2段、月桂樹の実績3つ。
3. 導入企業ロゴ（信頼の補強）: 白地にロゴを横一列に流す。
4. サービス概要（何のサービスかを説明）: 白カードにロゴと「とは」の見出し。強調語は青紫。入力データからAIへの流れを図解。
5. プラン・製品紹介（目的別の選択肢を提示）: ラベンダー地に、左に青紫ボーダーを付けたカードを2枚。対象者ラベル、名称、説明、詳細ボタン。
6. 悩みの提起（業務の手間を可視化）: 前・中・後の3枚の帯見出しカード。アイソメイラストとチェックリスト。
7. 特長（4つの強み）: ブロブ背景のイラスト、POINTタブ、見出し、グレー説明、チェックリストを繰り返す。最後に連携ツールのグリッド。
8. 中間CTA（無料体験へ誘導）: 青紫ベタ帯に白の見出しと補足、オレンジCTA2段。
9. サポート体制（導入後の安心）: 線枠の白カード内に、イラスト、小見出し、チェックリストを2組。区切り線で分ける。
10. セキュリティ（安全性の担保）: 左に円アイコン、右に見出しと説明の横型カードを4枚。下に枠線ボタン。
11. よくある質問（不安解消）: 薄グレー紫の地に、Q/Aのリストを区切り線で並べる。
12. お知らせ（更新の活発さを示す）: 淡紫ピルのタグ、日付、太字タイトル、丸矢印のリスト。末尾に「一覧」リンク。
13. 申込フォーム（トライアル・資料請求の獲得）: 紫オーバーレイの写真背景に白の見出し。白カードのフォームとオレンジの送信ボタン。
14. フッター（サイト内導線）: 薄グレー紫の地。ロゴ、アプリバッジ、SNS、2列リンク、認証マーク。

Imagery

• 人物は青紫の服を着たフラットイラストで描き、背景は白抜きにする。
• 業務場面は淡紫・紫・グレーのアイソメイラストで描く。
• イラストの背後に淡紫の大きな不定形ブロブを敷く。
• 製品画面はノートPCのモックに簡略化したUIを入れる。
• アイコンは淡紫の円の中に線画で置く。
• フォーム背景はオフィス写真に紫のオーバーレイをかけてぼかす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのヒーローは左にテキストとCTA、右にPCモックの2カラム。
• PCではプランカードを2列、課題カードを3列に横並びにする。
• PCの特長は左にテキスト、右にイラストの2カラム。
• PCのセキュリティカードは2×2グリッド。連携ツールは4列。
• PCのフォームは右に白カード、左に見出しを置き、写真背景から上にはみ出させる。
• コンテンツ幅はPCで約1000pxに制限して中央に置く。

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