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

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

- URL: https://hydradb.com/
- 解説ページ: https://katapick.com/sites/hydradb
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: AI・データベース（開発者向けSaaS）
- テイスト: ダーク、等幅フォント、大胆なタイポ、グリッド、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #000000 Void Black（背景）
- #ffffff White（テキスト / 比較パートの背景）
- #ff571a Ember Orange（アクセント / CTA / グラフ）
- #ffe41a Signal Yellow（グラフの比較色 / 補助アクセント）
- #100c0a Charred Brown（カード・パネル背景）

## フォント
- 本文・リード・ナビ: Aeonik（代替: Manrope）
- 見出し: Geist Pixel Square（代替: Geist Pixel）
- ラベル・数値: JetBrains Mono（代替: JetBrains Mono）

## よくある質問
### HydraDBのサイトで使われているフォントは？
本文に Aeonik、見出しに Geist Pixel Square、ラベルや数値に JetBrains Mono が使われています。Aeonik の代わりには Manrope、ピクセル書体には Vercel の Geist Pixel が無料で使えます。

### HydraDBのサイトは何で作られている？
Framer で構築され、Three.js（WebGL）と慣性スクロールの Lenis が使われています。

### HydraDBのデザインはどんなサイトの参考になる？
データベースや開発者向けツール、AIインフラなど、目に見えない技術を比較表やグラフで説得したいSaaSのプロダクトサイトの参考になります。

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