コンテンツへスキップ

無料 · ブラウザー内で処理 · 登録不要

Lottieを無料で、1フレームずつ確認

Lottie JSONや.lottieファイルを開いて、Webサイトやアプリに使う前に動きを確認。好きなフレームで止め、動きを遅くし、実際のデザインに合う背景色で表示できます。

Lottieファイルをプレビュー

受け渡し前に、細部まで確認

書き出したファイル、ダウンロードしたアニメーション、チームから届いたデータを確認。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. 1

    ファイルを開く

    .jsonや.lottieをドラッグするか、クリックして選択。100 MBまでのファイルに対応しています。ファイルがなければ「Try the sample rocket」を選べます。

  2. 2

    再生を見る

    読み込みが終わると再生が始まります。一時停止、最初から再生、ループのオフで動きを確認できます。

  3. 3

    タイミングを調べる

    フレームを指定し、0.25倍から2倍までの速度を選べます。時間とフレームの表示で、伝えたい場面を特定できます。

  4. 4

    見た目を確認する

    デザインに使う背景色や透明度の市松模様で表示。SVGとCanvasを切り替えて、ブラウザーでの描画を比較できます。

  5. 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.

Share This Tool
Help others discover Lottie Preview.

Copy Link

Share on Social Media

Share via Email

Suggested hashtags: #VizGPT #DataTools #AITools