Blocks Animation使い方｜WordPress簡単アニメーション設定

今回ご紹介するBlocks Animation: CSS Animations for Gutenberg Blocksは、CSSやJavaScriptの知識がなくても、ブロックエディタ（Gutenberg）で簡単にアニメーションを追加できる優れたプラグインです。

この記事でわかること

• Blocks Animationプラグインの基本的な使い方
• 利用可能な全57種類のアニメーション紹介
• アニメーションの設定方法（DELAY・SPEED）
• 実践的な活用例とコツ
• メリット・デメリット

Blocks Animationとは？

プラグインの概要

Blocks Animationは、WordPressのブロックエディタ（Gutenberg）で作成したすべてのブロックにCSSアニメーションを追加できるプラグインです。

特殊なアニメーションブロックを新しく追加するのではなく、既存のブロック（段落、画像、見出しなど）に直接アニメーションを設定できるのが最大の特徴です。

主な特徴

🎯 インストールするだけで使える

• プラグイン自体の設定は不要
• 有効化すればすぐに全ブロックで利用可能

🎨 豊富なアニメーション

• 全57種類のアニメーションパターン
• フェード、スライド、ズーム、回転など多彩な動き

⚡ 簡単な操作

• ブロック設定サイドバーから選ぶだけ
• コードを書く必要なし

🔧 細かい調整も可能

• アニメーション開始のタイミング（DELAY）
• アニメーションの速度（SPEED）

インストール方法

ステップ1：プラグインを検索

1. WordPress管理画面にログイン
2. 左メニューから「プラグイン」→「新規追加」をクリック
3. 検索窓に「Blocks Animation」と入力

ステップ2：インストール＆有効化

1. 「Blocks Animation: CSS Animations for Gutenberg Blocks」を見つける
2. 「今すぐインストール」ボタンをクリック
3. インストール完了後、「有効化」をクリック

これで準備完了です！プラグイン自体の設定画面はありません。

基本的な使い方

アニメーションを追加する手順

ブロックを選択

まず、アニメーションを追加したいブロック（段落、画像、見出しなど）をクリックして選択します。

アニメーション設定を開く

画面右側の「ブロック」タブ内に「アニメーション」という項目が追加されています。 これをクリックすると設定が展開されます。

アニメーションの種類を選択

メニューの中から、使いたいアニメーションタイプを選びます。

タイミングと速度を調整（任意）

「DELAY」（開始までの遅延時間）と「SPEED」（アニメーション速度）を調整できます。

できあがり

アニメーションの種類

Blocks Animationには大きく分けて3つのアニメーションタイプがあります。

• 要素を動かしながら表示するアニメーション（Loading Animations）
  • ページが表示される際に、画像やテキストなどの各パーツ（ブロック）が、ふわっと現れたり、下からスライドしてきたりする動きを設定できます。
• 数字を数え上げるアニメーション（Count Animations）
  • 実績や統計データなどの数字を、ゼロから目的の数値までパラパラと数えながら表示させる演出ができます。
• タイピングのように文字を表示するアニメーション（Typing Animations）
  • まるで誰かがキーボードで打ち込んでいるかのように、一文字ずつテキストを表示させる演出が可能です。

Loading Animations（ブロック登場アニメーション）

ページをスクロールしてブロックが表示される際に動くアニメーションです。 全55種類と最も豊富なバリエーションがあります。

カテゴリー別の種類

Count Animations（カウントアップアニメーション）

数字に適用すると、0からその数字までカウントアップするアニメーションです。

使い方：

1. 数字を入力したブロックを選択
2. 数字部分をドラッグで選択
3. テキストメニューの ①「▼」から「カウントアニメーション」を選択
4. 数字をクリックで②遅延の秒数や速度の設定が出ます。

12345678900

活用例：

• 実績数の表示（「お客様満足度98%」など）
• 売上や利用者数の強調
• 統計データの表示

Typing Animations（タイピングアニメーション）

文字が一文字ずつタイピングされるように表示されるアニメーションです。

使い方：

1. テキストブロックを選択
2. テキスト部分をドラッグで選択
3. テキストメニューの「▼」から①「タイピングアニメーション」を選択
4. 文字をクリックで②遅延の秒数や速度の設定が出ます。

活用例：

• キャッチコピーの強調
• 重要なメッセージの演出
• ヒーローセクションの見出し

アニメーション設定の詳細

⏱️ DELAY（遅延時間）

ブロックが画面に表示されてから、アニメーションが開始するまでの待ち時間です。

選択肢：

• None：遅延なし
• 100 Milliseconds：0.1秒
• 200 Milliseconds：0.2秒
• 500 Milliseconds：0.5秒
• One Second：1秒
• Two Seconds：2秒
• Three Seconds：3秒
• Four Seconds：4秒
• Five Seconds：5秒

使い分けのコツ：

