Background
Background
Background
Background

Lottieアニメーションを簡単に編集・カスタマイズ

ウェブベースのエディターで、あなたのLottieを編集、調整、パーソナライズできます。外出先での変更も、これほど簡単で楽しいことはないでしょう。

動画を見る

選択。編集。保存。

アニメーションのレイヤーを選択、編集して、異なるバージョンのアニメーションを保存することが、これまで以上に簡単に。

パワフルなレイヤー選択

キャンバス上のアニメーションレイヤーを選択し、改良されたレイヤーパネルで自由に並べ替えが可能。

多彩なカラーでクリエイティブに

レイヤーの色を変えて、あなたのアニメーションをカラフルに生まれ変わらせましょう。

クリックしてカラーを変更

Change animation layer colors
Change animation layer colors

不要なレイヤーを非表示・削除

レイヤーを前面に出したり、背面に出したり、不要なレイヤーを削除することができます。見せたくないものは隠しましょう。

万社以上、万人以上のデザイナーとデベロッパーに信頼されています。

万社以上、万人以上のデザイナーとデベロッパーに信頼されています。

万社以上、万人以上のデザイナーとデベロッパーに信頼されています。

万社以上、万人以上のデザイナーとデベロッパーに信頼されています。

直感的なレイヤーの並べ替え

レイヤーの並び替えを簡単かつ直感的に行うことで、アニメーションに新鮮なタッチを加えてみましょう。

テキストの編集と 画像の入れ替え

アニメーションのテキストを変更したり、画像レイヤーを置き換えたりして、さらに細かいカスタマイズが可能です。

高度な選択を可能にするX-Rayモード

X-Rayモードをオンにすると、アウトラインビューが表示され、深くネストしたレイヤーを確認したり、選択したりするのが容易になります。

Bounding box
Transparency grid
X-ray view
Background color

クリックしてこれらのビューモードを試してみましょう。

名前とタグを持つレイヤーを特定

対象となるレイヤーを選択し、アトリビュートセクションを開いて識別子(クラス、またはid)を追加します。IDタグやクラスは、Webページでレンダリングする際にCSSやJavaScriptを使ってターゲットとすることができます。

今まで以上のアニメーションカスタマイズ

直感的なレイヤーの並べ替え

レイヤーの並び替えを簡単かつ直感的に行うことで、アニメーションに新鮮なタッチを加えてみましょう。

テキストの編集と 画像の入れ替え

アニメーションのテキストを変更したり、画像レイヤーを置き換えたりして、さらに細かいカスタマイズが可能です。

高度な選択を可能にするX-Rayモード

X-Rayモードをオンにすると、アウトラインビューが表示され、深くネストしたレイヤーを確認したり、選択したりするのが容易になります。

Bounding box
Transparency grid
X-ray view
Background color

クリックしてこれらのビューモードを試してみましょう。

名前とタグを持つレイヤーを特定

対象となるレイヤーを選択し、アトリビュートセクションを開いて識別子(クラス、またはid)を追加します。IDタグやクラスは、Webページでレンダリングする際にCSSやJavaScriptを使ってターゲットとすることができます。

今まで以上のアニメーションカスタマイズ

直感的なレイヤーの並べ替え

レイヤーの並び替えを簡単かつ直感的に行うことで、アニメーションに新鮮なタッチを加えてみましょう。

テキストの編集と 画像の入れ替え

アニメーションのテキストを変更したり、画像レイヤーを置き換えたりして、さらに細かいカスタマイズが可能です。

高度な選択を可能にするX-Rayモード

X-Rayモードをオンにすると、アウトラインビューが表示され、深くネストしたレイヤーを確認したり、選択したりするのが容易になります。

Bounding box
Transparency grid
X-ray view
Background color

クリックしてこれらのビューモードを試してみましょう。

名前とタグを持つレイヤーを特定

対象となるレイヤーを選択し、アトリビュートセクションを開いて識別子(クラス、またはid)を追加します。IDタグやクラスは、Webページでレンダリングする際にCSSやJavaScriptを使ってターゲットとすることができます。

今まで以上のアニメーションカスタマイズ

直感的なレイヤーの並べ替え

レイヤーの並び替えを簡単かつ直感的に行うことで、アニメーションに新鮮なタッチを加えてみましょう。

テキストの編集と 画像の入れ替え

アニメーションのテキストを変更したり、画像レイヤーを置き換えたりして、さらに細かいカスタマイズが可能です。

