前回、ボタンアニメーションの種類と効果について紹介しましたが、今回は、Themifyテーマがデフォルト機能として提供している、アニメーションの種類について紹介していきます。
目次
アニメーションの設定方法
Themifyテーマでは、アニメーションをRow(行)、Column(列)、Modules毎に設定することができます。
ですから、ボタンだけにアニメーションを設定できる、というわけではなく、たとえば、テキストや画像、背景にもアニメーションを設定することができるというわけです。
Themifyのアニメーションを設定する
アニメーションの設定方法は共通していて、Row、Column、Modulesの各メニューから、アニメーションをクリックし、任意のアニメーションを設定するだけです。
Themifyで設定できるアニメーション
ここで設定できるアニメーションは、Entrance AnimationとDelay(遅延)の秒数と、Repeat(繰り返し)の回数、そしてHover Animationです。
それぞれについて簡単に説明します。
Entrance Animation
対象のボタンなどがディスプレイに表示された時に行うアニメーションです。
Delay
対象のボタンなどが表示されてから何秒後にEntranceアニメーションを開始するか?を設定できます。設定しなければ、表示されると同時にアニメーションが開始されます。
Repeat
Entranceアニメーションを繰り返す回数を設定できます。設定しなければ、アニメーションは一度しか行われません。
Hover Animation
マウスホバー(カーソルが対象物に当たっている間)された時に行うアニメーションを設定できます。設定しなければ、マウスホバーしてもアニメーションは発生しません。
Themifyアニメーションの種類
Themifyでは設定できるアニメーションが14カテゴリー、全75個あります。(2023年6月確認時点)
それぞれについてボタンモジュールを使った動作(アニメーション)で紹介します。
Attention Seekers
Attention Seekersは、注目させることを目的にしたアニメーションです。
Bouncing Entrances
Bouncing Entrancesは、跳ねるようなアニメーションで対象を表示します。
Bouncing Exits
Bouncing Exitsは、跳ねるようなアニメーションで対象を非表示にします。
Fading Entrances
Fading Entrancesは、ふわっと対象を表示するアニメーションです。
Fading Exits
Fading Exitsは、ふわっと対象を非表示にするアニメーションです。
Flippers
Flippersは、X軸またはY軸でくるっと対象をフリップさせて表示・非表示にするアニメーションです。
Lightspeed
Lightspeedは、高速(それほど高速ではないのですが…)で対象を非表示・非表示にするアニメーションです。
Rotating Entrances
Rotating Entrancesは、対象を回転させながら表示するアニメーションです。
Rotating Exits
Fading Exitsは、対象を回転させながら非表示にするアニメーションです。
Specials
Specialsは、、、どくとくな動きで対象を表示・非表示にするアニメーションです。
Zoom Entrances
Zoom Entrancesは、対象をズームイン(拡大表示)して表示するアニメーションです。
Zoom Exits
Zoom Exitsは、ズームアウト(縮小)しながら対象を非表示にするアニメーションです。
Slide Entrance
Slide Entranceは、対象をスライドさせて表示するアニメーションです。
Slide Exits
Slide Exitsは、対象をスライドさせて非表示にするアニメーションです。
Themifyアニメーションの特徴
ご覧いただいたように、Themifyのデフォルトアニメーションは多種用意してあります。
総括的な特徴を紹介します。
アニメーション決めで悩まなくて済む
既に紹介したように、Themifyのアニメーションは、コンテンツごとにマウスクリックだけで、専門知識不要で簡単に設定することができます。
これは、WEBサイトにアニメーションを加えたい人にとってはかなり助かる機能です。
この記事執筆時点で、14カテゴリー、全75個ものアニメーションが用意されています。
これは、多いように感じるかもしれませんが、一つの基本動作に、上下左右の動作が加わって構成されているので、じつは、それほど多くないです。
そして、14カテゴリーありますが、基本的に、1つの動作に対して、コンテンツを表示させるアニメーションと非表示にするアニメーションがあるので、実質7カテゴリー(7つの動作)くらいしかないです。
これは、選択する側としては、”ありすぎて悩む”ということがなくなるのでいいと思います。
リピート機能はイマイチ
Themifyのアニメーションは簡単にできるというメリットに対し、細かい設定ができないというデメリットもあります。
たとえば、ご覧いただいたアニメーションは繰り返し機能を使っているのですが、動作終了後から繰り返すまでのインターバル(間隔)の設定ができないため、連続で指定された回数動作を繰り返すので、忙しない感じになります。
個人的には、動作の後に、1~2秒程度の間隔をあけたいのですが、それは現時点ではできません。(問い合わせて確認しました)
画面表示対応もできない
そして、個人的には、”画面に表示されている間だけ、アニメーションを繰り返す”ということをしたいのですが、これもできないようです。残念です。
ただ、今回は紹介していない視差スクロールの設定をうまく使えばできそうな気がしますが、まだ実験できていないので、検証してから紹介します。
アニメーションの目的は注意を引くこと
ちょっとデメリットも触れましたが、そもそも、それは個人の”こだわり”の部分であって、WEBサイトの主目的である”コンバージョンへの影響”がないので、何も問題ありません。
「このサイトのアニメーションの繰り返し機能がイマイチだから信用できないな」って考えたことないですよね?
あくまでもアニメーションは、コンテンツに注目させるための機能の一つにすぎません。
ですから、Themifyのアニメーション機能は、普通にWEBサイトを制作する上では問題なく、十分に使えるものだと判断できます。
アニメーションにこだわるのは後回しで、コンバージョンのためのコンテンツにこだわるのが大事です。
今回の紹介したThemifyについてはこちらの記事で紹介しています。
Themifyで動きのあるサイトを作ろう
以上、Themifyで使えるアニメーション機能を紹介しました。
アニメーションをWEBサイトに加えることで、単純に、WEBサイトに動作が加わるだけではありません。
注目させたいコンテンツに動作を設定することで、アクセスした人の注意を惹くこともできます。
これをうまく使って、コンバージョンへとつながるWEBサイトを制作しましょう!