DESIGN.md — 深緑×オレンジの警告帯付きセキュリティSaaS LP（Teal Green Cyber Security SaaS LP with Hazard Alert Section）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 深緑・ミント地・警告ストライプ・オレンジCTA・白カード・フラットイラスト
• 地の質感: 基本はフラットな単色面。危機訴求部のみ黒のざらついたコンクリート調テクスチャ、緑帯には回路線の淡い模様
• 形: 小さめ角丸の白カード、ピル型ボタン、円形の数字バッジ、下向き三角の誘導矢印
• 温度感: やや寒色寄り。オレンジと黄の差し色で温度と緊急性を加える

Colors

• 地色は白とミントグレーを交互に使い、セクションの区切りを色面で示す
• 深緑は帯セクション・見出し・番号バッジ・Case ラベルに限って使う
• オレンジは CTA ボタンと見出し内の強調語だけに使う
• 危機訴求の部分だけ黒地と黄の警告ストライプに切り替え、ページの温度を一段下げる
• 見出しの下には黄色マーカーの下線を引く
• 統計カードは黄地に黒文字で、数字を大きく見せる
• button-primary は文字 #FFFFFF × 背景 #F47523 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C3530A、4.6:1）を使う。
• stat-circle は文字 #E67423 × 背景 #FEFEFE のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BC5A15、4.52:1）を使う。

Typography

• 見出しは太いゴシックにし、キーワードだけオレンジで少し大きくする
• セクション見出しの上に英字の小ラベル（大文字）を添える
• 数字は欧文の極太書体で大きくし、単位は小さく添える
• 本文は 14px・行間 1.8 で、中央揃えの短文を基本にする
• Case ラベルは斜体の欧文で深緑地に白抜きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は 2〜3 列のカードグリッド）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃えの見出し、マーカー下線、カード群の順で組む
• 悩み・理由・業種のカードは同じサイズで等間隔に並べる
• 危機訴求部はページ幅いっぱいのダーク帯にし、上下を警告ストライプで挟む
• CTA ボタンは各ブロックの最後に中央配置する
• ダーク帯の後には白い大カードを重ね、解決策へ移る

Elevation & Depth

• 白カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.06)）をつける
• CTA ボタンには下方向にやや濃い影をつけ、浮いて見せる
• ダーク地の上の黄カードには影をつけず、色のコントラストで目立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 業種写真はカード上部いっぱいの横長矩形。顧客写真は角丸矩形
• セクション境界: 基本は直線で色面を切り替える。危機訴求の前後は黒×黄の斜めストライプ帯と下向き三角矢印
• CTA はピル型にし、右端に丸い矢印アイコンを置く
• 理由カードの上端に深緑の円形番号を半分はみ出させて載せる
• 統計値は円形の白バッジに入れて FV に並べる
• Case ラベルは左上に角を落としたタブ型で付ける

Components

• 資料DL CTA（button-primary）: オレンジのピル型ボタン。右端に白丸の矢印、上に小さなマイクロコピーの吹き出しを付ける
• 実績数字の円バッジ（stat-circle）: FV 右下に白い円を 3 つ並べ、オレンジの大きな数字を入れる
• 悩み Case カード（case-card）: 白カード。左上に深緑の Case タブ、淡緑のラベル帯に悩みの見出し、その下に説明文
• 警告ストライプ帯（hazard-stripe）: 黒×黄の斜めストライプ。ダーク地セクションの上下を区切る
• 危機統計カード（alert-stat-card）: 黄地に太い黒枠のカード。警告アイコンと大きな数字、説明、ピクトグラム、出典を縦に積む
• 選ばれる理由カード（reason-card）: 上端に深緑の番号円を付けた白カード。線画アイコン、本文、チェック付きの要点 2 行を入れる
• マーカー下線見出し（heading-marker）: 太字の見出しの下に黄色の太線を敷き、上に英字の小ラベルを置く
• 詳細リンクボタン（button-secondary）: 深緑帯の上に置く白またはミント色の角丸ボタン。アイコンと小さな説明文、＋記号を付ける
• 警告アイコン付きリスト（check-list）: 淡緑のパネル内に、黄色の丸い感嘆符アイコンと 1 行テキストを並べる

Do's and Don'ts

Do - オレンジは CTA と強調語に限って使い、目線をそこへ集める - 危機訴求では黒地・黄・警告アイコンで切迫感を出し、その後は白地で解決策を見せる - 数字は極太の欧文書体で大きく見せ、出典を小さく添える - アイコンは深緑の単色線画でそろえる - 見出しには必ず黄色マーカーの下線を付ける

Don't - 深緑以外の寒色（青など）をブランド色として足さない - ダーク地の演出を危機訴求以外のセクションで使わない - 角丸を大きくしすぎてポップに寄せない - 写真に強いフィルターをかけたり、斜めに切り抜いたりしない - CTA を緑色にしない（オレンジで固定する）

Page Structure

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

1. ヘッダー（ナビとCTAへの常時導線）: 白地の左にロゴ、右に小さなナビとオレンジのピルCTA
2. ファーストビュー（対象と価値を即座に伝える）: ミントのグラデ地に回路模様。左に対象タグと大見出し（強調語はオレンジ）、右にフラットなイラスト、下に数字の円バッジ 3 つとCTA
3. 悩みの提起（読み手の課題に共感する）: 薄グレー地に、マーカー見出しと Case カードを 2×2 で並べ、最後に「このままだと」の文と下向き三角
4. 危機訴求（リスクを数値で示し、緊急性を伝える）: 警告ストライプで挟んだ黒テクスチャ地。警告ラベル、白見出し、黄の統計カードを 3 つ並べる
5. 解決策の提示（ツールの必要性を説明する）: 白い大カードを重ね、左にイラストと説明、右に淡緑パネルの機能リスト、下にCTA
6. サービス概要（提供内容と強みを示す）: ミント地に、資料画像と説明の白カード、アイコン付きの小カード 4 つ
7. 詳細誘導帯（機能の詳細ページへ送る）: 深緑の全幅帯に白見出しとサブボタン 2 つ
8. 選ばれる理由（差別化を伝える）: 番号付きの白カード 3 つ。アイコン、本文、チェック付きの要点
9. 業種別メリット（自社に当てはまると感じてもらう）: 英字ラベル付きの見出し。写真を上に載せた白カードを 2×2 で並べる
10. お客様の声（導入事例で信頼を得る）: 白カードに集合写真、深緑の社名ラベル、長めの本文
11. 資料ダウンロードCTA（最終的なコンバージョン）: 回路模様の深緑帯。左に資料のモック画像、右に説明文とオレンジCTA
12. フッター（運営元情報と規約へのリンク）: 薄グレー地にロゴを 2 つ並べ、小さなリンク列とコピーライトを置く

Imagery

• 人物とデバイスを深緑・ミントで描いた、ベクター調のフラットなアイソメ風イラスト
• アイコンは深緑の単色線画（盾・PC・クリップボード・チェックなど）でそろえる
• 業種写真は工場・PC作業・EC・介護などの実写で、明るく自然な色味にする
• 背景には淡い回路基板パターンを敷き、IT感を出す
• 危機訴求には黒いコンクリートのテクスチャと黄色の警告三角アイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では 2×2 や 3 列のカードを 1 列に縦積みする
• FV の SP 版はイラストを見出しの下に置き、数字バッジは横 3 つを縮小して残す
• 警告ストライプは SP では高さ 24px 程度に縮める
• CTA は SP で幅 90% のピル型にする
• ヘッダーナビは SP でハンバーガーメニューにし、CTA を下部に固定する

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