高度な選択を可能にするX-Rayモード

X-Rayモードをオンにすると、アウトラインビューが表示され、深くネストしたレイヤーを確認したり、選択したりするのが容易になります。

Bounding box
Transparency grid
X-ray view
Background color

クリックしてこれらのビューモードを試してみましょう。

名前とタグを持つレイヤーを特定

対象となるレイヤーを選択し、アトリビュートセクションを開いて識別子(クラス、またはid)を追加します。IDタグやクラスは、Webページでレンダリングする際にCSSやJavaScriptを使ってターゲットとすることができます。

今まで以上のアニメーションカスタマイズ

モーションキャンバスとエディタがモバイルアプリで利用可能に

モーションキャンバスとエディタがモバイルアプリで利用可能に

もっと簡単に外出先でアニメーションをカスタマイズしたいなら!Lottieファイルのモバイルアプリは、モーションエディタ、テンプレート、ステッカーが利用可能。

Motion editor, templates and stickers on the LottieFiles mobile app
Motion editor, templates and stickers on the LottieFiles mobile app
Motion editor, templates and stickers on the LottieFiles mobile app

よくあるご質問

よくあるご質問

Lottieエディタとはなんですか?

Lottieエディタは、Lottieアニメーションをコードやソースファイルを触ることなく、簡単に編集することができるツールです。Lottieエディタを使えば、細かい編集や色の変更、レイヤーの最適化や非表示を素早く行うことができます。変更が完了したら、Lottieのモバイルライブラリを使用してアプリ全体にアニメーションを実装し、Web Player(ウェブプレイヤー)やWebflow(ウェブフロー)で強力なインタラクションを作成することができます。

Lottieエディタとはの新機能は?

「ユニークカラー」と「オールカラー」の違いはなんですか?

レイヤーにIDタグやクラスを追加するにはどうしたらいいですか?

アニメーションのテキストを編集できないのはなぜですか?

モーションデザインを簡単に

Motion design made easy

制作

コラボレーション

インプリメント

モーションデザインを簡単に

制作

Create animation

コラボレーション

Collaborate

インプリメント

Implement
Company logos

世界のトップアプリは #BuiltWithLottie (Lottieで作られています!)

今日、最もダウンロードされているアプリは、Lottieを使用して、製品を美しく際立たせて、ユーザーを深く惹きつけています。

すべてのショーケースを見る

デザインチームが愛用するLottieファイル

Logo - LottieFiles showcas

Lottieファイルのおかげで、私のキャリアが10年延びました。

アニバル・コリレン

DisneyNow:モーションリード

Logo - LottieFiles showcas

Lottieファイルのおかげで、私のキャリアが10年延びました。

アニバル・コリレン

DisneyNow:モーションリード

Logo - LottieFiles showcas

Lottieは、私のワークフローとスムーズに統合しています。フットプリントも小さく、チームと迅速にアイデアを共有することができます。

ブライアン・リー

Headspace:シニアアニメーター

Logo - LottieFiles showcas

Lottieは、私のワークフローとスムーズに統合しています。フットプリントも小さく、チームと迅速にアイデアを共有することができます。

ブライアン・リー

Headspace:シニアアニメーター

Logo - LottieFiles showcas

Lottieは、私のワークフローとスムーズに統合しています。フットプリントも小さく、チームと迅速にアイデアを共有することができます。

ブライアン・リー

Headspace:シニアアニメーター

Logo - LottieFiles showcas

Lottieファイルは、私たちのすべての製品・サービスにしっかりと組み込まれていて、パーソナライズされた感覚を得ることを可能にしています。

ヴィヌ・レメサン

Gojek:モーションデザイン責任者

Logo - LottieFiles showcas

Lottieファイルは、私たちのすべての製品・サービスにしっかりと組み込まれていて、パーソナライズされた感覚を得ることを可能にしています。

ヴィヌ・レメサン

Gojek:モーションデザイン責任者

Logo - LottieFiles showcas

Lottieファイルは、私たちのすべての製品・サービスにしっかりと組み込まれていて、パーソナライズされた感覚を得ることを可能にしています。

ヴィヌ・レメサン

Gojek:モーションデザイン責任者

クリエイト。コラボレート。公開。

すべてのデザインにモーションを。イマジネーションを膨らませ、デザインに命を吹き込もう。

すべてのデザインにモーションを。イマジネーションを膨らませ、デザインに命を吹き込もう。