記事のアイキャッチ画像
2020-11-02

WordPressで画像や文字にアニメーションをつけるプラグイン3選

この記事をご覧になっているあなたは、ワードプレスで新規Webページ制作やブログ/記事の編集をする際に、このようにお悩みになっていませんか?

○ 自分のサイトのトップページやボタンに動きをつけて、もっとユーザーに注目して欲しい…

○ フェードインさせたり、スクロールによってアニメーションを入れたり、もっと多彩に動きをつけたい…

○ 動きをつけられるプラグインをいくつか比較したい..

この記事では、動きをつけるプラグインの良し悪しや導入方法から使い方まで、 プロのWebデザイナーが徹底解説します。

今や良質なプラグインが、簡単な操作であなたのホームページに動きをつけてくれます。

あなたもトップページやクリックしてほしいボタン・画像に動きをつけ、他とは違うホームページにして、ユーザーの注目度をグンと上げましょう!

1. WordPressおすすめの無料プラグイン3選

1-1 . 【Shortcodes Ultimate】圧倒的人気のプラグイン

WebCreater冨岡司が紹介するShortcodes Ultimate

Shortcodes Ultimateの魅力

日本では利用者がたくさんいる大人気のプラグイン。

アニメーション機能があるだけでなく、ボックスやリスト、ボタンなどの多種多様なデザイン素材が52種類も揃っています。

そのマルチ機能性から、愛用している人も多いでしょう。

ワードプレス旧ヴァージョンでの利用はもちろん、新ヴァージョンのグーテンベルクにも対応。

シェイクさせる

バウンドさせる

ロールイン

上記のように、バウンドさせたり、シェイクさせたりできるアニメーションがなんと61種類も揃っています。

【全アニメーション一覧】

flash (flash)
bounce (bounce)
shake (shake)
tada (tada)
swing (swing)
wobble (wobble)
pulse (pulse)
flip (flip)
flipInX (flipInX)
flipOutX (flipOutX)
flipInY (flipInY)
flipOutY (flipOutY)
fadeIn (fadeIn)
fadeInUp (fadeInUp)
fadeInDown (fadeInDown)
fadeInLeft (fadeInLeft)
fadeInRight (fadeInRight)
fadeInUpBig (fadeInUpBig)
fadeInDownBig (fadeInDownBig)
fadeInLeftBig (fadeInLeftBig)
fadeInRightBig (fadeInRightBig)
fadeOut (fadeOut)
fadeOutUp (fadeOutUp)
fadeOutDown (fadeOutDown)
fadeOutLeft (fadeOutLeft)
fadeOutRight (fadeOutRight)
fadeOutUpBig (fadeOutUpBig)
fadeOutDownBig (fadeOutDownBig)
fadeOutLeftBig (fadeOutLeftBig)
fadeOutRightBig (fadeOutRightBig)
slideInDown (slideInDown)
slideInLeft (slideInLeft)
slideInRight (slideInRight)
slideOutUp (slideOutUp)
slideOutLeft (slideOutLeft)
slideOutRight (slideOutRight)
bounceIn (bounceIn)
bounceInDown (bounceInDown)
bounceInUp (bounceInUp)
bounceInLeft (bounceInLeft)
bounceInRight (bounceInRight)
bounceOut (bounceOut)
bounceOutDown (bounceOutDown)
bounceOutUp (bounceOutUp)
bounceOutLeft (bounceOutLeft)
bounceOutRight (bounceOutRight)
rotateIn (rotateIn)
rotateInDownLeft (rotateInDownLeft)
rotateInDownRight (rotateInDownRight)
rotateInUpLeft (rotateInUpLeft)
rotateInUpRight (rotateInUpRight)
rotateOut (rotateOut)
rotateOutDownLeft (rotateOutDownLeft)
rotateOutDownRight (rotateOutDownRight)
rotateOutUpLeft (rotateOutUpLeft)
rotateOutUpRight (rotateOutUpRight)
lightSpeedIn (lightSpeedIn)
lightSpeedOut (lightSpeedOut)
hinge (hinge)
rollIn (rollIn)
rollOut (rollOut)

これらのアニメーションを無料で利用できるだけでなく、その他のデザイン素材も使えるので、大変魅力のあるプラグインとなっています。

Shortcodes Ultimateの使い方

WebCreater冨岡司が紹介するShortcodes Ultimateの使い方①

①管理画面左側のプラグイン「新規追加」をクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方②

②検索窓に「Shortcodes Ultimate」と入力
③今すぐインストールをクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方③

④有効化をクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方④

⑤インストール済みプラグイン一覧に「Shortcodes Ultimate」が有効化されていることを確認


⑥投稿画面でブロックを追加し、ショートコードを選択


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方⑥

⑦「ショートコードを挿入」をクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方⑦

⑧アニメーションをクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方⑧

⑨アニメーションの選択や持続時間、遅延などの設定をした後、「ショートコードを挿入」をクリック


WebCreater冨岡司が紹介するShortcodes Ultimateの使い方⑨

ショートーコードの枠に [ ] で囲まれたコードが挿入されていたら完了です!

プレビューで確認すると、アニメーションがついています。

1-2. 【Blocks Animation】スピーディ操作の海外産プラグイン

WebCreater冨岡司が紹介するBlocks Animation

Blocks Animationの魅力

海外産のデザインに優れたプラグイン。

使い方が非常に簡単で、Shortcodes Ultimateよりもすぐに慣れることができ、カスタマイズが高速に済みます。

ブロックの設定から、たった3項目の入力でアニメーションを入れられる

本当にものの10秒で設定が終わる…細かい設定はせずに、良質なデザインのアニメーションを素早く取り入れたい方、ぜひ試すべきです。

