Iori Iwaki's profile

Motion graphics → Interactive

Rive.app というソフトがあって、去年くらいからこれが気になっていた。
サイトを見る限りだと、ゲームっぽい雰囲気?のソフトに見えるけれど、どうやらウェブサイトやアプリ、ゲームエンジンなどに組み込んで、複雑なアニメーションをクリックやマウスホバーでインタラクティブに動かせるらしい。日本ではあまり使っている人を見たことが無いけれど、海外のモーショングラフィックスデザイナーがこれで面白そうなものを作っていた。だから僕もちょっとやってみたくなった。
Test 1 - トップ画面

ウェブサイトのトップ画面的なものをイメージして作ってみた。
円と背景がゆっくりアニメーションをしている。そのタイムラインとは別にPrevとNextのボタンを押すと、レイアウトがシームレスに切り替わっていく。ボタンにカーソルを合わせると、ホバーアニメーションが発生する感じにもしてみた。
恐らくRiveの使い方的には背景のグラフィック、ボタン、タイトルなどの素材ごとに別々で書き出して、実装上でレイアウトするんだと思う。1個のRiveファイルで全部のイベントを管理しようとすると、挙動がバグるので止めた方が良さそうだった。私は実装とか分からないので全部一緒くたにして埋め込んでいる。ゴリ押し。




Test 2 - アプリ

とりあえず植物って書いてあるアイコンを押してみてください。アプリの画面に遷移します。iOSとAndroidにも対応と書いていたので、ウェブだけじゃなくアプリっぽい画面も作ってみました。
想定としてはアプリを起動したときのモーションとしてRiveが使えるだろうと思って作りました。個別のサービスみが出るリッチなモーションとか入れられたらなんか嬉しいですよね。植物好き。




Test 3 - キービジュアル

真ん中に玉が回ってるだけの不親切極まりないUIをしているんですが、クリックしてみてください。ほら! 花が咲いた! うれしい!
ほら! 花が揺れてる! 草も揺れてる!
キービジュアルの画面って静止しているものが多いですよね。だからって背景で映像を再生するほど画面を激しく動かしたいわけでもない。
だけど環境映像のような、外の景色を眺めてるような、何かたゆたってるくらいのものが僕的にはあったら嬉しい。そうするとデジタルな空間だけど、心地よさというか、空気の通りのようなものが感じられる。そういうものを抽象的な絵じゃなくてベクターグラフィックで表現してみたかった。




制作画面

Figmaでデザインして、SVGに書き出してRiveに入れる。あとはわちゃわちゃモーションを作っていく。
作っている途中で気が付いたんですが、Riveはまだver.0.8くらいで正式リリースしてないっぽいです。ブラーにも対応してないし、キーフレームのコピペとか色んな部分がまだうまくいかない部分はあります。歯がゆい。
でも、とっても可能性感じます。楽しいです。



👁️👄👁️
Motion graphics → Interactive
Published:

Motion graphics → Interactive

Published: