最近気になったデザインのツール: Rive

UIデザインでは Figma が基本的にデザイン使うツールになりつつあります。
画面のUIデザインから、最近は簡単なバナーも最近はFigma で作るようになりました。 UIデザインからい画面遷移の動きをつけるプロトタイピングに使えるので、ほぼFigmaで作業しています。

Figmaアニメーションもプロトタイピングでできなくはないですが、細かい動きはやはり専用のソフトウェアがよさそう。
そう考えていたところに、気軽にアニメーションを作れて組み込みもできそうなツールを知りました。
モーショングラフィックツールの「Rive」です。

https://rive.app/

Rive の編集

Rive は、Webアプリなのでブラウザ上で動かします。 Editor画面などは、Figma にも通じるシンプルUIです。操作がわかりやすいながらも、結構多機能だと思います。
ざざっと見てみた感じですが、下記のことができるようです。シンプルながらもこまかな設定で複雑な作りまで設計できるような作りになっているように思います。

• アートボードの作成
• ベクターイメージの作成（ペン、矩形、円、三角、多角形、星型）
  • 塗りとストローク
• マスク
• ボーン
• メッシュ
• ファイル読み込み（SVG、PNG、JPEG、Lottie）
• 変形
  • 回転
  • スケール
• アニメーション
  • タイムライン
  • ミキシング
• ステートマシン
  • アニメーションをつないだり遷移させることが可能。
  • 入力によってインタラクティブな操作も設定できる

テキスト入力は今のところないようです。グラフィックの作成とモーションに注力するならばこれくらいでいいのかもしれません。 文字を扱うとすればアウトライン化したベクターデータをSVGでインポートするということになるでしょうか。

https://rive.app/s/9QsHEfXiF02aeHX5eqd7bQ/

ファイルはパブリッシュして Riveのコミュニティにも共有可能になっています。 コミュニティのファイルはプレビューだけでなく、コピーのファイルを手元で開くこともできます。
モーショングラフィックの作り方参考にもなるのでこのような機能は楽しく、また勉強になります。

Rive の書き出し

Rive は多様なプラットフォームに対応したランタイムがあります。JavaScript、Flutter、iOS、Reactなどに対応しています。
 .riv ファイルのデータをランタイムを使って組み込みができるようです。 ランタイムはオープンソースであるようです。

After Effects から組み込みアニメーションを組み込み可能にするといえば Lottie があります。
デザイナーのアニメーション制作が Rive に移ると Rive もメジャーになるかもしれません。

ちなみに過去に After Effects ＋ Lottie の組み合わせでローディングのアニメーションを作ったことがあるのですが、PCのファンが回るほどの負荷になってしまい、泣く泣くコマ数を落としてCSSを使ってスプライトアニメーションにしたことがあります。
Rive のランタイムも負荷にならないレベルの軽さだとよいなと思います。プラットフォームにもよるかもしれませんが、アニメを乗せることが負荷になりにくいので、その軽さを期待しています。
（社内で誰か React 試してみないかなー…）

またもちろん、モーショングラフィックとして、MPEG4でも書き出しができるようです。
GIF と WebM にもできるので軽くアニメを作って貼り付けるということも可能ですね。

最後に

Rive は、無料の Freeプランから始めることができます。 Free では、ファイルは3つまで持つことができるようなので、まず試してみるのにはよさそうですね。
Free 以上の Team はファイルのコラボレーションも可能になり、保持できるファイルの制限もなくなります。

Rive デザイナーが使いやすいモーショングラフィックツールだと思います。
モーショングラフィックは実際の現場でどう実装するかが問題になることがありそうですが、このツールは書き出しの環境はそれなりに揃っていそうなので、そのあたりの障壁は高くないのではと思います。

編集のツールとしてもシンプルに編集に必要なツールが揃っています。ブラウザー上だけでなく、今後ネイティブアプリ化すればもっとパワーのあることもできるようになるかもしれません。
まずデザイナーでも広がれば知見も広がりそうで楽しみなツールです。