本記事では、STUDIOを使ったアニメーションの基本からコツや実際の事例までを紹介します。STUDIOは、実装できるデザインの自由度が非常に高く、アニメーションに関しても、様々な表現を実装できます。こちらで紹介した設定を組み合わせれば、一般的なWebサイトに使用されるアニメーションはほとんどが実装できるので、ぜひ確認して見てください。

また、STUDIO導入のメリット・デメリットや、導入前に確認しておくべきことを資料にまとめました。STUDIOを活用したサイト制作をご検討中の方は、下記リンクよりぜひご覧ください。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOのアニメーションの種類

STUDIOで設定できるアニメーションは2つの種類があります。それぞれの種類の簡単な説明と、それを使ってどのようなアニメーションが実装できるのか説明していきます。

ホバー・inホバー

ホバーアニメーションとは、マウスオーバー時に発生するエフェクトです。例えば、ボタンやリンクの上にカーソルを乗せると、色が変わる、拡大縮小するなど、インタラクティブな操作感を演出することができます。

inホバーアニメーションは、ホバーアニメーションを設定しているBOX（親BOX）の中にあるBOX（子BOX）に対して設定するアニメーションです。inホバーアニメーションを設定すると、親BOXのホバー時に、子BOXにinホバーのスタイルが適用されます。これにより、親子関係のBOX同士で連動した動きを実現することができます。

出現時

出現時アニメーションは、ページが表示されるタイミングでエフェクトが発生するアニメーションで、サイト訪問者の注意を引く効果があります。例えば、フェードインやスライドインなどのエフェクトを用いて、コンテンツが次々と現れるような演出が可能です。

STUDIOのアニメーションで設定できること

STUDIOでは、各設定を組み合わせることで様々なアニメーションを実現できます。設定できる項目は、主に3つに分類されており、それぞれトランジション、トランスフォーム、その他のスタイルです。

トランジション

トランジション設定では、アニメーションの緩急や時間、遅延を調整できます。これにより、単調なアニメーションではなく、緩急のある洗練されたアニメーションを表現することができます。

イージング

イージング機能では、アニメーションの緩急を調整できます。イージングを活用することで、単調なアニメーションではなく、緩急のあるアニメーションを表現できます。STUDIOには、9個のイージングパターンが用意されています。イージングのグラフを自分で調整することも可能です。

時間

「時間」設定では、アニメーションが動作する時間を決めることができます。「300」は0.3秒を意味しています。コンテンツやトランジションの数値にもよりますが、素早いアニメーションであれば300-600、ゆったりとしたアニメーションであれば1000-2000程度を選択すると良いでしょう。

遅延

「遅延」設定では、アニメーションが動作するまでの時間を決めることができます。例えば、3つのアイテムがあり、左のアイテムから順に下からフェードインさせたい場合を考えてみましょう。左から1つ目に遅延を0、2つ目に遅延を500、3つ目に遅延を1000と設定すると、下のように左から順にフェードインのアニメーションが実行されます。

トランスフォーム

トランスフォーム設定では、コンテンツの移動や回転、スケール、傾きを調整できます。これにより、フェードインや回転など、様々なアニメーションを表現することが可能です。

移動

「移動」設定では、左右のx軸と上下のy軸を用いて、アニメーションの位置を操作できます。例えば、「移動」を活用することで、コンテンツがふわりと現れるフェードインなどのアニメーションを実現できます。下からのフェードインを作成する場合、出現時のアニメーションで、「移動」のy軸を50px（例）に設定し、透明度を0にすることで、このようなフェードインを実現できます。

回転

「回転」設定では、コンテンツの回転角度を設定できます。例えば、電話をかけるボタンのホバー時に、受話器の回転を設定することで、「置いてある」受話器を「取る」ようなアニメーションを実現できます。

スケール

「スケール」設定では、x軸・y軸方向に何倍に拡大・縮小させるかを決めることができます。例えば、ブログ記事をホバーするとサムネイル画像が大きくなるアニメーションは、スケールを用いて実装できます。

傾き

「傾き」設定は、アニメーションとして一般的に使われているわけではありませんが、うまく活用すればユニークなアニメーションを実現できます。例えば、テキストに対してx軸方向に-10°の傾きをつけると、下の画像のようにイタリックのような表現を実装することができます。

その他スタイル

上記で挙げたもの以外にも、様々なスタイルに対してアニメーションを設定することができます。すべてを網羅すると多すぎるため、ここでは、頻繁に使われる2つのスタイルに絞ってご紹介します。

色

ボックスの色やテキストの色に対して、アニメーションを設定できます。これは、ボタンのホバー時によく使われます。

透明度

アニメーションに欠かせないのが「透明度」です。簡単に美しいアニメーションを実現できるため、必ずマスターしましょう。出現時アニメーションでフェードインを設定したい時や、ホバー時に全体的に色を薄くしたい時などに使われます。

実際にSTUDIOでアニメーションを設定する方法

それでは、実際にSTUDIOでアニメーションを設定してみましょう。出現時のアニメーションとホバーのアニメーションの2つのパターンでそれぞれ解説します。

出現時アニメーションで下からのフェードインを作ろう

