DESIGN.md — 青×黄CTAの親しみSaaSツール LP（Bright Blue Friendly SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 明るい青・黄色CTA・マスコット・カードグリッド・淡い水色面・実績数値
• 地の質感: フラットな単色面に、淡いドロップシャドウとごく薄いグラデーションの青帯を重ねる
• 形: 角丸カードと、片側の角だけ大きく丸めた青い画像台座、ピル型ボタン
• 温度感: 爽やかでややクール。黄色とキャラクターで温かみを足す

Colors

• 地は白を基本に、悩み・機能フローは淡い水色の面で区切る
• ブランド青は見出しの一部語句、ポイント番号、画像台座、CTA帯に限定する
• 購入・資料請求の主CTAは必ず黄色地に濃色文字
• サブボタンは白地に青文字と青枠またはグレー枠
• LINE関連の語句のみ緑で色分けする
• 本文は純黒を避け濃紺グレーにする
• button-secondary は文字 #3482E4 × 背景 #FEFEFE のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E73DE、4.56:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #3382E4 のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#1E74E0、4.54:1）を使う。
• flow-circle は文字 #3482E4 × 背景 #FEFEFE のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E73DE、4.56:1）を使う。

Typography

• 見出しは中央揃えで、下に短い青の横線を置く
• 見出し内の重要語だけを青色にする
• 見出し上に小さな青文字のリードを添える
• 実績数値は欧文太字で大きく、単位は小さく添える
• 本文は左揃え・行間ゆったり
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは 2 列、事例は横スクロールか 1 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに中央見出し＋青線＋サブ文
• ポイントは画像と文章を左右交互に配置（SPは画像→文章）
• 特長は小アイコン付きカードのグリッド
• 各ブロック末尾に白いピル型の一覧ボタン
• CTA帯は全幅の青地にマスコットを重ねる

Elevation & Depth

• カードは薄い枠線＋ごく淡い影
• FVの画面モックや画像に柔らかい影
• ボタンは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形。ポイント画像は一角だけ大きく丸めた青台座の上に配置
• セクション境界: 直線。悩みセクションの下端は中央が下に尖るV字
• ボタンはすべてピル型
• カードは8px前後の角丸
• タブは上辺のみ角丸
• 資料ライブラリ枠は右下角を大きく丸める

Components

• 黄色ピルCTA（button-primary）: 資料請求用。黄色地に濃色太字と小アイコン
• 白ピルリンクボタン（button-secondary）: 一覧へ誘導。白地に青文字、右に矢印
• 月桂樹実績バッジ（stat-badge）: 月桂樹風の括弧で囲んだ大きな実績数値を横並び
• 青ライン見出し（heading-underline）: 中央見出しの下に短い青の横線
• 特長カード（feature-card）: 線画アイコン、太字見出し、青い点の箇条書き
• POINT番号（point-label）: 青い欧文小文字のPOINT 01表記
• 機能タグ（tag-chip）: 関連機能を示す淡色の小チップ
• FAQアコーディオン（faq-item）: Q四角バッジ＋質問、右端に＋、上下に罫線
• 青帯CTA（cta-band）: 全幅の青地にマスコットとキャッチ、黄色CTAと白い小ボタン
• 機能フロー丸アイコン（flow-circle）: 白い円にアイコン、矢印でつなぎ下に箇条書き

Do's and Don'ts

Do - 主CTAは黄色のピル型で統一する - 見出しには青ライン装飾と青い強調語を使う - 情報は白カードで小分けにし、アイコンを添える - マスコットはCTA帯とFVに限定して登場させる - 実績数値は大きく目立たせ、注釈を下に小さく付ける

Don't - CTAを青や赤にしない - 暗い背景や黒の大面積を使わない - 角張ったボタンを混ぜない - 強い影や立体感の装飾を使わない - 青以外の強調色を増やさない

Page Structure

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

1. ファーストビュー（価値提案と資料請求の導線）: 左に見出し・ロゴ・黄色CTA、右に人物写真と画面モック。下に実績バッジ4つ
2. お知らせ・導入企業ロゴ（最新情報と信頼の提示）: 一行ニュース帯と、ロゴの横並び
3. サービス概要（何ができるかを一言で伝える）: 左に文章、右に画面モックとマスコットの淡青パネル
4. 利用シーン写真（多業種で使えることを示す）: 業種別の人物写真を横4枚並べる
5. 悩みの提起（規模別の課題に共感）: タブ切替＋淡青地に写真付き悩みカード3枚、下端V字
6. 解決ポイント（主要機能を3点で説明）: POINT番号付き、画像と文章を左右交互、関連タグ付き
7. 特長一覧（機能の網羅性を示す）: アイコン付きカード8枚のグリッド
8. 機能フロー（業務の流れに沿った機能紹介）: 淡青地に丸アイコンを矢印でつなぐ5ステップ
9. 業種別活用法（自分ごと化）: 写真カードに白文字ラベルと矢印丸
10. CTA（中間コンバージョン）: 全幅青帯にマスコット、黄色CTA
11. 導入事例（実績による信頼）: 写真・ロゴ・見出し・タグの事例カード3枚
12. サポート体制（導入後の安心）: 左に文章とボタン、右に人物写真
13. よくある質問（不安解消）: Qバッジ付きアコーディオン3件
14. 資料ライブラリ・CTA・フッター（最終行動とナビ）: 淡青グラデ枠のバナー、青帯CTA、多列リンクのフッター

Imagery

• 明るいオフィスや店舗で働く人物の自然光写真
• スマホとノートPCの画面モックで管理画面を見せる
• 丸みのある青いペンギン風マスコットの3D調イラスト
• 線画＋青アクセントの小さな業務アイコン
• 写真は彩度を抑え、白と青が映えるトーン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは2カラムの左右交互配置、SPは画像→文章の1カラムにする
• 特長カードはPC4列→SP2列
• 実績バッジはPC4つ横並び→SP2×2
• 機能フローはPC横並び→SP縦並び
• 業種別・事例カードはSPで横スクロールにする
• SPは画面下に黄色CTAを固定表示する

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