Service / SaaSOverseas / USPicked 2026.09.26

HydraDB

サービス / SaaSのWebデザイン参考 — AI・データベース（開発者向けSaaS）

出典: hydradb.com

Editor's note — 編集部の視点

見出しはピクセル書体、主役はドットで描いた木。

AIエージェント向けグラフDB「HydraDB」のプロダクトサイトは、黒地にオレンジのドット絵を置き、形のない“記憶の基盤”を手ざわりのあるグラフとして見せている。

LunaType & Whitespace

見出しはピクセル、本文はAeonik、数値はJetBrains Mono。3書体なのに役割がきっちり分かれてて、うるさくない。レトロに寄せすぎない加減……いいね！！

1FVの木は枝先がノードに変わる。「グラフ」という言葉を、説明より先に絵で見せる
2比較表・折れ線グラフ・ベンチマーク表を連ねる。黒地にオレンジ1色で、勝ち負けを迷わせない
3Without / With の比較は白地のパートで挟む。黒一色の長いページに、呼吸の区切りを作る

Color

HydraDBの配色

Typography

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

本文・リード・ナビ

Aa あア

使用: Aeonik
代替: Manrope

見出し

Aa あア

使用: Geist Pixel Square
代替: Geist Pixel

ラベル・数値

Aa あア

使用: JetBrains Mono
代替: JetBrains Mono

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

特大見出しKatapick 型72px · 1.1 · 400
見出しKatapick 型48px · 1.1 · 400
小見出しKatapick 型24px · 1.1 · 400
本文The quick brown fox — 参考を型にする16px · 1.2 · 400

Structure

ページ構成（上から順）

01
アナウンスバー・ヘッダー
上部にオープンソース化の告知バー。ロゴと Architecture / Benchmarks / Pricing / Use Cases / Resources / Documentation のナビ、Log In / Sign Up。
02
ヒーロー
ピクセル書体の「The Graph AI Runs On.」とリード、Talk to us / Sign Up の2ボタン。右下にオレンジのドットで描いた木と、枝先を点線で結ぶノードの図。
03
信頼の証明
「Trusted By Teams Building World Class AI Agents」のロゴ帯、資金調達額と出資者、主要指標を4つの数字で並べる。
04
ユースケース
「What Engineers Are Building With HydraDB」。左に番号付きのリスト（AGENT MEMORY / ONTOLOGIES など）、右に説明と特徴のパネル。
05
比較
白地に「Similarity Isn't Always Relevance.」と、Without Graphs / With HydraDB の2列比較表。
06
機能
黒地の2×2グリッドで、精度・スケール・リコール・低レイテンシを図版付きで紹介する。
07
ベンチマーク・アーキテクチャ
精度の折れ線グラフ、指標のカウンター、Architecture Overview の構成図、ベンチマーク比較表を続ける。
08
Pricing・FAQ・CTA・フッター
料金、よくある質問のアコーディオン、「Build AI with compounding intelligence」の締めのCTAとフッター。

Interaction

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

Framer 製で、Three.js と Lenis を使用。FVのドットの木は WebGL で描画されていると思われる
精度のパーセンテージなどの数値は、表示時にカウントアップすると思われる（キャプチャに途中の値が写っている）
右下にオレンジの丸いチャットボタンを固定表示
セクションの境目にオレンジの細い水平線を引き、端に小さな四角のマーカーを置いてブロックを区切る

スクロールのコマ撮りLenis · 300–36000ms

検出された技術:Three.jsLenisFramerWebGL

Reproduce

再現するときのポイント

01背景は純黒 #000000、アクセントは #ff571a のオレンジ1色に絞り、グラフの比較対象だけを黄と白で描く
02見出しはピクセル書体、本文はグロテスク、数値とラベルは等幅と、書体に役割を割り振る
03FVのビジュアルは、データ構造の比喩を1つ決めて描く（ここでは木＝グラフ）。ドット化すると黒地になじむ
04比較表・折れ線グラフ・ベンチマーク表を実データで組み、主張を数字で裏付ける

再現MDに含まれるもの

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

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

hydradb.katapick.md

1---
2title: "HydraDB 再現用デザイン仕様書"
3source: https://hydradb.com/
4katapick: https://katapick.com/sites/hydradb
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ダーク, 等幅フォント, 大胆なタイポ, グリッド, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# HydraDB — 再現用デザイン仕様書
17 
18> 見出しはピクセル書体、主役はドットで描いた木。AIエージェント向けグラフDB「HydraDB」のプロダクトサイトは、黒地にオレンジのドット絵を置き、形のない“記憶の基盤”を手ざわりのあるグラフとして見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22