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

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをえたりしながら、心地よく使えるデザインを考えるのが好き。