DESIGN.md — オレンジ×藍の資料請求型AI SaaS LP（Orange and Indigo AI SaaS Lead-Gen LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか
• キーワード: 白地とグレー地の交互配置・オレンジのグラデーション帯・青紫グラデーションの資料帯・フラットなイラスト・比較表・導入ロゴ
• 地の質感: フラットで影はほぼ使わない。オレンジと青の帯だけに縦方向のゆるいグラデーションをかける
• 形: 角丸6〜10pxのカードと角丸4pxのボタン。全体に直線的で端正
• 温度感: 暖色オレンジでCTAを目立たせ、藍・青紫で知的な落ち着きを出す中間の温度感

Colors

• 地は白とライトグレーを交互にし、セクションの境目を色の切り替えで示す
• オレンジはCTAボタン・課題解決の帯・比較表の自社列だけに使う
• 資料請求の中間CTAは青紫グラデーションの帯に置き、オレンジのボタンで目立たせる
• 比較表は見出し列を濃紺、他社列をグレー、自社列をオレンジ枠とクリーム地にする
• フォームはラベンダーの淡いグラデーション地に白い入力欄を並べる
• オレンジの帯の上の文字はすべて白にする
• button-primary は文字 #FFFFFF × 背景 #FB7414 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C45403、4.55:1）を使う。
• button-outline は文字 #FF8931 × 背景 #FFFFFF のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C55400、4.52:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシックにし、2行に収める
• 本文は左揃えで12px前後、行間は1.8にする
• CTAボタンは上に小さいマイクロコピー、下に大きいボタン文言の2段構成にする
• 数字はオレンジのグラデーションで大きく見せる
• 装飾書体は使わず、ゴシックとサンセリフだけで統一する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴ一覧は 4 列、事例カードは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右16px程度の余白をとって全幅で縦に積む
• セクションの上下に60〜80pxの余白をとる
• 特長は番号→小見出し→イラスト→本文の順で縦に並べる
• 資料請求の帯はページ中で2回以上繰り返す
• フォームは1列で、姓と名だけ2列にする

Elevation & Depth

• 影はほぼ使わず、地との色差でカードを浮かせる
• FVの製品画面のモックにだけ、薄くぼかした影を付ける
• 事例カードは極細の枠線と、ごく薄い影にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の小さい長方形。イラストは背景なしで切り抜いて置く
• セクション境界: 直線の水平境界で、地色を切り替える
• ボタンは角丸4〜6pxの長方形にし、右端に「>」の矢印を付ける
• カードは角丸8〜10pxの白い面にする
• バッジは角丸2pxの小さな長方形にする
• 受賞ロゴは円形やメダル形のまま並べる

Components

• 主CTAボタン（button-primary）: オレンジのグラデーション地に白文字。上段に小さな補足、下段に太字の文言、右に矢印
• 問い合わせのサブボタン（button-outline）: 白地にオレンジの1.5px枠とオレンジ文字。主CTAと同じ幅
• 悩みカード（pain-card）: グレー地に置く白カード。線画アイコンと太字の悩み1行を中央揃えにする
• 解決カード（solution-card）: オレンジの帯に置く白カード。オレンジ・青のフラットなイラストと太字の説明
• 資料請求の帯（doc-banner）: 青紫グラデーションの帯に資料の表紙画像、白文字の説明、オレンジの小さなボタンを置く
• 比較表（compare-table）: 濃紺の見出し列、グレーの他社列、オレンジ枠とクリーム地の自社列。記号は○◎△×
• 口コミカード（review-card）: グレー地のカードに星評価、太字のタイトル、本文、グレーの投稿者名を並べる
• 必須バッジ（required-badge）: 青地に白文字の小さなラベル。フォーム項目名の左に置く
• 見出し下のグラデーション線（heading-gradient-bar）: 見出しの下に置く、オレンジ→黄→青の短い横線

Do's and Don'ts

Do - CTAは資料請求をオレンジの塗り、問い合わせをオレンジの枠線にして2種類を並べる - 導入ロゴや受賞バッジなど、第三者の評価を何度も見せる - イラストはオレンジと青紫の2色を中心に、統一したテイストで描く - 比較表では自社列だけをオレンジで囲んで目立たせる - セクションごとに白とグレーの地を交互にする

Don't - オレンジを本文の色や広い背景に多用しない（帯は1か所までにする） - 濃い影や立体的な装飾を付けない - 明朝体や手書き風の書体を使わない - ボタンをピル型にしない - イラストと写真を同じカードの中に混ぜない

Page Structure

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

1. ファーストビュー（何を解決するサービスかを一目で伝える）: マーカー付きの小見出し、大きな2行キャッチ、実績バッジ3つ、製品画面のモック、CTAボタン2つ
2. 導入ロゴ（導入実績で信頼を示す）: 白地に中央の見出しを置き、企業ロゴを横スクロールで1列に流す
3. 悩みの提起（担当者の課題に共感する）: グレー地に白カード3枚。線画の困り顔アイコンと短い悩み文、締めの一文
4. 解決策（導入後の効果を示す）: オレンジのグラデーション帯に白い見出しと白カード3枚のイラスト、白文字のまとめ
5. 資料請求の帯（途中で資料請求へ誘導する）: 青紫のグラデーション地に資料の画像、白文字の説明、オレンジのボタン
6. 特長（技術とサポートの強みを説明する）: 白地に大きな番号01〜04、太字の小見出し、フラットなイラスト、左揃えの本文
7. 他社比較（サポートの手厚さで差別化する）: リード文の下に3列の比較表。自社列はオレンジの枠で囲む
8. 導入事例（業界ごとの成果を見せる）: ロゴのグリッドと、写真に社名ラベルを重ねた2列の事例カード
9. 設置方法（導入のしやすさを伝える）: グレー地に白カード3枚。画面の図、太字の見出し、説明文
10. 受賞・評価（第三者の評価で後押しする）: グラデーション線付きの見出し、受賞ロゴ、評価スコア、注釈、グレーの口コミカード
11. 資料請求フォーム（リードを獲得する）: ラベンダーのグラデーション地に資料のスライダーと1列のフォーム、大きなオレンジのボタン
12. 問い合わせ・会社情報（別の導線と信頼情報を示す）: 薄いグレー地に枠線ボタン、その下に会社概要の表とフッター

Imagery

• 人物はオレンジと青紫を基調にしたフラットなベクターイラストで描く。顔は簡略化し、グラデーションで陰影を付ける
• 課題は黒の線画アイコンで表す（ヘッドセットを付けた困り顔など）
• グラフや検索窓などのUIはオレンジと青の淡いグラデーションで抽象的に描く
• 事例の写真は明るいオフィスで人物が笑顔の写真にし、左下に白い社名ラベルを重ねる
• 製品画面はブラウザ風の枠に入れたスクリーンショットを重ねて見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを左右2列にし、左にキャッチとCTA、右に製品画面を置く
• 悩みカード・解決カード・設置方法カードはPCで3列に並べる
• 特長はPCでテキストとイラストを左右交互に並べる
• 資料請求の帯はPCで画像を左、テキストとボタンを右に置く
• フォームはPCで左に資料のスライダー、右に入力欄の2列にする
• 事例カードと口コミはPCで3列・2列にする

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