Wix Harmony エディタ：アニメーションを追加・カスタマイズする
4分
この記事内
- パーツにアニメーションを追加する
- アニメーションをカスタマイズする
- モバイルサイトにアニメーションを追加する
この記事では、2026年1月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
パーツにアニメーションを追加すると、任意のパーツを目立たせて訪問者の目を引くことができます。アニメーションの種類は「開始」、「スクロール」、「ループ」、「マウスエフェクト」から好みのものを選択することができます。
それぞれのアニメーションは、方向、距離、待機時間、速度などの設定を細かくカスタマイズすることができます。また、モバイル用のアニメーションは小さな画面サイズに合わせて設計されているため、どのデバイスでも美しく表示されます。
ヒント：
同じパーツに異なるアニメーションとエフェクトを適用することができます。
パーツにアニメーションを追加する
パーツにアニメーションを追加して、サイトに躍動感を与えます。アニメーションは、4種類の中から好みのものを選択することができます。
アニメーションを追加する方法：
- エディタに移動します。
- 該当するパーツをクリックします。
- アクションバーで「アニメーション」アイコン
をクリックします。 - 利用可能なオプションからアニメーションを選択します。
- 開始：アニメーションは、パーツが表示された際に一度のみ再生されます。
- ループ：アニメーションが繰り返し再生されます。
- スクロール：訪問者がページを上下にスクロールさせながらパーツに近づくと、アニメーションが再生されます。
- マウスエフェクト：訪問者のカーソルがパーツにマウスオーバーすると、アニメーションが動き始めます。
注意：
ヘッダーのパーツは、最初にページにアクセスした際に 1回だけアニメーション化されます。
アニメーションをカスタマイズする
パーツにアニメーションを追加したら、サイトの雰囲気に合わせてカスタマイズします。強さ、方向、待機時間などのオプションを調整して、思い通りの効果を作成することができます。
注意：
利用可能なレイアウトオプションは、選択したアニメーションによって異なります。
アニメーションをカスタマイズする方法：
- エディタに移動します。
- 該当するパーツを選択します。
- アクションバーで「アニメーション」アイコン をクリックします。
- （まだ選択していない場合）利用可能なオプションからアニメーションを選択します。
- 「カスタマイズ」をクリックして選択したアニメーションを調整します：
- 強さ：ドロップダウンメニューをクリックし、再生時のアニメーションの強さを選択します。
- 方向：時計回りや右からなど、アニメーションが入る方向を選択します。
- 距離：スライダーを使用して、エフェクトの始点から終点までの距離を変更します。
- エフェクト時間：スライダーを使用して、アニメーションを再生する時間を調整します。
- 待機時間：スライダーをドラッグして、ページの読み込みからアニメーションの開始までの待機時間を調整します。
- 速度：スライダーをドラッグして、エフェクトの速度を変更します。数値が低いほど、エフェクトは速くなります。
- 移動軸：要素を横、縦、または両方の軸で移動するかを決定します。
- アニメーションタイプ：スクロール時のアニメーションの種類をイン、アウト、または連続から選択します。
- 回転軸：パーツが移動を開始する参照ポイントを選択します。
- モーションスタイル：「弱」や「ミディアム」など、動きの強さを選択します。
モバイルサイトにアニメーションを追加する
デスクトップ版と同様、モバイルサイトにもパーツにアニメーションを追加することができます。モバイル用のアニメーションは、小さな画面サイズに合わせて設計されているため、どのデバイスでも美しく表示されます。
注意：
デスクトップ版に追加したアニメーションはモバイルサイトにも表示されますが、デスクトップ版のアニメーションを変更せず、モバイル用に別のアニメーションを選択したり、無効にしたりすることもできます。
モバイルでアニメーションを追加する方法：
- エディタに移動します。
- ページ右上の「モバイル」アイコン
をクリックします。 - 該当するパーツをクリックします。
- アクションバーで「アニメーション」アイコン
をクリックします。 - 利用可能なオプションからアニメーションを選択します。
