【Studio初心者ガイド】アニメーションの基本的な設定方法｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

ノーコードでWebサイトを簡単に制作できるStudioは、デザインの自由度が高く、手軽にアニメーションを追加することができます。

アニメーションを使用することで、閲覧者の目を引きつけたり、サイトのコンセプトやイメージを効果的に伝えることができるのが特徴です。

本記事では、Studioを使ったアニメーションの基本的な設定方法や、実際に活用されている事例を交えながら、魅力的なアニメーションの作り方をご紹介します。

Studioのアニメーションの種類は？

Studioでは、2種類のアニメーションを設定することができます。それぞれの特徴を簡単に説明し、どのような動きを実現できるか解説します。

ホバー・inホバー

ホバーアニメーションは、ユーザーがマウスをボタンやリンクに重ねたときに発生するエフェクトです。

例えば、色の変化や拡大縮小など、視覚的にインタラクティブな操作感を演出できます。

また、inホバーアニメーションは、親BOXにホバー時のアニメーションを設定し、その中にある子BOXに異なる動きを設定できる機能です。

これにより、親BOXと子BOXが連動して動く複雑なエフェクトを実現できます。

出現時

出現時アニメーションは、ページが読み込まれる際にエフェクトを表示するアニメーションです。

サイト訪問者の視線を引きつける効果があり、フェードインやスライドインなどを使用して、コンテンツが順に現れる演出を簡単に実装することが可能です。

Studioのアニメーションで設定できることは？

Studioでは、さまざまな設定を組み合わせて多彩なアニメーションを実現することができます。主に3つの設定項目があり、それぞれに特化した動きを作り出せます。

これから、トランジション、トランスフォーム、その他のスタイルに分けて説明していきます。

トランジション

トランジション（アニメーションの変形にかける時間）の設定では、「イージング」「時間」「遅延」の3項目で、アニメーションの動き方を調整します。

設定は右パネルの［条件スタイル］を選択し、「ホバー」か「出現時」を選択して設定します。

イージング

イージング（赤四角）は、アニメーション速度の緩急を表すカーブです。横軸が時間、縦軸が変形量を表し、どのタイミングで速く・遅く動くかを指定します。

時間

