この記事は？
初めましてdely株式会社のプロダクトデザイナーのharutoです🐒
この記事では、インタラクティブなアニメーションツール・Riveの魅力についてデザイナー・エンジニア観点から、UIでの導入事例や実際のアニメーションを作成事例とともに、Riveの魅力についてiOSエンジニアのuetyoと3部構成でお届けします📮
「アニメーションツールの導入やRiveを使ってみたい」・「Riveでどんな作り方をしているか実例を知りたい」という方などいれば導入の参考までにご覧ください💫
Let's GO!! 🚗💨💨💨
【目次】
順次公開予定です
・第1部：Riveはデザイナーにもエンジニアにも優しい神アニメーションツール （この記事💡）
・第2部：Rive は開発コストを平均5時間以上削減してくれる神ツールになった
・第3部：Riveを使って実装なしでも遊べるアニメーションを作る方法
Riveとは？
Riveは、リアルタイムで動くインタラクティブなアニメーションツールで、軽くて速く、メモリの使用も少なく、ユーザーの入力や外部データに応じてアニメーションを動的に変更できます。設計から実装までをシームレスに行えるため、工数がかかっていた遷移等の実装をデザイナーが担うことができ開発効率を上げることができるツールです。
▼ 類似サービスのlottieとの比較記事などもあります👀
Riveの導入は大変？
エンジニア視点・デザイナー視点からの導入時に検討したことをご紹介します💡
【🧑💻エンジニア視点】
エンジニアの視点から見ると、Riveのアニメーションツールは非常に多くの利点がありました。
まず、動作が軽く、パフォーマンスが高いため、アプリにスムーズに統合できる点です。
これまでは、アニメーションの実装には複雑なコードを必要で、エンジニアが何度もデザイナーとイージングの調整をする必要がありました。しかし、Riveを使うことで、デザイナーがアニメーションを実装の挙動制御を含めて作成できるようになりました。これにより、モバイルエンジニアの負担が大幅に軽減され、アニメーション以外のロジックやビューの開発に専念できるようになりました。
結果として、開発の効率が向上し、より高品質なアプリを提供することが可能となっています。
▼ 詳細な導入経緯や導入方法は下記の記事に記載しています
【🧑🎨デザイナー視点】
デザイナーの視点から見ると、Riveの魅力はインタラクティブなアニメーションの作成から分岐の設定までを一貫してデザイナー自身が行えることで、実装コストを削減しつつ、挙動やユーザー体験に細部までこだわれるのが大きなポイントです。
ただ一定導入コストもあり、Riveの導入するとなった際に
①既存ツール（lottieなど）からの乗り換えコスト
②Riveの学習コスト
の2点についての懸念点がよく挙げられると思います
結論として、Riveではこれらの懸念点を解消することができ、デザイナーとエンジニアの両方が効率的に作業できると判断し導入を決定しました。
①既存ツールからの乗り換えコスト
弊社も以前はLottieを使用していましたが、RiveではLottieファイルを取り込むことができるため、一から作り直す手間がなく、スムーズに移行できました。もちろん、一からRiveで作成した方がデータとしては美しいですが、スイッチングコストは低く対応できました。
さらに、Riveの公式ブログのLottieとの比較記事からもわかるように、Riveはデザインから実装まで一貫してRiveエディタ内で完結できるため、圧倒的に短時間で効率的にアニメーションを作成できます。このため、移行しない理由はなく、懸念は解消されました。
▼それぞれのツールのパイプライン
②Riveの学習コスト
Riveツール導入の検討段階で「学習コストが高いのでは？」という懸念の声がありましたが、個人的には学習コストはそれほど高くなく取り組むことができたと思います。
もちろんアニメーションツールが全くの初心者の場合、基本的な使い方の学習が必要で大変な部分もありますが、RiveのエディタのUIはAfter EffectsやFigmaに似ているため、アニメーション作成ツールを少しでも使ったことがある人なら、基本的な操作はスムーズに進められると思います。
一方で、Riveの特徴的であるユーザーの入力や外部データに応じてアニメーションを動的に変更する機能については他のツールにないため使い方の理解までには一定の難しさがあります。
しかし、Riveには各機能に関する学習コンテンツが文章と動画の両方で用意されていたり、コミュニティでは高品質なアニメーションが公開されていたりします。
その上、コミュニティで公開している高クオリティなアニメーションはリミックスでエディタを見ることができるので、作りながら実現方法を具体的に手元で学びながら進めることができ、自分の知識の範囲を超えた他のアイデアも吸収しやすいので、学習難易度はかなり低く、かなり取り組みやすいと思います。
▼神クオリティの学習コンテンツと神コミュニティファイル
実際に自分もアニメーションやRiveを作るようになってまだ1年弱くらいと少ししか立っていないですが、第3章でご紹介するようなアニメーションくらいは作ることができるようになりました。
🚨注意点
lottieからRiveに移すことはインポートできるのですが、rivファイルは他のツールでは取り込むことができません。そのため、OSによってRiveと別のツールを使っていたりする場合、Riveオンリーで作ってしまうとlottieに横展開できずまた作るという手間が発生してしまいます。
アニメーションは全てのプラットフォーム統一でRiveという形で切り替えていかないと作り分ける手間がかかったり、他ツールからのインポートによってデータが綺麗ではなくなってしまったりと懸念事項が少し残ってしまうため、一気にガガっとRiveに移行することをおすすめします。
弊社では、複雑なアニメーションをそこまで使っていない・OSごとにRiveの移行ステップが違うということもあり、両OSで使用するアニメーションは、ベースはAfter Effectsで作成してlottie・Riveに展開していくという対応をしています。
次は、エンジニア観点のお話です
Discussion