Omnia1 Analytics

3D Design for Omnia1 Analytics

Spline 3Dデザイナーとして、Omnia1 Analyticsの3Dシーン開発プロジェクトに参加しました。Splineを使用したインタラクティブな3Dシーンと、Webページ上で使用する3Dアセットのデザイン・アニメーションを担当しました。Webflowでの実装のため、レスポンシブ設定をデベロッパーと連携をとりながら調整しました。

3Dライブデモはこちらから

Work

プロジェクトの概要と目的

Omnia 1 Analyticsは、パフォーマンスマーケティングとグロースマーケティングを行うアメリカ・ニューヨークのマーケティング代理店です。SEO分析ツールを使用して、戦略的なデジタルマーケティングソリューションを提供し、Eコマースを扱う顧客のコンバージョンとリード数の増加を支援するサービスを提供しています。

今回、Webサイトのリニューアルに伴い、レスポンシブかつインタラクティブな 3D シーンと3Dアセットのデザインプロジェクトに参加させていただきました。

プロジェクトチームには、アメリカを拠点とするクリエイティブディレクター兼WebflowデザイナーのIanや、タイを拠点とする WebflowデベロッパーのTengを含むグローバルなメンバーが集まり、互いにコミュニケーションをとりながら協力して開発を進めました。

私はクリエイティブディレクターから共有されたWebサイトのワイヤーフレームや3Dデザインのリファレンスを基に、3Dデザインアセットの作成と、レスポンシブに対応したスクロールインタラクション及び3Dループアニメーションを制作しました。

スクロールインタラクション

ヒーローセクションには、TiktokやShopifyといった様々なマーケティングツールのアイコンがベルトコンベアーで運ばれ、対応するデジタルプラットフォームとソーシャルメディアがプロジェクターを通じて表示されるというコンセプトで作成しました。

サイト上でスクロールをすると、カメラの角度が変わり、中央にあるダッシュボード画面にズームインされるインタラクティブな動きになっています。この3D シーンがPCでもスマホでも全てのデバイスで動作するように、WebデベロッパーのTengと協力し、レスポンシブデザインのためのカメラの位置設定をSpline・Webflow両方のプラットフォームから細かく調整しました。

ライブデモはこちらからご覧いただけます。なお、このデモは実際のサイトとは異なり、スクロールではなくマウスダウン（スマホの場合は長押し）で動く設定にしています。

ベルトコンベアー上のガラスのマテリアルのアイコンは、一定の間隔で中央にあるスキャナーを通過するアニメーションを作成し、スキャンされたアイコンは色が変わるように設定しました。

各アイコンがスキャンされると、関連するソーシャルメディア・デジタルプラットフォームの画面が横のプロジェクター上に表示されます。

ベルトコンベアー上のガラスのマテリアルのアイコンは、一定の間隔で中央にあるスキャナーを通過するアニメーションを作成し、スキャンされたアイコンは色が変わるように設定しました。

各アイコンがスキャンされると、関連するソーシャルメディア・デジタルプラットフォームの画面が横のプロジェクター上に表示されます。