はじめに

こんにちは、遠藤です。

今回はノーコードツールSTUDIOで、超簡単におしゃれなアニメーションを導入してみようと思います。STUDIOの大まかな概要は前の記事でご紹介してますので、よければ一緒に見てみてください。

今回はLottieというJSONファイル形式のアニメーションを使用します。

Lottieについては、以前ハコザキさんが記事にしてくれていますので、こちらからご確認ください。

今回はこれら二つで、簡単なアニメーションサイトを実装してみます。

また、フェードインアニメーションについて、少しだけコツがいる仕様となっていましたので、そちらも合わせてご紹介します。

さっそくアニメーションを導入

まずはタイトルにもある通り、超簡単にLottieのアニメーションをSTUDIOに追加してみます。

デザインエディタを開きます。追加タブの中段にLottieがありますので、クリックします。

そうするだけで、Lottieのアニメーションが出現します。あとは好きな場所に配置するだけです。

STUDIOはある程度のレイアウトをしてくれるので、好きな場所に好きな要素をドラッグアンドドロップで配置するだけでそれらいしい見た目になります。

Lottieの画像をクリックすると右側に制御用のパネルが出現します。

設定できるのは以下のとおりです。

• 再生条件（出現時、ホバー時、クリック時など）
• ループさせるかどうか
• 再生速度
• 再生ボタンを画面上に出すかどうか

個人的にホバーやクリック時の操作をボタン一つで実装できるのは、大変便利に感じました。

また、スクロールに合わせてアニメーションを動かすこともできるようです。

これは便利すぎます。

Lottieで使用したいアニメーションを探し導入する

ですがこのままだとこのアニメーションしか使用できません。もっと自分好みのアニメーションを実装したいです。

では、LottieのHPで好きなアニメを選びましょう。

今回はこのアニメーションを選びました。

さっそくダウンロードをクリックします。クリック後はこのような画面に遷移します。

右側にコントロール用のパネルがあります。上記の画面からは、さまざまな形式でファイルダウンロードをすることができます。

今回はこの画面ではなく、「Handoff」のタブを開きます。

Enable Assets Linkのトグルボタンをオンにします。

中段のやや下にAssets Linkがあるのでこちらをコピーし、STUDIOのエディタでLottie画像部分をクリックし、右のAssets LinkにコピーしたURLを貼り付けます。

これで好きなアニメーションを導入できました！！

簡単！！！

フェードインアニメーション

ホバーもクリックもスクロールもできるのだから、フェードインのアニメーションもすぐできるでしょ！と思ったのですが、少しコツがいるのでご紹介です。（全然難しくはないです！）

STUDIOでは、フェードインのアニメーションもノーコードで簡単に実装することができます。ですが下記のように、直接Lottie画像の要素にアニメーションを追加すると、うまく動作しないことがあります。

注意：エディタのプレビューでは表現できてしまっているので注意です！！！

対策として、今回は外側にBoxを追加し、Lottie要素を囲うBox要素にアニメーションをつけます。

まずはBoxを追加し、その中にLottie画像の要素を入れます。

次にdivを選択した状態でエディタの上部のタブを「ボックス」から「モーション」に変更します。その後、タブの右側にある条件付きスタイルから、出現時を選択します。

最後にアニメーションの設定です。

今回は、下記のように設定しました。

• 不透明度 : 0 （初期表示の不透明度です）
• 時間：1200 （1.2秒かけてアニメーションが動きます）
• 遅延：600 (0.6秒遅れて表示が始まります)
• 移動 y : 100 (要素の初期位置を100px下げた位置に設定します)

上記の設定で、下から上にフェードインするアニメーションを実装することができました！！（わかりやすく背景色を残していますが、実際の実装はdivの背景色を透過にします。）

さいごに

今回はSTUDIOでLottieアニメーションを使用してみました。

とっても簡単ですし、Lottieには可愛らしいアニメーションがたくさんあるので、サイト制作が楽しくなりそうですね。

実装するだけなら30分以内でできると思うので、ぜひお気軽にお試しください！！

以上、遠藤でした〜！