DESIGN.md — 青グラデと淡青地のクラウドセキュリティLP（Corporate Blue Cloud Security SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、情報量多め・訴求型
• キーワード: コーポレートブルー・クラウド図解・淡青グラデ地・ピル型CTA・導入実績訴求・資料DL導線
• 地の質感: フラットな面に、薄いグラデーション・六角形のグリッド・半透明の球体を重ねる。デジタルで清潔な質感
• 形: ピル型ボタン、角丸 8〜16px のカード、円形の図解。見出しの左上に短い青のバー
• 温度感: 寒色中心。黄色の差し色で少しだけ温かみを足す

Colors

• 地は 白→淡青→白→薄グレー の順に交互に切り替え、セクションの境目を色で示す
• ファーストビューと資料DLの帯は青のグラデーションにして、白文字と白ボタンを置く
• 主CTAは青から淡青へのグラデーション。白い地ではこれを使う
• 黄色は短いアクセントバーと、ファーストビューのキャッチだけに使う
• 図解のアイコンはすべて primary の青の単色で統一する
• フッターはダークグレーの 2 段構成にする
• tag-label は文字 #2C73CB × 背景 #EEF5FD のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B6FC5、4.57:1）を使う。

Typography

• すべて太めのゴシックで統一し、明朝は使わない
• 見出しは中央揃えか、左上に短い青バーを付けた左揃えにする
• 導入社数などの数字は、周りより大きい青の欧文太字にする
• サブ見出しの両脇に、斜線（＼ ／）か黄色の短いバーを置く
• 本文は中央揃えで 2〜3 行に収める
• セクションによっては英字の機能名を青の太字で並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右に約 12% の余白をとる
• ロゴの一覧は白カードの 2 列グリッドにする
• サービス内容は、矢印でつないだ縦並びのカードで流れを見せる
• 事例・資料・イベントは左右の矢印付きのカルーセルにする
• セクションごとに CTA ボタンを中央に 1 つ置く

Elevation & Depth

• カードは白地に、ごく薄くぼかした影（0 4px 16px rgba(0,0,0,0.08)）を付ける
• ファーストビューのボタンには半透明の白い枠を付けて浮かせる
• カルーセルの矢印は、グレーの丸に軽い影を付ける
• 影は全体に控えめにし、線と面の色差で階層を示す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 8px の長方形。図解は円形や球体で囲む
• セクション境界: 直線で背景色を切り替える。セクションの間に下向きの矢印を置く場合もある
• CTAはすべてピル型にし、右端に → を付ける
• サブボタンは白地に青い枠線のピル型
• 情報カードは角丸 8px で、青い細枠か影を付ける
• タグは角丸 4px の小さな淡青のラベル

Components

• グラデーションのピルCTA（button-primary）: 青から淡青へのグラデーション、白い太字、右に →
• 枠線のサブボタン（button-outline）: 白地に青い枠線と青文字のピル型、→ 付き
• FVの大型アクションボタン（hero-action-button）: 青グラデの地に、アイコン・ラベル・丸矢印を横に並べた半透明枠のピル
• 青バー付きの見出し（heading-bar）: 見出しの上に、短い青グラデのバー（40×4px）を置く
• 工程カード（flow-card）: 淡青のヘッダーにアイコンと見出し、白い本文。上下を太い矢印でつなぐ
• 青帯付きの特長ブロック（feature-band）: 青い帯の見出しに、淡青の吹き出しで説明を付け、その下に青文字の結論とイラストを置く
• 導入企業のロゴカード（logo-card）: 白いカードの中央にロゴ、右下に小さな丸矢印
• リンクリストのカード（link-card）: 白地に枠線、左にグレーのアイコン、右に青い丸矢印
• チェックリストの箱（check-list-box）: 青グラデの地の上に、半透明の濃い青の箱。白い丸チェックと白文字の 3 項目
• 業種・種別のタグ（tag-label）: 淡青か青の地に、小さな太字

