VITALIFY.ASIA logo

次世代の製品カタログ:URDFが変える「動く」Web展示の可能性

VFA
Innovation Lab2026/05/13
次世代の製品カタログ:URDFが変える「動く」Web展示の可能性

今回、私たちはWebの先端技術を模索するプロジェクトの一環として、URDFデータをブラウザ上で表示し、滑らかにアニメーションさせるショーケースを制作・公開しました。

デモサイトを見る

なぜゲームやアプリの開発を主軸とする私たちが、ロボット業界の規格であるURDFに注目したのか。その背景と、これからの製品紹介の形についてお話しします。

URDFとは何か?:ロボットの「脳」に体を教える設計図

URDF(Unified Robot Description Format)は、一言で言えば「ロボットの構成をコンピューターに教えるための共通言語」です。

ロボットは、腕や足などの「部位(Link)」と、それらをつなぐ「関節(Joint)」の組み合わせで構成されています。URDFには、それぞれのパーツがどこにあり、どの方向に、どれくらいの範囲で動くのかという情報がXML形式で記述されています。

通常、これはROS(Robot Operating System)といったロボット制御や、物理シミュレーションの世界で使われる「専門家のためのデータ」です。しかし私たちは、このデータが持つ「動きのルール」という側面に、Webコンテンツとしての大きな可能性を感じました。

なぜ今、URDFをWebで動かすのか

私たちはロボット工学の専門家ではありません。日々、ゲームやアプリケーションのUI/UXを追求しているエンジニアチームです。しかし、CADやBIMといった製造・建築のデータが3D化していく中で、「製品をWebでどう見せるか」という課題に直面しました。

これまでの製品サイトは、写真や動画が主流でした。最近では3Dモデルをぐるぐる回せるサイトも増えていますが、「どこがどう動くのか」までをユーザーが直感的に体験できるものはまだ多くありません。

URDFをWeb技術(Three.jsなど)と組み合わせることで、以下のような「一歩先の体験」が可能になります。

  • 「可動域」の体験: マウス操作で、アームがどこまで伸びるのか、扉がどこまで開くのかをシミュレートできます。
  • 「構造」の理解: アウトライン描画や透過表示を使い、あえて「設計データ風」に見せることで、内部の仕組みを視覚的に伝えることができます。
  • 「軽量」な動作: 重厚な製造用CADデータをWeb用に最適化し、スマホのブラウザでもサクサク動く体験を提供します。

「動き」に命を吹き込む:ゲーム開発者の視点

URDFを動かすだけなら、ライブラリを使えば誰でもできるかもしれません。しかし、そこに「製品らしさ」や「心地よさ」を与えるには、また別の技術が必要です。

私たちが業界用語で「段取り臭い」と呼ぶ、カクカクとした機械的な動き。 素人が設定したアニメーションは、一つの関節が動いてから次の関節が動くような、不自然な間が生じがちです。

私たちはゲーム開発で培ったアニメーション技術を使い、慣性や重なり、そして物理的な重みを感じさせる動きを実装しました。これにより、画面の中の製品が単なる3Dデータではなく、実在感を持った「動く製品」として命を宿します。

ご提案:写真を超えた「触れるカタログ」へ

製造業や機械メーカーの皆様、自社製品の魅力をWebサイトで伝えきれているでしょうか?

「この関節の滑らかさを伝えたい」「このコンパクトな可動範囲を見てほしい」 そうした願いは、静止画や一方通行の動画よりも、ユーザー自身が操作できるURDFコンテンツの方がはるかに深く伝わります。

私たちは、CADデータを預かり、それをWeb上で美しく、かつ直感的に動く「デジタルツイン・カタログ」へと昇華させるお手伝いをしています。

ショーケースのご案内ととお問い合わせ

今回制作したショーケースでは、未来空間をイメージしたデザインの中で、ロボットアームが滑らかに駆動する様子をご覧いただけます。

デモサイトを見る

「自社の製品でもこんな動く展示ができるのか?」「CADデータからWeb展開したい」といったご相談がございましたら、ぜひお気軽にお問い合わせください。

私たちは、エンジニアリングと表現力の力で、貴社の製品の魅力を最大化するお手伝いをいたします。

1,000社以上の事業成長を支えた圧倒的な『スピードと柔軟性』で、御社のアイデアを最短で形にします。まずは無料で壁打ちしませんか?

無料相談はこちら
#XR & 3D Web

「XR & 3D Web」の関連記事

Gaussian Splattingとは何か - 3Dメッシュやフォトグラメトリとの違いを解説

Gaussian Splattingとは何か - 3Dメッシュやフォトグラメトリとの違いを解説

Toshihiko Nagaoka2026/05/12

話題の「3D Gaussian Splatting」とは何か?フォトグラメトリやNeRFとの違いといった基礎から、実用化における最大の弱点「光源の焼き付き」を回避するプロのハック術まで徹底解説します。

建設DXへの挑戦:自社オフィスを「デジタルツイン」化するIFCビューアを開発しました

建設DXへの挑戦:自社オフィスを「デジタルツイン」化するIFCビューアを開発しました

Toshihiko Nagaoka2026/05/06

BIMデータを活用した建設DXの第一歩!自社オフィスを3Dモデリングし、Webブラウザで軽快に動作する高機能「IFCビューア」を独自開発しました。なぜGLBではなくIFCなのか?デジタルツイン構築がもたらすビジネス価値とシステム開発のポイントを解説します。

【WebXR】バーチャルオフィス新機能:ルーム作成とアバターカスタマイズ

【WebXR】バーチャルオフィス新機能:ルーム作成とアバターカスタマイズ

Toshihiko Nagaoka2024/04/24

3Dバーチャルオフィスに、プライベート通話用の「ルーム機能」と「キャラクターカスタマイズ機能」を実装したアップデート。

ぼくはデューパー、なんでもきいてね!