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

> GPUの強みを、グラフと地図で見せてくる。AIインフラSaaS「Cerebrium」のサイトは、等幅の大文字で揃えたUIと製品図解で、目に見えないインフラの価値を確かめられる形に置き換えている。

- URL: https://cerebrium.ai/
- 解説ページ: https://katapick.com/sites/cerebrium
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: AIインフラ・サーバーレスGPU
- テイスト: ダーク、3D/WebGL、等幅フォント、スクロール演出、グリッド
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-25 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

## 編集部のひとこと（Leo）
等幅のラベルが一瞬ガチャガチャ乱れてから、ピタッと正しい文字に着地する！開演前の音合わせがピタリと止む、あの瞬間みたいで鳥肌！しかもすぐ収まるから、読むのは邪魔しない！

## デザインの見どころ
- ヒーローはマゼンタの3Dリボンと、ピンクに染めた「scales」の一語。伸び広がる約束を形と色で重ねる
- Why Cerebriumは左に目次を固定し、右に比較バーや地図の図解。説明を読む前に、見て納得させる
- ダークなヒーローに上端角丸の白いパネルを重ねて本編へ。夜から昼へ、ページの温度が切り替わる

## 配色
- #101421 Midnight Ink（ダーク背景）
- #eef2f5 Cloud Gray（ライト背景）
- #ffffff White（パネル背景 / ダーク面のテキスト）
- #dbe5ed Frost Blue（カード背景）
- #172b76 Deep Indigo（見出し・本文テキスト）
- #ff488b Hot Pink（アクセント（CTA・強調語））

## フォント
- 本文・小見出し: Suisse Intl（代替: Inter）
- ナビ・ボタン・ラベル: Suisse Intl Mono（代替: IBM Plex Mono）
- 見出し（h2）・一部リンク: ABC Favorit（代替: Space Grotesk）

## よくある質問
### Cerebriumのサイトで使われているフォントは？
本文に Suisse Intl、ナビやボタンに Suisse Intl Mono、見出しの一部に ABC Favorit（読み込み名は ABC Favorit Trial）が使われています。無料で近づけるなら Inter、IBM Plex Mono、Space Grotesk の組み合わせが使えます。

### Cerebriumのようなテキストがスクランブルする演出はどう作る？
表示する文字列を1文字ずつランダムな記号に置き換え、一定フレームごとに左から正しい文字へ確定させていきます。requestAnimationFrame で自作するか、GSAP の ScrambleTextPlugin を使う方法があります。

### Cerebriumのデザインはどんな業種の参考になる？
AI・クラウド・開発者向けツールなど、技術的な性能を数値や図解で伝えたいBtoB SaaSのサービスサイトの参考になります。

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