.png)
Wix Studioのスクロールアニメーションとは？スクロールしても要素が動かない時の付け方を実例でご紹介
- 19 時間前
- 読了時間: 10分
「参考サイトで見たようなスクロールに合わせてスッと文字が現れる動き、Wixでも作れるのだろうか？」とお考えではないでしょうか。
実際にWixのアニメーションをやってみたものの、スクロールしても要素がピクリとも動かず、設定が合っているのか分からないまま止まってしまった、という経験はありませんか？
Wix Studioでは、こうしたスクロール連動の演出をコードを書かずに設定できます。
この記事では、スクロールアニメーションの仕組みから、動かないときのチェックポイント、実際にプリセットを選んで仕上げる手順まで、実例をもとに順を追ってご紹介します。
結論：Wixのスクロールアニメーションの付け方は、要素を選んでプリセットから動きを選ぶだけ
先に結論からお伝えします。
Wix Studioでスクロールアニメーションを付ける手順は、コードを一切書きません。
動かしたい要素を選び、アニメーションのプリセット一覧から動きを選んで、あとは試行錯誤しながら微調整するだけです。
かつて「Wixはダサい」「プロの制作には向かない」と言われた時代がありました。
これはWixが日本に上陸した初期、旧Wix Editorの頃の印象です。
当時は機能もデザインの自由度も乏しく、素人向けのツールとして広まったため、そうしたイメージが残っています。
しかし約2年前にリリースされたWix Studioでは、状況が大きく変わりました。
スクロールアニメーションをはじめとする表現力が飛躍的に向上し、フルスクラッチ制作に近い演出までノーコードで作れるようになっています。
スクロールに連動して要素が動く、フェードインする、浮遊するといった演出は、いずれもプリセットを選ぶ感覚で設定できます。
まずはこの「要素を選ぶ、動きを選ぶ、調整する」という3ステップが基本だと押さえておいてください。
ここから、そもそもスクロールアニメーションとは何なのか、仕組みを掘り下げていきます。
Wixのスクロールアニメーションとは？まず仕組みを理解する
スクロールアニメーションとは、ページのスクロール量に連動して要素を動かす演出のことです。
ユーザーが画面を下にスクロールしていくと、それに合わせて文字や画像、背景が動いたり現れたりします。
Wix Studioで制作された実例サイトを見ると、この演出が主役として使われている場面が数多くあります。
たとえば背景に動画を敷きながら、スクロールに合わせて要素が回転したり、移動したり、入れ替わったりする。
こうした複雑に見える動きも、Wix Studioのアニメーション機能で組み立てられています。
スクロールアニメーションの魅力は、ユーザーの操作にサイトが反応してくれる点にあります。
ただ静止した情報が並んでいるページと比べて、スクロールするたびに要素が動くページは、見ている人の視線を自然に誘導し、伝えたい順番でメッセージを届けられます。
ブランドサイトや採用サイトで採用されることが多いのは、この「体験としての印象」を残せるからです。
仕組みとしては、要素ごとに「スクロールのこの地点でこう動く」という設定を持たせているだけです。
設定自体はシンプルですが、複数の要素の動きを組み合わせることで、見る人には作り込まれた演出として伝わります。
まずは「スクロール量に連動して要素が動く、それがスクロールアニメーション」という基本を押さえておきましょう。
エントランスアニメーションとの違いがわからない人へ
Wix Studioでアニメーションを設定しようとすると、「スクロールアニメーション」と「エントランスアニメーション」という2つの言葉に出会います。
この違いがわからず、どちらを選べばいいのか迷う方が少なくありません。
両者の違いは、大きく2つのポイントに整理できます。
きっかけの違い。エントランスアニメーションは、要素が画面に入ってくる瞬間に一度だけ再生される動きです。フェードインしながら現れる、下からスッと上がってくる、といった「登場」の演出がこれにあたります。一方スクロールアニメーションは、スクロール量そのものに連動し続けます。
動きの続き方の違い。エントランスは登場したら動きが完了します。スクロールアニメーションは、ユーザーがスクロールを進めたり戻したりするのに合わせて、要素が動き続けます。
実際の制作現場では、この2つを組み合わせて使うことも多くあります。
まず要素が登場するときにエントランスで印象づけ、その後スクロールに連動した動きで見せ場を作る、といった具合です。
どちらを使うか迷ったときは、「登場の一瞬だけ動かしたいのか」「スクロールに合わせてずっと動かしたいのか」で考えてみてください。
前者ならエントランス、後者ならスクロールアニメーションが向いています。
Wix Studioではエントランスのプリセットから動きを選び、クリエイターが「これがいい」と思うものを試しながら仕上げていくのが基本的な流れです。
スクロールしても要素が動かない時のチェックポイント
アニメーションを設定したはずなのに、スクロールしても要素がまったく動かない。
この状態でつまずく方はとても多いです。
原因はいくつか考えられますが、順番に確認していけば多くの場合は解決します。
確認したいポイントは、次の3つに絞られます。
アニメーションを付ける対象の要素が正しく選択できているか。動かしたい要素そのものではなく、その要素が入っているコンテナや別の要素を選んでしまっているケースがあります。動かない場合は、まず選択している対象がずれていないかを見直してください。
プレビューや公開後の画面で確認しているか。編集画面（エディタ）上では動きが再生されないことがあります。設定が反映されているかどうかは、プレビュー表示や実際に公開したサイトで確認するのが確実です。
表示しているデバイスの設定になっているか。Wix Studioはパソコン・タブレット・スマートフォンでレイアウトを出し分けられます。パソコン向けにアニメーションを設定しても、スマートフォンの表示で確認していると動いて見えないことがあります。
これらを確認しても動かない場合は、一度アニメーションを外して付け直すと直ることもあります。
設定が中途半端に残っていると、意図した動きにならないことがあるためです。
「設定は合っているはずなのに動かない」と感じたときこそ、対象の選択と確認している画面の2点を疑ってみてください。
多くの場合、この2つのどちらかが原因です。
プリセットから動きを選んで試行錯誤で仕上げる手順
ここからは、実際にスクロールアニメーションを付ける具体的な手順を見ていきます。
Wix Studioでは用意されたプリセットから動きを選び、微調整しながら仕上げていくのが基本の流れです。
動きを付けたい要素をクリックして選択します。文字でも画像でもボタンでも、要素であればアニメーションを設定できます。
アニメーションの設定パネルを開き、プリセットの一覧を表示します。フェード、スライド、浮遊など、さまざまな動きが用意されています。
一覧の中から「この動きがいい」と思うものを選びます。ここは正解が一つではないので、いくつか試しながら決めていくのがおすすめです。
選んだあと、動きの速さや開始のタイミングなどを調整します。少し動かしてはプレビューで確認し、また調整する、という試行錯誤を繰り返します。
仕上がったらプレビューや公開後の画面で、実際のスクロール操作に合わせて意図通りに動くかを最終確認します。
この工程で大切なのは、一度で完璧を目指さないことです。
実例サイトを制作したクリエイターも、プリセットを選んでから何度も調整して仕上げています。
動きの心地よさは数値だけでは決まらないので、実際にスクロールしながら感覚で整えていくのが近道です。
なお、ローディング画面（オープニングの演出）や、一部の複雑な回転挙動などは、ノーコードだけでなく一部ローコードを併用して実装する場合もあります。
ただし、この記事で扱っているようなスクロール連動の基本的な動きは、コードを書かずにプリセットの選択と調整だけで作れます。
フルスクラッチなら数日かかる演出をノーコードで作る
最後に、Wix Studioのスクロールアニメーションがなぜ多くの制作者に選ばれているのか、その理由に触れておきます。
背景動画を敷き、スクロールに連動して要素を回転させ、移動させ、途中で入れ替える。
こうした演出を一からコードで開発しようとすると、相当な日数がかかります。
動きの一つひとつを設計し、実装し、各デバイスで表示を調整していく作業は、決して短時間では終わりません。
ところがWix Studioのアニメーション機能を使えば、同じような演出をプリセットの選択と調整だけで、はるかに短い時間で形にできます。
ノーコードならではの開発スピードが、そのまま制作期間の短縮とコストの抑制につながります。
かつては「スワイプで切り替わるランディングページはWixでは作れない」といった認識もありました。
しかしこれも約1年前までの話で、現在のWix Studioでは実装可能になっています。
古い情報のまま「Wixではできない」と判断してしまうのは、もったいないことです。
海外のクリエイティブな実例だけでは現実味が湧きにくいという方は、身近な日本企業のサイトを見てみるのもおすすめです。
採用サイトなどは、画面の切り替え、スクロール連動、クリックで写真や文言が変化する動き、スライドショーなどが分かりやすく、「これがWixで作れるのか」と実感しやすいはずです。
自社サイトでこうした動きのある表現を取り入れたいけれど、どこから手をつければいいか分からない。
そんなときは、専門のパートナーに相談してみるのも一つの方法です。
よくある質問（FAQ）
Q1. Wix Studioのスクロールアニメーションはコードを書かずに作れますか？
A. はい、基本的な動きはコードを書かずに作れます。
動かしたい要素を選び、アニメーションのプリセットから動きを選んで調整するだけです。
ローディング画面や一部の複雑な回転挙動などは、一部ローコードを併用する場合もありますが、スクロール連動の基本演出はノーコードで完結します。
Q2. スクロールしても要素が動きません。何を確認すればいいですか？
A. まず、動かしたい要素そのものを正しく選択できているかを確認してください。
コンテナや別の要素を選んでいるケースがよくあります。
次に、編集画面ではなくプレビューや公開後の画面で確認しているか、表示しているデバイス（パソコン・タブレット・スマートフォン）の設定になっているかも見直しましょう。
多くの場合、この3点のどれかが原因です。
Q3. スクロールアニメーションとエントランスアニメーションの違いは何ですか？
A. エントランスアニメーションは要素が画面に入ってくる瞬間に一度だけ再生される「登場」の動きです。
一方スクロールアニメーションは、スクロール量に連動して要素が動き続けます。
登場の一瞬だけ動かしたいならエントランス、スクロールに合わせてずっと動かしたいならスクロールアニメーションが向いています。
Q4. Wix Studioはいつリリースされたツールですか？
A. Wix Studioは約2年前にリリースされました。
それ以前の旧Wix Editorの時代に「Wixはダサい」という印象が広まりましたが、Wix Studioでは表現力が大幅に向上し、フルスクラッチに近い演出までノーコードで作れるようになっています。
Q5. WixでスワイプLPは作れますか？
A. 現在のWix Studioでは作れます。
約1年前までは「できない」とされていましたが、今は実装可能です。
古い情報のまま「Wixではできない」と判断しないよう注意してください。
Q6. Wix Studioの参考サイトはどこで見られますか？
A. Wixのアカウントを作成してダッシュボードに入り、画面左上の「リソース」から「Wix Studioで作成されたサイト」を選ぶと、公式掲載の実例サイトを閲覧できます。
検索エンジンで「Wix 参考サイト」と検索する方法もありますが、ハイクオリティな実例を見たい場合は公式の実例集がおすすめです。
Q7. フルスクラッチで作るのと比べて、Wix Studioはどれくらい早く作れますか？
A. 背景動画とスクロール連動の回転・移動・入れ替えなどを一からコードで開発すると相当な日数がかかりますが、Wix Studioのアニメーション機能を使えば、プリセットの選択と調整で同等の演出をはるかに短時間で作れます。
この開発スピードが、制作期間とコストの削減につながります。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
