記事のアイキャッチ画像
2020-09-23

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

3. WordPress運用の悩み解決ができるUdemyのおすすめ学習動画3選

最後に、世界で人気を誇っているオンライン動画学習ができるプラットフォーム「Udemy」のおすすめ動画をご紹介します。

簡単にUdemyの魅力をまとめると下記の通りです。

Udemy5つの魅力
① ユーザー評価システムにより、自分の目で学習コンテンツを選択できる
② 買い切り購入なので、ダウンロードすればいつでもどこでも好きな時に学習ができる
③ 無料コンテンツから3,000円〜20,000円強まで選べる価格プラン
④ 30日いないなら返金保証が付いている
⑤ 今後も知識を持った人が増えるたびに、学習動画が更新されてゆくので、期待性が高い

Udemyでは、全国のプロフェッショナルがその知識を動画にまとめてティーチングしてくれます。

その学習動画は、初心者向けから、ホームページやブログを本格的に運営するために必要なノウハウを、「オンラインスクールを運営しているプロ」が教えてくれる動画まであります。

僕も自身のスキルアップのためにいくつか購入しており、買い切りでいつでも好きなタイミングで学習を進められるので、とても魅力を感じています。

WordPressでの悩みを少しでも解決できればと思い、いくつかおすすめの動画をご紹介するので、一度ご覧になってみてください。

3-1. WordPressでホームページ制作/管理する方法を改めて学び直したい人におすすめのUdemy動画

こちらの学習動画は、様々な事業をこなす代表取締役がご提供くださっているもので…

とりあえず参考記事などをみながらWordPressを開設した人でも、知識を身につけた上でしっかりとサイト運営ができるもの。

ひとつのテーマを利用しながら、トップページから固定ページの作成方法まで、丁寧にティーチングしてくれます。

気になる方は、下記の画像リンクから動画詳細ページに移動できるので、一度チェックしてみてください。

3-2. SEOに強いWordPressサイトに強化したい人におすすめのUdemy動画

こちらの動画は最近アップされたばかりですが、確実に高評価を集めている人気コースです。

○ SEOの観点から、WordPressでサイト運営するために必要なプラグイが知りたい…

○ WordPressのブロックエディターを使った記事作成の方法をきちんと学び直したい…

○ Google Analyticsなど、SEOに強いサイトにするために必要なツールのノウハウが知りたい…

このような需要にも応えた学習動画です。

基本的なサイト開設方法からもティーチングされているので、もう一度基礎からSEOを意識したサイト運営を学び直したい人におすすめです。

3-3. WordPressで本格的にメディア運営するために必要な知識が学べるUdemyおすすめ動画

こちらの動画は、オウンドメディア(自分の所有しているサイト)を運営するに必要なノウハウを、サイト企画の話しから教えてくれるもの。

マーケティングの知識も参照しながら、サイト設計から記事コンテンツの作り方まで解説してくれています。

ご自身のサイトを長期的に運用するに当たって、しっかりと設計をしたい人におすすめの学習動画となっています。

Pick Up News

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

WordPressに関連するリンク集

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

【BEAU】簡単な操作で個人ブランディングに必要なサイトができるWordPressテーマ

INDEX