セキュリティ会社（カッコイイ系／高級感）のWebデザイン見本

社員30〜300人の会社の社長・情報システムの担当者。「うちは狙われない」と思っていたが、取引先から対策を聞かれて焦っている人。高そうで頼れる印象を最初の1画面で与え、「まず無料診断」に進ませる。


業種	IT・Web
系統	カッコイイ系（黒地・大きく太い文字・直線・速く切れのいい動き）
テイスト	高級感
色	紫（黒地に紫の光。白い区切りも1つ）
形	LP型（1枚もの）：ヘッダーはロゴと「無料診断」だけ。申し込みボタンは4か所＋スマホは画面の下に固定
スライド	なし
メインビジュアル	画像1枚のLP風（大きなコピー）：サーバー室の写真1枚を全面に、太く大きいコピー「見えない攻撃を、見える化する。」とボタン
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A03 全画面の写真が、余白のある角丸カードに縮む／G02 中央の縦線を動かして「診断前・診断後」の画面を見比べる／C05 対応の4段階が雑誌の見開きのように横に流れる（縦書きの大きな番号）
架空の会社	「NOCTGUARD（ノクトガード）株式会社」— 中小企業向けの診断と24時間の見張りをする会社

だれに向けたページか

社員30〜300人の会社の社長・情報システムの担当者。「うちは狙われない」と思っていたが、取引先から対策を聞かれて焦っている人。 高そうで頼れる印象を最初の1画面で与え、「まず無料診断」に進ませる。

黒地の補足は #b9b4c7（--c-panel の上 9.20）。

メインビジュアル（A03）：サーバー室の写真1枚が全面。巨大なコピーと「無料で診断する」①。スクロールすると、写真が四辺から縮んで余白のある角丸カードになり、コピーは上に抜ける（切れのいい power4）
悩み：「こんなこと、ありませんか」4行。線で区切った硬い表
G02 診断前・診断後：同じ管理画面の絵（HTMLで描いた画面）を、中央の縦線で左右に見比べる。左は赤い警告だらけ、右は紫で整理された画面。キーボードの矢印でも動かせる（input type=range）
特長：3つ。大きな番号と細い線
C05 対応の流れ：検知→分析→封じ込め→報告の4ページが、雑誌の見開きのように横に流れる（PCだけ。縦にスクロールすると横へ）。縦書きの大きな番号と短い文。背景は黒と紫が交互。申し込み②
声：2社（〇〇株式会社さま）
料金：白い区切り。3つのプラン（〇〇円）。申し込み③
よくある質問：details
申し込み：都市の夜景の上に大きなボタン④
フッター

JSや GSAP が無いとき：写真は全面のまま、見開きは縦に4枚並ぶ。G02 の見比べは真ん中で止まり、診断前と診断後が左右半分ずつ見える（つまみは JS があるときだけ動く）
prefers-reduced-motion のとき：上と同じ「動かない版」。見比べだけは手で動かせる
動きは速く短く（0.4〜0.6秒）。光が点滅し続けるものは置かない

新しく作る：サーバー室の通路（メイン）／監視室の後ろ姿／紫の光のキーボード。写真庫から：023 法律事務所の夜景（申し込み）／023 相談室（声）。顔は写さない。

料金・件数・お客様の声・会社名・認証番号はすべて見本の値（〇〇）。会員が本物に替える。