Service / SaaSOverseas / USPicked 2026.09.26

Prime Security

サービス / SaaSのWebデザイン参考 — AIセキュリティ（SaaS）

出典: primesec.ai

Editor's note — 編集部の視点

胸像に黄色いスマートグラスをかけて、つかみは完了。

AIセキュリティのPrime Securityのプロダクトサイトは、ダーク地に蛍光イエロー1色、開発の前・中・後の3段構成で見えない守りを順に見せる。

BrunoStructure & IA

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

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

Color

Prime Securityの配色

Typography

使用フォントと無料の代替

見出し・本文

Aa あア

使用: TT Interphases Pro
代替: Inter Tight

ラベル・番号

Aa あア

使用: TT Interphases Pro Mono
代替: JetBrains Mono

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型22px · 1.1 · 500
小見出しKatapick 型40px · 1 · 400
本文The quick brown fox — 参考を型にする24px · 1.08 · 400

Structure

ページ構成（上から順）

01
告知バー・ヘッダー
蛍光イエローの告知バー、ロゴ、Platform / Use Cases / Customer Stories / Resources / Company、Log in と黄色の Book a demo。スクロール後は角丸のフローティングヘッダーになる。
02
ヒーロー
左に「Product Security.」、右に「In its Prime.」を分けて置き、中央にスマートグラスをかけた胸像。背景には細い罫線のグリッド。
03
数値
デザインレビューの時間・カバレッジ・誤検知の削減を3つの数字で示す。
04
Before / In / After the code
開発の前・中・後の3フェーズを、大きな見出しで区切って見せる。
05
プロダクトタブ
「Secure your AI development cycle…」のステートメントと、Autonomous Design Reviews など5つの機能を切り替えるタブ。
06
導入企業の声
CISO などの推薦コメントと、「5X」「100%」などの成果の数字を交互にカルーセルで並べる。
07
Built to remember, reason, and prove.
「( 1 )」「( 2 )」「( 3 )」の番号付きで、技術的な強みを3つ解説する。
08
CTA・フッター
「Ready to give your team the security agency they need?」と Book a demo、クイックリンク。

Interaction

アニメーション・インタラクション

ヒーローの胸像は Three.js（WebGL）の Canvas で描画した3Dモデルと思われる。スクロールやマウスに合わせてカメラを回すと再現可能
数値はHTML上の初期値が0で、表示時に目標値までカウントアップするアニメーション
全画面キャプチャでは中身が描画されない区間が長く、GSAP ScrollTrigger によるスクロール連動の出現演出と思われる。慣性スクロールは Lenis
推薦コメントは Swiper のカルーセル、機能紹介はタブで切り替える

スクロールのコマ撮りLenis · 100–800ms

検出された技術:GSAPThree.jsLenisSwiperWebflowGoogle FontsWebGL

Reproduce

再現するときのポイント

01背景 #1a1a1a、カード #242424、アクセント #f9fe2e の3段で組み、黄色はCTAと告知バーだけに使う
02見出しは TT Interphases Pro（代替 Inter Tight）の大サイズで、1行ずつ言い切る
03抽象的なAIを図解ではなく、「彫刻＋ガジェット」という比喩のビジュアル1つで象徴させる
04番号やラベルは「( 1 )」のように括弧付きの等幅書体でトーンを揃える

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

prime-security.katapick.md

1---
2title: "Prime Security 再現用デザイン仕様書"
3source: https://www.primesec.ai/
4katapick: https://katapick.com/sites/prime-security
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ダーク, 3D/WebGL, 大胆なタイポ, スクロール演出, 固定ナビ, カルーセル]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# Prime Security — 再現用デザイン仕様書
17 
18> 胸像に黄色いスマートグラスをかけて、つかみは完了。AIセキュリティのPrime Securityのプロダクトサイトは、ダーク地に蛍光イエロー1色、開発の前・中・後の3段構成で見えない守りを順に見せる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22