もちろん、アニメーションの種類も豊富で45種類もあります。

【全アニメーション一覧】

Bounce
Flash
Pulse
Rubber Band
Shake
Head Shake
Swing
TaDa
Wobble
Jello
Bounce In
Bounce In Down
Bounce In Left
Bounce In Right
Bounce In Up
Fade In
Fade In Down
Fade In Down Big
Fade In Left
Fade In Left Big
Fade In Right
Fade In Left Big
Fade In Up
Fade In Up Big
Flip In X
Flip In Y
Light Speed In
Rotate In
Rotate In Down Left
Rotate In Down Right
Rotate In Up Left
Rotate In Up Right
Hinge
Jack In The Box
Roll In
Zoom In
Zoom In Down
Zoom In Left
Zoom In Right
Zoom In Up
Slide In Down
Slide In Left
Slide In Right
Slide In Up
Heart Beat

【実際のアニメーション】

スウィング

フラッシュ

フリップ

Blocks Animationの使い方

WebCreater冨岡司が紹介するBlocks Animationの使い方①

プラグインの「新規追加」をクリック
①「Blocks Animation」で検索
②今すぐインストールをクリック


WebCreater冨岡司が紹介するBlocks Animationの使い方②

③有効化をクリック


WebCreater冨岡司が紹介するBlocks Animationの使い方③

投稿の編集画面を開く
④適当なブロックを追加
⑤右側「ブロック」欄の下にAnimationが追加されていることを確認


WebCreater冨岡司が紹介するBlocks Animationの使い方④

⑥Animationとその他の設定をし、決定する


以上でアニメーションが導入されています。プレビューで、アニメーションを適用した位置までスクロールすると、動きがつくようになっています。

1-3. 【Easy Textillate】プロ級の文字アニメーションをつけられるプラグイン

WebCreator冨岡司が紹介するEasy Textillate

Easy Textillateの魅力

Easy Textillateは、文字にアニメーションをつけるためのプラグインで、こちらも海外産でデザインに優れています。

文字アニメ―ションの参考サイト

Easy Textillateでは、上記の参考サイトのような文字アニメーションを手軽に取り入れる事ができます。

実際にプログラムで書いて実装しようと思えば、なかなか労力が必要で…それを無料でお手軽にできてしまう訳ですから、正直驚きです。

【アニメーション一覧】

<開始アニメーション>
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
jackInTheBox
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp
heartBeat
<終了アニメーション>
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
heartBeat

Easy Textillateの使い方

WebCreator冨岡司が紹介するEasy Textillateの使い方①

「プラグインを追加」の画面を開く
①検索窓に「Easy Textillate」と入力
②「今すぐインストール」をクリック


WebCreator冨岡司が紹介するEasy Textillateの使い方②

③「有効化」をクリック


WebCreator冨岡司が紹介するEasy Textillateの使い方③

④「設定」から「Easy Textillate」を選択


WebCreator冨岡司が紹介するEasy Textillateの使い方④

「Preview」項目からアニメーションの設定ができます。
⑤「Your Text」アニメーションさせたいテキストを入力します。
⑥「In Animation」文字を出す時の開始アニメーションを設定します。
⑦「Out Animation」文字が消える時の終了アニメーションを設定します。
⑧設定したアニメーションのプレビューを確認できます。


WebCreator冨岡司が紹介するEasy Textillateの使い方⑤

設定を終えたあと、下へ移動します。
⑨「Shortcode」項目の「Copy to ClipBord」をクリックすると、設定をしたアニメーションのショートコードがコピーされます。

コピーしたショートコードを記事に張り付ければ、文字アニメーションの導入完了です。


【追加設定】

WebCreator冨岡司が紹介するEasy Textillateの使い方⑥

⑩さらに下に移動すると「Additional Options」という項目があります。ここでは、様々な追加設定ができます。

【追加項目の説明】


● loop
繰り返すかどうかを設定
‘true’ → 繰り返す
‘false’ → 繰り返さない

● minDesplayTime
開始アニメーションと終了アニメーションの間の時間
※ミリ秒単位で設定(1000 = 1秒、100 = 0.1秒)

● ititialDelay
開始アニメーション前の時間
※ミリ秒単位で設定

● delay
アニメーションにかける時間を設定

● font-family
フォントの種類を設定

● font_size
フォントの大きさを設定

● font_weight
フォントの太さを設定

● letter_spacing
文字と文字との間隔を設定


上記の追加項目を、コピーしたショートコードの中に張り付ける必要があります。

追加する設定は、「font-color=’#000000 ‘(半角スペース)delay=’50 ‘」のように、項目間を半角スペースで区切る必要があるので、ご注意下さい。

2. まとめ

「Shortcodes Ultimate」は詳細な設定ができ、アニメーションやその他のデザインの種類が圧倒的に多い人気のプラグインです。

一方「Blocks Animation」では、詳細な設定はできませんが、スムーズな操作で良質なデザインを素早く導入できます。

さらに「Easy Textillate」は、プロ並みの文字アニメーションを取り入れることができ、ここぞという見出しなどに動きをつけると、ユーザーの目を惹くでしょう。

3種類とも良いところを持っているので、一度お試しになって、ご自分が気に入ったアニメーションを取り入れてみましょう。

WordPressに関連するリンク集

【ZEBLINE】あなたの読者を惹きつけるラインマーカープラグイン

Pick Up News

CodeCampはどんなプログラミングスクール?評判や口コミなどを解説!

【Udemy】Web制作のフロントエンドで実務的に役立つおすすめ動画6選

【Udemy】これでWordPressの悩み解決!初心者にもおすすめの動画3選