# 株式会社TriOrb（コーポレートサイト）｜コーポレートのWebデザイン参考

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

- URL: https://triorb.co.jp/
- 解説ページ: https://katapick.com/sites/triorb
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: ロボティクス（球駆動の全方向移動プラットフォーム）
- テイスト: ダーク、ブルー基調、ネオン/グロー、スクロール演出、ロングページ
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 3/5

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

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

## 配色
- #000000 Black（ヒーロー・製品紹介の背景）
- #ffffff White（Solution・News 背景 / 反転テキスト）
- #50c6f6 Trail Cyan（ヒーローの光跡（スクショから採色））
- #223b80 Navy（Movie の帯 / Future のボタン / About のグラデーション）
- #2952cc Signal Blue（資料請求ボタン）
- #111111 Ink（フッター背景 / 黒いピル型ボタン）

## フォント
- 英字見出し・ナビ・日付（Adobe Fonts）: aktiv-grotesk（代替: Inter）
- 和文見出し・本文（Morisawa Fonts の游ゴシック体 Pr6N D と思われる）: MFW-YuGoPr6N-Demi（代替: Noto Sans JP）

## よくある質問
### TriOrbのサイトで使われているフォントは？
英字に Adobe Fonts の Aktiv Grotesk、和文に Morisawa Fonts の游ゴシック体と思われる書体が使われています。無料で近づけるなら Inter と Noto Sans JP の組み合わせが使えます。

### TriOrbのような円形に広がる映像はどう作る？
映像の要素に clip-path: circle(半径 at 50% 50%) を指定し、スクロールの進み具合に合わせて半径を大きくします。GSAP の ScrollTrigger や IntersectionObserver で進捗を取ると扱いやすいです。

### TriOrbのデザインはどんなサイトの参考になる？
ロボットや産業機器、モビリティなど、BtoBのハードウェアを製品広告のように魅力的に見せたい企業のコーポレートサイトの参考になります。

### TriOrbのサイトのCGや映像は使える？
ロボットのCG、映像、写真、ロゴ、パートナー企業のロゴは株式会社TriOrbおよび各権利者に帰属します。参考にするのはレイアウトや演出の考え方にとどめてください。

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