DESIGN.md — 藍紫×淡いパステルグラデのBtoB SaaS LP（Lavender Gradient Knowledge SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、やさしい・柔らかい、シンプル・ミニマル
• キーワード: パステルグラデーション・藍紫アクセント・白カード・中央揃え・余白多め・AI・ナレッジ
• 地の質感: フラットな面に、ラベンダー→ピーチの淡い斜めグラデーションと、ぼかした影を重ねる
• 形: 角丸 12〜16px のカード、ピル型ボタン、細い矢印線、小さな四角の番号バッジ
• 温度感: 淡いパステルでやや暖かく、藍紫で引き締めたニュートラル

Colors

• 地色は白を基本にする。FV・特長・お客様の声・フッターだけ、ラベンダーからピーチへの淡い斜めグラデーション面にする
• 藍紫は CTA、番号バッジ、カード見出し、見出し下ラインに限定して使う
• 濃い藍紫の面は再 CTA ブロックだけに使う。上に人物写真を薄く重ね、白文字を置く
• 数値・効果は藍紫〜濃青のグラデーションバーで示し、比較対象は灰色にする
• 見出しは黒に近い濃灰、本文はやや薄い濃灰にする
• 黄色や赤などの強い色は CTA に使わない

Typography

• セクション見出しは中央揃えにし、下に幅約 30px・太さ 2px の藍紫ラインを置く
• リード文は中央揃えで、意味の区切りごとに改行する
• 数字は欧文フォントで大きく、単位は小さく添える
• カード見出しは藍紫・中央揃え・2 行構成にする
• PC の一部見出しは、左に短い横線を付けて左寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、事例・お知らせは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白は約 24px
• カードは縦に積み、カード間は約 32px あける
• セクション冒頭は見出し・ライン・リード文の順で中央に置く
• カルーセルは次のカードの端を見せて、横に送れることを示す
• ロゴは 3 列グリッドで並べる

Elevation & Depth

• 白カードには、ぼかし大きめで薄い影（0 8px 24px rgba(0,0,0,0.06)）を付ける
• グラデーション面の上では白カードの浮きで階層を出す
• ボタンには影を付けない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸 12px の長方形。人物写真は横長に切り抜く
• セクション境界: 直線で区切り、背景色（白とグラデーション面）の切り替えで分ける
• 主 CTA はピル型の塗りボタンにし、右端に細い矢印線を付ける
• サブ動線はテキストと矢印に下線ラインを付けた形にする
• 番号バッジは角丸 4px の藍紫の正方形
• グラフのバーは上側の角だけを丸める

Components

• 主CTAピルボタン（button-primary）: 藍紫の塗り、白文字で左寄せ、右端に細い矢印
• 白ピルボタン（button-white）: 濃色面やグラデーション面に置く白ボタン。文字は藍紫
• 下線付きテキストリンク（link-underline）: 中央に置く。文字と矢印の下に太さ 2px の藍紫ライン
• 見出し下ライン（heading-rule）: 中央見出しの下に置く短い藍紫の横線
• 番号付き特長カード（feature-card）: 白カードの左上に藍紫の番号バッジをはみ出させる。藍紫の 2 行見出しと本文で構成
• 削減効果バーグラフ（effect-chart）: 灰色バーから藍紫バーへ曲線矢印でつなぐ。大きな数字で削減量を示す
• 再CTAブロック（cta-block）: 藍紫の面に写真を薄く透かす。白文字の見出し・本文と、白ボタン＋下線リンクを置く
• 事例・声カード（case-card）: 上に写真、下に社名・見出し・本文を置く白カード。横スクロールで並べる

Do's and Don'ts

Do - 淡いグラデーション面と白カードの組み合わせを守る - 藍紫は CTA と強調だけに絞る - 見出しは中央揃えにし、短いラインを入れる - 数値は大きな欧文数字とグラフで見せる - 余白を広くとり、1 ブロック 1 メッセージにする

Don't - 原色の赤・黄で CTA を作らない - 濃色の面を多用しない（再 CTA に限定する） - 角の立ったボックスや太い枠線を使わない - 本文を詰め込まず、行間 1.8 未満にしない - 写真に強いフィルターをかけない

Page Structure

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

1. ファーストビュー（価値提案と資料請求への誘導）: パステルグラデーションの地に中央見出し、説明 3 行、ピル CTA とサブリンク、PC＋スマホの画面モック
2. 導入企業ロゴ（実績による信頼の獲得）: 白地に利用者数の見出しを置き、ロゴを 3 列グリッドで並べ、右下に注釈
3. 関連サービス告知（新サービスへの誘導）: 淡いグラデーションのカードに、ロゴ・見出し・本文・白ピルボタン
4. コンセプト図解（仕組みの理解）: 中央見出しとリード文に、青紫グラデーションの横長図解を添える
5. できること（特長）（機能を 6 つ提示）: グラデーション面に番号付きの白カードを縦に 6 枚、最後に下線リンク
6. 導入事例（具体的な成功例）: 動画サムネイルと事例カードのカルーセル、下線リンク
7. 導入効果（定量効果の訴求）: 灰色と藍紫のバーグラフで、削減時間を大きな数字で 3 つ見せる
8. 中間CTA（資料請求・デモ申込）: 藍紫の角丸ブロックに白文字、白ピルボタンと下線リンク
9. サポート体制（導入の安心感）: 角丸写真、太字の小見出し、本文の組を 3 つ縦に並べる
10. お客様の声（第三者の評価）: グラデーション面に、写真付きの白カードをカルーセルで並べる
11. 発信活動・お知らせ（権威性と最新情報）: サムネイル付きカードのカルーセルに、日付・カテゴリ・タイトル
12. 最終CTA（最後のコンバージョン）: 中間 CTA と同じ藍紫ブロックと、関連サービスのカードを再掲
13. フッター（サイト内導線）: パステルグラデーションの地に、ロゴと 2 列のリンク群。英字の小ラベルで分類する

Imagery

• オフィスで働くビジネスパーソンの自然光写真。明るく、彩度は控えめ
• 製品 UI は PC モニターとスマホのモックアップで斜めに見せる
• 図解は青から紫のグラデーションに、フラットな人物アイコンを組み合わせる
• CTA 背景には、人物の動きのある写真を藍紫で覆って薄く透かす
• 装飾に、ぼかしたラベンダー色の大きな曲線形状を背景へ入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左テキスト・右モックの 2 カラムにする
• PC では特長カードを 3 列 × 2 段にする
• PC では事例・声・お知らせのカードを 2〜3 列グリッドで並べる
• PC の一部見出しは、左の短い線を付けて左寄せにする
• PC の CTA ブロックは、左にテキスト、右にボタンを縦に並べる
• PC ではヘッダーにナビゲーションと、藍紫の小さな CTA ボタンを置く

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