Lottie ビューアー
無料オンライン Lottie プレイヤー。Lottie JSON アニメーションを開いて再生・一時停止、フレーム送り、速度変更、ループ切替、透過チェッカー背景でプレビュー。すべてブラウザ内で完結。
Lottie ファイルとは何ですか？
Lottie はベクターアニメーションの JSON エクスポート形式で、After Effects の Bodymovin プラグインや LottieFiles などで作成されます。アプリや Web は動画ではなく軽量レンダラーで再生するため、ファイルは非常に小さく、どの倍率でも劣化しません。
ここで Lottie アニメーションをプレビューするには？
アップロード領域をクリックするか、.json ファイルをドラッグ＆ドロップします。アニメーションは即座に読み込まれ再生が始まります。内蔵サンプルで試せる「サンプルを読み込む」ボタンもあります。
アニメーションはサーバーにアップロードされますか？
いいえ。ファイルはブラウザのタブ内だけで読み込み・描画され、外部には一切送信されません。未公開のクライアント work や機密素材でも安心です。
再生コントロールには何がありますか？
再生・一時停止、リスタート、ループのオン/オフ、ドラッグできるフレームスライダー、0.25x〜2x の速度セレクター。現在フレーム、総フレーム数、アニメーションの FPS も表示されます。
チェック模様の背景はなぜありますか？
チェッカーはデザインツールと同じく透過を表します。アニメーションに意図しない背景が付いていないかの確認に使い、白や黒に切り替えると明暗ごとのエッジ・グロー・影をチェックできます。
対応している Lottie のバージョンは？
lottie-web レンダラーを使用しており、Bodymovin JSON のバージョン 4 以降に対応します。シェイプレイヤー、マスク、マット、トリムパス、エクスポート時にベイクされた式の多くを再生できます。
スマートフォンでも使えますか？
はい。レスポンシブ対応で、同じ SVG レンダラーを使うため iOS・Android のブラウザで動作します。コントロールはタッチ操作に合わせたサイズです。
.json と .lottie の違いは？
.lottie（dotLottie）は JSON や画像アセットなどを同梱できる zip 圧縮形式です。本ツールは標準的な Lottie の .json を直接開きます。dotLottie の場合は中の .json を取り出してから読み込んでください。
再生が遅い・表示がおかしいのはなぜ？
レイヤーや画像、式の多いアニメーションは描画負荷が高くなります。画像が別ファイルになっていないか確認し、コンポジションを簡略化するか速度を下げてみてください。FPS 表示はアニメーションの想定レートです。
Lottie ビューアーの使い方
この Lottie ビューアーは lottie-web レンダラーで Bodymovin JSON アニメーションを完全にブラウザー内で再生します。ファイルを読み込むかドロップし、コマ送りで再生を制御し、透明・白・黒の背景でプレビューできます。データはどこにもアップロードされません。
- アップロードエリアをクリックするか、Lottie の .json ファイルをドロップします。アニメーションはすぐに読み込まれて再生が始まります。
- 大きい再生/一時停止ボタンと最初からボタンで再生を操作します。
- フレームスライダーをドラッグすると任意のフレームに移動できます。表示には現在のフレーム・総フレーム数・FPS が出ます。
- 0.25x～2x の速度を選び、ループボタンで連続再生を切り替えます。
- 背景を透過チェッカー・白・黒で切り替えて、縁・グロー・影を確認します。
自分のアニメーションを読み込む前に、まずサンプルボタンを押してプレイヤーの動きを確かめましょう。クライアントから JSON を渡されて手早く確認したいときに便利です。
関連ツール
- SVGビューアー＆エディター SVGファイルをオンラインでプレビュー、編集、最適化。リアルタイムプレビュー、コード編集、最適化ツール。
- JSONツリービューアー JSONデータをインタラクティブな折りたたみ可能なツリーとして視覚化。キーと値の検索、ホバーでのJSONPath追跡、遅延読み込みによる大きなファイルの処理に対応。.jsonファイルのドラッグ＆ドロップもサポート。
- スプライトシートジェネレーター 画像をスプライトシートに結合、ドラッグで並べ替え、グリッドレイアウト、パディング、スケールモード。PNG/WebP/JPGとJSONアトラスデータでエクスポート、ゲームエンジンやCSSスプライトに最適。
- 画像をBase64に変換 画像をBase64文字列に変換し、Base64を画像にデコード。PNG、JPG、GIF、WebP、SVG、BMP、ICO対応。100%ブラウザ内処理、アップロード不要。
- GIFフレーム分割 GIFアニメーションから個別フレームをPNGまたはスプライトシートとして抽出・ダウンロード。プレビューとZIPエクスポート対応の無料オンラインツール。
- GIF逆再生 GIFアニメーションの再生順序を無料で逆転。アップロード、プレビュー、即座にダウンロード。
- GIFスピード変更 GIFアニメーション速度をオンラインで変更。GIFファイルを即座に加速または減速。
- 動画をGIFに 動画をアニメーションGIFにオンライン変換。品質・フレームレート・解像度をブラウザで直接調整、アップロード不要。