Service / SaaSOverseas / USPicked 2026.09.25

Cerebrium

サービス / SaaSのWebデザイン参考 — AIインフラ・サーバーレスGPU

出典: cerebrium.ai

Editor's note — 編集部の視点

GPUの強みを、グラフと地図で見せてくる。

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

LeoMotion & Direction

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

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

Color

Cerebriumの配色

Typography

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

本文・小見出し

Aa あア

使用: Suisse Intl
代替: Inter

ナビ・ボタン・ラベル

Aa あア

使用: Suisse Intl Mono
代替: IBM Plex Mono

見出し（h2）・一部リンク

Aa あア

使用: ABC Favorit
代替: Space Grotesk

Structure

ページ構成（上から順）

01
ヒーロー
ダークな背景の右下にマゼンタの3Dリボン。左下に3行の大見出し、右に説明文と「TRY IT NOW」「BOOK A DEMO」の2ボタン。ナビは暗色の角丸コンテナに等幅の大文字メニューを収め、右に LOG IN / SIGN UP を置く。
02
導入企業ロゴ
ドットグリッドを敷いたダーク面に、導入企業のロゴを白一色で横一列に並べる。
03
イントロ
上端が角丸の白いパネルがダーク面に重なって始まり、左に小さなリード、右に2行の見出し（2行目をピンク）を置く。
04
Why Cerebrium
左に4項目（コールドスタート、GPUスケーリング、コード、オブザーバビリティ）の目次を固定し、現在の項目だけ濃紺に。右にコールドスタート比較バー、GPUリージョンの地図、ターミナル、メモリ推移グラフのUIカードと説明文を縦に並べる。
05
Security
ダーク背景に半透明の3D球体を置き、左に見出しと STATUS PAGE / SECURITY DOCS ボタン、右にアイコン付きで4項目（認証取得、データ所在地、分離、稼働率）を並べる。
06
Built with Cerebrium
中央の見出しと Voice / LLMs / Other のタブ。下にアイコン・タイトル・説明・「TRY NOW」リンクを持つライトなカードを2列で並べる。
07
Industries
ライト背景に見出し（一部ピンク）と左右矢印のカルーセル。導入事例をロゴ入りのカードで横に送る。
08
Features
左に小ラベル、右に機能名と矢印のリンクを罫線区切りの2列リストで並べる。
09
ブログ・フッター
「Latest from our blog」の記事3件と、Use Cases などのリンクを並べたフッター（抽出データから確認。フルページキャプチャの範囲外）。

Interaction

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

ヒーローと Security の3Dオブジェクトは Three.js（WebGL）で描画。スクロールに合わせて形状やカメラが変化すると思われる
等幅ラベルはカスタム要素 c-scramble-text で、文字をランダムに入れ替えてから正しい文字に収束させるスクランブル表示（requestAnimationFrame で1文字ずつ確定させれば再現可能）
Why Cerebrium の左目次は position: sticky で固定し、右カードの表示位置に応じて IntersectionObserver か ScrollTrigger で現在項目の色を切り替える
事例カードの横送りは Swiper、アイコン類の動きは Lottie、全体のスクロールは Lenis で滑らかにしている

検出された技術:Three.jsLenisSwiperAstroLottieWebGL

Reproduce

再現するときのポイント

01ダーク（#101421）とライト（#eef2f5）のセクションを角丸パネルの重なりで切り替え、長いページにリズムをつける
02ピンク（#ff488b）はCTAと見出しの1語だけに使い、面積を小さく保つ
03機能説明は文章より、比較バー・地図・ターミナル・グラフなど実際のUIに近い図解カードで見せる
04ナビ・ボタン・ラベルは等幅の大文字、本文はプロポーショナルと役割を分ける

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全9セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

cerebrium.katapick.md

1---
2title: "Cerebrium 再現用デザイン仕様書"
3source: https://cerebrium.ai/
4katapick: https://katapick.com/sites/cerebrium
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ダーク, 3D/WebGL, 等幅フォント, スクロール演出, グリッド]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 4/5
11estimated_hours: 36
12generator: Katapick
13---
14 
15# Cerebrium — 再現用デザイン仕様書
16 
17> GPUの強みを、グラフと地図で見せてくる。AIインフラSaaS「Cerebrium」のサイトは、等幅の大文字で揃えたUIと製品図解で、目に見えないインフラの価値を確かめられる形に置き換えている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ

Cerebriumについてよくある質問

Cerebriumのサイトで使われているフォントは？

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