Skill
Role
Software
3D モデリング
3D デザイン
3D アニメーション
インタラクションデザイン
3D モデリング
イ ンタラクション設定
3D アニメーション
レスポンシブ設定
Spline
Omnia1 Analytics
3D Design for Omnia1 Analytics
Spline 3Dデザイナーとして、Omnia1 Analyticsの3Dシーン開発プロジェクトに参加しました。Splineを使用したインタラクティブな3Dシーンと、Webページ上で使用する3Dアセットのデザイン・アニメーションを担当しました。Webflowでの実装のため、レスポンシブ設定をデベロッパーと連携をとりながら調整しました。
3Dライブデモ はこちらから
プロジェクトの概要と目的
Omnia 1 Analyticsは、パフォーマンスマーケティングとグロースマーケティングを行うアメリカ・ニューヨークのマーケティング代理店です。SEO分析ツールを使用して、戦略的なデジタルマーケティングソリューションを提供し、Eコマースを扱う顧客のコンバージョンとリード数の増加を支援するサービスを提供しています。
今回、Webサイトのリニューアルに伴い、レスポンシブかつインタラクティブな 3D シーンと3Dアセットのデザインプロジェクトに参加させていただきました。
プロジェクトチームには、アメリカを拠点とするクリエイティブ ディレクター兼WebflowデザイナーのIanや、タイを拠点とする WebflowデベロッパーのTengを含むグローバルなメ ンバーが集まり、互いにコミュニケーションをとりながら協力して開発を進めました。
私はクリエイティブディレクターから共有されたWebサイトのワイヤーフレームや3Dデザインのリファレンスを基に、3Dデザインアセットの作成と、レスポンシブに対応したスクロールインタラクション及び3Dループアニメーションを制作しました。
スクロールインタラクション
ヒーローセクションには、TiktokやShopifyといった様々なマーケティングツールのアイコンがベルトコンベアーで運ばれ、対応するデジタルプラットフォームとソーシャルメディアがプロジェクターを通じて表示されるというコンセプトで作成しました。
サイト上でスクロールをすると、カメラの角度が変わり、中央にあるダッシュボード画面にズームインされるインタラクティブな動きになっています。この3D シーンがPCでもスマホでも全てのデバイスで動作するように、WebデベロッパーのTengと協力し、レスポンシブデザインのためのカメラの位置設定をSpline・Webflow両方のプラットフォームから細かく調整しました。
ライブデモはこちらからご覧いただけます。なお、このデモは実際のサイトとは異なり、スクロールではなくマウスダウン（スマホの場合は長押し）で動く設定にしています。
ベルトコンベアー上のガラスのマテリアルのアイコンは、一定の間隔で中央にあるスキャナーを通過するアニメーションを作成し、スキャンされたアイコンは色が変わるように設定しました。
各アイコンがスキャンされると、関連するソーシャル メディア・デジタルプラットフォームの画面が横のプロジェクター上に表示されます。
ベルトコンベアー上のガラスのマテリアルのアイコンは、一定の間隔で中央にあるスキャナーを通過するアニメーションを作成し、スキャンされたアイコンは色が変わるように設定しました。
各アイコンがスキャンされると、関連するソーシャル メディア・デジタルプラットフォームの画面が横のプロジェクター上に表示されます。
FINAL OUTPUTS
3D Design for Omnia1 Analytics
3Dアセットのデザイン
3Dシーンの作成に伴い、まず初めに様々な3Dスタイルを作成し、アイコンに使用するマテリアルや質感の選定に取り掛かりました。
クリエイティブディレクターのIanによる的確なディレクションのもと、ガラスやプラスチックなど複数のデザインスタイルを提案しました。
最終的に、Webサイト全体のトーンとブランディングデザインに最も馴染みがよかったガラスのマテリアルに決定しました。3Dデザインならではのガラスの反射によって色が変わる質感や、メタルなどの機械的でハードな質感と、光の色の変化にこだわった3Dシーンを作成することができました。
プロジェクトで最も苦労したこと
このプロジェクトで最も苦労したことは、Webサイトの読み込み速度を軽減するため、3Dのデータサイズを最小限に抑えることでした。
3DシーンはSpline のViewerコードを使用してWebflowに実装されており、ガラスのマテリアルのアイコン・プロジェクター・ベルトコンベアーなどの比較的多数のオブジェクトが含まれていました。
これらのデータサイズを最適化するために、Splineのインスタンスとクローン機能を利用し、できるだけ少ないポリゴン数でモデリングするよう改良を重ねました。
さらに、マテリアルアセットに使用する画像のサイズを最適化することで、最終的にSpline上のスピードテストで高いスコアを達成することができました。
3Dアセットのデザイン
3Dシーンの作成に伴い、まず初めに様々な3Dスタイルを作成し、アイコンに使用するマテリアルや質感の選定に取り掛かりました。
クリエイティブディレクターのIanによる的確なディレクションのもと、ガラスやプラスチックなど複数のデザインスタイルを提案しました。
最終的に、Webサイト全体のトーンとブランディングデザインに最も馴染みがよかったガラスのマテリアルに決定しました。3Dデザインならではのガラスの反射によって色が変わる質感や、メタルなどの機械的でハードな質感と、光の色の変化にこだわった3Dシーンを作成することができました。
プロジェクトで最も苦労したこと
このプロジェクトで最も苦労したことは、Webサイトの読み込み速度を軽減するため、3Dのデータサイズを最小限に抑えることでした。
3DシーンはSpline のViewerコードを使用してWebflowに実装されており、ガラスのマテリアルのアイコン・プロジェクター・ベルトコンベアーなどの比較的多数のオブジェクトが含まれていました。
これらのデータサイズを最適化するために、Splineのインスタンスとクローン機能を利用し、できるだけ少ないポリゴン数でモデリングするよう改良を重ねました。
さらに、マテリアルアセットに使用する画像のサイズを最適化することで、最終的にSpline上のスピードテストで高いスコアを達成することができました。
3dアイコンの色が変わるインタラクション
Omnia1のWebサイトでは、ヒーローセクションの他にも3D画像をアセットとして使用しています。
例えば、サービス紹介のセクションでは、ユーザーが選択したサービス内容に応じて、対応する3Dのアイコンが上昇するアニメーションが実装されています。
より視認性を高めるために、デフォルトの状態とアクティブの状態（ユーザーが選択した時）で、アイコンの色が変化するデザインを提案しました。
Splineのライブデモから、上記の色が変わる3Dアイコンのシーンをご覧いただけます。なお、このデモでは、PC画面上のキーボードで【1,2,3,4】と入力すると動作する設定になっています。
_gif.gif){kind=icon}
3D Design for Omnia1 Analytics