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・資料ダウンロード誘導・実績数字
• 地の質感: フラットな面に柔らかい青グラデを重ねる。図解の背後に淡い光の球や六角格子を薄く入れる。
• 形: 角丸カード（8〜16px）とピル型ボタン。円形の矢印アイコンと丸い図解を組み合わせる。
• 温度感: 寒色寄り。白と淡い水色で清潔感を出し、黄色で少しだけ温度を足す。

Colors

• 地は白・淡い水色・薄グレーの3色を、セクションごとに交互に切り替える。
• ファーストビューと資料DLの帯は、濃い青からシアンへの斜めグラデにする。
• 見出しのキーワードと図解はすべてprimaryの青で統一する。
• 黄色は短い見出しの両脇の線とFVのコピーだけに使う。面には使わない。
• 主CTAは左が濃い青、右が明るい青のグラデのピル型にする。
• サブボタンは白地に青の枠線と青文字にする。
• フッターはチャコールの地に白文字。直前に濃紺ボックスのCTA群を置く。
• feature-band-card は文字 #6D7174 × 背景 #EEF5FD のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6C7073、4.55:1）を使う。

Typography

• 書体は角ゴシックの1系統に絞り、太字の700で見出しを組む。
• 大見出しは左揃え（一部は中央揃え）にし、上に長さ30px・太さ3pxの青グラデ線を置く。
• リード見出しは青で2行に分け、中央揃えにする。
• 数字は大きく太く表示し、単位は小さくする。
• 本文は行間を1.9程度と広く取り、中央揃えの短い改行で読ませる。
• 英字の機能名は欧文サンセリフの太字にし、矢印付きで並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴグリッドだけ 2 列。
• 本文ブロックの幅: 画面幅の約 74%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右に約13%の余白を取った中央寄せにする。
• セクションの上下余白は56〜72pxにする。
• 図解は本文幅いっぱいか、少しはみ出す大きさで配置する。
• カードは縦に積み、間を12〜16px空ける。
• スライダーはカードの左右に円形の矢印を重ね、下にドットのページャーを置く。

Elevation & Depth

• カードには薄い影を付ける（0 4px 16px rgba(0,0,0,0.08)）。
• ロゴのタイルは白地に軽い影を付け、右下に小さな丸矢印を添える。
• FVのボタンは半透明の白い枠線で浮かせる。
• フッター前のCTAボックスは影なしの濃紺の面にする。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸10px前後の長方形。図解は円形や雲の形にまとめる。
• セクション境界: 直線で地の色を切り替える。斜めや波形は使わない。
• 主CTA・サブボタン・リンクボタンはすべてピル型にする。
• 矢印は円の中に入れる。
• 見出し帯のカードは、上部の青帯と下の淡い水色の本文を角丸でひとまとめにする。
• タブは上部だけ丸い吹き出し形にし、選択中のものだけを青にする。

Components

• グラデのピル型CTA（button-primary）: 左の濃い青から右の明るい青へのグラデ。白い太字の文字と右向きの矢印を入れる。
• 枠線のサブボタン（button-outline）: 白地に1.5pxの青枠と青文字。右に矢印を付ける。
• FVのアクションボタン（fv-action-button）: 青地の上に置く横長のピル。左にアイコン、右に白丸の矢印を入れ、3つを縦に並べる。
• セクション見出し（heading-bar）: 大見出しの上に、短い青グラデの線を置く。
• 黄色の線で挟んだ小見出し（heading-yellow-lines）: 青文字の両脇に、短い黄色の横線を1本ずつ置く。
• 青帯の見出しカード（feature-band-card）: 上部は青帯に白文字の見出し。下は淡い水色に本文を入れ、続けて青の結論文と図解を置く。
• 導入企業ロゴのタイル（logo-tile）: 白い角丸タイルを2列のグリッドに並べ、右下に灰色の丸矢印を付ける。
• アイコン付きリンクカード（link-list-card）: 白地に枠線を引き、左に灰色のアイコンとラベル、右に青丸の矢印を置く。
• チェックリストの箱（check-list-box）: グラデ帯の上に半透明の濃い青の箱を置き、白丸チェックと白文字の項目を3行並べる。
• フッター前のCTA群（footer-cta-stack）: 青地に濃紺のボックスを4段重ねる。各段にアイコン・ラベル・白丸の矢印を入れる。

Do's and Don'ts

