【デザイナー向け】Studio×Lottieを活用して、スクロール連動するアニメーションを作成する方法

近年、Webサイトデザインにおいてアニメーションの重要性はますます高まっています。ただ美しいだけでなく、動きや演出によってユーザーの目を惹きつけ、ブランドやサービスの魅力を効果的に伝えるリッチなWebサイトが注目を集めています。

中でも、スクロールに連動したインタラクティブなアニメーションは、一度目にしたら忘れられないほどの没入感を生み出します。ユーザーのスクロール操作に合わせてアニメーションが変化することで、視覚的な驚きやコンテンツの視線誘導に役立ち、Webサイト全体の印象を劇的に向上させる効果があります。

ただし、こうしたダイナミックな表現を実現するには、高度なコーディングスキルが必要とされることが多く、実装には時間やコストがかかるという課題もあります。特に、複雑なJavaScriptやCSSを駆使する必要がある場合、デザイナーにとっては大きなハードルとなりがちです。

しかし、ノーコードツール「Studio」では、Lottieを活用することで、コーディングなしでスクロール連動型アニメーションを簡単に実装できるようになります。これまで複雑なコードを書く必要があった表現が驚くほどスムーズに制作できるため、デザイナー自身でも手軽にインタラクティブな体験を提供できるのが大きな魅力です。

この記事では、デザイナーの方に向けて、コードを書かずにスクロール連動型アニメーションを再現する方法 を詳しく解説します。少し複雑に感じる手順もあるかもしれませんが、順を追って丁寧に説明していくので、ぜひ一緒に挑戦してみてください！

今回作成するアニメーションはこちら

今回はスクロールに連動して文字が横に流れるアニメーションを作成する手順をご紹介します。文字が横に流れる演出は一般的に使われていますが、スクロール連動と組み合わせることでユーザーに驚きを与え、視線を惹きつける効果が期待できます。

下記URLから実際に作成したアニメーションのプレビューを確認できます。
https://preview.studio.site/live/AXq1pD08O7

1.素材を準備する

1-1.アニメーションさせたい素材を作成する

Lottieでアニメーションを作成するために、SVGで素材を作成します。アニメーションさせるために、オブジェクトはアウトライン化しておきましょう。
横幅が短いと、アニメーションした際に見切れてしまうので、オブジェクトを複製するなどして長めに素材を準備してください。
作成できたらすべての素材をSVGで書き出しておきます。

また、今回はFigmaを使用して作成していますが、SVGで書き出しができればほかのツールを使用しても構いません。

2.Lottieアニメーションを作成する

本記事ではLottieについての説明は割愛しますので、Lottieとはどんなものか、機能やメリットを詳しく知りたい方はこちらの記事をご覧ください。

Lottieとは？Studio×Lottieで魅力的なアニメーションを実現する方法！

2-1.Lottie creatorを立ち上げ、アートボードのサイズを調整する

今回はLottie creatorを使用して作成します。
こちらのツールはブラウザ上で簡単にアニメーションが作れるため、重宝しています。

Lottie creatorを起動し、はじめに再生モードを調整します。デフォルトの設定ではループ再生になっていますが、今回はループ再生しないため、ループ再生アイコンをクリックしてオフにしておきます。

画面右側のパネルから、アートボードのサイズを変更します。大きなディスプレイで見た時も再生できるようにWidthを2500に、Heightはアップロードする素材に合わせて調整します。

2-2.フレームレートとデュレーションを設定する

次に、アニメーションの表示時間に関する設定を行います。画面右側中央の[Time]から設定ができます。

フレームレートとは、1秒間にどれくらいの静止画があるかを表す数値です。フレームレートが大きくなるほど、滑らかに再生されます。Lottieでは、適切にフレームレートを設定しないとまれにエラーが起こるため、24fpsか、30fpsで設定するようにしましょう。私は30fpsに設定しました。

デュレーションとは、動画の再生時間のことです。
スクロールに連動させるために、今回は少し長めに[00:10:00]に設定しておきます。

2-3.素材をアップロードする

アートボードと表示時間の調整を終えたら、左側のパネルにある[Upload asset]から先ほど用意したSVG素材をアップロードします。

【作成する時の注意点】
Lottie creatorでは、まれに読み込みエラーが起こるので、パーツ量が多い時は特に注意が必要です。パーツ量が多い場合は、いくつかのパーツに分割して読み込むことで改善されるケースがあります。

