CorporateJapanPicked 2026.09.30

株式会社TriOrb（コーポレートサイト）

コーポレートのWebデザイン参考 — ロボティクス（球駆動の全方向移動プラットフォーム）

サイトを見るtriorb.co.jp

triorb.co.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

搬送ロボットが、車のCMみたいに登場する。

球駆動ロボットのTriOrbのコーポレートサイトは、黒地に青い光跡のCGと「360° Mobility, 180° Change」の一行で、工場の機器を憧れの製品として見せる。

IrisColor & Brand

黒、白、紺と背景が変わっても、青だけはずっと光ってるのがすき。光跡も資料請求のボタンも Movie の帯も、同じ青の濃さ違いでそろえてるから、章が変わっても同じ会社の声に聞こえる。

1FVは黒地に青い光跡とロボットのCGだけ。仕様の説明より先に、動いたときの速さと滑らかさを想像させる
2背景を黒から白、紺へと切り替えて章を区切る。製品の迫力と、ソリューションの読みやすさを両立させる
3Future は円形の窓から映像が広がって全画面に。固定ラインから再構成へ、という話を画面の変化でなぞる

Color

株式会社TriOrb（コーポレートサイト）の配色

Typography

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

英字見出し・ナビ・日付（Adobe Fonts）

Aa あア

使用: aktiv-grotesk
代替: Inter

和文見出し・本文（Morisawa Fonts の游ゴシック体 Pr6N D と思われる）

Aa あア

使用: MFW-YuGoPr6N-Demi
代替: Noto Sans JP

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

見出しKatapick 型16px · 1.5 · 400
小見出しKatapick 型16px · 1.5 · 400
本文The quick brown fox — 参考を型にする18px · 2.2 · 500
注釈The quick brown fox — 参考を型にする13px · 1.25 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央左に Solution / About / Movie / Recruit、中央右に News / FAQ / Download / Contact を細い縦線で2群に分けて置き、右端に JA / EN。
02
ヒーロー
黒地の左に「360° Mobility, 180° Change」の大見出しと日本語のサブコピー、下半分に2台のロボットのCGと青い光跡。右下にニュースのカードを重ねたスタックと縦のドットを置く。
03
製品紹介（TriOrb BASE）
ヒーローがぼけて暗転し、筐体が透けたロボットのCGの横に「[球駆動式全方向移動プラットフォーム]」「TriOrb BASE」と説明文を並べる。
04
Solution
白地に「Solution ソリューション」。左に現場の映像、右に番号・見出し・説明・黒いピル型の「詳しく見る」を置いたブロックを3件縦に続ける。
05
Movie
紺の帯の中に映像背景のバナーを置き、「Movie」と説明文、「一覧を見る」ボタンを横一列に並べる。
06
Future
中央の小さな「Future」の見出しから円形の映像が広がり、全画面の生産ラインの映像に。左下の白いパネルに「固定ラインから再構成可能な生産システムへ」と「ムービーを見る」。
07
About
紺から黒へのグラデーションに企業のステートメント、会社情報と採用サイトのカード、エクイティパートナーのロゴグリッドと資金調達のお知らせを並べる。
08
News
白地の左に「News」と「一覧を見る」、右に画像付きのニュース4件を2×2のカードで並べる。
09
フッター
黒地にロゴと言語切り替え、ソリューションや会社情報のサイトマップ、青の「資料請求」と黒の「お問い合わせ」ボタン、薄いグレーの「360° Mobility, 180° Change」と写真を置く。

Interaction

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

ヒーローから製品紹介へ移る間、画面全体がぼけながら次のCGに切り替わっていた。filter: blur() と opacity をスクロール量に連動させていると思われる
製品紹介の説明文は途中までグレーのまま撮影されており、スクロールに合わせて白く塗られていくテキストフィル演出と思われる
Future の円形の窓は clip-path: circle() の半径をスクロール量に連動させて広げる方法で再現できる
ヒーロー右下のニュースは撮影ごとに表示中の記事が変わっており、重ねたカードが自動で入れ替わるカルーセルと思われる
抽出データに WebGL の検出はなく、ロボットと光跡は動画または静止画、スクロールは Lenis の慣性スクロールと思われる

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

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム1 — 01

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム2 — 02

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム3 — 03

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム4 — 04

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム5 — 05

株式会社TriOrb（コーポレートサイト）をスクロールしたときのフレーム6 — 06

検出された技術:LenisWordPressAdobe Fonts

Reproduce

再現するときのポイント

01FVは黒地にCGと大見出し1行だけに絞り、光跡の青をページ全体の基準色にする
02章ごとに背景を黒・白・紺で切り替え、ボタンやアクセントは同じ青系の濃淡でつなぐ
03Solution は「映像＋番号＋見出し＋説明＋ボタン」の型を3件で揃え、比較しやすくする
04ぼかし・テキストフィル・円形マスクは、どれもスクロール量に連動させて止めても成立する状態にしておく

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

triorb.katapick.md

1---
2title: "株式会社TriOrb（コーポレートサイト） デザイン分析書"
3source: https://triorb.co.jp/
4katapick: https://katapick.com/sites/triorb
5category: コーポレート
6region: 国内 (JP)
7tags: [ダーク, ブルー基調, ネオン/グロー, スクロール演出, ロングページ]
8launched: 2026-05
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 株式会社TriOrb（コーポレートサイト） — デザイン分析書
16 
17> 搬送ロボットが、車のCMみたいに登場する。球駆動ロボットのTriOrbのコーポレートサイトは、黒地に青い光跡のCGと「360° Mobility, 180° Change」の一行で、工場の機器を憧れの製品として見せる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22