DESIGN.md — 青グラデと濃紺の製造業向けSaaS LP（Corporate Blue Gradient BtoB SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、情報量多め・訴求型
• キーワード: 青グラデーション・濃紺・白カード・番号付き見出し帯・アイソメイラスト・DX
• 地の質感: フラットな面に青のグラデーションを重ねる。暗い回路風テクスチャの写真をCTA帯の背景に使う
• 形: 角丸8〜12pxのカードとボタン。見出し帯の下に小さな下向き三角を付ける
• 温度感: 寒色中心で、清潔で理知的な印象

Colors

• 地は白と淡い青白を交互にし、強みセクションのみ青グラデの全面背景にする
• 見出しは濃紺、見出し内のキーワードだけ primary の青で色替えする
• CTAは緑=試す、青グラデ=資料、白地青枠=相談の3種で役割を色分けする
• 詳しく見る系のサブボタンはすべて濃紺ベタに統一する
• CTA帯は暗い回路風写真の上に白カードを載せる
• 暖色はイラスト内のみに留め、UIには使わない
• button-trial は文字 #FFFFFF × 背景 #01B29E のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018475、4.61:1）を使う。
• button-download は文字 #FFFFFF × 背景 #008CEE のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0078CD、4.6:1）を使う。
• button-contact は文字 #008CEE × 背景 #FFFFFF のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0078CD、4.6:1）を使う。

Typography

• 見出しの上に小さな英字ラベルを primary 色で置く
• 見出しは中央揃え、本文はカード内では中央、単独では左揃え
• CTAボタンは上に小さな補足文、下に太い主文言の2段にする
• 悩みカードは結論部分だけ青文字にする
• 番号はRobotoの太字で白四角や見出し帯に入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（悩み・業界カードは 2 カラム）
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 70px、基本単位 8px、カード内 18px（375px 幅換算）
• 左右余白は約14px、ネストしたカードはさらに18px内側
• 強みセクションは大カードの中に小カードを縦積み
• 大カード同士は丸いプラスアイコンでつなぐ
• 各セクション末尾に全幅の濃紺サブボタンを置く
• CTAカードはボタン3つを縦に積み、間隔16px

Elevation & Depth

• カードは影をほぼ付けず、背景色との差で浮かせる
• FVのCTAカードは白で青背景の下端に重ねる
• ラインナップカードは1pxの薄グレー枠のみ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸8pxの長方形、業界カードは暗いオーバーレイを重ねる
• セクション境界: 直線で切り替え、強みセクション上端だけ下向き三角の切り欠きを入れる
• 見出し帯の下中央に小さな下向き三角を付ける
• プランバッジだけピル型にする
• 円形アイコンは矢印・プラス・FAQ開閉に使う

Components

• 無料体験CTA（button-trial）: 緑の角丸ボタン。補足文と主文言の2段に右矢印丸アイコンを添える
• 資料DL CTA（button-download）: 青からシアンへの横グラデのボタン。2段の文字構成
• お問い合わせボタン（button-contact）: 白地に青の2px枠、青文字、フォームアイコン付き
• 詳しく見るボタン（button-sub）: 濃紺ベタの全幅ボタン、白文字に青い丸矢印
• 悩みカード（card-trouble）: 濃紺の見出し帯に大きな白番号を重ね、本文とイラストを白カードに入れる
• 番号付き機能カード（card-feature）: 水色またはティールの帯に白四角の番号と見出し、下に三角、イラストと説明文
• プラン吹き出しバッジ（badge-plan）: カード上端に重ねたピル型の吹き出し、下に三角
• FAQ行（faq-item）: 左に丸背景のQ、質問文、右に青い丸の開閉アイコン、下に区切り線
• 英字ラベル付き見出し（section-label）: 小さな英字ラベルの下に濃紺の大見出し、キーワードだけ青

Do's and Don'ts

Do - 青系のグラデとフラットな濃紺で統一する - CTAは3種セットで、ページ内に2〜3回繰り返す - 機能説明は番号付き見出し帯とアイソメイラストで揃える - 強調語だけを primary の青に色替えする - 実績ロゴと受賞バッジをFV直下に置いて信頼を出す

Don't - 暖色をUIの面やボタンに使わない - サブボタンの色を濃紺以外にしない - 角丸を大きくしすぎてポップに寄せない - 影を強くしない - 手書き風フォントは使わない

Page Structure

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

1. ファーストビュー（価値を一言で伝え資料請求へ誘導）: 青グラデ背景に白い大見出し、PC画面のモックアップとアイコン、下端に重ねた白カードの2CTA
2. 実績・受賞（信頼性の担保）: 金の受賞バッジと濃紺の文字、ロゴを横に流すマーキー2段
3. 製品紹介動画（概要理解）: 中央見出し、角丸の動画サムネに青い再生ボタン、下に本文
4. お知らせ（最新情報）: 青帯の見出しが付いた白カード、日付と緑枠タグ
5. 悩みの提起（課題共感）: 淡い青グラデ背景に2×2の番号付き悩みカード、最後に解決宣言
6. 強み・選ばれる理由（機能価値の説明）: 濃い青グラデ全面に淡水色の大カード、水色帯の番号カードを3枚縦積み
7. サポート（導入後の安心）: プラスアイコンでつなぎ、ティール帯の番号カード3枚と各詳しく見るボタン
8. CTA（コンバージョン）: 暗い回路風写真背景に白カード、3色のCTAボタンを縦積み
9. 導入事例（社会的証明）: 写真スライダーに業種タグ、左右の青丸矢印、ドットナビ
10. 業界別ソリューション（自分ごと化）: 淡い青白背景に暗い写真の2カラムカード、白文字と丸矢印
11. ラインナップ（プラン比較）: 枠線カードの上にピル型吹き出し、淡青帯とチェックリスト
12. よくある質問（不安解消）: Q付き行のアコーディオン、末尾に濃紺の一覧ボタン

Imagery

• 人物とPC・タブレットのアイソメトリックなイラスト。青・ティール・黄の配色
• 製造現場の人物の集合写真は明るく自然光
• 業界カードは工場・電子基板・溶接などの写真に暗い紺のオーバーレイ
• CTA背景は暗い紺の回路・データ風テクスチャ
• FVは画面UIのモックアップに浮遊する丸アイコンを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを左テキスト・右モックアップの2カラムにする
• PCは悩みカード2×2を横長カードに、強み・サポートは3カラム横並びにする
• PCのCTA3ボタンは横一列に並べる
• PCの業界カードは3カラム、事例は複数枚を並べたスライダー
• 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 行書くと起動時に読み込まれる。