はじめに
ジャンプTOON でデザイナー兼 Rive 実装を担当している木戸です。
インタラクティブなアニメーションを、もっと手軽に、もっとリッチに実装したい。そんなデザイナーやエンジニアの悩みを解決するツールが Rive です。
本記事では、実際のスロット演出の開発事例をもとに、Rive を活用してどのように開発の効率化とクオリティ担保を両立をさせたのか、その設計思想から具体的な実装テクニックまでを詳しく解説します。
目次
Rive とは
デザインとランタイムが一体化した、リアルタイムで動作するインタラクティブアニメーションツールです。 従来の動画や GIF とは異なり、単に再生するだけではありません。ユーザーのアクションやアプリの状態に応じて、アニメーションを動的に、そして滑らかに変化させられるのが特徴です。 具体的にどのようなことができるのか、3 つのポイントで紹介します。
1. デザインからインタラクションまで一つのツールで完結
Rive の最大の特徴は「ステートマシン」という機能です。
- 「待機」「アニメーション発火」といったアニメーションの状態 (State) をエディタ上で定義できる
- クリックやホバーといったトリガーをきっかけに、状態をスムーズに切り替えることが可能
- これにより、複雑なインタラクションをデザイナーが視覚的に設計できる
これは、After Effects で作成したアニメーションをエンジニアがコードで制御する Lottie のようなツールとの大きな違いです。
2. 様々なプラットフォームで動作可能
Rive は、iOS、Android、Web など主要なものに加え、Unity、Unreal Engine などのゲームエンジンにも対応しています。
- 作成した 1 つのアニメーションファイル ( .riv ) を、様々な環境でそのまま利用可能
- プラットフォームごとにアニメーションを実装・調整する必要がない
- デザイナーとエンジニア双方の工数を大幅に削減できるのが大きな強み
3. ユーザー体験を損なわない軽快な動作
Rive は独自のファイル形式とランタイムにより、非常に高いパフォーマンスを実現します。
- ベクターベースでファイルが軽く、各プラットフォームでネイティブに描画される
- そのため、GIF アニメや動画はもちろん、After Effects の機能に依存する Lottie と比較しても、CPU やメモリへの負荷が低い傾向にある
- リッチな演出を多用しても、パフォーマンスを損なうことなく、滑らかなユーザー体験を提供可能
設計
今回のスロット機能開発では、様々な課題がありました。
- 開発面 :
- 回転から結果までの様々な演出を滑らかに表現する軽量性
- 動的な図柄に対応できる柔軟性
- タイトなスケジュールで実装可能な開発効率
- 仕様面 :
- ユーザーごとに異なる動的な図柄制御
- リールの開始・終了位置の制御
これらを Rive でどのように解決したか、具体的な開発フローをご紹介します。
Rive とクライアントの役割分担を定義する
まずエンジニア工数を削減するために、動的な制御を Rive で行う実装方針を固め、Rive とクライアント (Flutter / Web) の役割や各インタフェースをシーケンス図に落とし込み、開発メンバーの認識を統一しました。
シーケンス図
上記の図のように、リールの開始図柄から回転中のカットインや結果アニメーションまで、様々な演出を Rive 側でパラメータによる動的制御をしています。
スロットに関するエンジニアの実装工数の削減と、プラットフォームによる演出全体の統一を両立することができました。
結果表示の UI はクライアント側に分離する設計
この役割分担に基づき、スロットのコアである演出は Rive が担う一方、抽選結果を表示する画面の UI は、あえてクライアント側で構築するという判断をしました (Rive を使用しているのは、スロット本体のみです) 。
Rive には動的にテキストを扱える「Text Run」機能もありますが、今回は以下の理由から、UI を Rive から分離しています。
- UI の表現力とナビゲーションの最適化
結果画面は、画面全体を使った迫力やレスポンシブなレイアウトが求められます。また、作品詳細ページへ遷移するなど、サービス内の他機能へ連携する UI は、クライアント側の得意領域です。ユーザー体験を最優先し、UI 構築はクライアントに任せるのが最適と判断しました。 - プラットフォーム固有の機能を優先
Rive を使用すると、システムのフォントサイズ設定への追従、スクリーンリーダーなどのアクセシビリティ機能が使えなくなるため、アニメーション部分のみを Rive とし、それ以外を UI に任せる使い分けも重要な観点です。 - Rive の軽量化と責務の分離
そして最も重要なのが、Rive をアニメーションという責務に特化させることです。UI 要素を切り離すことで Rive ファイルを軽量に保ち、パフォーマンスを最大化できます。
このように「アニメーションは Rive、UI はクライアント」と得意分野を活かす設計を選択したことが、開発全体の最適化に繋がりました。
Web 結果画面 (Rive はスロット本体のみ)
Web 詳細結果画面 (クライアント側で構築)
実装
設計に基づき、Rive の最新機能を最大限に活用して実装を進めました。まだ導入事例や情報も少なかったのですが、エンジニアと連携し、検証を重ねて完成まで持っていくことができました。
特にこだわった 4 つのポイントを紹介します。
1. 「参照アセット」機能によるパフォーマンスと拡張性の両立
スロットでは 1 リールあたり 20 種類の図柄があり、すべてを Rive ファイルに埋め込むと、ファイルサイズが肥大化しパフォーマンスが著しく低下します。
そこで、Rive の「参照アセット (Asset References)」機能を活用しました。Rive ファイルには画像のプレースホルダーのみを配置し、実際の図柄データはクライアント側で動的に割り当てる構成となります。
これにより、Rive ファイルの軽量化はもちろん、将来的な図柄の追加・変更にも柔軟に対応できる拡張性を確保しました。
2. 「Data Binding」によるサーバー連携と動的制御
スロットの開始・終了位置はサーバーの抽選結果によって決まります。この動的な値を Rive に伝えるため、「Data Binding」機能を利用しました。
各クライアントは、サーバーから受け取った図柄インデックス (0 〜 19) を事前に定義したポジションマップで座標値に変換し、Rive の Input に渡すことで、リールの開始・終了位置を制御しています。
これにより、サーバからクライアント、Rive までシームレスに連携する仕組みを構築しました。
3. 高度なグラフィック機能で演出をリッチに表現
スロットの当たり演出では、ユーザーの高揚感を最大化するため、リッチなエフェクト表現にこだわりました。
特に、Rive の「Vector Feathering (ベクターぼかし効果)」に加え、レイヤーの「ブレンドモード (乗算、オーバーレイ)」といったグラフィック機能を活用しています。
- Vector Feathering : 光が滲むような滑らかなグラデーションやぼかしを表現
- ブレンドモード : 色を重ね合わせた際の深みや透明感を表現
これらの機能を当たり演出の決め手となるポイントで効果的に使用することで、スロットならではの臨場感と、デジタルコンテンツならではの美しい体験の両立を実現しました。
このリッチな演出は、Flutter と Web、両クライアントで一貫して実装しており、どの環境でも同じ体験を提供します。
4. 期待値を高めるカットイン演出
ユーザーの期待感をさらに高めるため、当初は工数の問題で見送られていたカットイン演出を、私から改めて提案しました。
Rive であれば演出のプロトタイプを迅速に作成でき、それをもとにロジックをプランナーに詰めてもらうことで、クライアント・サーバー側との連携を含めても短期間で実現できると判断したためです。結果として、この開発の魅力をさらに一段階引き上げることができました。
Flutter と Web での同一体験の実現
Rive の大きな利点である「マルチプラットフォーム対応」により、Flutter アプリと Web クライアントで完全に一貫したユーザー体験を実現しました。
単一の Rive ファイル (.riv) を共有し、サーバーから受け取った抽選結果をそれぞれのクライアントで動的に制御することで、寸分違わぬアニメーションが両プラットフォームで動作します。
開発効率の比較
Rive を採用することで、プラットフォームごとのアニメーション実装が不要になります。
また、それぞれでアニメーション実装した場合の細かい差分のチェックや調整も省略できます。
本サービスでは Flutter と Web の展開ですが、対応するプラットフォームの数が多いほど、工数の削減効果も大きくなります。
おわりに
最後までお読みいただき、ありがとうございます。 Rive を活用した実際の開発事例を紹介しました。
「参照アセット」や「Data Binding」といった機能を実践的に活用し、サーバーと連携する動的なアニメーションを実装できたことは、プロジェクトとしても大きな成果でした。 これにより、パフォーマンスを犠牲にすることなく、リッチな表現を短期間で実現しています。
また、今回の施策を通して、ツールの技術的な特性を深く理解し、デザイナーが率先して設計を行いエンジニアと連携しながら実装の最適解を探るという、新しい開発フローを実践することができました。
様々な開発の現場があるとは思いますが、少しでも参考になれば幸いです。
Rive の進化はここ1年でも凄まじく、今後も目が離せません。 ジャンプTOON も、より良いユーザー体験を追求し続けてまいりますので、どうぞよろしくお願いいたします。