header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix エディタ:サイトに Lottie アニメーションをインポートする

3分
Lottie アニメーションは、サイトに追加できる高画質のアニメーションファイルです。LottieFiles アカウントからアニメーションを直接インポートすることで、コードを追加することなく、ユニークで活気のあるページを作成することができます。
「レイラのスキューバアドベンチャー」と書かれたテキスト付きのライブサイト。クラゲと泡のアニメーションが再生されています。
始める前に:
アニメーションをインポートするには、LottieFiles アカウントが必要です。

ステップ 1 | Lottie アニメーションを追加する

「パーツを追加」パネルから Lottie アニメーション要素をサイトに追加することから始めましょう。

Lottie アニメーションをサイトに追加する方法:

  1. エディタ左側で「パーツを追加 をクリックします。
  2. 埋め込みコード」を選択します。
  3. アニメーション」までスクロールダウンします。
  4. Lottie」をクリックしてサイトに追加します。
エディタの「パーツを追加」パネル。サイトに Lottie を追加するオプションの上にマウスオーバーしているカーソル。

ステップ 2 | アニメーション URL をコピーする

LottieFiles でワークスペースにアニメーションを保存したら、URL をコピーして直接貼り付けることができます。自分のデザインから選択するか、LottieFiles.com で入手可能な幅広い無料アニメーションの 1つをインポートします。

アニメーションの URL を取得してコピーする方法:

  1. LottieFiles アカウントにログインします
  2. アニメーションを選択します。
  3. Save to workspace to generate(ワークスペースに保存して生成)」をクリックしてを生成します。
  4. Asset link(アセットリンク)」下の「コピー」アイコンをクリックします。
lottiefiles.com でアニメーションの URL がコピーされていることを示すスクリーンショット
ご存知でしたか?
Lottie アニメーションはベクターファイルであるため、デスクトップサイトとモバイルサイトの両方で画質を維持できます。

ステップ 3 | Wix サイトにファイルをインポートする

アニメーションの URL をコピーしたら、Wix サイト上の要素に貼り付けて、訪問者に楽しくユニークな体験を提供しましょう。

サイトにファイルをインポートする方法:

  1. エディタで Lottie アニメーション要素を選択します。
  2. 設定」アイコン  をクリックします。
  3. アニメーション URL」下にファイルの URL を貼り付けます。
  4. キーボードの Enter キーを押します。
エディタの「Lottie 設定」パネル。URL フィールドにマウスオーバーしているカーソル。
次のステップ:
備考:
Lottie アニメーションは、Wix サイトにインポートすると自動的に JSON ファイルに変換されます。技術的な問題のため、ファイル項目のすべてを含むことができません。そのため、Lottie アニメーションは Wix のライブサイトでは少し違って見える場合があります(例:動きの範囲 / 量が制限される)。