Rive というアニメーションツールが便利すぎる!【無料で誰でも作れちゃう】

アニメーションが誰でも簡単に、しかも無料で楽しめるというツール「Rive」が先日ローンチされました。

以前は、Flare っていう名前だったね。

くま五郎

リョウ

そう、Rive に名前変更したんだけど、無料でアニメーションが作れちゃう凄いツールなんだよ。

このツールが広まったら、アニメーションを作る人が増えるんじゃないかと思ってるんですよね。

ということで、アニメーションツール「Rive」についてご紹介します

アニメーションを作れる神ツール「Rive」

Rive

「百聞は一見に如かず」ということで、Rive で作られた動画を見てみると…

こんなのが、無料で作れてしまうんです。

基本的には誰でも使えるツール

Rive は、簡単な登録さえすれば誰でも無料で使えるツールです。

ただ、アニメーションを作るにはそれなりの知識と時間が必要ではあります。

例えば、

  • SVG などが扱えること
  • 英語が理解できること(日本語説明なし)
  • 加工ツールなどを使ったことがあること

などがあった方が、アニメーション経験がなくてもスムーズに使えるようになると思います。

かく言う私もアニメーションなんて未経験でしたが、イラレなどを普段から使っているので、割とすぐに理解して作成することができました。

有料プランもある

Rive では、アニメーションを作るための機能はすべて無料

オンライン上で作成できるツールなので、どんな PC を使っていても関係なく、ネット環境さえあれば誰でも使うことができます。

ただ、Rive では「有料プラン」も用意されています。

どういった内容なのかと言うと、

公開されないようにするためのプラン

になります。

どういうことかと言うと、無料で使える Rive ではありますが、作った作品はすべて一覧に公開される状態になります

そのため、作った作品をクライアントに渡す場合、別のプロジェクトで使う予定があるような場合には、「有料プラン」にして自分だけしか見れないようにした方が良いでしょう。

Rive

有料プランの金額は、年契約で168ドル(月額14ドル計算)、月契約の場合は21ドルでプランを使えます。

Rive の登録手順

基本的な機能はすべて無料なので、ひとまず登録して使ってみると楽しいと思います。

Rive に登録するには、まず公式サイトにアクセスしてください。

Rive 公式サイト:https://rive.app/

そしたら、「Sign In」もしくは「CREATE ACCOUNT」のボタンを押します。

Rive

すると登録画面が表示されるので、SNS 連携で登録するか、もしくはメールアドレスと名前を入力して登録します。

Rive

登録の時に、メルアドなどと同時にアイコンを登録もできます。(後でも可能です。)

Rive

CREATE ACCOUNT」のボタンを押したら、「登録したアドレスにメールを送ったよ!」という画面が表示されるので、メールをチェックしてください。

Rive

すると、こんなメールが届いているはずなので、「CONFIRM」を押してください。

Rive

そして、この画面が表示されたら、登録は完了となります。

Rive

アカウントの詳細を設定する

登録が完了したら、さっそく Rive にログインしてみましょう。

そして、右上にアイコンが表示されているので、カーソルを持っていって「Account Setting」から詳細設定を行うことができます。

Rive

作品などを作ったら、いろんな人にアニメーションを見てもらえるようになります。

もしかすると自分のアニメーションに興味を持つ人がいるかもしれないので、SNS のリンクを表示させたり、ちょっとしたプロフィールを表示する設定をしておくと良いでしょう。

Rive

英語が苦手という人は、SNS のリンクだけでも設定しておけば、Rive を通じて繋がる人が増えるかもしれませんね。

Rive の基本的な使い方

Rive でアニメーションを作るための、基本的な使い方をちょっと紹介しておきます。

まずは、新規ファイルを作成する

アニメーションを作るには、まず「Your Files」から「New File」を選択します。

Rive

すると、「File Properties」というポップが出ますが、これは有料プランへの誘導なので、「Public(公開:無料)」にチェックを入れたまま「Save」を押します。

Rive

すると、新規でアニメーションを作成することができるようになります。

画像を変化させたり、骨組みを入れる

左下に「import」のボタンがあるので、使いたい画像がある場合にはここからアップロードします。

そして、その画像を回転させたり、大きさを変えたりができます。

Rive

また、画像ではなく図形を挿入したり、画像に骨組みを入れてアニメーションをよりスムーズに動くように設定することができます。

動きをつける場合

使う素材を選ぶ時には「DESIGN」のタグにして作業しますが、動きをつける作業の時には「ANIMATE」にタブを切り替えて作業をします。

Rive

基本的に、時系列を動かしながら画像を動かしていくと、自動でその動きを保存してくれるようになります。

削除したい場合

ファイルでもアニメーション作成時でも同じですが、対象のものをアクティブにしてから PC の delete ボタンを押せば削除できるようになっています。

試しに作ってみたけど削除したくなった場合は、シンプルにファイルを選択して delete を押せば OK です。。

さいごに

今回は Rive のご紹介ということなので、アニメーションの作り方についてはざっくりとしか紹介していないです。

アニメーションの作り方を紹介するとかなり長くなりそうなので、また次回にでも解説しようと思います。

アニメーションが無料で作成できて、しかも使いやすさも抜群ということなので、興味がある方はさっそく使ってみましょう。