DESIGN.md — 青×白の清潔なSaaS校正ツールLP（Clean Blue SaaS Tool LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、クール・先進的
• キーワード: ロイヤルブルー・白カード・太ゴシック・2段CTA・淡青グレー地・フラットアイコン
• 地の質感: フラットで影はほぼなし。単色の面だけで構成する
• 形: 角丸8〜16pxのカードとボタン。ピル型は小さいバッジとタブだけ
• 温度感: やや寒色で知的。人物写真を円形に切り抜いて親しみを足す

Colors

• 地は白→青帯→白→淡青→白→青帯→淡青の順で切り替えて、リズムを作る
• 青帯の上には白カードと白文字を置く
• 主CTAは青の塗り、副CTAは白地に青枠と青文字にする
• 青帯の中のCTAは反転させ、白の塗りに青文字、副は白枠に白文字にする
• 見出しの中のブランド名だけ青文字にして強調する
• 黄色は星評価にだけ使う

Typography

• 見出しは中央揃えで太く、上に小さな青ラベルを置く
• カード内本文は左揃え、特長カードは中央揃え
• 書体はゴシック1種類だけにする
• 英字ロゴは欧文の太字でまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、横スライダーで補う
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 72px、基本単位 8px、カード内 26px（375px 幅換算）
• 左右の余白は25pxで固定する
• 各セクションの終わりに2段CTAを繰り返す
• 特長カードは横スクロールのカルーセルにする
• 見出しラベルと見出しの間は16〜24pxあける

Elevation & Depth

• カードは基本的に影なしで、地色の差だけで分ける
• メディア掲載ボックスだけ、ぼかしの大きい薄い影を付ける
• ボタンにも影を付けない

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形に切り抜き、太い青リングで囲む。図版は角丸の長方形にする
• セクション境界: 直線の切り替えにする。FV下部では、動画の途中から青帯が始まる重ね配置にする
• ボタンは角丸10px前後のフル幅にする
• バッジとタブはピル型にする
• カードは角丸12〜16pxにする

Components

• 主CTA（button-primary）: フル幅で青塗り、白い太字のボタン
• 副CTA（button-secondary）: 白地に青の1px枠、青文字。主CTAの下に置く
• 見出し上ラベル（section-eyebrow）: 大見出しの上に置く小さな青文字の説明
• 青帯上の白カード（feature-card-blue）: 青地の上を横スクロールする白い角丸カード。見出しと本文を入れる
• 機能タブ（tab-pill）: 選択中は青塗り、他は青枠のピル型タブ。横スクロールさせる
• アイコン特長カード（icon-feature-card）: 淡青地に置く白カード。青い線画アイコン、太字見出し、中央揃えの本文
• レビューカード（review-card）: グレー地のカード。円形アバター、星5つと点数、太字見出し、本文、引用元リンクの順
• お知らせバッジ（news-badge）: 日付の横に付ける青いピル型ラベル
• 青帯内ラベル（label-banner）: 青地の上の、明るい青の角丸ボックス。白文字で短い説明を入れる
• メルマガフォーム（newsletter-form）: 淡青地に置く白い入力欄、枠線ボタン、同意チェックボックス

Do's and Don'ts

Do - 色は青1色と白・淡青・グレーに絞る - CTAは必ず塗りと枠線の2段で並べる - セクションの冒頭は青ラベル＋太字見出しの中央揃えにする - アイコンは青い線画で統一する - 人物写真は円形の青リングで囲み、散らすように配置する

Don't - グラデーションや強い影を多用しない - 青以外の強調色をCTAに使わない - 明朝体や手書き書体を混ぜない - カードの角を直角にしない - 本文を中央揃えで長く続けない

Page Structure

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

1. ヘッダー（ロゴとメニューへの導線）: 白地に左ロゴ、右にハンバーガーメニュー
2. ファーストビュー（サービスの価値を一目で伝える）: 円形の人物写真を散らし、青のリード文、黒の太字見出し（ブランド名だけ青）、2段CTA
3. 紹介動画（使い方を直感的に見せる）: 角丸の動画を白と青帯の境目にまたがるように置く
4. コンセプト・特長（導入するメリットを示す）: 青帯に明るい青のラベル、白い見出しと本文、横スクロールする白カード
5. 機能紹介（主な機能を切り替えて見せる）: ピル型タブ、図版、見出し、本文、矢印付きリンク、2段CTA
6. 課題提起と工程比較（現場の悩みと解決策を示す）: 淡青地に長めの中央見出しと説明文、アイコン付きの白カードを縦に積み、2段CTA
7. お客様の声（第三者の評価で信頼を得る）: グレーのカードをカルーセルにし、矢印と一時停止の操作を付ける。星評価を入れる
8. メディア掲載（権威付け）: 影付きの白ボックスに、モノクロのメディアロゴを並べる
9. お知らせ（最新情報で活動していることを示す）: 日付と青バッジの一覧を線で区切り、枠線の『もっと見る』ボタンを置く
10. 最終CTA（申込を後押しする）: 青帯に白い太字見出し、白塗りボタン、白枠ボタン
11. メルマガ登録（見込み客を獲得する）: 淡青地に青い見出し、入力欄、枠線ボタン、同意チェック
12. フッター（サイト全体へのリンク）: 白地にロゴとSNSリンク、カテゴリ見出しごとのリンク一覧

Imagery

• 多様な人物の明るい笑顔の写真を、円形の青リングで囲む
• アイコンは青一色の線画で、歯車やクリップボードなど業務を表すモチーフにする
• アバターは水色の円の中に描いたフラットなイラストにする
• 機能図版はUI画面の抽象化した図に、淡い青の帯と見出しを重ねる
• メディアのロゴはモノクロで統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヘッダーにグローバルナビを並べ、右上に青いCTAを置く
• PCのFVは見出しを2行の中央揃えにし、人物写真は左右の余白に散らす
• PCでは機能紹介を左テキスト、右図版の2カラムにする
• PCでは特長カードを2列、レビューを3列で並べる
• PCではCTAを横並びの小さめのボタンにする
• PCのフッターは4カラムにする

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