Do's and Don'ts

Do - CTAは資料DL・トライアル・問い合わせの 3 種類にし、ページ全体で何度も配置する - 仕組みの説明は、青い単色アイコンと線でつないだ図解で見せる - 導入社数のバッジとロゴの一覧を序盤に置き、信頼感を出す - 背景は白・淡青・薄グレーを交互に使い、区切りを明確にする - ボタンには必ず → を付けて、行動を促す

Don't - 暖色を主役にしない（黄色は差し色だけにとどめる） - 明朝体や手書き風の書体を使わない - 角張った四角のボタンにしない - 濃い影や立体的な装飾を多用しない - 図解のアイコンを多色にしない

Page Structure

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

1. ファーストビュー（サービスの価値と主要な導線を示す）: 濃い青グラデの地に、実績バッジ・ロゴ・黄色のキャッチを置く。3 つの数値訴求を縦線で区切り、大型ボタンを 3 つ並べる
2. お知らせ（最新の情報を見せる）: 薄グレーの箱に日付とタイトルを 1 件、その下に枠線のボタン
3. 導入実績（社会的な証明を示す）: メダル風のバッジと青い大きな数字、ロゴカードの 2 列グリッド、背景に街並みのシルエット
4. サービス概要（サービスが何かを説明する）: ロゴと「とは？」の見出し、本文、アイソメトリックの図解、山形の 3 工程の帯
5. 実現する未来（導入後の効果を図で示す）: 淡青のグラデ地に、黄色バー付きの小見出しと、球体・同心円の図解を 2 つ
6. 動画紹介（短時間で理解してもらう）: 方眼の地の白カードに、再生ボタン付きのサムネイル
7. フルマネージドの特長（運用を任せられる安心感を伝える）: 矢印でつないだ工程カード 3 つと、青帯の特長ブロックを 3 つ、それぞれにイラスト
8. 機能（機能の全体像を示す）: 円環の図に英字の機能名を並べる。白カードの中で構成を 3 種類の図解で切り替える
9. 価格（コストの優位性を示す）: 他社のグレーの積み重ねと、自社の淡青の積み重ねを比べる図
10. 資料DL（リードを獲得する）: 青からシアンへのグラデの帯に、資料のモック、チェックリスト、白いピルボタン
11. 導入事例（具体的な成功例を見せる）: 写真カードのカルーセルとドットのインジケーター、事例集DLの淡青カード
12. 資料一覧・イベント（コンテンツへの導線をつくる）: 薄グレーの地にタブ風の丸ラベルとカルーセル。イベントは表形式で詳細を見せる
13. 無料トライアル・問い合わせ（最終的な行動を促す）: ダークグレーから緑灰へのグラデの帯に、モニターの画像と白ボタン。問い合わせフォームのボタン、電話番号、リンクカード
14. フッター（CTAとサイト内の導線をまとめる）: 青い地に濃紺のCTAカードを並べ、その下にダークグレーのリンク一覧と認証ロゴ

Imagery

• アイソメトリックのフラットイラストで、クラウド・ビル・PCをつないだネットワーク図を描く
• 人物はスーツ姿で、青い服のフラットなイラストにする
• アイコンは青単色の線と面で、雲・地球・サーバー・端末をモチーフにする
• 背景に六角形のグリッドや、半透明の発光する球体を薄く重ねる
• 事例の写真は、オフィスで担当者が社名ロゴの前に立つ構図
• 資料の表紙を扇状に重ねたモック画像を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左右 2 分割にし、左にコピーとボタン、右に大きなイラストを置く
• PC のヘッダーには、グローバルナビと 3 つのCTAボタンを常に表示する
• 工程カードや構成の図解は、PC では 3 列に横並びにする
• カルーセルは PC で 3 枚を同時に表示する
• ロゴのグリッドは PC で 4 列にする
• PC では画面の右端に、資料DLの縦型タブを固定する

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