DESIGN.md — 青×ピンクのグラデで攻めるSaaS広告LP（Bold Blue-to-Pink Gradient SaaS Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、ポップ・元気、信頼・誠実、情報量多め・訴求型
• キーワード: 青→ピンクのグラデ・極太の斜体見出し・タレント写真・思考吹き出し・光彩つき写真枠・流れるテロップ
• 地の質感: グラデーションと光彩でTVCMのような派手さを出す。カードは白〜淡青の半透明で、やわらかい影を付ける
• 形: 角丸のカード、雲形の吹き出し、V字の下向き区切り、月桂冠のアイコン
• 温度感: 寒色の青を基調に、ピンク〜オレンジで温度を足す

Colors

• 地の色はセクションごとに切り替える。順番は 青グラデ → 濃紺 → 淡ラベンダー → 青 → グレー → 紺紫
• ヒーローと CTA 帯は左が青、右がピンク〜オレンジの横グラデにする
• 濃い地の上では見出しを白の極太にし、影か光彩を付ける
• 淡い地では見出しを青にする。最重要の語だけ赤橙グラデにして下線を引く
• CTA は白い地に青文字。右端に青い丸アイコンを置く
• 写真枠には青い外光彩を付けて、暗い地から浮かせる

Typography

• キャッチは斜体の極太にし、文字を少しずらして躍動感を出す
• 見出しは中央揃えで 2〜3 行に収める
• 数字は単位より 2〜3 倍大きくする
• 本文は 12〜15px で、カードの中だけに置く
• 濃い地の白文字にはドロップシャドウを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは中で左右 2 分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは幅 92% で縦に 12px 間隔で積む
• 悩みは 吹き出し → 写真 の組を 3 回繰り返す
• 事例は横スクロールのカルーセルにし、隣のカードを少し覗かせる
• セクションの間に、無限に流れるテロップ帯を挟む
• 実績は月桂冠で囲んだブロックを縦に 3 つ並べる

Elevation & Depth

• カードには淡いぼかし影（0 8px 24px rgba(30,60,140,.12)）
• 写真枠には青い外光彩（0 0 16px rgba(80,150,255,.6)）
• 白い見出しにはドロップシャドウ（2px 2px 0 rgba(0,0,0,.3)）
• アイコンタイルには白い地に軽い影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物は切り抜いて背景に重ねる
• セクション境界: 悩みセクションの下端は V 字に切り込む。ほかは直線で切り替える
• 吹き出しは雲形にし、青い太縁と小さな泡を付ける
• CTA は角丸なしの白い長方形
• ラベル帯は青グラデのピル型
• アイコンタイルは角丸 16px の正方形

Components

• 資料DL・トライアルボタン（button-primary）: 白い長方形に青の太字を 2 行。右端に青い丸の指差しアイコン
• 悩みの吹き出し（thought-bubble）: 白い雲形に青い太縁。黒の極太文字で悩みを 2 行
• 特長カード（feature-card）: 左に青い大見出し、右に画像・ラベル帯・説明文を置く白カード
• ラベル帯（label-band）: 青グラデのピル型帯に、白文字で要点を一言
• 月桂冠の実績（laurel-stat）: 白い月桂冠で、大きな数字と単位・小さな補足を挟む
• 導入事例カード（case-card）: 見出し・写真・本文・業種タグ・紺の社名帯を入れたカード。カルーセルで横に並べる
• 流れるテロップ（marquee-band）: 極太の斜体キャッチを横に流し続ける帯
• 動画サムネイル（video-thumb）: 再生アイコン付きの写真。下に白いピル型のタイトル、周りに青い光彩

Do's and Don'ts

Do - 見出しはグラデの地の上に白の極太斜体で置く - 悩みは吹き出しと写真の組で見せる - 数値実績は大きな数字と月桂冠で権威を出す - CTA 帯はヒーローと同じグラデで、同じ世界観に戻す - 人物写真は指差しや驚きなど、表情を大きく見せる

Don't - 淡い地に細いゴシックの見出しを置かない - ピンクを地の全面に使わない（グラデの端だけにする） - カードの角を尖らせたり、影を濃くしたりしない - CTA を青い地に青で溶け込ませない - 明朝体や手書き体を混ぜない

Page Structure

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

1. ファーストビュー（キャッチと人物で注目を集める）: 青→ピンクのグラデ地に極太の斜体キャッチ、丸バッジ、切り抜き人物、画面モックを重ねる
2. 悩みの提起（部署ごとの課題に共感させる）: 濃紺の地に薄い文字の柄を敷き、吹き出しと写真を 3 組。最後に問いかけの大見出し
3. 解決策の特長（3 つの強みを示す）: 淡ラベンダーの地に、青見出しと赤橙強調の見出しを置き、白カードを 3 枚
4. 機能イメージ（機能の幅を見せる）: グラデのキャッチの下に、人物写真と機能アイコンタイルを散らして配置
5. CTA（資料DL・無料トライアルへ誘導する）: グラデ帯に白い CTA を 2 段。資料の表紙画像を添える
6. テロップ帯（キャッチを繰り返して印象を残す）: アイソメトリックのイラストと、横に流れる極太文字
7. 実績（信頼性を示す）: 青い地に月桂冠の数字を 3 つ縦に並べ、集合写真を置く
8. 導入事例（他社の成功例で後押しする）: 大きな価格見出しと淡ピンクの見出し、事例カードのカルーセル、ドットのページ送り
9. 動画紹介（CM で親しみを出す）: 青い地に光彩付きのサムネを縦に 3 つ
10. キャラクター紹介（ブランドのストーリーを伝える）: 切り抜き人物の下に、半透明の白い角丸カードで長文
11. フッター（運営元の表示）: 紺紫の地に白いロゴボックスを 2 つ、SNS アイコン、コピーライト

Imagery

• ビジネス服の人物が指差し・驚き・笑顔を見せる CM 調の写真を、白背景に切り抜く
• オフィスの場面写真は、悩みの場面を暗めの色調、解決後を明るい色調にする
• 製品画面はノート PC とスマホのモックで見せる
• アイソメトリックの立体文字と、フラットな人物イラストを添える
• 機能アイコンは白い角丸タイルに置いたカラフルなフラットアイコンにする
• 濃い地に、大きな文字を薄く重ねた柄を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヒーローの人物を左右に置き、キャッチを中央に置く
• PC では吹き出しと写真の組を 3 列に横並びにする
• 特長カードは PC で 3 カラムにし、縦長カードにする
• 実績の月桂冠と動画サムネは PC で横 3 列
• キャラクター紹介は PC で写真とカードを左右に並べる
• PC のヘッダー右に、製品サイトへのピル型ボタンを置く

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