DESIGN.md — 青紫グラデの白カードSaaSツールLP（Blue-Violet Gradient SaaS Tool LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 青紫グラデーション・白カード・盾アイコン・波形の区切り・広い余白・画面モックアップ
• 地の質感: フラットな面にごく薄い影。背景には薄い世界地図のドット柄やアイコンを散らす
• 形: 角丸の小さいカード、ピル型のボタン、波形のセクション区切り
• 温度感: 寒色寄りのクールな印象。ピンクと赤は強調のアクセントにだけ使う

Colors

• ファーストビュー、比較セクション、フッター上部は青から紫への斜めグラデーションにする
• 本文のセクションは白と淡い青灰色を交互に置き、メリハリをつける
• リスクや損害を訴えるセクションだけ濃紺から紫の暗い帯にする
• 赤ピンクは悩みの点、注意マーク、マーカーなど小さな面に限って使う
• ボタンは青い単色のピル型に白文字で統一する
• 表のヘッダーやカードの線はごく淡いグレーにする
• button-primary は文字 #FFFFFF × 背景 #4A91E5 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1F75DA、4.55:1）を使う。

Typography

• 見出しは中央揃えにし、字間を0.1em前後に広げる
• 見出しは2行に分けて組むことが多い
• 強調したい語には淡いピンクや黄緑のマーカーを引く
• 本文は細めにし、行間を広く取る
• 価格の数字は大きくして色をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 2〜3 列、機能紹介は左に画像・右にテキスト
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションの見出しの上に小さな盾アイコンを置く
• カードは同じ高さで並べる
• 機能紹介は画像とテキストを1組にして縦に積む
• 比較表と料金表は横スクロールができるようにする
• 余白を広く取り、情報を詰め込みすぎない

Elevation & Depth

• カードには影をごく薄くつける（0 4px 16px、透明度は約0.06）
• ファーストビューのバッジは白いピル型に軽い影
• モックアップ画像には少し強めの影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 画面キャプチャは角丸の矩形にする。機能紹介ではブラウザ枠を模した図にする
• セクション境界: グラデーションの帯の上下は波形の曲線。悩みセクションから解決セクションへは下向きの矢印（V字）でつなぐ
• ボタンとタグはピル型
• ステップ番号は円形のバッジ
• アイコンは細い線のラインアイコン

Components

• ピル型CTA（button-primary）: 青い単色のピル型ボタン。右端に矢印をつける
• 特長バッジ（hero-badge）: モックアップの周りに浮かせる白いピル型のバッジ。アイコンと短い言葉を入れる
• 悩みカード（worry-card）: 上にイラストアイコン、その下に見出し、さらに赤い点つきの箇条書きを並べる
• ステップカード（step-card）: 上辺に青い丸の番号を重ね、図・見出し・説明の順に並べる3列カード
• 効果カード（case-card）: 左上にアイコン、右上に英字のCASEラベル。見出しの一部にマーカーを引く
• 盾アイコン見出し（section-icon-heading）: 小さな盾のラインアイコンの下に、中央揃えの太字見出しを置く
• Q&A（faq-item）: Qは青、Aは赤ピンクの丸いマーク。回答の中に図解を入れることもある
• 比較・料金表（compare-table）: 白い表に淡い罫線を引く。推奨列は価格を色つきの大きな数字で見せる

Do's and Don'ts

Do - 青から紫へのグラデーションを、ページの頭と終わり、比較セクションに使う - 白カードと淡い影で情報を区切る - 各セクションの見出しを盾アイコンで統一する - 図解やUIのモックアップで機能を視覚的に説明する - 強調には淡いマーカーを引く

Don't - 暖色の大きな面を使わない - 太すぎる見出しやベタ塗りの見出し帯を使わない - 角の尖ったボタンにしない - 写真を全面に敷き詰めない - 赤ピンクを広い面に使わない

Page Structure

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

1. お知らせバー（重要な告知）: 赤い細帯に白い小さな文字
2. ファーストビュー（課題の提示と製品の紹介）: 青紫グラデーションの上に2行の見出し、ノートPCのモックアップと周りの特長バッジ。下端は波形
3. 悩みの提起（不安を自分ごとにさせる）: マーカーつきの見出しと2枚の悩みカード。下にV字の矢印
4. 製品の概要（解決策を示す）: 淡い青灰色の地に盾の紋章と中央揃えの文章。盾アイコンを散らす
5. 使い方（手軽さを伝える）: 番号つきの3ステップカード
6. 動画（使い方を短時間で理解させる）: 中央に動画の埋め込み
7. 特長（強みを示す）: 画像とテキストを左右交互に配置
8. 導入効果（ベネフィットを伝える）: 2×2のCASEカード
9. 機能一覧（機能の網羅）: 左に青いブラウザ枠の図、右に説明の横長カードを縦に並べる
10. リスク訴求（損害の大きさを示す）: 濃紺から紫の暗い帯に警告アイコンと箇条書き
11. 開発背景（信頼の獲得）: 白地に中央揃えの文章、周りにデバイスの写真
12. 比較（関連製品との違いを示す）: グラデーション地に2枚のカードと比較表
13. 料金プラン（価格の提示）: プランの列を並べた表と支払い方法
14. よくある質問・フッター（不安の解消と導線）: Q&A、動作環境、波形のグラデーションのフッター、黒いSNS帯

Imagery

• ノートPCやモニターに管理画面を表示したモックアップ
• 細い線のラインアイコン（青系）
• 青紫に色調を寄せた、薄い世界地図のドット柄
• 背景に浮かべるカラフルな盾アイコン
• ブラウザ枠を模したフラットな図解
• 人物の写真はほぼ使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではカードを1列に縦に積む
• 機能紹介は画像を上、テキストを下にする
• 比較表と料金表は横スクロールにする
• ファーストビューのバッジはモックアップの下に2列で並べる
• 見出しは18〜20px、本文は13pxにする

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