ノーコードでWebサイトが制作できるSTUDIOでは、作成したWebサイトに簡単にアニメーションを加えることができます。Webサイトにアニメーションを追加することで、特定のセクションや要素を目立たせ閲覧者が注目するように促したり、与えたいイメージを効果的に伝えることができます。例えばイベントサイトであれば楽しさを演出する、ホテルやレストランなどであれば高級感を演出するなど、そのサイトにあったイメージ訴求手段の一つとして役立ちます。本記事では、STUDIOアニメーションの作り方をテキストアニメーションを通してご紹介します。実装例はよくあるアニメーションやSTUDIOのコーポレートサイトで実際に実装されているアニメーションとなります。STUDIOでのアニメーションの作り方アニメーションは、2つのシンプルなステップで作成できます。通常時と特定条件下の状態を設定し、２点間のトランジション（例えば0.5秒かけて色が変わるなど）を適用することで、アニメーションを作り出します。主な設定項目とその役割まずは、今回作成するアニメーションで設定する項目とその役割をご紹介します。条件付きスタイル条件付きスタイルを使えば、ある特定の条件下でデザインを変化させることができます。例えばある要素にホバーした時、その要素のデザインを変えることができます。条件付きスタイルの設定は、要素を選択してエディタ右上の条件付きスタイルからホバーなどの項目を選択。その状態でサイズや色などのスタイルを変えることで設定できます。本記事では以下の項目を使って設定します。項目詳細ホバー、（in）ホバー閲覧者がカーソルを載せたときのスタイルを設定できます。一般的には、どの要素がクリックできるのかを閲覧者に伝えるために用います。出現時画面の読み込みやスクロールによってブラウザ画面内に登場する直前のスタイルを設定できます。また、特定条件下から通常時に戻る際のアニメーションも設定できます。例えばホバーした状態からホバーを外した時の状態へ戻るアニメーションです。これは、条件付きスタイルを指定せずに設定したトランジションやトランスフォーム、スタイルを変更することで調整できます。この後にご紹介する「ボタンにホバーするとテキストがめくれるアニメーション」の手順内で設定しています。トランジショントランジションを設定すると、２点間（通常時と特定条件下）の変化で表現される動きに対して、時間やタイミング、暖急の調整が細かく行えます。項目詳細イージングアニメーションの緩急が設定できます。カーブが水平に近い部分ほど緩やかに、垂直に近い部分ほど早いスピードでアニメーションが動きます。時間アニメーションを何ミリ秒（ms）かけて行うかを設定できます。数字を大きくするとゆっくり時間をかけて動き、小さくすると早い動きとなります。遅延アニメーションをスタートするタイミングを、トリガーからどれだけ遅らせるかをミリ単位で設定できます。トランスフォームトランスフォーム（移動、回転、スケール、傾き）を設定すると、要素を移動させたり、拡大・縮小させることができます。これにより、移動を伴うアニメーションやサイズが変化するアニメーションの設定が可能です。原点トランスフォーム（回転やスケールなど）の基準点を指定します。例えば回転を設定し、原点を右上に設定すると右上を基準に要素が回転します。フィルターぼかしや色変化などのグラフィック効果が設定できます。ブレンドモード・フィルター・背面フィルター：STUDIO Uこの他にも様々な設定項目があり、以下の公式ヘルプ記事でご紹介しているのでぜひチェックしてご活用ください。条件付きスタイル：STUDIO Uアニメーション：STUDIO Uアニメーション別の実装手順をご紹介！フェードしながら下からスライドインアニメーション%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F895692668%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eテキストがフェードしながらスライドインで登場するアニメーションの設定手順をご紹介します。1.テキストボックスを追加追加パネルからテキストボックスを配置します。2. 出現時の状態を設定配置したテキストボックスを選択し、エディタ右上にある「条件付きスタイル」から「出現時」を選択します。「出現時」が選択された状態でモーションタブを開き、次の通り設定します。項目設定内容詳細移動Y30px出現時に、上方向に30px移動します。時間12001.2秒かけて変化する遅延600要素が画面に表示されてから0.6秒後にアニメーションがスタート不透明度0不透明度はデフォルトで１に設定されており、数値が0に近づくにつれて透明度が上がります。今回は、通常時に不透明度を１、出現時に０に設定します。出現時には透明で、徐々に表示されるフェードを表現する設定となります。3. ライブプレビューで確認するエディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。徐々にテキストのピントが合うアニメーション%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F895697990%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eテキストボックスが画面に表示された際にはぼかし効果が加わった状態で、徐々にはっきりと表示されるアニメーションを設定します。1. テキストボックスを追加追加パネルからテキストボックスを配置します。2. 出現時の状態を設定配置したテキストボックスを選択し、エディタ右上にある「条件付きスタイル」から「出現時」を選択します。重ね順の右横の「>」をクリックすると、フィルターが設定できます。ここでぼかし（17px）を設定します。モーションタブを開き、以下の通り設定します。項目設定内容詳細時間12001.2秒かけて変化する遅延600要素が画面に表示されてから0.6秒後にアニメーションがスタート不透明度0不透明度はデフォルトで１に設定されており、数値が0に近づくにつれて透明度が上がります。今回は、通常時に不透明度を１、出現時に０に設定します。出現時には透明で、徐々に表示されるフェードを表現する設定となります。3. ライブプレビューで確認するエディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。ボタンにホバーするとテキストがめくれるアニメーション%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F895698002%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eボタンの中のテキストがホバーするとめくれるようなアニメーション設定手順をご紹介します。このボタンアニメーションには、テキストボックスを２つ使用します。最終的なレイヤー構造は以下になります。なお、後からテキストを編集する場合には両方のテキストボックスで編集が必要となるのでご注意ください。※手順をわかりやすくする為、テキストはそれぞれ「Type Something１」と「Type Something２」とします1. ボックスとテキストボックス１を配置ボックスを配置し、その中に１つ目のテキストボックスを追加します。このテキストボックスを手順内では「テキストボックス１」と呼びます。ボタンとなる外側のボックスにパディングや背景色を設定します。2. ボタンに条件付きスタイル > ホバーを設定テキストボックス1と2に「inホバー」スタイルを適用するため、まず親ボックスにホバーの設定を行います。親ボックスの見た目は変更せず、ホバーを設定するため、不透明度を１に設定します。3. テキストボックス１：原点、時間、イージングを設定ホバーが外れ、通常時のスタイルに戻る際のアニメーションを設定します。ボックスを選択した状態で以下の通り設定します。※通常時の設定になるため、条件付きスタイルの選択は不要です※イージングは下記 cubic-bezier(0.4,0.4,0,1) をコピー＆ペーストして設定できます項目設定内容原点右上時間600イージングcubic-bezier(0.4,0.4,0,1)4. テキストボックス１：inホバーの設定ボックスを選択し、条件付きスタイルからinホバーをクリックします。その状態で、以下を設定します。項目設定内容移動X 0、Y -19傾きX 0、Y 8不透明度05. テキストボックス１：グループ化とはみ出し設定テキストボックス１は、ホバー時に上にめくれるテキストです。この後下から表示されるテキストボックスを追加するため、テキストボックス１を選択した状態でグループ化（⌘+G、windowsではCrtl+G）を行います。右クリック > グループ化を選択する方法でもグループ化できます。グループ化によって追加されたボックスのはみ出し設定を「非表示」にします。めくれたテキストのボックスからはみ出る部分が表示されないようになります。6. テキストボックス２：追加、絶対位置に変更テキストボックス１と同一階層に、もう１つテキストボックスを追加します。このテキストボックスは手順内では「テキストボックス２」と呼びます。テキストボックス２の配置を「絶対位置」にします。7. テキストボックス２：通常時の設定テキストボックス２は、通常時にはボックス外に位置し見えないように設定します。ここでは、不透明度や移動の設定に加えて、時間、原点、傾き、イージングも設定します。これにより、ホバーした時とホバーを外した時の動きに統一感が生まれ、より魅力的なアニメーションとなります。※通常時の設定になるため、条件付きスタイルの選択は不要です項目設定内容不透明度0時間600イージングcubic-bezier(0.4,0.4,0,1)移動X ０、Y 19傾きX ０、Y 19原点左下8. テキストボックス２：inホバー時の設定テキストボックス２を選択し、エディタ右上の条件付きスタイルinホバーをクリックします。その状態で、以下の通り設定を行います。この設定で、ホバー時に下から上がってくるような表現となります。項目設定内容不透明度１移動Y 0 、X ０傾きY 0 、X ０9. ライブプレビューで確認するエディタ右上にある「ライブプレビュー」ボタンをクリックして設定したアニメーションを確認します。最後に本記事ではテキストアニメーションを中心に、STUDIOのアニメーションの仕組みと設定手順をご紹介しました。STUDIOで作るアニメーションは、作り方次第で様々な表現ができることも一つの魅力となっています。今回ご紹介したアニメーションをそのまま実装することはもちろん、ぜひご自身で探求して、あなただけのオリジナルアニメーションを設定してみてくださいね！STUDIOで作成されたWebサイト事例集の「STUDIO Showcase」を見て、研究してみるのもいいかもしれません。あなたが作成したアニメーションをSNSで紹介する投稿や、STUDIOコミュニティへの投稿も楽しみにしています。