• 複数のブロックを順番に表示させたい場合、DELAYを段階的に設定
• 最初のブロック：None
• 2番目のブロック：0.2秒
• 3番目のブロック：0.4秒

このように設定すると、順番に登場する演出ができます。

⚡ SPEED（速度）

アニメーションが完了するまでの時間です。

選択肢：

• Slower：3秒（非常にゆっくり）
• Slow：2秒（ゆっくり）
• Default：1秒（標準）
• Fast：0.8秒（速い）
• Faster：0.5秒（非常に速い）

使い分けのコツ：

• ゆっくり（Slower/Slow）：重要な情報、じっくり見せたい内容
• 標準（Default）：通常のコンテンツ
• 速い（Fast/Faster）：軽快な印象、小さな要素

実践的な活用例

例1：ランディングページのヒーローセクション

見出し：Fade In Up（下から登場）
サブテキスト：Fade In Up + DELAY 0.3秒（見出しの後に登場）
ボタン：Bounce In + DELAY 0.6秒（最後に跳ねて登場）

例2：実績セクション

数字：Count Animations（カウントアップ）
アイコン：Zoom In（ズームイン）
複数の実績を並べる場合、DELAYを0.2秒ずつずらして順番に表示

例3：サービス紹介カード

カード全体：Slide In Left / Right（左右交互にスライド）
速度：Fast（軽快に）
奇数番目は左から、偶数番目は右から登場させるとリズム感が出ます

例4：重要なお知らせ

今すぐここをクリック！

テキスト：Flash または Pulse（点滅・脈動）
速度：Default
注意喚起したい情報に効果的

おすすめの使い方・注意点

✅ おすすめのポイント

1. 最初は控えめに
   • アニメーションは効果的ですが、使いすぎると逆効果
   • 本当に目立たせたい箇所だけに使う
2. 統一感を持たせる
   • サイト全体で同じ系統のアニメーションを使用
   • 例：全体的にFade系で統一、アクセントにBounce系
3. 速度は「Default」か「Fast」がおすすめ
   • Slowerは長すぎて待たされる印象に
   • 多くの場合、1秒以内で完了するのが快適
4. モバイルでも確認
   • スマートフォンでもアニメーションが適切か確認
   • モバイルでは動きが大きすぎないものを選ぶ

⚠️ 注意点

1. アニメーションの重ね掛けはできない
   • 1つのブロックに1つのアニメーションのみ
2. 表示は1回のみ
   • スクロールして画面に入った時に1度だけ動く
   • 繰り返しループはしない
3. パフォーマンスへの配慮
   • ページ内で大量にアニメーションを使うと重くなる可能性
   • 適度な数に抑える

メリット・デメリット

✨ メリット

✅ コーディング不要

• CSSやJavaScriptの知識がなくても使える
• 初心者でも簡単に動きのあるサイトが作れる

✅ 豊富なアニメーション

• 57種類から選べる
• 様々なシーンに対応可能

✅ 直感的な操作

• ブロック設定から選ぶだけ
• リアルタイムでプレビュー可能

✅ 既存ブロックに対応

• 特殊なブロックを追加する必要なし
• すべてのGutenbergブロックで使える

✅ SWELLなどのテーマと相性抜群

• 独自ブロックにもアニメーション追加可能

⚠️ デメリット

❌ 細かいカスタマイズには限界

• DELAYとSPEEDの2つの設定のみ
• より高度な制御はCSSが必要

❌ アニメーション選択が毎回上から

• よく使うアニメーションをお気に入り登録できない
• 毎回リストから探す必要がある

❌ アニメーションの重ね掛け不可

• 複数のアニメーションを組み合わせることはできない

まとめ

Blocks Animation: CSS Animations for Gutenberg Blocksは、WordPressでサイトを運営する方にとって、非常に便利なプラグインです。

このプラグインがおすすめな人

👉 コードを書かずにサイトに動きをつけたい人
👉 ランディングページを魅力的にしたい人
👉 重要な情報を目立たせたい人
👉 ブロックエディタを使いこなしたい人
👉 SWELLなどのブロックテーマを使っている人

まず試してほしいアニメーション

初めての方は、以下のアニメーションから試してみることをおすすめします：

1. Fade In Up（下からフェードイン）
   • 自然で違和感がない
   • どんなコンテンツにも合う
2. Slide In Left / Right（左右からスライド）
   • はっきりした動きで印象的
   • カード型のコンテンツに最適
3. Zoom In（ズームイン）
   • 画像やアイコンに効果的
   • 注目を集めやすい

設定は「DELAY: None」「SPEED: Default」から始めて、徐々に自分好みに調整していくと良いでしょう。

さいごに

本当に強調したい部分、ユーザーに注目してほしい箇所に絞って使うことで、最大の効果を発揮します。

ぜひBlocks Animationプラグインを活用して、より魅力的なWordPressサイトを作ってみてください！

---

参考リンク：

• Blocks Animation公式ページ（WordPress.org）