DESIGN.md — 青×水色の清潔感ある業務SaaS LP（Clean Blue Corporate SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、クール・先進的
• キーワード: 業務効率化・青と水色・線画アイコン・白カード・資料請求の繰り返し・中央揃え
• 地の質感: フラットな単色面と、青から水色へ流れる横グラデーション。背景に薄い円リングの装飾。
• 形: 角丸小さめの矩形カードとボタン。円形のアイコン枠。
• 温度感: 寒色中心で冷静・知的。白の余白で軽さを出す。

Colors

• 白と淡い水色のセクションを交互に敷く。
• CTA帯は濃青から水色への横グラデーション。
• ボタンは主CTAを青塗り白文字、サブは白地に青文字と青枠。
• 見出しは青、補足の小見出しは青の小さめ文字。
• 強調数値は青で大きく。暖色は使わない。
• cta-band は文字 #FFFFFF × 背景 #1C7FB5 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#1C7DB3、4.53:1）を使う。

Typography

• 見出しは中央揃え、下に短い青の横線を置く。
• 見出しの上に小さな青ラベルを添える。
• 本文は左揃えでカード内に収める。
• 数字は欧文書体で大きく、単位は小さく。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム、カードは2列まで。PCは3〜4列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは中央寄せで余白を広く取る。
• メリットは番号付き3項目を縦並び。
• 課題と解決を矢印で上下につなぐ。
• CTA帯をコンテンツ2〜3セクションごとに挿入。

Elevation & Depth

• カードは薄い影か1px枠線のみ。
• CTA帯内の資料カードは白地に軽い影。
• 強い立体表現は使わない。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは円形枠か切り抜き、資料画像は矩形
• セクション境界: 直線で色を切り替える
• ボタンは角丸小さめの矩形で右端に矢印。
• アイコンは円形の淡色背景に入れる。
• 背景に大きな薄い円リングを装飾で配置。

Components

• 資料請求ボタン（button-primary）: 青塗り白文字、2行構成で右にダウンロード矢印。
• 問い合わせボタン（button-secondary）: 白地に青枠・青文字、右に＞矢印。
• グラデCTA帯（cta-band）: 濃青→水色の横グラデ帯に白見出し、資料サムネ付き白カードとサブボタン。
• 見出し下線（heading-underline）: 中央見出しの下に青の短い横線。
• 番号付きメリット（merit-item）: 円形イラスト、番号、青見出し、本文の縦並び。
• 課題カード（problem-card）: 白地枠線の小カードに短文の課題を中央揃え。
• 解決の円（solution-circle）: 白い円に青見出しと短い説明。
• 機能カード（feature-card）: 白カード、左上に青見出し、右上に小アイコン、下に説明。
• 導入事例スライダー（case-slider）: 白カードに削減率の大きな数字と企業情報、左右矢印。

Do's and Don'ts

Do - 白と淡い水色を交互に使いリズムを作る。 - 資料請求CTAをページ内で何度も繰り返す。 - 線画アイコンは青系2〜3色で統一する。 - 数値は大きな青文字で効果を見せる。 - 余白を広く取り情報を整然と並べる。

Don't - 赤や橙などの暖色をCTAに使わない。 - 写真を多用しない。 - ピル型や大きな角丸ボタンにしない。 - 装飾フォントや手書き風を使わない。 - 濃い影や立体的なボタンにしない。

Page Structure

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

1. ファーストビュー（サービスの価値提示と資料請求）: 左にキャッチと主・サブボタン、右に画面とアイコンのイラスト、受賞バッジ円。
2. 導入企業ロゴ（信頼の証明）: 白地にロゴを2段で横並び。
3. メリット（主要価値を3つ示す）: 水色地に番号付き3カラムと詳細ボタン。
4. CTA帯（資料請求の誘導）: 青グラデ帯に白カードの資料DLとサブボタン。
5. 課題と解決（悩みと解決策の対比）: 課題カード4つ、下向き矢印、水色地に解決の円4つ。
6. コスト削減効果（定量効果の提示）: 導入前後の棒グラフ図と大きな削減数値、資料ボタン。
7. 導入事例（実績の提示）: 水色地に横スライダーの事例カード。
8. 代表的な機能（機能の一覧）: 水色パネル内に白い機能カード3×2。
9. 選ばれる理由（差別化ポイント）: 円形アイコン＋見出し＋本文の2×2。
10. 最終CTA（問い合わせ・資料・見積の導線）: 青グラデ帯に白カード3つ、各カードにボタン。
11. 関連サービス・認証（回遊と信頼補強）: 白ボタンカード2つ、認証マークと説明文。
12. フッター（サイト情報）: 淡いグレー地にリンクとSNSアイコン。

Imagery

• 青系単色のフラットな線画イラスト。
• 書類・PC・人物を円形枠に収める。
• 背景に大きな薄い水色の円リング。
• 資料サムネイルは冊子風の小さな矩形。
• グラフは淡い青の段階色で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPはFVのイラストをキャッチの下に配置。
• メリット3項目は縦積み。
• 課題・解決は2×2に折り返す。
• 機能カードはSPで2列または1列。
• CTA帯内カードは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 行書くと起動時に読み込まれる。