Skip to content
Top » Blog-Archive » WordPress » Themifyのアニメーション機能と種類を紹介!全75動作

Themifyのアニメーション機能と種類を紹介!全75動作

前回、ボタンアニメーションの種類と効果について紹介しましたが、今回は、Themifyテーマがデフォルト機能として提供している、アニメーションの種類について紹介していきます。

目次

アニメーションの設定方法

Themifyテーマでは、アニメーションをRow(行)、Column(列)、Modules毎に設定することができます。

ですから、ボタンだけにアニメーションを設定できる、というわけではなく、たとえば、テキストや画像、背景にもアニメーションを設定することができるというわけです。

Themifyのアニメーションを設定する

Themifyのアニメーション設定方法

アニメーションの設定方法は共通していて、Row、Column、Modulesの各メニューから、アニメーションをクリックし、任意のアニメーションを設定するだけです。

Themifyで設定できるアニメーション

ここで設定できるアニメーションは、Entrance AnimationとDelay(遅延)の秒数と、Repeat(繰り返し)の回数、そしてHover Animationです。

それぞれについて簡単に説明します。

ThemifyアニメーションのEntrance設定

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サイトを制作しましょう!

今回は以上です。役に立ったと思った方は是非、シェアをお願いします。
最後までお読みいただきまして、ありがとうございました。

エジカルでは、ウェブサイトの運営・活用をサポートしています。ご質問やご相談がありましたら、お気軽にコメント欄やお問合わせフォームからご連絡ください。

 この記事の編集者 

エジカル伊藤

イトウ・ノブアキ

更始舎(こうししゃ)
デジタルマーケティング講師

複数のサイトを運営しながらSEOやデジタルマーケティングのノウハウをあれこれ実践しています。EDGCALでは制作会社に管理されずに、”ネットで集客する”・”ネットで販売する”・”ネットでファンを増やす”という3要素を満たすホームページ作りをサポートしています。

目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA