# Prime Security｜サービス / SaaSのWebデザイン参考

> 胸像に黄色いスマートグラスをかけて、つかみは完了。AIセキュリティのPrime Securityのプロダクトサイトは、ダーク地に蛍光イエロー1色、開発の前・中・後の3段構成で見えない守りを順に見せる。

- URL: https://www.primesec.ai/
- 解説ページ: https://katapick.com/sites/prime-security
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: AIセキュリティ（SaaS）
- テイスト: ダーク、3D/WebGL、大胆なタイポ、スクロール演出、固定ナビ、カルーセル
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 40 時間）

## 編集部のひとこと（Bruno）
推薦コメントの合間に「5X」「100%」の数字を挟み込んでるんだよね。声で共感させて、数字で稟議を通させる。比較検討中の担当者が社内に説明する材料まで先回りしてる。これはうまい。

## デザインの見どころ
- 古典彫刻にスマートグラスの一枚絵。「In its Prime.」のコピーを、説明なしで絵にしている
- 「Before / In / After the code」の3語で、製品の守備範囲を開発の時間軸に並べて見せる
- 色は黒に近いグレーと蛍光イエローだけ。「Book a demo」が、どの画面でも真っ先に目に入る

## 配色
- #1a1a1a Graphite（背景）
- #f9fe2e Signal Yellow（CTA / 告知バー）
- #242424 Panel Gray（カード / ヘッダー）
- #f5f5f0 Bone White（見出し）
- #b8b8b5 Ash（本文）
- #5e5e5d Slate（補助テキスト / 罫線）

## フォント
- 見出し・本文: TT Interphases Pro（代替: Inter Tight）
- ラベル・番号: TT Interphases Pro Mono（代替: JetBrains Mono）

## よくある質問
### Prime Securityのサイトで使われているフォントは？
見出し・本文に TT Interphases Pro、ラベルにその等幅版が使われています。無料で近づけるなら Inter Tight と JetBrains Mono の組み合わせがおすすめです。

### AI・SaaSのプロダクトサイトで機能の範囲をわかりやすく見せるには？
Prime Security は「Before the code / In the code / After the code」と開発の時間軸で守備範囲を区切り、その後に5つの機能をタブで見せています。利用者の業務の流れに沿って並べると、機能の全体像が伝わりやすくなります。

### どんな業種の参考になる？
セキュリティ、開発者向けツール、B2BのAI SaaSなど、目に見えない価値をビジュアルの比喩と数字で伝えたいプロダクトサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/prime-security からダウンロードできます。
出典: Katapick（https://katapick.com）