DESIGN.md — 水色×オレンジの店舗向けSaaS特典LP（Bright Sky Blue SaaS Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 水色の見出し帯・オレンジのピルCTA・大きな数字訴求・白カード・淡い水色の地
• 地の質感: フラットで影はごく薄い。写真とUIモックの切り抜きで清潔感を出す
• 形: 角丸小さめのカードと帯、CTAだけ完全なピル型
• 温度感: やや寒色寄りで明るく、オレンジで温度を足す

Colors

• 地は白と2段階の淡い水色を交互に切り替えてセクションを区切る
• 見出しのキーワードと数値は水色で強調し、残りは黒
• オレンジは主CTAとその上のマイクロコピー吹き出しだけに使う
• 特典番号ラベルは水色地に白、または白地に水色枠
• フッターだけ濃いグレーで締める
• 必須ラベルは小さな赤系バッジにする
• button-primary は文字 #FFFFFF × 背景 #EB6C01 のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C05801、4.53:1）を使う。
• benefit-band は文字 #FFFFFF × 背景 #22ADE4 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#147EA8、4.59:1）を使う。
• worry-qa は文字 #22ADE4 × 背景 #FEFEFE のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#147EA8、4.55:1）を使う。

Typography

• 数字は単位より2〜3倍大きくして目立たせる
• 見出しは1行内で黒と水色を塗り分ける
• セクション見出し上にスラッシュで挟んだ小さなリード文を置く
• 注釈は数字の右肩に※番号を付け、ブロック下にまとめる
• 本文の要点は太字で部分強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PCは中央寄せで3カラムのカード並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションの末尾にCTAを中央配置する
• 特典ブロックは水色の見出し帯＋白カード群のセットで作る
• 課題解決は3枚のカードを横並び（SPは縦積み）
• 導入事例は横スライドのカルーセル
• フォームは白い大きな角丸カードに収める

Elevation & Depth

• カードは薄い枠線とごく弱い影
• CTAは影なしのフラット
• 特典ブロック全体に淡い影で浮き感を少しつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 製品は白背景の切り抜き、人物写真は角丸小の矩形、事例の人物は円形アイコン
• セクション境界: 直線で背景色を切り替える。FVの下端だけ緩やかなカーブ
• CTAは完全なピル型で右端に矢印アイコン
• 特典番号ラベルは角丸の小さなタブ型
• アイコンは円形の淡い地に線画

Components

• 主CTAボタン（button-primary）: オレンジのピル型、右に矢印。上に小さな白い吹き出しでマイクロコピー
• 特典見出し帯（benefit-band）: 水色の横帯に特典番号タブと白抜きの特典名・大きな数字
• 製品カード（product-card）: 白カードに切り抜き製品写真、小ラベル、製品名、短い説明
• 課題解決カード（problem-card）: 上部に水色の悩みラベル、写真、効果数値を水色で大きく
• 導入事例カード（case-carousel-card）: 業態アイコンと店舗数バッジ、水色の見出し、本文、店舗写真。左右に丸い水色矢印
• 条件アコーディオン（accordion）: 白地に枠線、左に太字タイトル、右に＋アイコン
• 不安解消ブロック（worry-qa）: 灰枠の不安見出し→水色の電球アイコン付き回答→本文→円形顔写真と店名
• 問い合わせフォーム（contact-form）: 左ラベル＋赤い必須バッジ、右に入力欄、下に水色の送信ボタン

Do's and Don'ts

Do - 数値訴求は水色の大きな欧文数字で見せる - CTAは各セクション末に同じデザインで繰り返す - 背景は白と淡い水色を交互にしてリズムを作る - 製品は白背景の切り抜きで清潔に見せる - 注釈は小さく薄いグレーでまとめる

Don't - オレンジをCTA以外に多用しない - 濃い色の背景を本文セクションに使わない - カードに強い影やグラデーションをつけない - 見出しを全部水色にしない（黒と塗り分ける） - 角丸を大きくしすぎてポップにしない

Page Structure

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

1. ヘッダー（ブランド表示と常設問い合わせ）: 白地に左ロゴ、右にオレンジの小さなピルボタン
2. ファーストビュー（特典を一目で伝える）: 店舗写真の背景に白い半円パネル、大見出し、特典2枚を＋で連結、下にCTA
3. 解決できる課題（効果を3語で提示）: 円形アイコン3つを横並び、下に注釈
4. 特典詳細1（無償機器を紹介）: 淡い水色地に水色帯、製品カード4枚
5. 特典詳細2（月額無料を訴求）: 水色帯、2カラムカードに大きな0円、サポート紹介カード、CTA
6. 課題解決（悩み別の効果を示す）: 白地に3枚のカード、悩みラベルと効果数値
7. 利用イメージ（業務フローの理解）: 線画イラストと、矢印型ステップで導入前後を比較する表
8. 導入事例（実績で信頼づけ）: 淡い水色地にカルーセルカード、ドットインジケーター
9. 特典条件・注意事項（条件の明示）: 白地にアコーディオン2つ
10. 問い合わせフォーム（申込獲得）: 淡い水色地に白い大カード、水色見出しと送信ボタン
11. よくある不安（導入不安の払拭）: 不安見出し＋回答＋利用者の顔写真のブロックを3つ、最後にCTA
12. フッター（関連サービスと規約）: グレー地に白文字のリンク列とSNSアイコン

Imagery

• タブレットやスマホのUI画面を白背景で切り抜いて並べる
• 店舗スタッフの明るい自然光の写真、笑顔で接客
• 飲食店の店内を浅い被写界深度で背景に使う
• アイコンは水色の細い線画を淡い円の中に
• 業務フローは水色アクセントのシンプルな線画イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央最大960px程度、カードは3〜4カラム
• SPではカードを1カラム縦積み、事例はスワイプカルーセル
• FVの特典2枚はSPで縦積みにし＋を間に置く
• フォームはSPでラベルを入力欄の上に配置
• CTAはSPで幅90%のピル型に広げる

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