DESIGN.md — 紫グラデと濃紺のSEOツールSaaS LP（Violet Gradient Tech SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 紫グラデーション・濃紺の帯・オレンジCTA・UIスクリーンショット・紫の発光する影・欧文の英見出し
• 地の質感: フラットな面に、柔らかい紫のぼかし影と淡いグラデーションを重ねる。濃紺の帯にはうっすらコード柄を敷く
• 形: 角丸8〜16pxのカード、紫の細い枠線、円形のアイコン台座、ピル型のステップラベル
• 温度感: 寒色（紫・紺）が主体。オレンジだけが暖色のアクセント

Colors

• 白・淡紫・生成りグレーの地をセクションごとに切り替え、その間に濃紺の帯をはさんでリズムをつける
• ファーストビューは濃紺から紫、さらに白へ流れる縦グラデーションにする
• オレンジはCTAボタンとNEWバッジだけに使う
• 見出しはブランド名の部分だけ紫にし、残りは濃紺にする
• カードは紫の細い枠か、紫のぼかし影で浮かせる
• 比較表では自社の列だけ紫の枠と紫の文字で強調する
• button-primary は文字 #FFFFFF × 背景 #FC7A33 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4B03、4.53:1）を使う。
• badge-new は文字 #FFFFFF × 背景 #F39354 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C2550E、4.57:1）を使う。
• stat-block は文字 #8A4FE8 × 背景 #F6F7F2 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#894DE8、4.55:1）を使う。

Typography

• 見出しのブランド名や数字は紫で、本体より大きく組む
• 英字の飾り見出しの下に、日本語の小さなラベルを添える
• 本文は左揃えで、行間を1.8と広めにとる
• 実績の数字は通常文字の約2倍の大きさにする
• 長体・斜体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ横スクロール
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は14px前後
• セクションは見出し、リード文、本体の順に中央揃えで始める
• UIスクリーンショットは画面幅いっぱいに近い白いカードに入れる
• 特長は画像→小見出し→本文の縦積みにする
• 主CTAは各セクションの終わりに全幅で置く

Elevation & Depth

• スクリーンショットのカードには、下方向に紫のぼかし影（約0 12px 30px、rgba(138,79,232,0.25)）をつける
• CTAボタンには淡いオレンジの影をつける
• FAQやチップは影なしで、枠線または面色で区切る
• お客様の声カードは白地に柔らかい影をつける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: UIは角丸の矩形に入れる。人物写真とロゴは円形に切り抜く
• セクション境界: 直線で切り替える。フォーム背景のみ山並みのイラストを使う
• CTAは角丸約8pxの横長ボタン
• ステップラベルとNEWバッジはピル型
• アイコンは淡紫の円の上に置く
• カードの角の一つに紫のグラデーション三角を飾ることがある

Components

• オレンジCTAボタン（button-primary）: 全幅の横長ボタン。左から右へオレンジのグラデーション、白文字の左にアイコンを置く
• 白枠のサブボタン（button-ghost）: 暗い写真の上に置く、白い細枠で背景が透けるボタン
• 紫枠の説明カード（card-outline）: 紫の細枠のカード。英字の見出しと日本語ラベルを並べ、右上に円形アイコン、下に本文を置く
• NEWバッジ（badge-new）: 小見出しの上に置く、オレンジのピル型ラベル
• 機能チップ（chip-feature）: 薄紫の角丸帯に、紫のアイコンと太字の機能名を並べる
• ステップカード（step-card）: 紫枠の白いカード。上辺に紫のピル型「Step」ラベルを重ね、横スクロールで並べる
• 比較表（compare-table）: 見出し行は自社が紫、他社が濃紺。ラベル列は中間紫で、自社の列だけ紫枠で囲む
• FAQアコーディオン（faq-item）: グレー枠の白い帯。左に紫の「Q」、右に紫の下向き矢印を置く
• 問い合わせフォーム（form-card）: 白いカード。英字の大見出しの下に薄紫の入力欄を縦に並べ、送信ボタンは青のグラデーションにする
• 成果数値（stat-block）: グレーの吹き出しラベルの下に、紫の大きな数字を3列で並べる

