ノーコードWeb制作ツール「STUDIO」では、簡単にWebサイトを制作できるだけではなく、魅力的なアニメーションを手軽に追加できるツールとしても人気です。アニメーションを取り入れることで、単なる情報提供の枠を超えて、サイトに訪れたユーザーの体験をより豊かにすることができます。この記事では、STUDIOを使用したアニメーションの基礎を押さえながら、Webサイトの表現力を高めるためのポイントを紹介します。実際の制作事例を交えながら解説していますので、初心者の方でも実践しやすい内容になっています。これを機にアニメーションスキルを身に付けて、より魅力的なWebサイト制作に役立てていただければ幸いです。STUDIOで使えるアニメーションの基本機能STUDIOは、コーディングの知識のない方でも簡単にWebサイトを制作できるWeb制作ツールです。STUDIOの特徴として、直感的な操作でアニメーションを作成でき、誰でも簡単に洗練された動きを実現可能です。例えば、フェードインといったシンプルな効果から、ボタンをホバーした際にアニメーションが発生するような動き、さらに複雑なインタラクションまで多様に対応しています。アニメーションがもたらす効果とはWebデザインにおけるアニメーションの効果は、視覚的な魅力を引き出し、ユーザーの注意を引き付ける働きがあります。適切に取り入れることで自然に視線誘導させ、重要な情報に気付かせたり、ページ操作を快適にし、ユーザビリティを向上させる効果が期待できます。ユーザーの注目を集める：動きを通じて視覚的な優先順位をつけ、特定の情報やアクションに自然と視線を集めることができます。ただし、過剰なアニメーションは逆効果になることも。ページ遷移を滑らかにする：ページ遷移時にアニメーションを使うと、画面の切り替えがスムーズになり、ユーザーに快適な体験を与えられます。インタラクティブな操作感を提供：ボタンやリンクにアニメーションを加えることで、操作した際に視覚的なフィードバックを得られ、操作の意図が伝わりやすくなります。適切なフィードバックは、ユーザビリティの向上に役立ちます。STUDIOで可能なアニメーションの種類STUDIOのアニメーション機能では、大きく分けて2つの種類があります。それぞれの簡単な説明と、どんなアニメーションが作成できるのかをご紹介します。ホバー・inホバー：ホバーアニメーションとは、マウスカーソルを特定の要素に乗せた際に起こる演出のことです。例えば、色が変わる、拡大縮小するなどといった挙動があります。これにより、ユーザーは「この要素はクリックできる」と視覚的なヒントを得ることができます。加えてinホバーとは、ホバー効果を持つ親要素に連動して、子要素にもアニメーションを適用することができます。出現時アニメーション：出現時アニメーションは、ページが読み込まれて要素が画面内に表示される際に起こる演出です。例えば、フェードインやスライドインなど、要素が自然に画面に現れることで、ユーザーの注目を集める効果が期待できます。STUDIOのアニメーションにおける基本的な機能STUDIOで設定できる基本的な機能を紹介します。主に3つに分かれており、各設定を組み合わせることで多様なアニメーションが作成できます。1.トランジショントランジションは、アニメーションの速さや緩急を調整する機能です。イージング：アニメーションの緩急を設定できます。イージングを活用することで、メリハリのある動きを表現することができます。STUDIOではデフォルトで9種類のパターンが用意されているため、簡単に調整ができます。もちろん、自分好みにカスタマイズすることも可能です！時間：アニメーションを何ミリ秒間にかけて行うかを設定できます。数字が大きいほどゆっくりと、数字が小さいと動きが早くなります。遅延：アニメーションを開始するまでの時間を、発火時からどれだけ遅らせるのかを設定することができます。2.トランスフォームトランスフォームは要素の変形や移動を調整する機能です。移動：x軸（水平方向）とy軸（垂直方向）に対して、位置を移動させることができます。回転：要素を回転させることができます。スケール：x軸（水平方向）とy軸（垂直方向）に対して、拡大・縮小することができます。傾き：x軸（水平方向）とy軸（垂直方向）に対して、傾けることができます。3.原点原点は、要素がどの位置を基準に変形するかを指定します。たとえば、中央から回転するのか、左端を基準に回転するのかを設定することで、動き方が大きく変わります。これにより、理想的なアニメーションを実現できます。STUDIOで対応できないアニメーションの例STUDIOは多くのアニメーション機能を提供していますが、一部の高度なアニメーションにはデフォルトでは対応していません。例えば、以下のようなアニメーションは、STUDIOでは標準でサポートされていないため、カスタムコードが必要になります。パララックス効果（視差効果）：背景がスクロールに応じて異なる速度で移動するアニメーション効果。STUDIOでは背景の固定は可能ですが、スクロールに応じた動きはデフォルトで提供されていません。スクロールに応じたアニメーション：スクロールの進行に応じて要素が動く、または表示されるアニメーション。これもJavaScriptが必要になる挙動のため、標準機能としてはサポートされていません。まずはここから！STUDIOで実現できる基本のアニメーション7選今回ご紹介するアニメーションはこちらにまとめています。▼1～9番目のアニメーション事例https://preview.studio.site/live/bXqzKBmKaD▼10番目のアニメーション事例https://preview.studio.site/live/4yqBPwvLWj1.フェードイン%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FlMP8YEBFrPY%3Fsi%3DnjqvgUPGsIJ-ftu2%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E%0Aはじめに動かしたいオブジェクトを選択し、編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。次に、各項目に対して赤枠のような数値を設定します。今回は、ゆっくりと時間をかけて少しずつ出現するように、時間と遅延を大きく設定しています。この数値を小さくすると、素早く出現するような動きに変わります。2.左から順に表示する%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FYZn8ZVcGJRo%3Fsi%3DPH-2C0H3EW5OI8ZW%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E順番に動かしたいオブジェクトをグループ化します。参考例では横並びにし、ギャップを40pxに設定しています。さっそく左から順にアニメーション設定を行います。オブジェクトを選択し、編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、赤枠のようにパラメーターを設定します。これを基準として、ほかのアニメーションも設定を進めていきます。次に、中央オブジェクトの出現時アニメーションを設定します。基本的な設定は同じですが、遅延だけ数値を変えています。デフォルトが遅延600だったので、その2倍で設定しています。最後に、右オブジェクトの出現時アニメーションを設定します。こちらも基本設定は同じで、遅延の数値を3倍になるように変更しています。3.ボタンアニメーションその1（拡大・縮小）%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fd9xI7XgfqYU%3Fsi%3DToOMx6FVzUwR2WnK%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3Eはじめに動かしたいオブジェクトを選択し、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。次に、ホバー時に拡大する場合は、スケールに対して数値を1.05に設定します。（赤枠を参考）ホバー時に縮小させたい場合は、1よりも小さい数値を与えます。（参考例では0.95に設定）数値が1から離れるほど変化が大きくなるので、プレビューで確認しながら調整を進めましょう。4.ボタンアニメーションその2（色が変わる形）%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FU6BUhcZrgOA%3Fsi%3DTprc6DhppT6CDOtV%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E動かしたいオブジェクトを選択し、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。そして、塗りと枠線を任意のカラーに変更します。もしも変化したボックスとテキストの色が同じになる場合は、テキストも色を変える必要があります。このように子要素にも変化を与えたい場合は、「inホバー」を使用します。ホバーを編集している状態でテキストを選択するだけで、簡単に編集が可能です。この時、inホバーは親要素に何かしらのアニメーション設定を行わないと編集できないので注意が必要です。参考例ではテキストを黒く変更しました。5.ボタンアニメーションその3（下線が伸びる形）%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FbsDBg4rxcK4%3Fsi%3DNshymtAXKut0-ywo%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3Eはじめに、テキストの下に縦幅1pxのボックスを追加し、ボタンの形を作っていきます。ホバー設定をするために、ボタンはグループ化しておきましょう。下線のデフォルトのスケールと原点を調整します。スケールをx軸（水平方向）0に変更し、原点が左中央になるように設定します。次に、グループを選択し、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。そして、不透明度を1にします。表示は変わりませんが、inホバーは親要素に何かしらのアニメーション設定を行わないと編集できないため必要な手順となります。最後に、下線の「inホバー」に対して、スケールのx軸（水平方向）を0に設定します。6.ホバーで画像を拡大%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FZQ76LDhLcKs%3Fsi%3DB4_tizHY6Cj0F9qv%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3Eはじめに、任意の画像を用意し、ホバー設定をするために、画像をグループ化しておきましょう。デフォルトでは縦幅横幅どちらもautoになっていますが、画像のサイズに依存してしまうので、それぞれ数値を設定していきます。今回は縦幅横幅どちらも500pxに設定しました。次に、グループの親要素に対して、左上の「はみ出し」の設定を「非表示」に設定します。これを行うことで、画像が拡大された時にはみ出ることを防ぎます。次に、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。そして、不透明度を1にします。表示は変わりませんが、inホバーは親要素に何かしらのアニメーション設定を行わないと編集できないため必要な手順となります。最後に、画像の「inホバー」に対して、スケールのx軸y軸どちらも1.1に設定します。これでホバーで画像が1.1倍に拡大されるようになります。7.ボックスが流れた後にテキスト表示%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fj4TogvAAm2o%3Fsi%3D6SprXieAiamPX717%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E任意のテキストを用意し、ホバー設定をするために、テキストをグループ化しておきましょう。グループの中に、任意のカラーのボックスも追加します。テキストを選択し、縦幅の単位をautoからpxに変更します。もしも小数点が出てしまった場合は整数になるように調整します。ボックスもテキストと同じ縦幅になるように調整します。そして、左上の「配置」を「絶対位置」に設定します。すると、テキストとボックスが重なるかと思います。デフォルトでは親要素を基準に、左上が起点となるようになっています。次に、ボックスを手動で一番右端へと動かします。中央よりも右に動かすと、パラメーターが右基準に変わります。そのようにしてから数値を0に変更すると正確に早く設定できます。そして、ボックスの横幅も0pxに変更します。ここまで用意し、ようやくアニメーション設定を行います。編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、ボックスの横幅を100％に変更します。最後に、モーションパネルからタイミングの調整も行います。参考例では時間を800に、遅延を400に設定しました。こちらはプレビューで確認しながらお好みで調整してください。【応用編】複雑なアニメーションパターン3選8.ホバーでテキストがめくれるアニメーション%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FOMgT5PFeWWw%3Fsi%3DQRgRfGrvgkPNLuAX%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3Eお好みでボタンの形を作成します。この段階では、ボックスの中にテキストが入った一般的な構造になっています。次に「inホバー」の設定を行うため、親要素に対して「ホバー」を不透明度1にします。そして、ホバーが終了しデフォルトに戻る際のアニメーション設定をします。テキストに対して赤枠のように時間を調整し、原点を右上に変更します。この時、通常時の設定になるため、条件付きスタイルの選択は不要です。次に、ボックスを選択し、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。その状態でテキストを選択し、「inホバー」の設定を行います。不透明度を0に、y軸（垂直方向）に対してマイナスに移動し、傾きを与えます。今作成したテキストは、ホバー時に上にめくれていくアニメーションを行うためのものでした。今度は、下から表示される2つ目のテキストを追加する必要があります。そこでテキストをグループ化し、テキストを追加します。そして、グループに対して「はみ出し」を「非表示」に設定し、アニメーションした際に、はみ出ないようにします。そして、2つ目のテキストに対して「配置」を「絶対位置」にします。すると、2つのテキストが重なるように変化します。2つ目のテキストは、デフォルトではボックス外にし見えなくなるように設定します。そのため、不透明度を0に、移動を変更します。そして、1つ目のテキストと動きを合わせるために、時間、傾き、原点も赤枠のように調整します。こちらもデフォルトの設定になるため、条件付きスタイルの選択は不要です。最後に、2つ目のテキストに対して「inホバー」の設定を行います。ボックスを選択し、編集画面の右上にある「条件付きスタイル」から、「ホバー」を選択します。その状態でテキストを選択し、「inホバー」の設定を行います。そして、赤枠のように不透明度を1に、移動と傾きを0に戻すようにします。この設定により、ホバー時に下から上に向かって表示されるような動きが実現できます。9.画面分割した左側を固定でスクロール%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FX4yVWs3aOf0%3Fsi%3DmO88Z-eLaNEcqtAj%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3Eお好みでスクロールさせたいコンテンツを作成します。これらのグループの縦幅はautoになるようにしておきましょう。次に、固定させる背景を作成します。ボックスを追加し、横幅100％、縦幅100vhに設定します。背景に表示させたい要素がある場合は、このボックスが親要素となるように追加します。さらに、固定させる背景のグループに対して「配置」を「固定」にし、「重ね順」を-3にして、背面に配置するようにします。そうすると、ページの一番上に固定されるようになります。最後に、ページ全体を選択した状態で、配置を「右上」に変更します。この設定で、ページの右側にスクロールしたいコンテンツが配置されるようになります。10.ローディング風アニメーション（ロゴがふわっと出現）%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FCmTEmUhILoI%3Fsi%3DO1UVrKH9qsWkPaqn%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E実際に作成したアニメーションはこちらhttps://preview.studio.site/live/4yqBPwvLWj今回は階層構造が複雑なため、簡単に図解します。以下のようにボックス3つと画像がグループになるように作成していきます。①黒い背景：モーション終了後にフェードアウトするアニメーション②グレー背景：モーション時の背景➂白い背景：ロゴをフェードアウトさせるアニメーション④画像：ロゴをフェードインさせるまず、画像は「Box」から「image」に変更し、表示させたいサイズに調整します。【④画像】編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、モーションタブから不透明度を0に、時間と遅延をお好みのタイミングに変更します。【➂白い背景】該当のボックスを選択し、横幅縦幅をautoに、不透明度を0にし、塗りを透明に変更します。【➂白い背景】編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、モーションタブから不透明度を1に、時間と遅延をお好みのタイミングに変更します。【①黒い背景】該当のボックスを選択し、「配置」を「固定」に、「重ね順」を5に、塗りを透明に設定します。また、横幅は100％に、縦幅は100vhになるように調整してください。【①黒い背景】編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、モーションタブから時間と遅延をお好みのタイミングに変更します。【②グレー背景】該当のボックスを選択し、横幅は100％に、縦幅は100vhに調整し、不透明度を0に変更してください。【②グレー背景】編集画面の右上にある「条件付きスタイル」から、「出現時」を選択します。そして、モーションタブから不透明度を1に、時間と遅延をお好みのタイミングに変更します。これでロゴがふわっと出現するローディング風アニメーションの完成です！アニメーションを効果的に使うポイントここまでの解説をふまえて、よりアニメーションを効果的に使うポイントを3つ紹介します。ユーザー体験を最優先に心がけることアニメーションは視覚的な魅力を高める効果がありますが、使いすぎは逆効果です。たとえば、何かアクションを行いたいのに、アニメーションが多かったり長すぎる場合、ユーザーは待たされることでストレスが溜まってしまいます。ですので、複雑すぎず、適切な長さのアニメーションを心がけましょう。また、複数のアニメーションがある場合、動きの統一感を持たせることも重要です。異なるアニメーションが混在していると、ユーザーにとって不自然に感じられたり、同じ動作だと認識してもらえなかったりすることがあります。同じ種類のアニメーションは、同じ速度や動きを統一することで、一貫性のあるWebサイトに仕上がります。イージングの活用をすることイージングとは、アニメーションの動きに緩急をつける機能です。物理法則に基づいた動きは、ユーザーにとって自然に感じられます。たとえば、物が落ちる際には徐々に加速しますし、電車が動き出す際にはゆっくりと走り始めて、停車の際にも徐々に減速していきます。このように、物理法則に基づいた動きを意識することで、自然と受け入れやすいアニメーションを実現することができます。アクセシビリティの配慮をするアニメーションが視覚的に目立つ反面、アクセシビリティの観点も考慮する必要があります。動きの激しいアニメーションや点滅は、一部のユーザーに不快感を与えることがあります。また、ホバー時に要素の色が変化するアニメーションは、コントラストが不十分な場合、視認性が低下する可能性があるため注意が必要です。さまざまなユーザーに対応できるように、コントラストを意識したアニメーションを心がけましょう。最後にSTUDIOを活用することで、魅力的なアニメーションのWebサイトをスピーディーに制作することができます。この記事で紹介したアニメーションの基本機能や活用ポイントを参考にして、ぜひご自身の制作にも取り入れてみてください！重要なのは、ただ動きを付け加えるのではなく、ユーザー体験を最優先に考えてバランス良く取り入れることです。視覚的な一貫性や操作感が伝わるアニメーションを提供することで、ユーザー満足度の高い魅力的なWebサイトを作り上げることができます。これを機に、STUDIOでのアニメーション制作を楽しみつつ、より一層ユーザーに愛されるWebサイトを目指してみてください！