DESIGN.md — 水色×オレンジCTAの帳票クラウドBtoB LP（Clean Cyan BtoB SaaS Document LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 白カード・水色アクセント・2択CTA・線画アイコン・紙飛行機モチーフ・斜線付き小見出し
• 地の質感: フラットな単色面。CTA帯だけ水色の斜め分割で奥行きを出す
• 形: 角丸8〜12pxのカード、ピル型ボタン、矢羽型のステップ帯
• 温度感: 爽やかで涼しい寒色系。CTAのオレンジだけで温度を足す

Colors

• 地は薄グレー、各セクションは白い角丸カードで区切る
• 見出し・下線・アイコン・ラベルは水色で統一する
• 主CTAはオレンジ、サブCTAは緑。必ず2つを並べて出す
• CTA帯は水色の2トーン斜め分割＋白カードで作る
• 3枚カードの見出し部はピーチ・クリーム・淡水色を1色ずつ当てる
• 本文はほぼ黒の濃グレーで、色文字は見出しだけにする
• button-primary は文字 #FFFFFF × 背景 #FE8D2B のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD5801、4.61:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #4ABB7B のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#328455、4.6:1）を使う。
• faq-item は文字 #1BA8D0 × 背景 #FEFEFE のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#15809E、4.51:1）を使う。
• step-chevron は文字 #1BA8D0 × 背景 #ECF9FC のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#15809E、4.58:1）を使う。

Typography

• セクション見出しは中央揃えの水色太字にし、下に短い水色の横線（幅40px）を置く
• 小見出しは両脇に斜線（＼＼ ／／）を添える
• 見出しの下に2行のリード文を中央揃えで入れる
• カード本文は左揃えにする
• ボタンの上に斜線で挟んだ短いマイクロコピーを小さく入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は縦積み、アイコン一覧は 2〜3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは白い角丸カードにまとめ、地のグレーとの間に余白を取る
• 見出し→リード→コンテンツの順に中央揃えで組む
• 3〜4セクションごとに2択CTAブロックを挟む
• アイコン一覧は線画アイコンの下に2行ラベルを置いた均等グリッドにする
• 流れはSTEP番号付きの矢羽型帯を横（SPでは縦）に並べる

Elevation & Depth

• カードは影なし、または極薄い影＋細い枠線にする
• CTAブロックの白カードは水色帯の上に浮かせる
• 紙飛行機イラストの下にだけ淡い楕円の影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の矩形。認証マークやロゴは切り抜いて白地に置く
• セクション境界: 直線の白カード境界。CTA帯は内部を斜めに分割する
• ボタンはすべてピル型にする
• 帳票ラベルカードは角丸の白カードにし、水色の上線ラベルを付ける
• 数字アイコンは円形の淡色背景にする
• STEPは右向き矢羽（シェブロン）形状にする

Components

• 無料相談ボタン（button-primary）: オレンジのピル型ボタン。上に斜線付きの小さなマイクロコピーを置く
• 資料DLボタン（button-secondary）: 緑のピル型ボタン。主CTAと横並び（SPでは縦並び）にする
• 2択CTAブロック（cta-block）: 水色の斜め分割帯に白カードを置き、ロゴ・2行のリード・2ボタンを入れる
• 下線付きセクション見出し（heading-underline）: 水色の太字見出しに、短い水色の下線を付ける
• 3枚並び特長カード（feature-card）: 上部に淡色帯の見出し、下に本文を置く白カード
• 番号付き理由カード（reason-card）: 左上に大きな水色の番号、中央に円形アイコンを置き、その下に説明文
• FAQカード（faq-item）: 水色の質問文を中央に置き、回答は淡い水色面に入れる
• STEP矢羽（step-chevron）: 淡い青グラデの矢羽の中に、円形の線画アイコン・STEP番号・ラベルを入れる
• FV内資料請求フォーム（lead-form）: スマホ枠風の黒縁カードに入力欄・同意チェック・緑ボタンを入れる

Do's and Don'ts

Do - 見出しは水色の中央揃えに統一し、下線を付ける - CTAは必ずオレンジ（相談）と緑（資料）を並べる - アイコンは細い線画に水色を少し差して揃える - 白カードと淡い水色面を交互に使い、情報を区切る - 紙飛行機と点線の装飾でセクション間をつなぐ

Don't - 暖色を地色や見出しに使わない（オレンジはCTAだけ） - 濃い影や立体的なボタンにしない - 写真を全面に敷かない - 見出しの書体を明朝や手書きにしない - カードの角を尖らせない

Page Structure

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

1. ファーストビュー（サービス名・実績・安心要素を示し、資料請求を促す）: 水色の面にタイトル・実績メダル・円グラフ風バッジ・3つの認証ポイントを置き、右側にフォームを並べる
2. 導入企業ロゴ（社会的な証明）: 白地にロゴを横一列に並べる
3. 悩みの提起と解決（課題への共感）: PC画面のモックと、イラスト付きの悩みを2×2で並べる
4. 安心の特長（導入の不安を解消する）: 淡色見出し帯の3枚カード
5. CTA（相談・資料請求に誘導）: 水色の斜め帯に白カードと2ボタンを置く
6. 選ばれる理由（差別化）: 番号付きの3カードに円形イラストを入れる
7. 仕組み・配信手段（サービスの流れを理解させる）: 図解を矢印でつなぎ、手段カードと機能アイコン一覧を置く
8. セキュリティ認証（信頼性の担保）: 認証マーク入りの3カード
9. 連携・対応帳票（適用範囲を示す）: アイコングリッド・連携ロゴ・部署別ラベルカードのグリッド
10. サブサービス訴求（アウトソーシングの案内）: 緑の斜め帯に白カードとオレンジボタンを置く
11. お客様の声（導入事例）: 写真付きの横スライダーカード
12. よくある質問（疑問の解消）: 水色の質問文と淡水色の回答面を持つカードを縦に並べる
13. 導入までの流れ（手順を見える化する）: 6段階のSTEP矢羽
14. 運営会社紹介とフッター（企業の信頼）: 左にロゴ枠、右に沿革文。最下部にコピーライト

Imagery

• 人物とPCを描いた線画イラスト。黒の線に水色を少し差す
• 細線のアウトラインアイコンで機能を表す
• 紙飛行機と点線の軌跡をセクション境界に飛ばす
• PC画面のモックアップで管理画面を見せる
• 事例には自然光のオフィス写真や人物写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの2カラムFVは、SPではタイトル→フォームの縦積みにする
• 3枚カードはSPで縦1列にする
• 機能アイコン7列はSPで3〜4列に折り返す
• CTAの2ボタンはSPで縦に並べ、幅を100%にする
• STEP矢羽はSPで縦向きのフローにする
• PCの本文幅は約900pxで中央に寄せる

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