Sentinel by Kayzen
エンジニアにセキュリティ製品を売る。すべての主張が実証できなければなりませんでした。
- 年
- 2026
- 制作期間
- 4週間
- 技術スタック
- Next.js · React · TypeScript · Tailwind · Vercel
- ポジショニング
- デザイン
- 開発
- テクニカルSEO
- ライティング
- 件の誤検知（公称）各検出結果に再現可能なPoCを添付
- 0
- 最初の有意義な描画CDNから配信される静的HTML
- < 1秒
- 読み込み時に呼び出すサードパーティドメイン
- 0
解決すべき課題。
背景
Sentinelは、Kayzen Webの自律型ペネトレーションテスト・プラットフォームです。AIエージェントはコードを解析するのではなく、アプリケーションを実行し、実際に攻撃を試み、採用した脆弱性のそれぞれに再現可能なPoC（概念実証）を添付します。このWebサイトは製品の営業用ショーケースであり、トライアルへの入り口です。
制約
ターゲットであるCISO、リードデベロッパー、プラットフォームチームは、マーケティングが最も通用しない層です。「完全な防御」を約束するセキュリティサイトは、最初の一行で信頼を失います。求められたのは、決して過剰な約束をせずに関心を引き、3社を比較しに来た非技術系の経営者にも読みやすいサイトでした。
解決策
私たちは通常の順序を逆転させました。約束より先に証拠を示すのです。トップページではまず実際のレポートの抜粋、つまり脆弱性、攻撃リクエスト、提案された修正を見せ、その後で初めてセールスポイントを語ります。用語は業界のもの（PoC、誤検知、CVSS）をそのまま使っています。読者はそれを知っており、言葉を薄めれば無知と受け取られるからです。
すべての判断に、理由がある。
デフォルトはダーク、ただし装飾ではない
ダークテーマはこの業界の慣習です。セキュリティツールはターミナルの中で使われます。ここではそれが機能的な意味を持ちます。コードブロックとレポートの抜粋はページで最もよく読まれる要素であり、暗い背景は長時間の閲覧時のまぶしさを抑えます。テキストと背景のコントラストは7:1以上、つまり最低限のAAではなくAAAレベルを確保しています。
証拠をコンポーネントに
再利用可能な「レポート抜粋」コンポーネントを作りました。脆弱性の見出し、CVSSによる深刻度、リクエスト、レスポンス、修正。ページ内に4回、それぞれ異なる事例で登場します。これがページ唯一のアニメーション要素です。購入の判断が下される場所に注意を集めるためです。
抽象的なイラストは使わない
南京錠も、盾も、ワイヤーフレームの地球儀もありません。ビジュアルはツールのスクリーンショットです。この市場では、汎用的なアイコンは製品がまだ存在しないことを示す最も確かなサインです。
密度をコントロールする
1行の長さを68文字に制限し、clamp()による可変のタイポグラフィスケールを採用しました。内容は本質的に高密度です。それを補うのはレイアウトの役目であって、読者の役目ではありません。
プロジェクトのカラーパレット
インク
#0B1120
ページ背景
スレート
#1E293B
カードとコードブロック
シグナル
#38BDF8
リンクとアクセント
アラート
#F43F5E
深刻度「重大」専用
タイポグラフィ体系
見出し用書体
Inter（ウェイト600〜800）
本文用書体
Inter（400〜500）
ひとつのファミリーで2つの役割を担います。レポートの抜粋はシステムの等幅フォントスタックで表示し、追加のフォントはダウンロードしません。
その裏側にある技術。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.jsによる静的レンダリング
すべてのページはビルド時に生成されます。製品サイトには配信すべき動的データがありません。常時サーバーレンダリングはレイテンシーと攻撃対象領域を増やすだけで、得るものは何もありません。完全なHTMLがCDNから配信されます。
読み込み時のサードパーティ依存ゼロ
Googleフォントも、外部のアクセス解析スクリプトも、チャットのiframeもありません。セキュリティサイトでは、初回レンダリング時に呼び出すサードパーティドメインのひとつひとつが自らに不利な材料となり、サプライチェーンへの現実の侵入口にもなります。
万全なセキュリティヘッダー
厳格なContent-Security-Policy、preload付きのHSTS、Referrer-Policy、デフォルトで閉じたPermissions-Policy。これはセキュリティ製品の提供者に期待される最低限です。そして技術系の見込み客が最初にとる行動は、ネットワークタブを開いて確認することです。
オープンソースのエンジンを公言
実行エンジンはオープンソースプロジェクトのStrixを基盤としています。サイトはそれを隠さず、明記してリンクしています。この読者層にとっては、ブラックボックスよりも技術的な構成要素のトレーサビリティのほうが価値があります。
検索で見つけてもらうための仕組み。
汎用クエリより比較クエリ
「自動ペネトレーションテスト」「DAST vs 手動ペンテスト」「脆弱性スキャナー 誤検知」。いずれもファネル中盤のクエリで、ボリュームは小さいものの意図は非常に強いものです。「サイバーセキュリティ」で競っても意味はなかったでしょう。
SoftwareApplicationのマークアップ
カテゴリ、OS、オファーを含むJSON-LDのSoftwareApplicationに加え、よくある反論（「エージェントが本番環境を壊すことはないか？」）についてのFAQPageを設置しました。AIアシスタントが引用するのは、こうした回答です。
丁寧に作り込んだソーシャル用メタデータ
この製品は、同業者の間でSlackやLinkedInを通じて共有されます。そのためOpen GraphとTwitterカードを集客チャネルとして扱い、ロゴではなく専用の画像を用意しました。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
本文テキストはAAAのコントラスト
ダークテーマには、濃いグレーの上に薄いグレーという典型的な落とし穴があります。すべての組み合わせを測定し、本文は12:1、補助的なラベルは7:1としました。
キーボードで操作できるコードブロック
モバイルではレポートの抜粋が横にスクロールします。そのためフォーカス可能にし、スクロール可能な領域として読み上げられるようにしています。そうしなければ、マウスなしでは内容にたどり着けません。
納品したもの。
- トップ — 証拠、約束、トライアル
- 仕組み — エージェント型監査のサイクル
- レポート — 成果物の構成
- 料金
- ドキュメントとオープンソースのエンジン
プロジェクトの流れ。
要件定義
製品チームへのヒアリングを行い、どの反論にどの順番で答えるかを決定しました。
コンテンツ
モックアップに着手する前に、エンジニアの承認を得た技術文書を作成しました。
デザイン
ダークテーマのデザインシステム、証拠コンポーネント、タイポグラフィスケール。
開発
静的なNext.js、セキュリティヘッダー、パフォーマンス予算。
公開
セキュリティ検収、ヘッダーの確認、Search Consoleの設定。
