DESIGN.md — 濃紺×紫グラデのAIマーケSaaS LP（Navy and Violet AI Marketing SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 濃紺の帯・紫グラデーション・キーワードの部分強調・フラットイラスト・管理画面モック・淡紫のカード
• 地の質感: フラットで、影はごく薄い。背景に淡紫の波線や網目模様をうっすら敷く
• 形: 角丸カードとピル型ボタン。工程は矢羽型の山形パネルでつなぐ
• 温度感: やや寒色寄り。紫で親しみを足している

Colors

• 地は白とライトグレーを交互にし、セクションを区切る
• CTA帯だけを濃紺の全幅にして、ページの区切りにする
• 見出しはキーワード 1〜2 語だけを紫にし、文字も大きくする
• 主ボタンは紫→水色のグラデーション、副ボタンは白地に濃紺文字
• カードの地は淡紫か白にし、濃い色は面に使わない
• ターコイズはロゴ周りとフォーム枠に限って使う
• button-primary は文字 #FBF3FF × 背景 #B18AF0 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#884DE8、4.53:1）を使う。

Typography

• 見出しは太いゴシックで中央揃え
• 強調語は紫色にし、周りの文字の 1.3〜1.5 倍の大きさにする
• 数値（人数・%）は特大の太字にし、単位は小さくする
• セクション見出しの背後に、淡色の大きな英字を透かしで置く
• Reason番号は紫の小さな欧文で、見出しの上に置く
• 本文は短く改行し、3 行程度に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2 カラム（テキストと画像）、カードは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の帯にし、地色で区切る
• 理由セクションは画像とテキストを左右交互に置く
• CTA帯はおよそ 3 セクションごとに繰り返す
• カードはそろったグリッドに並べる
• フォームは中央に寄せた 1 列の枠に収める

Elevation & Depth

• カードとモックにはごく薄いドロップシャドウ
• 実績パネルは白カードに影を付けて浮かせる
• ボタンに影は付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角版か切り抜き。イラストは淡紫の円形の背景の上に置く
• セクション境界: 直線で区切り、地色を切り替える
• ボタンはピル型で、右端に丸い矢印アイコンを付ける
• 工程フローは矢羽型（シェブロン）パネルをつなげる
• 見出しラベルは濃紺の角丸の帯
• 悩みは角丸のグレー吹き出しで、しっぽ付き

Components

• 資料DLボタン（button-primary）: 紫→水色グラデーションのピル型ボタン。右端に丸い矢印アイコンを付ける
• 問い合わせボタン（button-secondary）: 白地に濃紺文字のピル型ボタン。濃紺帯の上で使う
• 特典CTA帯（cta-band）: 濃紺の全幅帯。上に特典ラベル、中央に大きな特典額、下にボタン 2 つを並べる
• 濃紺見出しラベル（label-navy）: コピーの上に置く濃紺の角丸帯。中は白文字
• 悩み吹き出し（worry-bubble）: 人物イラストの周りに置くグレーの吹き出し。悩みを短く 4 つ書く
• 番号付き機能カード（feature-card）: 白カードに紫の番号、見出し、線画アイコン、説明文を縦に並べ、3 列で配置する
• 工程フロー（flow-chevron）: 矢羽型パネルを横につなげる。各工程に担当ラベル（紫か灰）、アイコン、工程名を入れる
• 料金特長カード（price-card）: 淡紫地の角丸カード。上にアイコン、太字の見出し、本文を置き、2 列で並べる
• 導入事例スライダー（case-slider）: 左に課題→導入後、右に結果グラフを置く白カード。両端に濃紺の丸い矢印を付ける
• 埋め込みフォーム（contact-form）: ターコイズの細枠の中に、グレー地の入力欄を縦に並べる。送信はターコイズのボタン

Do's and Don'ts

Do - 強調語は必ず紫にして大きくする - CTA帯は同じデザインで繰り返す - アイコンは黒の線画に紫を差し色で入れる - 数値実績はバッジや特大の数字で見せる - 白とグレーの地を交互にしてリズムを作る

Don't - 暖色を主役にしない - 濃紺を広い本文エリアの地に使わない - 見出しを明朝体にしない - カードに強い影や太い枠線を付けない - 写真ばかりで構成せず、イラストとモックを主にする

Page Structure

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

1. ヘッダー（ナビゲーションと資料DLへの誘導）: 白地。左にロゴ、右にメニューとグラデーションのピル型ボタン
2. ファーストビュー（価値提案と実績の提示）: 左に濃紺ラベル、特大コピー、実績数値を 2 つ。右に人物写真とPCモック
3. CTA帯（特典の提示と行動喚起）: 濃紺の全幅帯。特典額を大きく置き、ボタンを 2 つ並べる
4. 悩みの提起（ターゲットの課題に共感する）: グレー地。頭を抱える人物イラストの周りにグレー吹き出しを 4 つ
5. 解決の提示（サービスで解決できることを示す）: 白地。ロゴ入りの見出し、左にテキスト、右に管理画面モック
6. できること（主要機能の紹介）: 淡灰の地に番号付きの白カードを 3 列
7. 工程フロー（担当者の負担が軽いことを示す）: 矢羽型パネルで 6 工程を表示。下に循環を示す矢印を入れる
8. 選ばれる理由（差別化ポイントを 3 つ示す）: Reason番号付き。イラストとテキストを左右交互に置く
9. 導入実績（事例で効果を示す）: グレー地に透かしの英字。課題→結果のスライダーカード
10. 料金（柔軟な料金体系を説明する）: 白地に淡紫カードを 2×2 で並べる
11. フォーム（資料DL・問い合わせを受け付ける）: 中央見出しの下に、ターコイズ枠の埋め込みフォーム
12. フッター（ロゴと規約リンク）: グレー地。中央にロゴ、下に小さなリンク

Imagery

• 人物はフラットイラスト。紫・濃紺・黒の限られた色で描く
• イラストの背後に淡紫の円や雲の形を敷く
• 管理画面のモックはPCやモニターの枠に入れて見せる
• アイコンは黒い線画に紫のアクセント
• FVのビジネスパーソン写真は明るい屋内で、スマホを持つ自然なカット
• 背景には淡紫の波線や網目模様を薄く入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全セクションを 1 カラムにし、画像はテキストの下に置く
• 機能カードと料金カードは SP で縦に積む
• 工程フローは SP で 2 列×3 段か縦の矢印に組み替える
• CTA帯のボタンは SP で縦に 2 段、幅 90%
• FVのコピーは SP で 30〜34px にする
• ヘッダーのメニューは SP でハンバーガーにまとめる

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