Jitter
ウェブ·デザイン・開発Jitterは、無料テンプレートまたは白紙のキャンバスからアニメーションを作り、結果を動画、GIF、Lottieとして書き出せるウェブベースのモーションデザインツールです。
3Dデザイン・Webアニメーション
Webサイトやアプリのためにブラウザーで動く3Dシーン、インタラクティブなアニメーション、軽量なベクターアニメーションを作るツールです。まずアニメーションの目的を決めましょう。注目を集める、状態を示す、製品を3Dで見せるのとでは、必要なツールやファイル形式が異なります。
知っておきたいこと: 無料で使える条件はツールやプランによって異なります。カードにそのツール固有の制限が書かれていない場合は、利用枠、透かし、書き出しの条件を公式ページで確認してください。
Jitterは、無料テンプレートまたは白紙のキャンバスからアニメーションを作り、結果を動画、GIF、Lottieとして書き出せるウェブベースのモーションデザインツールです。
3Dデザイン・Webアニメーション
Riveは、ステートマシンでインタラクティブなアニメーションやインターフェースを設計するツールです。ブラウザーのエディターとデスクトップアプリがあり、出力はiOS、Android、Web、Flutter、React、ゲームエンジンなどのランタイムで動きます。
3Dデザイン・Webアニメーション
Splineは、ブラウザーおよびMacとWindowsのデスクトップアプリでリアルタイムに共同作業しながら3Dシーンを作り、インタラクションやアニメーションを加えて、Web、Reactなどの形式に書き出せる3Dデザインツールです。
3Dデザイン・Webアニメーション
LottieFilesは、無料とプレミアムの既成アニメーションを800,000点以上そろえたライブラリ、ウェブベースのLottie Creatorエディター、LottieとdotLottieの形式を備えたモーションデザインのプラットフォームです。
3Dデザイン・Webアニメーション
簡単なシーンか2つの状態を持つアニメーションを作り、書き出して実際のページに組み込みます。ミドルクラスのスマートフォンでの滑らかさ、ページの読み込み時間、ファイルサイズを確認し、マウス、タッチ、キーボードでの操作も試しましょう。
書き出し形式(glTF/GLB、Lottie JSON、動画、ツール独自のプレーヤー用ファイルなど)と、サイトに表示するために必要なプレーヤーやコードを公式ドキュメントで確認してください。無料プランに透かし、書き出し数、プロジェクト数の制限があるかは料金ページで確かめましょう。
アニメーションはアクセシビリティにどう影響しますか?動きによってめまいを感じる人もいて、文章が読みにくくなることもあります。OSの「視差効果を減らす」などの設定を尊重し、自動再生される長いアニメーションには一時停止の操作を付け、重要な情報をアニメーションだけで伝えないようにしましょう。
3Dシーンでサイトは重くなりますか?ポリゴン数の多いモデル、大きなテクスチャ、常に描画し続けるシーンは、特にスマートフォンでプロセッサーとバッテリーに負担をかけます。モデルを簡略化し、テクスチャを圧縮し、表示中だけシーンを動かして、速度測定ツールで結果を確かめましょう。
この比較は公開された公式資料に基づきます。実機テストや品質ランキングではありません。不明な機能は確認済みとして扱いません。
| アプリ名 | どこで使いますか? | 無料で出力 | 登録不要 | 透かしなし | オフライン対応 | 一括処理 | コンテンツの言語 | 知っておきたいこと / 情報源と確認日 |
|---|---|---|---|---|---|---|---|---|
| Jitter | ウェブ | 対応 | 未確認 | 非対応 | 未確認 | 未確認 | 未確認 | 情報源と確認日 |
| Rive | ウェブ | 対応 | 未確認 | 非対応 | 未確認 | 未確認 | 未確認 | |
| Spline | ウェブ | 対応 | 未確認 | 非対応 | 未確認 | 未確認 | 未確認 | |
| LottieFiles | ウェブ | 未確認 | 未確認 | 未確認 | 未確認 | 未確認 | 未確認 |