今回は、下から円がフェードインするアニメーションを作成していきましょう。

下からフェードインするアニメーションは、出現時には見えない（透明度が0）状態で、通常の位置よりも下にあります。この出現時の状態から、徐々に透明度が上がり、下からふわりと表示されるのがフェードインアニメーションです。
これをSTUDIOで実装するには、出現時に透明度を0に設定し、移動をy軸方向に50px、時間を1500、遅延を1000にしましょう。時間や移動の数値を調整することで、アニメーションの速さを調整できます。サイトに合った雰囲気になるように、適宜調整してみてください。

🔽 設定

🔽 操作方法

ホバーアニメーションでボタンを作ろう

続いて、Webサイトに欠かせないボタンのホバーアニメーションを作成していきましょう。今回は、青背景・白文字のボタンが、ホバーすると白背景・青文字に反転するボタンを作成します。

ボタンのボックスを選択し、ホバー時の設定を行います。ホバー時に背景色を白に設定します。テキストは、親ボックスであるボタンのボックスがホバーしている際に青文字にしたいので、テキストに対してはinホバーで青を設定します。

🔽 ボタンBOXに対する設定(親BOX)

🔽 テキストに対する設定(子BOX)

🔽 操作画面

STUDIOでできないアニメーション

STUDIOでは、細かくアニメーション設定ができますが、表現できないアニメーションも存在します。STUDIOでできないこと・できることをまとめた記事がありますので、アニメーション以外の機能でできないことを確認したい方はぜひご参考ください。
※参考記事：「STUDIOでできること・できないことを徹底解説」↗️

パララックス

スクロールの動作に応じて、複数のレイヤーが動くことで3Dのような感覚を与えるパララックスデザインは実装できません。

繰り返し(ループ)の表現

STUDIOでは、ループの表現を設定することができません。出現時やホバー時で設定したスタイルから通常のスタイルへ変化させるという1回の動作のみ実装できます。ループのアニメーションを実装したい場合は、GIFやSVGなどを利用して表現しましょう。

STUDIOで良いアニメーションを作るポイント

STUDIOで良いアニメーションを作るポイントについて解説します。

つけすぎない・長すぎない

Webサイトは、情報を顧客に伝えることが主な目的であるため、凝ったアニメーションを過剰に使用することは適切ではありません。情報が読み取りにくい頻繁なアニメーションや長過ぎるアニメーションは、顧客が情報収集を行う際の障壁となり、結果的に離脱率が上昇してしまいます。

さらに、過度なアニメーションや複雑なアニメーションは、サイトの読み込み速度に悪影響を及ぼすことがあります。サイトのパフォーマンスが低下すると、SEOにも悪影響を与えるため、アニメーションの使い過ぎには注意が必要です。

ボタンにはホバーをつける

ボタンなど、クリックすればアクションが起こるようなコンテンツに対しては、クリックできることが直感的にわかるようなホバーアニメーションを必ずつけましょう。これにより、ユーザーがサイトでのアクションをスムーズに行えるようになります。

同じアニメーションは設定を揃える

同じスタイルのアニメーションは、設定項目を揃えることで、整ったアニメーションができやすくなります。例えば、フェードインのアニメーションをつける場合、時間・遅延・移動の設定を揃えておくことで、統一感のあるアニメーションを実現することができます。

STUDIOのアニメーションの事例

これまで、STUDIOの基本的なアニメーションを紹介してきましたが、これらの機能を活用することで、様々なアニメーションを実装することができます。ここで、弊社が実装を担当させていただいたサイトのアニメーションの事例をいくつか紹介します。

※記事では動きが分かりにくいため、実際のサイトをぜひご覧ください。

株式会社ペネトレイト

このサイトではTOPページに、ロゴを全面に表示し、その後にファーストビューが現れるようなアニメーションを実装しています。ファーストビューでは、写真がふわりと切り替わるアニメーションを実装しています。また、左下のスクロールアニメーションは、ループ表現のため、gifで実装しました。

実際のサイトを見る ↗️
NOROSHI Partnersの制作実績一覧を見る ↗️

有限会社KANEHON

こちらのサイトでは大谷石の高級感や希少性を演出するために、ゆっくりとしたアニメーションを採用しました。さらに、遅延時間に差を設けることで、写真が徐々に現れるようなアニメーションも実装しています。
※このサイトの背景は、動画を埋め込むことで実装しています。

実際のサイトを見る ↗️
NOROSHI Partnersの制作実績一覧を見る ↗️

株式会社NOROSHI

こちらのサイトでは、ぼかしフィルターを用いたアニメーションを実装しています。さらに、見出しの下線には横方向に伸びるアニメーションを設定しました。全ての見出しに同じアニメーション設定を適用することで、サイト全体に統一感が生まれています。

実際のサイトを見る ↗️
NOROSHI Partnersの制作実績一覧を見る ↗️

まとめ

今回は、STUDIOのアニメーションの基本やコツについて解説しました。STUDIOはデザインの自由度が高いツールであり、紹介した事例以外にもさまざまな独自のアニメーションを実現できます。ぜひ、エディタを操作しながら様々なアニメーションを試してみてください。