無料 · ブラウザー内で処理 · 登録不要
Lottieを無料で、1フレームずつ確認
Lottie JSONや.lottieファイルを開いて、Webサイトやアプリに使う前に動きを確認。好きなフレームで止め、動きを遅くし、実際のデザインに合う背景色で表示できます。
LottieファイルをプレビューPowered by SDK from Lottie Studio.
受け渡し前に、細部まで確認
書き出したファイル、ダウンロードしたアニメーション、チームから届いたデータを確認。VizGPTの無料ビューアーなら、再生操作とアニメーション情報を同じ画面で使えます。
見たいフレームで止める
タイムラインをドラッグして、特定のフレームで一時停止。登場シーン、場面の切り替わり、ループの終わりを、タイミングよく停止ボタンを押さずに確認できます。
自分のペースで動きを確認
0.25倍、0.5倍、1倍、1.5倍、2倍で再生。速い動きを遅くしたり、最初から再生したり、ループをオフにして終わり方を確認したりできます。
使う背景に合わせて色を確認
透明度を確認する市松模様、または好みの単色背景を選択。薄い線、影、輪郭がデザイン中の画面で見やすいか確認できます。
SVGとCanvasを比較
同じアニメーションをlottie-webのSVGとCanvasで切り替えて表示。Webへの組み込み方法を選ぶ前に、それぞれの描画を確認できます。
アニメーションの情報を一覧で確認
サイズ、長さ、フレームレート、総フレーム数、レイヤー数、Bodymovinバージョンをプレビューの横に表示。読み込んだファイルの容量も受け渡し時の参考になります。
ファイルをブラウザー内で開く
選んだアニメーションの読み込みと描画はブラウザー内で行います。.jsonや.lottieファイルを開くか、サンプルのロケットでお試しください。アカウントもインストールも不要です。
プレーヤーの設定なしでLottie JSONをプレビュー
Bodymovinで書き出したファイルや、ダウンロードした.jsonアニメーションをそのままビューアーへ。lottie-webで再生するため、プロジェクトにプレーヤーを追加する前にブラウザーで動きを確認できます。
Lottie JSONにはレイヤー、図形、キーフレームなどのアニメーション情報が入っています。ビューアーはその情報を再生し、サイズや時間を横に表示します。元のファイルを使って、そのまま次のデザインや開発作業に進めます。
.lottieも同じビューアーで開けます
.lottieはアニメーションのデータをまとめた圧縮ファイルです。JSONと同じファイル選択欄から開けます。VizGPTがブラウザー内でアニメーション情報を読み込み、同じ再生コントロールで表示します。
タイムライン、速度、背景色を使って動きを確認。デザイナーは受け取ったアニメーションを確認でき、開発者は組み込む前にフレームレート、長さ、サイズを調べられます。
Lottieアニメーションをプレビューする手順
手元のファイルかサンプルで始められます。ビューアーは無料、登録不要です。
- 1
ファイルを開く
.jsonや.lottieをドラッグするか、クリックして選択。100 MBまでのファイルに対応しています。ファイルがなければ「Try the sample rocket」を選べます。
- 2
再生を見る
読み込みが終わると再生が始まります。一時停止、最初から再生、ループのオフで動きを確認できます。
- 3
タイミングを調べる
フレームを指定し、0.25倍から2倍までの速度を選べます。時間とフレームの表示で、伝えたい場面を特定できます。
- 4
見た目を確認する
デザインに使う背景色や透明度の市松模様で表示。SVGとCanvasを切り替えて、ブラウザーでの描画を比較できます。
- 5
確認した情報を受け渡しに活用
サイズ、フレームレート、長さをプレビューの横で確認。気づいた点をチームへ伝えたり、色やレイヤーを変えたいときに別ツールのLottie Editorを開いたりできます。
次のアニメーションを使う前に
作っている画面と、ユーザーに見せたい動きに合わせて確認できます。
- デザインレビュー: 話し合いたいフレームで止めて、使う予定の背景上で色のコントラストを確認。
- 開発への受け渡し: プロジェクトに設定する前に、サイズ、フレームレート、長さを確認。
- ループの確認: ループをオフにして終わり方を見た後、オンにして繰り返しのつながりを確認。
- Web用レンダラーの選択: 同じファイルをSVGとCanvasで表示し、使うレンダラーを検討。

確認後に色を変えたいときは、別ツールのLottie Editorをご覧ください。 Lottie エディターを開く
Lottieプレビューについて
ファイルを開いて、ビューアーの各種コントロールをご利用ください。
- Lottieビューアーは無料ですか?
- はい。ファイルの読み込み、再生、フレーム確認、プレビュー操作を無料で使えます。ビューアーにアカウントは不要です。
- Lottie JSONをオンラインでプレビューするには?
- .jsonファイルをビューアーにドラッグするか、クリックして選択します。ブラウザーで再生し、時間やファイル情報を横に表示します。
- .lottieファイルを開けますか?
- はい。ファイル選択欄で.lottieを選んでください。ブラウザー内でアニメーション情報を読み込み、タイムライン、速度、背景の各コントロールで確認できます。
- 特定のフレームを確認できますか?
- はい。フレームスライダーをドラッグして、見たい場面で止められます。現在のフレームと経過時間も表示します。
- アニメーションを遅くできますか?
- 0.25倍や0.5倍を選ぶと、速い動きを確認できます。1倍、1.5倍、2倍での再生、最初からの再生、ループ切り替えも使えます。
- 暗い背景や透明な背景で確認できますか?
- はい。市松模様で透明度を確認するか、明るい色、暗い色、ブランドカラーなどの単色背景を選べます。
- どのようなアニメーション情報が表示されますか?
- サイズ、長さ、フレームレート、総フレーム数、レイヤー数、Bodymovinバージョンを表示します。読み込んだファイルの容量も確認できます。
- ローカルプレビューはどのように動作しますか?
- 選んだファイルの読み込みとアニメーションの描画をブラウザー内で行います。元ファイルをVizGPTのプロジェクトにアップロードせずに開いて確認できます。
- SVGとCanvasの再生を比較できますか?
- はい。レンダラーの選択で、同じアニメーションをlottie-webのSVGとCanvasに切り替えられます。
- Lottieファイルなしで試せますか?
- はい。読み込み欄の「Try the sample rocket」を選ぶと、手元のファイルを開く前に再生、速度、背景、アニメーション情報を試せます。
プレビューする Lottie がなくても、説明するだけで作れます
動かしたい内容を入力すると、AI ジェネレーターが Lottie を作成してすぐに再生します。そのまま仕上げられます。
Found This Tool Helpful?
Share it with others in one click.
