Wix ホーム
ログイン/新規登録

Wix Studio エディタ:Lottie アニメーションファイルを追加・カスタマイズする

読了時間:4分
Lottie ファイルは、クライアントサイトに高画質のアニメーションを追加するのに最適なソースです。URL からアニメーションをインポートしたら、必要に応じてサイズを変更し、連続ループで再生するかどうかを決定できます。
この記事では、以下の項目について説明します:
始める前に:
アニメーションをインポートするには、LottieFiles アカウントが必要です。

LottieFiles からアニメーションをインポートする

必要な数だけ Lottie アニメーションを追加して、デザインを盛り上げましょう。LottieFiles からリンクをコピーし、Wix Studio エディタに直接貼り付けてください。アニメーションは新しいページ要素としてすぐに追加されます。
Lottie アニメーションを Wix Studio エディタに直接貼り付けることができることを示した GIF
または、新しい Lottie アニメーション要素を追加し、関連する URL を設定パネルに貼り付けることもできます。

Lottie アニメーション要素を追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. 埋め込み・SNS」をクリックします。
  3. Lottie アニメーション」をクリックします。
  4. Lottie アニメーション」横の「サイトに追加」アイコンをクリックします。


  5. (別のブラウザタブで)LottieFiles アカウントからアニメーションの URL をコピーします。
  6. エディタにアニメーションの URL を貼り付けます:
    1. エディタで Lottie アニメーション要素をクリックします。
    2. 設定」アイコン  をクリックします。
    3. アニメーション URL」下に URL を貼り付けます。
    4. キーボードの Enter キーを押します。
次のステップ:
設定パネル上部の「動作をプレビュー」をクリックして、公開する前に表示を確認します。
エディタに新しい Lottie 要素を追加し、設定パネルからアニメーションリンクを埋め込んでいるスクリーンショット
ブレイクポイントを操作する場合:
Lottie アニメーションのサイズは、ブレイクポイントごとにカスタマイズできるので、どの画面でも理想的に表示されます。

Lottie アニメーションを変更する

別の Lottie アニメーションに切り替えたい場合は、要素の設定パネルで新しい URL を貼り付けることで簡単に変更できます。

アニメーションを変更する方法:

  1. Lottie アニメーション要素を選択します。
  2. 設定」アイコン  をクリックします。
  3. アニメーション URL」下に新しいアニメーションの URL を貼り付けます。
Lottie アニメーション URL をコピーする場所と、コピーするとキャンバス上で即座にどのように変化するかを示したスクリーンショット

アニメーションがループ再生するように設定する

Lottie アニメーションの再生方法を 1回だけにするか、ループ再生にするかを選択できます。

アニメーションの再生方法を設定する方法:

  1. Lottie アニメーション要素を選択します。
  2. 設定」アイコン  をクリックします。
  3. ループ再生」横のトグルをクリックして、オンまたはオフにします。
Lottie アニメーションの再生方法を制御する「設定」パネルのトグルのスクリーンショット

Lottie アニメーションに代替テキストを追加する

「設定」パネルから、アニメーションまたはサイトを簡単に説明する代替テキストを追加します。これにより、サイトの SEO ランキングを向上させ、スクリーンリーダーを使用するユーザーがアニメーションの内容を理解するのに役立ちます。

アニメーションに代替テキストを追加する方法:

  1. Lottie アニメーション要素を選択します。
  2. 設定」アイコン  をクリックします。
  3. アニメーションテキスト」までスクロールダウンします。
  4. アニメーションの代替テキストを入力してください」下にテキストの説明を入力します。
  5. キーボードの Enter キーを押します。
Lottie アニメーション要素に代替テキストを追加しています
Lottie アニメーションを Wix Studio エディタに直接貼り付けることができることを示した GIF
エディタに新しい Lottie 要素を追加し、設定パネルからアニメーションリンクを埋め込んでいるスクリーンショット
Lottie アニメーション URL をコピーする場所と、コピーするとキャンバス上で即座にどのように変化するかを示したスクリーンショット
Lottie アニメーションの再生方法を制御する「設定」パネルのトグルのスクリーンショット
Lottie アニメーション要素に代替テキストを追加しています