DESIGN.md — 白×水色×青の清潔な学習SaaS LP（Clean Blue SaaS Product LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 白と水色の交互帯・青のCTA・フラットイラスト・細い枠線のカード・中央揃えの見出し
• 地の質感: 影や質感はほぼ使わない。単色のフラットな面と1pxの細い枠線で作る
• 形: 角丸は小さめ(4〜8px)。ボタンは長方形で、右端にアイコンや矢印を置く
• 温度感: クールでさわやか。冷たすぎず、親しみのある青

Colors

• セクションの地は白と淡い水色(#E6F5FC)を交互に切り替える
• 青は主CTA・強調語・リンク・矢印アイコンだけに使う
• サブボタンは白地に青の枠線と青文字。一覧ボタンは白地にグレーの枠線と黒文字
• 価格の数字だけにピンクを使う。受賞まわりだけにゴールドを使う
• 水色の帯の上に置くカードは白で塗って、地から浮かせる
• 本文は濃いグレー。純黒は使わない
• toggle-tab は文字 #777777 × 背景 #DFDFE9 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#636363、4.54:1）を使う。

Typography

• 見出しは中央揃えの太字にし、強調語だけ青にする
• ボタンには小さな前置きの一文と太字のラベルを2段で入れる
• カードの小見出しの上に、青い小さなリード文を置く
• 数値は大きな欧文の太字にし、単位は小さくする
• 左右を斜線で挟んだ小さな前置き(＼〜／)をラベルの上に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。シーン紹介のカードだけ2カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下に約60pxの余白を取る
• ボタンは幅約75%で中央に置く
• 主CTAとサブCTAは縦に2段で並べる
• 料金カードは横スクロールのカルーセルにし、下にドットを置く
• 各セクションの最後に、一覧へ進むボタンを置く

Elevation & Depth

• 基本は影を付けず、1pxの枠線でまとめる
• 事例カードと料金カードだけにごく薄い影を付ける
• 水色の地の上の白カードは、色の差で浮いて見せる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の小さい長方形にし、カードの上部いっぱいに配置する
• セクション境界: 直線で背景色を切り替える
• ボタンは角丸4〜6pxの長方形
• 切り替えタブだけはピル型にする
• カードの右下に小さな青い丸の矢印アイコンを置く

Components

• 青い主CTA（button-primary）: 青い塗りに白文字。前置きとラベルの2段で、右端にダウンロードアイコンを置く
• 青枠のサブCTA（button-outline）: 白地に青の枠線と青文字。右端に吹き出しアイコンを置く
• 一覧ボタン（button-more）: 白地にグレーの枠線と黒文字。右端に青い山形の矢印を置く
• 利用シーンのカード（scene-card）: 枠線付きの白カード。タイトル・短い説明・小さなイラストを縦に並べ、右下に丸い矢印を置く
• 料金プランのカード（pricing-card）: 上部に価格を大きな数字で載せ、下に機能比較の行を交互の背景色で並べる
• 契約期間の切り替え（toggle-tab）: グレーのピル型の中で、選んだ側を青く塗る
• 実績の数値（stat-laurel）: 金の月桂樹で青い大きな数字を挟み、下に注釈を入れる
• サポート紹介のカード（feature-card）: 上半分は水色地のイラスト、下に青いリード文・太字の見出し・一覧ボタンを置く

Do's and Don'ts

Do - 白と水色の帯を交互に入れて、セクションの区切りを見せる - 青の使い道はCTA・強調語・リンクに絞る - 資料請求と相談のCTAペアを、上部・中盤・最後でくり返す - イラストは青系のフラットなタッチでそろえる - 注釈は小さいグレーの文字で、きちんと載せる

Don't - グラデーションや強い影を多用しない - 暖色を広い面積に使わない - ピル型の丸いボタンを乱用しない - 手書き風や装飾書体を使わない - 写真にテキストを重ねすぎない

Page Structure

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

1. ファーストビュー（製品の価値とCTAをすぐに見せる）: 白地に小さな肩書き・大きな2行のコピー・CTA2段を中央揃えで置き、下に動画を入れる
2. 製品の概要（強みをひとことで伝える）: 水色地に強調語が青の見出しと本文を置き、一覧ボタンの下に管理画面のモックとイラストを入れる
3. 活用シーン（利用の目的別に入口を作る）: 白地に2カラムのカードを並べる。各カードにイラストと矢印を付ける
4. 料金（価格をはっきり示す）: 水色地に切り替えタブと横スクロールの料金カードを置き、注釈と一覧ボタンを続ける
5. 導入事例（実際の成果で信頼を得る）: 写真付きのカードに、太字の見出しと青い社名を入れる
6. 導入実績・受賞（権威と実績を見せる）: 枠線のボックス内に、月桂樹付きの数値・ロゴの一覧・受賞バッジ・注釈をまとめる
7. 中盤CTA（相談・資料請求へ誘導する）: 青塗りのボタンと青枠のボタンを2段で並べる
8. 安心のサポート（導入の不安を解消する）: イラスト付きのカードを縦に3枚並べ、それぞれに詳細ボタンを付ける
9. お知らせ（更新していることを示す）: 水色地に白い枠ボックスを置き、日付と下線付きのリンクを並べる
10. コラム（読み物で興味を深める）: アイコン付きの見出しの下に、バナー画像・日付・タイトルを並べる
11. 最終CTA（目的別にコンバージョンさせる）: 水色地に白いカードを3枚置き、前置き・アイコン・ボタンを並べる

Imagery

• 青・水色・紺を基調にしたフラットな人物イラスト(制服風の青いシャツ)
• PCとスマホの管理画面モックを斜めに重ねる
• 黄色やピンクの差し色を少し入れた小物イラスト
• 事例は屋外か社内で撮った明るい2人組の人物写真
• アイコンは線画風の青い単色
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、ファーストビューを左にコピー、右に動画の2カラムにする
• PCでは、概要を左テキスト・右モックの横並びにする
• PCでは、活用シーンを4カラム、事例を4カラム、サポートを3カラムにする
• PCでは、料金をカルーセルではなく横に並んだ比較表にする
• PCでは、最終CTAの3カードを横に並べる

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