Do's and Don'ts

Do - UI画面は白カードに入れ、紫の影で浮かせる - 見出しの一部を紫にし、数字を大きくしてメリハリをつける - 濃紺の帯でデモ誘導のCTAを繰り返す - アイコンは紫の線画を淡紫の円の上に置く - セクションの地色を白・淡紫・グレーで交互に切り替える

Don't - オレンジをCTA以外の面に広く使わない - 原色の赤や緑をアクセントに加えない - 影をグレーで強く落とさない（影は紫で淡く） - 明朝体や手書き書体を混ぜない - カードの角を大きく丸めすぎない（16pxまで）

Page Structure

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

1. ファーストビュー（価値を一言で伝え、受賞歴で信頼を示す）: 濃紺から紫へのグラデーションの上に白文字のコピー。ブラウザ枠に入れたUI画像に、金の受賞メダルと紫のピル型帯を重ねる
2. 導入実績（社数と有名企業のロゴで信頼を示す）: 社数を紫の大きな数字で見せ、白い円形のロゴを3つずつ2段に並べる
3. 選ばれる理由（機能と実績の要点を伝える）: 左揃えの見出しの横にイラストを置き、紫枠カードを2枚並べ、最後にCTAを置く
4. 特長（5つの特長を詳しく説明する）: 淡紫の地に、UI画像のカード→紫の小見出し→本文を繰り返す。新機能にはNEWバッジをつける
5. デモCTA（無料診断へ誘導する）: コード柄の濃紺の帯に、白い見出し、オレンジのボタン、紹介動画を置く
6. 機能一覧（できることを網羅して見せる）: 円形アイコンと紫の見出しのリスト4項目の下に、紫枠カードに入れた機能チップの一覧とイラストを置く
7. 利用の流れ（導入が簡単なことを示す）: Stepラベルつきのカードを横スクロールで並べ、背景に大きな薄い英字を敷く
8. 他社比較（優位性を示す）: 横スクロールの比較表で、自社の列だけ紫で強調する
9. 導入事例（具体的な成果を示す）: 紫枠の画像スライダー、事例タイトル、成果数値3つ、問い合わせCTAの順に置く
10. サポート（導入後の安心感を伝える）: 紫のフィルターをかけた写真の上に白文字を載せ、白枠のボタンを置く
11. お客様の声（利用者の評価を伝える）: 円形の顔写真、紫の名前、本文を入れた白カードのスライダー。紫の丸い矢印ボタンで送る
12. よくある質問（疑問を解消する）: グラデーションの英字見出しとイラストの下に、アコーディオンを縦に並べる
13. 問い合わせフォーム（申し込みを受け付ける）: 星空と山並みの紫イラストを背景に、白いフォームカードを置く
14. フッター（会社情報を示す）: グレーの地に、ロゴ・住所・コピーライトを中央揃えで置く

Imagery

• 自社UIのスクリーンショットを主役にし、白カードや薄いブラウザ枠に入れる
• 紫・青紫系のフラットな人物イラスト（PCや大きな記号を扱うビジネスパーソン）
• 棒グラフや折れ線を紫の濃淡で描いた図解
• 背景の装飾は紫の大きな円のぼかしや、うっすらしたコード柄
• 写真には紫のカラーフィルターをかけて色味を統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVでコピーとUI画像の右に申込フォームを並べる
• PCでは特長を画像とテキストの左右交互2カラムにし、大きな斜体の番号を添える
• PCの機能一覧は2列、機能チップは3列にする
• PCではステップ3枚と比較表を横一列に収め、スクロールをなくす
• PCのデモCTA帯はテキストと動画を左右に並べる
• PCでは本文の幅を約65%に絞り、中央に置く

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