webアニメーション
あなたは作成したことがありますか？
今回は、簡単にインタラクティブなアニメーションを作成できる「Rive」を紹介します。
WordPressなどのwebサイトやアプリの装飾に取り組んでみたいという方は是非ご覧ください。
「ブログ」始めてみませんか？
Rive学習のアウトプットで収益化も狙えるチャンスです。
低コストで始められる「ロリポップ」がおすすめです。
[PR]
▷ ロリポップ
Riveってなんですか？
Riveの魅力
Riveの最大の魅力
それは、簡単にインタラクティブなアニメーションをブラウザ上（Desktopアプリとしても可）で作成できる事にあります。
また、Riveで書き出したファイルは、ほとんどの主要なプラットフォームで利用可能です。
- Share Links（共有リンク）
- Cloud Render（ビデオのエクスポートビデオのエクスポート）
- Unity
- Unreal
- Web(JS)
- ios
- Android
- Windows
- React
- React Native
- Flutter
- C++
- GameKit for Flutter
シンプルな高レベルAPIと、より高度な低レベルAPIをそれぞれ提供してくれているのでWebアニメーション作成を強力にサポートしてくれます。
無料で利用できる？
Riveにサインアップすると無料で利用できます。
2023年9月1日
料金の改定がありました。
料金改定に伴い…
「Share Link」は、有料プランのみになりました。
Share Linkを利用したい場合は…
有料プランでの契約が必要となります。
料金プラン
プラン毎の主な機能をまとめました。
詳細は、Rive公式の「Pricing」ページをご覧ください。
| Free | Pro | Team | Enterprise | |
|---|---|---|---|---|
| 個別スペース数 | 3 | 無制限 | 無制限 | 無制限 |
| ShareLink | ー | ◯ | ◯ | ◯ |
| フォント | Googleフォントのみ | カスタムフォント可 | カスタムフォント可 | カスタムフォント可 |
| 改訂履歴 | ー | 無制限 | 無制限 | 無制限 |
| アセットサイズ | 10 MB/アセット | 100 MB/アセット | 100 MB/アセット | 100 MB/アセット |
| チーム共有 | ー | ー | ◯ | ◯ |
| 料金 | $0/月 | $24/月 | $32/月 | $120/月 （年間収益が$10M以上の企業向け） |
Rive公式ガイド
詳細は、公式ガイドをご覧ください。
Riveをオススメする3つの理由
① デザインとアニメーション
Riveは、1つのエディター内でデザインとアニメーション制作ができます。
② 豊富なエクスポート先
Riveで構築した作品をWebサイトやアプリ等で
まったく同じように動作させることができます。
- Share Links（共有リンク）
- Cloud Render（ビデオのエクスポートビデオのエクスポート）
- Unity
- Unreal
- Web(JS)
- ios
- Android
- Windows
- React
- React Native
- Flutter
- C++
- GameKit for Flutter
アニメーション制御のロジックを駆使する事で
ホバーやクリック等のListeners機能をRiveで
設定することができます。
Listeners機能の例
③ ファイルの軽さ
ファイルサイズが小さいということも
Riveの利点です。
Riveファイルのサイズは、ビデオ、GIF、画像シーケンス、JSONベースのフォーマットと比較しても数分の一程度（数 KB ）です。
アニメーションをバンドルする場合やリモートで配信する場合でもRiveの最適化されたフォーマットはアプリサイズを小さく保つ事ができます。
番外編：WordPressでRiveを使う方法
こちらの記事にまとめましたのでご覧ください。
一番の近道知っていますか？
メンターを付けること
受講料最大70％OFF
Riveのまとめ
デザイン・アニメーション・エクスポート
オールインワンのRive
Webアニメーションを様々なプラットフォームに取り入れる際は、強力なツールになります。
個人開発のアプリや無料テーマでのブログ作成など、どうしてもチープさが気になるという方は、Riveによるアニメーション装飾がオススメです。
本格的でオリジナリティの高い作品に仕上げる事ができます。
