DESIGN.md — 青×水色フラットイラストの営業支援SaaS LP（Bright Blue Flat Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: 鮮やかな青・淡い水色の地・フラットイラスト・画面モック・数字訴求・黄色CTA
• 地の質感: グラデなしのフラット塗り。背景に大きな水滴・波形の淡色シェイプを敷く
• 形: 角丸8〜12pxのカード、ピル型ボタン、波形のセクション境界
• 温度感: 爽やかで明るい寒色寄り。黄色が温度を添える

Colors

• 地は淡い水色・青灰・グレージュを交互に使い、セクションを区切る
• 見出しの強調語と吹き出しカードには primary の青を使う
• 主CTAは黄色の地に青文字、サブCTAは青地に白文字で並べる
• 数字の強調は青地の上に黄色の大きな数字
• 本文の要点は黄色マーカーと青文字で示す
• フッターだけ濃紺で締める
• button-primary は文字 #1A78E0 × 背景 #FEFE33 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#186FD0、4.6:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #018DFD のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176D4、4.62:1）を使う。
• button-pill は文字 #FFFFFF × 背景 #018DFD のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176D4、4.62:1）を使う。
• result-badge は文字 #F7F86C × 背景 #018DFD のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176D4、4.53:1）を使う。
• callout-box は文字 #FFFFFF × 背景 #018DFD のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176D4、4.62:1）を使う。

Typography

• 見出しは中央揃えで、強調語だけ青にする
• 小見出しは「＼ ／」の斜線で挟む
• 数字はとても大きくし、単位は小さく添える
• 本文は左揃えで、行間は1.8程度にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PCは特長3列・事例やFAQ・記事は2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央の見出しブロックから始める
• 比較図は左右に並べ、矢印でつなぐ
• 機能説明は画面モックを中心に、点線で吹き出しにつなぐ
• CTA帯はページの中ほどと末尾の2回置く

Elevation & Depth

• 白カードには薄い影（0 4px 12px 青灰10%）を付ける
• 画面モックは白い枠と影で端末のように浮かせる
• ボタンは影なしのフラット

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形。記事のサムネイルは角丸の長方形
• セクション境界: CTA帯は波形の境界。背景に大きな水滴形を淡色で敷く
• 特長カードは上部に青いタイトル帯を付ける
• 事例ラベルは角丸の青い吹き出し
• FAQの項目は白い角丸ボックスにQの丸アイコンと＋を付ける

Components

• 黄色申込ボタン（button-primary）: 黄色の地に青い太字。上に斜線で挟んだ小さな補足を置く
• 青い相談ボタン（button-secondary）: 青の地に白文字と白い縁。右下に小さなバッジを付ける
• 一覧ボタン（button-pill）: 青いピル型ボタンで、右に矢印を付ける
• 斜線見出し（heading-slash）: 小見出しを＼／で挟み、その下に青い大見出しを置く
• 特長カード（feature-card）: 上部が青いタイトル帯の白カード。下端にイラストを添える
• 成果数字バッジ（result-badge）: 青い吹き出しに黄色の大きな数字。下に円形の顔写真と声のカードを重ねる
• 機能吹き出し（callout-box）: 青い角丸の箱に白文字。点線で画面モックとつなぐ
• ステップ帯（step-label）: 左に青いSTEPラベル、右に白地の説明を並べた横帯
• FAQボックス（faq-item）: 白い角丸の箱。左にグレーのQ丸、右に水色の＋丸を置く

Do's and Don'ts

Do - 青を主役にし、黄色はCTAと数字だけに絞る - 人物はフラットなビジネスイラストで描く - 機能説明には画面モックを使って中身を見せる - セクションの地は淡色を交互に切り替える - 見出しは必ず斜線の小見出しと組み合わせる

Don't - 暗い背景を本文のセクションに使わない - グラデーションや光沢の強いボタンにしない - 暖色を広い面積に使わない - リアルな写真を背景いっぱいに敷かない - 明朝体を使わない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝える）: 青い地にキャッチ、中央にスマホ画面、左右に人物イラスト。下にお知らせ帯を置く
2. 導入企業ロゴ（信頼感を出す）: 白い帯にロゴを横一列に並べる
3. サービス概要（何が変わるかを示す）: 変換前と変換後の比較図を矢印でつなぐ
4. 課題診断（自分ごと化させる）: 枠で囲んだ質問に、イラストの選択肢カード4つを2×2で並べる
5. 特長（選ばれる理由を伝える）: 青い帯付きの白カードを3列で並べる
6. 成功事例（成果を数字で示す）: 青い吹き出しの大きな数字と、顔写真付きの声カードを組む
7. 機能紹介（出力の中身を見せる）: 画面モックの左右に青い吹き出しを置き、点線でつなぐ
8. 導入ステップ（手軽さを伝える）: グレージュの地にSTEPの横帯を2つとイラスト
9. 料金プラン（プランを比べてもらう）: 淡い水色の地に見出しと短い説明
10. CTA（申込と相談へ誘導する）: 波形の青い帯に、黄色と青の大きなボタンを2つ並べる
11. よくある質問（不安を解消する）: 白いFAQボックスを2列で並べ、下に一覧ボタン
12. セミナー・ブログ（情報発信と信頼づくり）: サムネイルと文字の横型カードを2列で並べる
13. フッター（会社情報と再度の導線）: 濃紺の地にリンクと小さな2つのボタン

Imagery

• 人物は青・水色・オレンジの少ない色で塗ったフラットなスーツ姿のイラスト
• 選択肢カードは線画のモノクロイラストで描く
• 画面モックは青灰の枠に白いUIパーツと数値を並べる
• 背景には淡い水色の大きな水滴形や波形を敷く
• キラキラの小さな装飾を数字や人物の周りに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは3列の特長カードを縦1列に積む
• 比較図・機能図は縦に並べ、矢印は下向きにする
• CTAボタン2つはSPで縦に積み、幅いっぱいにする
• FAQと記事カードはSPで1列にする
• 数字は48px程度まで縮めつつ、主役のサイズを保つ

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