Do - 色は青系に絞り、黄色を差すのは線と数字だけにする。 - 仕組みは文章でなく、雲・建物・端末のフラットな図解で見せる。 - 資料DL・トライアル・問い合わせの3つのCTAを、ページ内で何度も出す。 - 地は白・淡い水色・薄グレーの順で区切りをはっきりさせる。 - 矢印付きのピル型ボタンに統一する。 - 実績数字は月桂樹やメダル風のバッジにして見せる。

Don't - 赤やオレンジなどの暖色をCTAに使わない。 - 写真を背景いっぱいに敷かない。人物写真は導入事例のカードだけにする。 - 角ばった四角いボタンを混ぜない。 - 黄色を広い面に塗らない。 - 図解に立体的なリアル調の3D表現を混ぜない。 - 本文を長い段落で詰めず、短く改行する。

Page Structure

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

1. ファーストビュー（価値と実績を一目で伝え、3つのCTAへ誘導する。）: 青グラデの地に実績バッジ・ロゴ・黄色のコピーを置く。メリットを縦線で区切って3つ並べ、ボタンを3段積む。
2. お知らせ（最新情報を示す。）: 灰色の小さな箱に日付と1行の見出しを入れ、枠線ボタンを置く。
3. 導入実績（社会的な証明を見せる。）: メダル風の数字バッジの下に、ロゴのタイルを2列×4段並べる。下端に街並みのシルエットを薄く入れる。
4. サービス概要（何のサービスかを説明する。）: 短い説明文と、クラウドを中心にした機能の図解を置く。下に工程の矢羽根を3つ並べる。
5. 実現する未来（導入後の効果を示す。）: 淡い水色のグラデの地に、黄色の線で挟んだ小見出しと円形の図解を2つ置く。
6. 動画解説（短時間で理解させる。）: 方眼柄の白い角丸カードに再生アイコン付きのラベルと、動画のサムネイルを入れる。
7. 運用サポート（任せられる範囲を示す。）: 淡い青の矢印でつないだ枠線カードを縦に3つ並べ、続けて青帯の見出しカードとイラストを交互に置く。
8. 機能・構成（機能と選べる構成を示す。）: リング状の図に英字の機能名を矢印付きで添える。白いカードの中で、構成ごとの図解と枠線ボタンを縦に並べる。
9. 価格（コストの優位性を示す。）: 青いリード文と主CTAの下に、他社との比較を円柱を積んだ図で見せる。
10. 資料ダウンロード（見込み顧客を獲得する。）: 青からシアンへのグラデ帯に、資料の画像・チェックリストの箱・白いピル型ボタンを置く。
11. 導入事例・資料・イベント（信頼を補強し、回遊させる。）: 写真カードのスライダーとタブ付きの資料スライダーを置き、それぞれの下に一覧への主CTAを付ける。
12. 無料トライアル（試用を促す。）: 濃いグレーから緑灰への横グラデにモニターの画像を置き、白いピル型ボタンを付ける。
13. お問い合わせ・リンク（相談の導線を作る。）: 薄グレーの地に青いリード文・フォームボタン・電話番号を置き、アイコン付きのリンクカードを縦に並べる。
14. CTA群とフッター（最後のひと押しをし、サイト情報を載せる。）: 青地に濃紺のボックスを4段重ね、続けてチャコールのフッターに枠線ボタン・サイトマップ・認証ロゴを置く。

Imagery

• アイコンは青と白の2色。線は太めで、角を丸くしたフラットなデザインにする。
• 雲・ビル・PC・サーバーを点線や線でつないだネットワーク図にする。
• 図の背後には、淡い光の球・六角格子・方眼を薄く敷く。
• 人物は、スーツやヘッドセット姿のフラットなイラストで青系の服を着せる。
• 資料の画像は、複数ページを扇状に重ねた斜めのモックアップにする。
• 事例は、担当者が社名ロゴの前に立つ自然光の写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 提供されたPC画像は、SPと別のLPに見える。下の項目は、このSPの型をPCに広げるときの推奨として書く。
• PCは本文の最大幅を960〜1080pxにして中央に寄せる。
• FVは左右2カラムにし、左にコピーとボタン、右にメインビジュアルを置く。
• ロゴは4〜5列、関連サービスやリンクカードは2〜3列に広げる。
• 青帯の見出しカードと図解は、左右に交互に並べる。
• ヘッダーは横並びのナビにし、右上に資料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 行書くと起動時に読み込まれる。