# Lottieファイル
*スキルレベル: 中級*
## 開始前の準備
* [Lottie](https://lottiefiles.com/) アカウントを作成し、ログインしていることを確認してください。
* 使用するすべてのプラットフォームで Lottie の機能がサポートされていることを確認してください。
* この機能を実装するために有料の Adalo プランは必要ありません。
## 手順
{% tabs %}
{% tab title="シンプル" %}
**1.)** Adalo アプリ内で、左上隅にある大きなプラス記号
をクリックします。
**2.)** 検索バーに **"Marketplace"** と入力し、**Explore Marketplace** をクリックします。
**3.)** リストから **Lottie** を見つけ、**Install** をクリックしてから **Done** をクリックします。
**4.)** コンポーネントリストに戻り、検索バーに **Lottie** と入力し、コンポーネントを目的の画面にドラッグアンドドロップします。
**5.)** 新しいブラウザタブで[Lottie のウェブサイト](https://lottiefiles.com/featured)を開いて、追加するアニメーションを見つけます。また、コンポーネント設定内の **Lottie** ドロップダウンからもこのリンクを見つけることができます。
**6.)** 適切なアニメーションを見つけたら、それをクリックしてさらにオプションを開きます。
**7.)** このページから、アニメーションの速度、背景色、および（一部のアニメーションでは）アニメーション自体の色を編集できます。アニメーションが適切であれば、右上の **Download** ボタンをクリックし、**Lottie JSON** オプションを選択してアニメーションをダウンロードし、このガイドのステップ **11** に進んでください。
**\*\*ダウンロード前に:** **すべてのプラットフォームでの互換性を確認するために*****'Feature Support Checker'*****を使用してください。**
**8.)** **Edit Layer Colors** ボタンをクリックして Lottie エディタに移動します。新しいブラウザタブが開き、背景色、アニメーション速度、アニメーションの色を編集できます。アニメーションの色が編集可能な場合、右側に色のパレットが表示されます。
**9.)** 色を編集するには、それをクリックするとカラーピッカーが表示されます。使用したい色を選択し、**Update** をクリックします。
**10.)** 色やその他のアニメーション設定がお好みのものになったら、右下隅の **Export as Lottie JSON** ドロップダウンをクリックし、ダウンロードアイコン
をクリックします。
**11.)** コンピューター上でダウンロードしたアニメーションを見つけます（おそらくダウンロードフォルダーに保存されています）。
* PC では、ファイルをメモ帳で開くことができます（右クリックして **開く** > **別のプログラムを選択** > **メモ帳** を選択）
* Mac では、ファイルをテキストエディットで開くことができます（ファイルをダブルクリック）
**12.)** ファイル内のすべてのテキストをコピーし、Adalo の Lottie コンポーネントの **LottieFiles JSON** という入力欄に貼り付けます。 **13.)** コンポーネントの設定の**Animation**セクションでは、アニメーションのループ、ビルダープレビューの切り替え、およびLottieコンポーネントにクリックアクションを追加することもできます。
{% endtab %}
{% tab title="詳細" %}
**1.)** Adaloアプリ内で、左上隅にある大きなプラス記号をクリックします
**2.)** 検索バーに\*\*"Marketplace"\*\*と入力し、**Explore Marketplace**をクリックします
**3.)** リストから**Lottie**を見つけ、**Install**をクリックしてから**Done**をクリックします
**4.)** コンポーネントリストに戻り、検索バーに**Lottie**と入力し、コンポーネントを目的の画面にドラッグアンドドロップします
**5.)** 新しいブラウザタブで[Lottieのウェブサイト](https://lottiefiles.com/featured)を開いて、追加するアニメーションを見つけます。このリンクは、コンポーネント設定内の**Lottie**ドロップダウン内でも見つけることができます。
**6.)** 適切なアニメーションを見つけたら、それをクリックしてさらにオプションを開きます
**7.)** このページから、アニメーションの速度、背景色、および（一部のアニメーションでは）アニメーション自体の色を編集できます。アニメーションが適切であれば、右上の**Download**ボタンをクリックし、**Lottie JSON**オプションを選択してアニメーションをダウンロードし、このガイドの**11**ステップに進んでください。
**8.)** **Edit Layer Colors**ボタンをクリックしてLottieエディタに移動します。新しいブラウザタブが開き、背景色、アニメーション速度、アニメーションの色を編集できます。アニメーションの色が編集可能な場合、右側に色のパレットが表示され、編集できます。
**9.)** 色を編集するには、それをクリックするとカラーピッカーが表示されます。使用したい色を選択し、**Update**をクリックします
**10.)** 色やその他のアニメーション設定がお好みのものになったら、右下隅の**Export as Lottie JSON**ドロップダウンをクリックし、ダウンロードアイコンをクリックします。
**11.)** コンピューター上でダウンロードしたアニメーションを見つけます（おそらくダウンロードフォルダーに保存されています）そしてテキストエディタで開きます：
* PCでは、ファイルをメモ帳で開くことができます（右クリックして**開く** > **別のプログラムを選択** > **メモ帳**を選択）
* Macでは、ファイルをTextEditで開くことができます（ファイルをダブルクリック）
 **12.)** ファイル内のすべてのテキストをコピーして、AdaloのLottieコンポーネントの**LottieFiles JSON**とラベル付けされた入力に貼り付けます。
**13.)** **アニメーション**セクションのコンポーネント設定で、アニメーションのループ、エディタープレビューの切り替え、およびLottieコンポーネントにクリックアクションを追加することもできます。また、黄色い境界ボックスのハンドルを調整してアニメーションのサイズや形状を変更することもできます。
{% endtab %}
{% tab title="Video" %}
{% embed url="" %}
{% endtab %}
{% endtabs %}
## 例
これであなたのアプリには、ユーザー体験を豊かにするための素敵なアニメーションが追加されました！これらを確認画面、通知アイコン、または祝賀ポップアップなどに使用できます！
このチュートリアルのアプリのクローンリンクについては、[こちらをクリックしてください](https://previewer.adalo.com/eae44c63-814f-45db-b72c-17dd3746f6a3)。
## もっと詳しく
* あなた自身のLottieアニメーションを作成、アップロード、さらには[無料で販売](https://iconscout.com/become-contributor?redirect=https%3A%2F%2Fcontributor.iconscout.com%2F%3Futm_source%3Dlottiefiles)することができます。また、[Adobe After Effectsを使用](https://www.youtube.com/watch?v=72qbebvwxnY)しても作成できます。
* カスタムアニメーションが必要な場合は、[Complab](https://complab.io)などのAdaloコンポーネントメーカーに連絡して作成してもらうことができます。また、[コミュニティフォーラム](https://forum.adalo.com)で支援を求めることもできます。
## ヘルプ
この記事で追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿にこの記事へのリンクも貼り付けることを忘れないでください！