スキル
担当範囲
使用ツール
Riveアニメーション
Spline 3Dモデリング
Spline 3Dアニメーション
インタラクションデザイン
Riveアニメーション
Spline 3Dモデリング
Splineインタラクティブプロトタイプ設計
Rive
Spline
Mercury NZ
Rive Animation and Spline3D Design for Mercury NZ
Mercuryは、ニュージーランドを拠点とするマルチプロダクト・ユーティリティ企業で、発電事業に加え、電力・ガス・ブロードバンド・モバイルサービスを提供しています。
本プロジェクトでは、同じくニュージーランドに拠点を置くWhile and Forのチームと協働し、MercuryのSafety Intelligence（SQ）プログラムのWebサイト向けに、Spline3Dを使ったインタラクティブシーンのプロトタイプと、Riveによるインタラクティブアニメーションを制作しました。
プロジェクトの概要と目的
ニュージーランドのマルチプロダクト・ユーティリティ企業Mercuryのウェブサイトで使用する、Riveアニメーション制作をご依頼いただきました。同じくNZのITコンサルタント、While and Forの開発チームと協働しています。
グラフィックデザインはFigmaで提供されました。LITTLE FUJIは、Riveを使用したインタラクティブな図解アニメーション、ループアニメーション、グラフなどのデータビジュアライゼーションの制作を担当しました。
また、Spline 3Dを用いた3Dシーン検証も行い、ウェブサイトでの使用に最適なパフォーマンスに重点を置いてプロ トタイプ制作に協力しました。
Splineでの3Dモデリングとインタラクティブシーンの検証
プログラムの構成を表現する3Dタイルのインタラクティブシーンと、ウェブサイトでの統合を検証するため、Splineでプロトタイプを制作を行いました。
リファレンス動画の見た目や質感の再現は特に難しく、色付きの曇りガラスの表現に課題がありました。
Splineで限りなく近いビジュアルを再現するために、外側に透明なのガラス板、内側に色の付いた薄い長方形を重ねる手法を採用しました。
また、Splineでマウス操作による回転インタラクションを実装。Webでの使用ができるか判断するため、インタラクションな3D設定と、シーンサイズに基づいたパフォーマンスの検証を行いました。
Rive Animation and Spline3D Design for Mercury NZ
Riveアニメーション制作とチーム作業用のファイル設計
Webサイトで使用するインタラクティブアニメーションは、Riveを用いて制作されました。
Health, Safety & Wellbeing（HSW）戦略は、安全に関する長期的な方向性を定め、12の基盤領域を示しています。
各アイコンには、アイドル・ホバー・アクティブの3つの状態を設計。
ホバー時にはアイコンの色が変化し、ユーザーが円上をクリックすると中央のアイコンがアクティブ状態に切り替わり、ループアニメーションが再生されるマイクロインタラクションを実装しました。
また、レイヤーはRiveのコンポーネント機能を活用して構造化されており、すべてのアイコンに対して、効率的な編集と容易なアップデートが可能になっています。
Spline 3Dシーンのプロトタイプ作成
Webサイト上のボタン操作に応じてタイルが回転する、インタラクティブなSpline 3Dシーンのプロトタイプも制作しました。
MouseDownトリガーをSpline内で設定し、タイルの回転はState Change Eventsを用いて制御しています。
シーンはvanilla.js形式で書き出し、開発チームにオブジェクトIDと共に共有しました。
なお、制作プロセスの中でSpline 3Dの活用を検討しましたが、Splineの仕様上、求めるビジュアルの再現に制約があったため、最終実装には見送りました。
Riveアニメーション制作とチーム作業用のファイル設計
Webサイトで使用するインタラクティブアニメーションは、Riveを用いて制作されました。
Health, Safety & Wellbeing（HSW）戦略は、安全に関する長期的な方向性を定め、12の基盤領域を示しています。
各アイコンには、アイドル・ホバー・アクティブの3つの状態を設計。
ホバー時にはアイコンの色が変化し、ユーザーが円上をクリックすると中央のアイコンがアクティブ状態に切り替わり、ループアニメーションが再生されるマイクロインタラクションを実装しました。
また、レイヤーはRiveのコンポーネント機能を活用して構造化されており、すべてのアイコンに対して、効率的な編集と容易なアップデートが可能になっています。
Spline 3Dシーンのプロトタイプ作成
Webサイト上のボタン操作に応じてタイルが回転する、インタラクティブなSpline 3Dシーンのプロトタイプも制作しました。
MouseDownトリガーをSpline内で設定し、タイルの回転はState Change Eventsを用いて制御しています。
シーンはvanilla.js形式で書き出し、開発チームにオブジェクトIDと共に共有しました。
なお、制作プロセスの中でSpline 3Dの活用を検討しましたが、Splineの仕様上、求めるビジュアルの再現に制約があったため、最終実装には見送りました。
Riveアニメーション制作と、チーム共有用のファイル設計
Riveで制作したマイクロアニメーションは、グラデーションや半透過表現などのビジュアル表現を損なうことなく、軽量なファイルサイズを維持しながら、Webサイト上へのスムーズな統合を実現しました。
提供されたグラフィックデザインの一部は、FigmaからRiveにインポートした際、上手く再現されなかったため、Rive内であわせて調整を行いました。
Riveファイルの納品時には、チームでの共同作業や編集のしやすさを考慮し、タグ付け、Soloレイヤー機能を活用して構築することで、納品後の微調整や更新が行いやすいように設計しました。
Rive Animation and Spline3D Design for Mercury NZ