STUDIO これだけ覚えればOK！アニメーションの基礎マスター
STUDIO これだけ覚えればOK！アニメーションの基礎マスター
本記事では、STUDIOで要素にアニメーションをつける方法を学習していきます。
WEBサイトを開くと同時に、画像や文字が浮かび上がったり、スライドしてきたり…工夫次第でかなり目を引くおしゃれなサイトになります！
また、マウスをホバーするとボタンの色やサイズが変化するなど、ユーザーのアクションに合わせて動きをつけることでユーザビリティを向上したり、（動きがあると心が刺激されてワクワクしますよね！）ページへの滞在時間をUPさせる効果も期待できます。
- STUDIOアニメーション「できること」「できないこと」
- STUDIOアニメーション「出現時 スライドイン」
- STUDIOアニメーション「出現時 フェードイン」
- STUDIOアニメーション「ホバー時のアクション」
- STUDIOアニメーション「削除」
アニメーションの基礎をマスターして、あなたのサイトをパワーアップさせましょう！
STUDIOアニメーション「できること」「できないこと」
まずはじめに、STUDIOのアニメーション設定では**「何ができるのか」そして「できないこと」**は何かを知っておきましょう。
本章では、アニメーションはいつどんなタイミングで発動させられるのか、そしてその動きにはどんな種類があるのかを解説します。
STUDIOアニメーションでできること
STUIDOでアニメーション設定ができるのは、要素の**「出現時」または「ホバー時」**のみです。（逆にいうと、「出現」後もなおずっと動き続ける設定等はできません。）
「出現時」とは、最初にWEBサイトを開いたとき（つまりファーストビューが現れたとき）や、スクロールしてある場所が表示されたときのことです。文字や画像のスライドイン、フェードインなどが一般的です。
**「ホバー」**とは、ある要素にカーソルを合わせているときのことです。カーソルを合わせたボタンの色やサイズを変えたり、ちょっとした動きを加えることができます。
STUDIOアニメーションで設定できる「動き」の種類
STUDIOのアニメーションは「モーション」タブから設定します。設定でできる「動き」には、**「移動」「回転」「スケール」「傾き」**があります。
このうち、**「移動」は、画像や文字が上下または左右から現れる（または消える）「スライドイン（アウト）」**としてよく使います。
また、**「スケール」**は、「ホバー」時に要素がちょっと大きくなるなど、サイズ変更のアニメーションとしての使用が多いです。
そして、もうひとつ毛色の違う「動き」を演出するのが**「透明度」です。何も無いところから画像や文字がふわっと現れたり消えたりする「フェードイン（アウト）」**の設定に使います。
アニメーションの「動き方（速度・時間）」
STUDIOのアニメーションでは、「動きの種類」に加えて、その速度や開始時間なども設定をすることができます。
**「時間」**はアニメーション全体にかかる時間です。1000が1秒なので、現在の設定は0.3秒で（移動やフェードが）完了することになります。
**「遅延」**はアニメーション開始までの時間です。例えば、画像を出現させてからちょっと遅れて文字を出現させたいときなどに、文字に遅延時間の設定をします。
最後は、ちょっとわかりづらい**「イージング」**です。これは、速度の緩急を設定するものです。グラフがまっすぐ斜めの場合、動作速度は「一定」になります。グラフの傾きが小さいほどゆっくりじわじわとした動きになり、傾きが急であれば動作も速くなります。
アニメーションでできる「動き」については、こちらの記事もご参照ください！
➔『STUDIOの文字装飾テクニック５本ノック！』
STUDIOアニメーションでできないこと
STUDIOのアニメーションでは、「ループ」ができません。つまり、「動かし続ける」ことができないのです。よって、ギャラリーの写真を次々と流し続けたり、キャラクターが小さく動き続けているような演出はできません。
※ループを行いたい場合はGIFを組み込むことで実現できるようです。
また、スクロールに対して、画面内の要素が異なる速度で動く「パララックス効果」もSTUDIOでは実装できません。
引用
現状STUDIOでは、「カーソルのスクロール」に対して「画面スクロール」以外の動きを当てることができないため、パララックス効果やスクロールアニメーションはご作成いただけません。
STUDIOアニメーション「出現時」のスライドイン！
では早速、アニメーションの基本のひとつ、スライドインの設定を解説していきます。下記の例のように、ページ開いた瞬間に画像が左から右へスライドしながら現れるよう設定してみましょう。
※実際の動きを確認しながら記事を読んでいくと、より理解が進みます。別タブで下記のURLを開いておき、例ごとに実際のアニメーションを確認しましょう！
1.「出現時」の例 スライドイン ➔ プレビューURL: https://implist-practice.studio.site
STEP1
まずは通常通り背景と文字を組み込みます。これが、アニメーション終了後の見た目となります。
※アニメーションの「動き」には始点と終点がありますね。今、終点（動き終わったところ）でのレイアウトを設定したことになります。
STEP2
次に、アニメーションの始点を設定します。
- アニメーションをつけたい要素をクリックして選択された状態にします。
- 画面右上にある**「条件付きスタイル」メニューから「出現時」**を選択します。
- タブを**「モーション」**に切り替え、「移動」に始点の座標を入力します（画像は座標入力前）。
「条件付きスタイル」として「出現時」が選択されている状態で、**「移動」に数値を入力すると、これがアニメーションの始点の座標（Xが横方向、Yが縦方向）**となります。
STEP3
アニメーションの「動き」が決まったら、次はその動作速度を決めます。
「モーション」タグの「時間」に数値を入力（または選択）し、アニメーション開始から終了までにかかる時間を設定します。今回は2000に設定しているので、2秒で動作が完了することになります。
さらに、必要に応じて「遅延」や「イージング」を設定します。
設定したアニメーションは、**「再生アイコン（右上にある、三角が３つ連なったアイコン）」**をクリックすると、再生できます（再生後、要素は開始位置に戻ります）。もちろん、ライブプレビューで確認することもできます。
※「条件付きスタイル」の「出現時」が選択されているときのみ、要素はエディタ上で「出現時」のポジションにあります。画面内のどこか（要素から外れた場所ならどこでも）をクリックすると、アニメーション終了時の見た目に戻ります。
※アニメーション設定を確認・変更したい場合は、「条件付きスタイル」の「出現時」をクリックしましょう。「アニメーションの削除（後述）」を行わない限り、設定は保存されています。
横方向以外からのスライドイン
「出現時」の「モーション」について、「移動」のX方向の数値を調整することで横方向からのスライドインが実装できることはすでにご紹介しました。
では、上または下方向からのスライドインを実装するにはどうすればよいでしょうか？…「移動」のY方向の数値を調整すればよいですね。また、XとY両方の値を調整すれば、斜め方向からのスライドも可能になります。
「出現時」に要素を隠しておきたい
今回は説明をわかりやすくするために、開始点においても要素が少し見えている状態からスタートしました。でも実際は、開始時点では要素を見せたくない場合も多いですよね。
そんなときは、「出現時」の透明度を「0」に設定しておきましょう！
「モーション」タグの「移動」（つまりアニメーションの始点）を-3000など、ページの外に設定するのはSTUDIOの仕様上NGです。
アニメーションが動かない
アニメーションの始点が、ページの外に設定されていませんか？
STUDIOの公式サイトでも注意されているとおり、アニメーションの始点がページの外にあるとプレビューでもアニメーションが動作しません。
アニメーションで出現させる要素は全てページ内に置き、開始点で隠しておきたい場合は**「透明度 0」**で対応しましょう。
STUDIOアニメーション「出現時 フェードイン」
WEBサイトを開いたとき、画像や文字がふわっと浮かび上がるように出現する…この出現方法を「フェードイン」といいます。
本章では、「フェードイン」をSTUDIOで実装する方法を解説します。
2.「出現時」の例 フェードイン ➔ プレビューURL: https://implist-practice.studio.site
STEP1
スライドインの設定と同様に、まずはアニメーションの終点におけるデザインを設定します。（今回は画像にしましたが、背景＋文字でももちろんOKです。）
STEP2
次に、アニメーションの始点でのデザインを設定します。
- アニメーションをつけたい要素をクリックして選択された状態にします。
- 画面右上にある**「条件付きスタイル」メニューから「出現時」**を選択します。
- タブを**「モーション」**に切り替え、アニメーション開始時の「透明度」を設定します。
※透明度を0にすると、画像は完全に透明になります。
STEP3
画像がフェードインする動作速度を決めます。
「モーション」タグの**「時間」**に設定した数値が、画像が完全に浮かび上がるまでの時間になります。さらに、必要に応じて「遅延」や「イージング」を設定します。
「時間」と「イージング」の調整で、画像がふわ〜っと浮かび上がるのか、パッと出現するのかが決まります。これによってサイト全体の雰囲気も大きく左右されますので、何度もプレビューで確認しながら納得いくまで調整しましょう！
STUDIOアニメーション 「ホバー」時の動き
この章では、ある要素にカーソルを合わせたときに現れるアニメーションについて解説していきます。
カーソルを合わせたときの「変化」が素敵であれば、ついクリックしたくなりますよね！
…ただし、大きすぎる変化は返って印象を下げてしまいます。「ちょっとした動き」にすることがコツです。このひと工夫でコンバージョン率UPにもつながりますので、ぜひ使いこなしましょう。
ホバー時に要素のサイズが変わる
ホバーされるとサイズが少し拡大する設定を解説します。
作業の要領は、これまで学習した「スライドイン」などと同様です。
3-1.「ホバー」の例 サイズ変更 ➔ プレビューURL: https://implist-practice.studio.site
STEP1
アニメーションが動作していないときのデザインで、要素を配置します。
STEP2
「ホバー時」のデザイン設定をします。
- アニメーションをつけたい要素をクリックして選択された状態にします。
※今回は３つの要素を同時に選択しています。 - 画面右上にある**「条件付きスタイル」メニューから「ホバー」**を選択します。
- タブを**「モーション」**に切り替え、**ホバー時の「スケール」**を設定します。
※スケール「1」がSTEP1で設定したサイズです。
ホバー時のスケール「X 1.5 Y1.5」とはX方向・Y方向に1.5倍にするという意味です。
STEP３
「イージング」「時間」「遅延」の数値を調整する。
「イージング」および「時間」の値によって、ホバー時にサイズがふわ〜っと変わるか、パッと変わるかが決まります。サイト全体の雰囲気に合うよう、調整しましょう。
ホバー時に要素の色が変わる
ボタンにカーソルを合わせると、色が少し変化する設定について解説します。
基本的な手順は、「ホバー時のサイズ変更」と同じです。
3-2.「ホバー」の例 色変更 ➔ プレビューURL: https://implist-practice.studio.site
STEP1
アニメーションが動作していないときの色の設定をします。
STEP2
「ホバー時」のデザイン設定をします。
- アニメーションをつけたい要素をクリックして選択された状態にします。
- 画面右上にある**「条件付きスタイル」メニューから「ホバー」**を選択します。
- 「ホバー」が選択されている状態で、「塗り」をホバー時の色に設定します。
※「塗り」は「モーション」タブでなく「ボックス」タブでの操作であることに注意！
STEP3
「モーション」タブに切り替えて、「イージング」「時間」「遅延」の数値を調整します。
※ここで、カーソルを合わせてから色が変わるまでの時間を決めます。
ボタンをもっと立体的にして、ボタンが押されたようなアニメーションにする方法は別記事で解説しています。
➔『STUDIOの便利な画像操作 ５本ノック！』内の「画像の切替方法」参照
ホバー時に画像が「カラー➔モノクロ」に変わる
画像にカーソルを合わせたとき、画像がカラーからモノクロに変わる設定について解説します。ついでに、「詳しく見る」の文字を浮き上がらせる効果も追加しましょう！
たくさんの商品画像が羅列されているときに、マウスをホバーした商品を強調するために使われるテクニックです。
3-3.「ホバー」の例 画像カラーからモノクロへ ➔ URL: https://implist-practice.studio.site
STEP1-1
画像を配置します。
STEP1-2
画像に対して「ホバー時」のデザイン設定をします。
- アニメーションをつけたい要素をクリックして選択された状態にします。
- 画面右上にある**「条件付きスタイル」メニューから「ホバー」**を選択します。
- 「ホバー」が選択されている状態で、「明るさ」「モノクロ」を設定します。
※タブは「モーション」ではなく「ボックス」タブでの操作です！
STEP2-1
ボックスと文字を設置します。
※この時点でボックス＆文字を透明にしてしまうと、クリックでの選択がしづらくなるので、STEP2-2でホバー前後の設定をいっきに行います。（もし、透明にしてしまった場合は、レイヤーパネルから選択を行いましょう）
STEP2-2
ボックスと文字に対して「ホバー時」のデザイン設定をします。
- ボックスをクリックして選択された状態にします。
※ボックスを選択すると、その「子要素（中身）」である文字も自動的に選択されます。 - **「モーション」タブに移動し、「透明度」を「0」**に設定します。
※この時点で、「ホバー前」の文字の設定をしたことになります。 - 画面右上にある**「条件付きスタイル」メニューから「in ホバー」**を選択します。
※「in ホバー」は、ホバー時の動作を設定した要素の中に「別のホバー時の動作」を加えるときに使います。 - ボックスは選択されたまま、**「in ホバー」の状態で、「透明度」を「1」**にします。
これで、ホバーしていないときはボックス＆文字は透明で、ホバー時にボックス＆文字が浮かび上がる設定ができました。
STUDIOアニメーション「削除」
最後に、アニメーションの削除の方法について解説します。
- 削除したいアニメーションがついている要素をクリックして選択します。
- その状態で、画面右上の「条件付きスタイル」をクリックします。
※この時点では、全ての項目がグレー表示なので、「あれ？」と思うかもしれませんが、ご心配なく。 - 設定したアニメーションスタイル（「出現時」/「ホバー」）をクリックします。
※今回は、あらかじめ「出現時」にスライドインするように設定してあります。
※クリックすると、要素が「出現時」の位置に移動します。 - 「出現時」にカーソルを合わせている間だけ、その横に「✕ 印」が現れます。これをクリックすると、アニメーションが削除されます。
アニメーションを削除したいのに「✕」ボタンが現れないという場合は、目的の要素がしっかり選択されているかを確認しましょう。
下図は、アニメーションが設定された要素の親要素が選択されてしまっている例です。
目的の要素の親要素が選択されている場合も、「出現時」の指定によって、子要素は出現時のポジションに移動します。しかし、この状態では子要素のアニメーションを削除・変更することができません。
アニメーションの削除や変更ができないときは、目的の要素がしっかりと選択できているかを確認しましょう！
おわりに
本記事では、アニメーションの基礎をマスターすることを目的に、**「スライドイン」「フェードイン」「ホバー時のサイズ変更」「ホバー時の色変更」**を中心に学びました。
アニメーションは設定を組み合わせることで、複雑な動きを実装することも可能ですので、ぜひ色々トライしてみてください！