2-4.配置を整理する

アップロードした素材を綺麗に並べていきます。

素材をアートボードの左に揃えるように、位置を調整します。その際に、アートボードの右側ははみ出るようにしましょう。横に流れる演出を行うため、はみ出ない場合はオブジェクトを複製するなどして、アニメーションさせるために十分なサイズに調整します。

また、Lottie creatorでは、一般的なデザインツールのように、オブジェクトを整列する機能があります。画面右上の整列アイコンを使うことによって、アートボード上に綺麗に整列させることができます。

オブジェクトを等間隔に整列させることも可能なので、かなりスムーズに配置の調整が可能です。

2-5.キーフレームを設定する

この工程では、画面左に向かってオブジェクトが動くアニメーションを設定するため、キーフレームを設定していきます。

キーフレームとは、動画の始点と終点を指定して、その間の動きを補完するような機能です。

まずはじめに、画面下タイムラインの[再生ヘッド]を開始点に移動させます。
そして、オブジェクト全体を選択し、画面右側のパネルにある[移動（位置）]プロパティの横についているひし形の図形をクリックし、キーフレームを追加します。

始点にキーフレームを追加したら、次は再生ヘッドをタイムラインの終了地点まで移動させます。この時、タイムラインの終了地点ギリギリに設定すると、まれに再生後にオブジェクトが消えてしまう不具合が起きるケースがあるため、少し手前に設定するようにします。

再生ヘッドを移動させたら、今度はオブジェクトをアートボードの右側に揃えるように、位置を調整します。キーフレームが追加されたことが確認できたら、オブジェクトが左に向かって流れるアニメーションの完成です。

アニメーションが完成したら、画面右上の[Export]ボタンをクリックし、プロジェクトを任意のフォルダに保存してください。

3.作成したアニメーションをStudio に埋め込む

3-1.Lottie埋め込みボックスを追加する

画面左側の操作パネルから[Lottie]埋め込みボックスを追加してください。すると、デフォルトのLottieアニメーションが追加されます。

3-2.LottieのAsset Linkを取得する

先ほど作成したアニメーションをLottieFilesのダッシュボードから開きます。[Enable Asset CDN]をオンにし、[Asset link]をコピーしてください。

この時、[Asset link format]を[Optimized Lottie JSON]に設定してください。ほかの形式だとStudio上でエラーになる場合があります。

3-3.Studioエディタに取得したリンクを埋め込む

Studioエディタに戻りLottie埋め込みボックスを選択し、画面右側の操作パネルの[Asset link]を、先ほど取得したリンクに変更します。これで簡単に好きなLottieアニメーションを埋め込むことができます。

また、Lottie埋め込みボックスのサイズは、横幅は100％に、縦幅は素材に合わせて調整してください。

4.アニメーションをカスタマイズする

Studioでは、Lottieアニメーションの再生条件を細かくカスタマイズすることができます。自動再生やホバー時にアニメーションが動くように設定したりすることで、インタラクティブなアニメーション表現が可能です。

今回は[再生条件]を[スクロール連動]に設定してください。たったこれだけでスクロールに連動するアニメーションが再現できます。

…ですが、おそらくここまで同じ手順で作成した方は、まだプレビューで確認しても上手く再生できないのではないかと思います。

スクロールに連動するアニメーションの注意点として、コンテンツ量がないと上手く動かない特徴があります。
スクロールに連動してアニメーションが再生されるため、スクロールができるだけの画面領域がないと、上手く発火しないのです。

今回改善するため、[section]を追加して要素をまとめ、高さを5000pxに変更してみました。テスト用にLottie埋め込みボックスも複製してみました。

これでスクロールに連動するアニメーションの完成です。
作成したアニメーションをぜひプレビューで確認してみてください！

まとめ

スクロールに連動したアニメーションは、視覚的なインパクトと没入感を与え、ユーザー体験を大きく向上させる効果があります。

今回ご紹介した手順では、LottieとStudioを組み合わせることで、ノーコードで素早く簡単にインタラクティブなアニメーションを実現できます。StudioのLottieの再生条件をカスタマイズすることで、デザイナー自身が自由にインタラクティブな表現を取り入れられるようになり、Web制作の幅がさらに広がります。

ぜひ本記事を参考に、魅力的なアニメーションを制作し、トレンド感あふれるリッチなWebサイトを作り上げてみてください！