時間(赤四角）は、アニメーションを何秒かけて行うかを指定する項目です。

値を大きくするとゆっくりした動きになり、小さくすると短時間で素早く変化します。小数点以下の値も入力できます。

速い動きなら300〜600ミリ秒、ゆったりとしたアニメーションなら1000〜2000ミリ秒が適切です。

遅延

遅延（赤四角）はアニメーションの開始タイミングを調整します。

例えば、3つの要素を順にフェードインさせたい場合、それぞれに異なる遅延を設定することで、滑らかな連続アニメーションを実現できます。

トランスフォーム

トランスフォーム（変形）の設定では、指定したボックスに対して、移動・回転・拡大／縮小・傾きといった変形を加えられます。また、変形の起点は「原点」で指定します。

変形の設定は、右パネル下部にある［変形］部分にて行います。

移動

ボックスをX軸・Y軸方向に移動します。位置をずらすことで、ホバー時に要素を動かすような表現を作れます。

例えば、以下のようにホバーしたときアイコンが少し右に動く、などの動きを付けられます。

回転

ボックスを回転させます。基本は中央を起点として回転しますが、「原点」を変更すると左端や右端など任意の位置を基準に回転できます。

拡大・縮小

ボックスを拡大・縮小します。X軸・Y軸それぞれに倍率を設定できます。

傾き

ボックスを傾けます。X軸・Y軸それぞれに対して傾き量を設定し、動きのあるデザインを施せます。

その他スタイル

アニメーションは、通常時のスタイルと、条件付きスタイルで設定したスタイルの「違い」が、アニメーションとして再生されます。

そのため、トランジションや変形（トランスフォーム）だけでなく、通常時と条件付きスタイルで設定したスタイルの「違い」もアニメーションとして表現できます。

色

テキストやボックスの色をアニメーションさせる設定です。

カーソルを乗せた時のスタイル変化は、条件付きスタイルの［ホバー］／［（in）ホバー］で設定します。

透明度

透明度を調整して、フェードインやフェードアウトなど、視覚的に美しいアニメーションを簡単に実現できます。コンテンツがふんわりと現れる演出を行う際に使われます。

Studioでアニメーションを設定する方法

それでは、実際にStudioでアニメーションを設定する方法を見ていきましょう。ここでは、人気のある2つのパターンをご紹介していきます。

①下からフェードインするアニメーション

設定方法

1.アニメーションを設定したい画像やテキストなどのボックスを、追加パネルからドラッグ＆ドロップで配置します。

2.配置したボックスをクリックし、エディタ右上の「条件付きスタイル」から［出現時］（赤四角）を選択し、「カスタム設定」をクリックします。

「出現時」は、画面の読み込みやスクロールによって、要素がブラウザの画面内に入ったタイミングで適用されるスタイルです。

3.「出現時」が選択された状態でモーションタブを開き、以下を設定します。

• 移動Y：30px

• 時間：0.6秒、遅延：0.6秒

• 不透明度：0（通常時は1、出現時は0）

時間や移動の数値を調整することで、アニメーションの速度や動きをカスタマイズできます。サイトの雰囲気に合うように、適宜調整してください。

②角度を付けて下からふわっと表示される

設定方法

1.画像などの要素を選択し、条件付きスタイルの［出現時］を選択し、「カスタム設定」をクリックします。

2.モーションタブで、以下の様に設定します。

・不透明度：0
・時間：1600
・遅延：500
・移動：X0px/Y150px
・回転：15deg

イージングの種類と時間・遅延・移動の数字はお好みで変更してください。

Studioでできないアニメーションは？

Studioでは多彩なアニメーションを設定できますが、一部のアニメーションは実現できないものもあります。

パララックス

スクロール操作に連動して複数のレイヤーが異なる速度で動き、3D効果を演出するパララックスデザインはStudioでは実装できません。

ループアニメーション

Studioでは、繰り返し（ループ）のアニメーションを設定できません。

出現時やホバー時に設定されたスタイルの変化は一度きりで、ループの動作はできません。

繰り返しアニメーションを表現したい場合は、GIFやSVGを利用して代替する必要があります。

より良いアニメーションを作るためには、以下の3つのポイントを押さえることが重要です。これらを意識することで、効果的で魅力的なWebサイトを作成できます。

Studioでアニメーションを設定するときのポイント6つ

より良いアニメーションを作るためには、以下の6つのポイントを押さえることが重要です。これらを意識することで、効果的で魅力的なWebサイトを作成できます。

①タイミング

タイミングは、アニメーションが始まる・終わる時間やその長さを指します。

要素の大きさと複雑さに応じたタイミングを設定することがポイントです。

要素が大きければアニメーションは長く、複雑な動きであればゆっくりさせることで視覚的に分かりやすくなります。

アニメーションのタイミングは、Studioのエディター画面上部から簡単に設定できます。

②イージング

イージングは、アニメーション速度の緩急を表すカーブです。

横軸が時間、縦軸が変形量を表し、どのタイミングで速く・遅く動くかを指定します。

イージングは、自然な動きかどうかを意識して使うことが大切です。

例えば、現実の世界では、走り出す時には徐々に加速し、止まる前に徐々に減速します。

この自然な感覚に合わせて、出現時や消失時に適切なイージングを選ぶことで、違和感のないアニメーションを作成できます。

③構成

アニメーションの構成は、要素の順番と間隔（ずらし）で決まります。

重要な要素を優先的にアニメーションで表示し、間隔を調整することで視覚的なリズムが生まれ、動きにメリハリがつきます。

サイト全体に統一感を持たせるためには、アニメーションのルールを決めて、要素ごとにイージングの種類や時間を揃えると良いでしょう。

④統一感を持たせる

Webサイトには多くの要素が含まれるため、アニメーションにもルールを設けることで統一感が生まれます。

イージングの種類やタイミングを全体で揃えれば、まとまりのある洗練されたアニメーションを実現できます。

⑤アニメーションを控えめに、時間を短めに

Webサイトの主な目的は、情報を効果的に伝えることです。凝りすぎたアニメーションを多用すると、情報が伝わりにくくなり、ユーザーが離脱する原因になります。

また、長時間のアニメーションは、ユーザーが情報をすぐに得られないため、ストレスを感じる要因となることもあります。

過剰なアニメーションはサイトの読み込み速度を低下させ、結果としてSEOにも悪影響を与える可能性があるので、慎重に使用しましょう。

⑥ボタンにホバーアニメーションをつける

ボタンやリンクなど、クリックすることでアクションが発生する要素には、直感的に「クリックできる」とユーザーに伝えるホバーアニメーションを設定することが重要です。

これにより、ユーザーの操作がスムーズになり、サイトの利便性が向上します。

まとめ

Studioを使えば、ノーコードで手軽にアニメーションをWebサイトに追加でき、閲覧者の注目を集めたり、サイトのイメージを効果的に伝えることが可能です。

基本的な設定方法から、実際に使われている実装例まで幅広くご紹介しましたので、デザインの幅を広げたい方はぜひご参考になさってみてください。