Studioアニメーションの基本をマスターしよう！

ノーコードでWebサイトが制作できるSTUDIOでは、作成したWebサイトに簡単にアニメーションを加えることができます。

Webサイトにアニメーションを追加することで、特定のセクションや要素を目立たせ閲覧者が注目するように促したり、与えたいイメージを効果的に伝えることができます。例えばイベントサイトであれば楽しさを演出する、ホテルやレストランなどであれば高級感を演出するなど、そのサイトにあったイメージ訴求手段の一つとして役立ちます。

本記事では、STUDIOアニメーションの作り方をテキストアニメーションを通してご紹介します。実装例はよくあるアニメーションやSTUDIOのコーポレートサイトで実際に実装されているアニメーションとなります。

STUDIOでのアニメーションの作り方

アニメーションは、2つのシンプルなステップで作成できます。通常時と特定条件下の状態を設定し、２点間のトランジション（例えば0.5秒かけて色が変わるなど）を適用することで、アニメーションを作り出します。

主な設定項目とその役割

まずは、今回作成するアニメーションで設定する項目とその役割をご紹介します。

条件付きスタイル

条件付きスタイルを使えば、ある特定の条件下でデザインを変化させることができます。例えばある要素にホバーした時、その要素のデザインを変えることができます。

条件付きスタイルの設定は、要素を選択してエディタ右上の条件付きスタイルからホバーなどの項目を選択。その状態でサイズや色などのスタイルを変えることで設定できます。

本記事では以下の項目を使って設定します。

また、特定条件下から通常時に戻る際のアニメーションも設定できます。例えばホバーした状態からホバーを外した時の状態へ戻るアニメーションです。

これは、条件付きスタイルを指定せずに設定したトランジションやトランスフォーム、スタイルを変更することで調整できます。この後にご紹介する「ボタンにホバーするとテキストがめくれるアニメーション」の手順内で設定しています。

トランジション

トランジションを設定すると、２点間（通常時と特定条件下）の変化で表現される動きに対して、時間やタイミング、暖急の調整が細かく行えます。

トランスフォーム

トランスフォーム（移動、回転、スケール、傾き）を設定すると、要素を移動させたり、拡大・縮小させることができます。これにより、移動を伴うアニメーションやサイズが変化するアニメーションの設定が可能です。

原点

トランスフォーム（回転やスケールなど）の基準点を指定します。例えば回転を設定し、原点を右上に設定すると右上を基準に要素が回転します。

フィルター

ぼかしや色変化などのグラフィック効果が設定できます。
ブレンドモード・フィルター・背面フィルター：STUDIO U

この他にも様々な設定項目があり、以下の公式ヘルプ記事でご紹介しているのでぜひチェックしてご活用ください。

• 条件付きスタイル：STUDIO U

• アニメーション：STUDIO U

アニメーション別の実装手順をご紹介！

フェードしながら下からスライドインアニメーション

テキストがフェードしながらスライドインで登場するアニメーションの設定手順をご紹介します。

1.テキストボックスを追加

追加パネルからテキストボックスを配置します。

2. 出現時の状態を設定

配置したテキストボックスを選択し、エディタ右上にある「条件付きスタイル」から「出現時」を選択します。

「出現時」が選択された状態でモーションタブを開き、次の通り設定します。

3. ライブプレビューで確認する

エディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。

徐々にテキストのピントが合うアニメーション

テキストボックスが画面に表示された際にはぼかし効果が加わった状態で、徐々にはっきりと表示されるアニメーションを設定します。

1. テキストボックスを追加

追加パネルからテキストボックスを配置します。

2. 出現時の状態を設定

配置したテキストボックスを選択し、エディタ右上にある「条件付きスタイル」から「出現時」を選択します。

重ね順の右横の「>」をクリックすると、フィルターが設定できます。ここでぼかし（17px）を設定します。

モーションタブを開き、以下の通り設定します。

3. ライブプレビューで確認する

エディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。

ボタンにホバーするとテキストがめくれるアニメーション

ボタンの中のテキストがホバーするとめくれるようなアニメーション設定手順をご紹介します。

このボタンアニメーションには、テキストボックスを２つ使用します。最終的なレイヤー構造は以下になります。なお、後からテキストを編集する場合には両方のテキストボックスで編集が必要となるのでご注意ください。

※手順をわかりやすくする為、テキストはそれぞれ「Type Something１」と「Type Something２」とします

1. ボックスとテキストボックス１を配置

ボックスを配置し、その中に１つ目のテキストボックスを追加します。このテキストボックスを手順内では「テキストボックス１」と呼びます。

ボタンとなる外側のボックスにパディングや背景色を設定します。

2. ボタンに条件付きスタイル > ホバーを設定

テキストボックス1と2に「inホバー」スタイルを適用するため、まず親ボックスにホバーの設定を行います。親ボックスの見た目は変更せず、ホバーを設定するため、不透明度を１に設定します。

3. テキストボックス１：原点、時間、イージングを設定

ホバーが外れ、通常時のスタイルに戻る際のアニメーションを設定します。ボックスを選択した状態で以下の通り設定します。

※通常時の設定になるため、条件付きスタイルの選択は不要です
※イージングは下記 cubic-bezier(0.4,0.4,0,1) をコピー＆ペーストして設定できます

4. テキストボックス１：inホバーの設定

ボックスを選択し、条件付きスタイルからinホバーをクリックします。その状態で、以下を設定します。

5. テキストボックス１：グループ化とはみ出し設定

テキストボックス１は、ホバー時に上にめくれるテキストです。

この後下から表示されるテキストボックスを追加するため、テキストボックス１を選択した状態でグループ化（⌘+G、windowsではCrtl+G）を行います。右クリック > グループ化を選択する方法でもグループ化できます。

グループ化によって追加されたボックスのはみ出し設定を「非表示」にします。めくれたテキストのボックスからはみ出る部分が表示されないようになります。

6. テキストボックス２：追加、絶対位置に変更

テキストボックス１と同一階層に、もう１つテキストボックスを追加します。このテキストボックスは手順内では「テキストボックス２」と呼びます。

テキストボックス２の配置を「絶対位置」にします。

7. テキストボックス２：通常時の設定

テキストボックス２は、通常時にはボックス外に位置し見えないように設定します。

ここでは、不透明度や移動の設定に加えて、時間、原点、傾き、イージングも設定します。これにより、ホバーした時とホバーを外した時の動きに統一感が生まれ、より魅力的なアニメーションとなります。

※通常時の設定になるため、条件付きスタイルの選択は不要です

8. テキストボックス２：inホバー時の設定

テキストボックス２を選択し、エディタ右上の条件付きスタイルinホバーをクリックします。その状態で、以下の通り設定を行います。この設定で、ホバー時に下から上がってくるような表現となります。

9. ライブプレビューで確認する

エディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。

最後に

本記事ではテキストアニメーションを中心に、STUDIOのアニメーションの仕組みと設定手順をご紹介しました。STUDIOで作るアニメーションは、作り方次第で様々な表現ができることも一つの魅力となっています。

今回ご紹介したアニメーションをそのまま実装することはもちろん、ぜひご自身で探求して、あなただけのオリジナルアニメーションを設定してみてくださいね！STUDIOで作成されたWebサイト事例集の「STUDIO Showcase」を見て、研究してみるのもいいかもしれません。

あなたが作成したアニメーションをSNSで紹介する投稿や、STUDIOコミュニティへの投稿も楽しみにしています。