WordPressのUltimate Addons（Spectra・UAE）でアニメーション効果を追加する方法

「Ultimate Addons」はテーマではなく、Brainstorm Force が提供するページビルダー向けのプラグイン群です。ブロックエディターなら Spectra（旧称 Ultimate Addons for Gutenberg）、Elementor なら Elementor 本体の入場アニメーションと Ultimate Addons for Elementor の組み合わせでアニメーションを付けるのが基本になります。この記事では、どちらを使っているかの見分け方から設定手順、動かない・表示が崩れるといったつまずきの確認方法、プラグインに頼らないCSSでの代替策までを説明します。

まず自分の環境がどれかを確認する

「Ultimate Addons」という名前は複数の製品に使われているため、最初に管理画面の「プラグイン」一覧で、実際に入っているものを確認してください。

• Spectra：ブロックエディター（Gutenberg）用。以前は「Ultimate Addons for Gutenberg」という名前でした。同じ会社のテーマ Astra と組み合わせて使われることが多いですが、他のテーマでも動きます。
• Ultimate Addons for Elementor：Elementor 用のウィジェット集です。無料版と有料版があり、名称や無料版の位置付けは時期によって変わっています。
• Ultimate Addons for Beaver Builder / WPBakery：それぞれのページビルダー用の別製品です。

アニメーションの設定場所は製品ごとに違います。本記事では利用者の多い Spectra と Elementor の場合を扱います。どちらもテーマに依存しない仕組みなので、テーマを変えても設定は基本的に残りますが、テーマ側のCSSと干渉することはあります。

作業前には、サイトのバックアップを取り、可能ならステージング環境で試してください。アニメーションは見た目だけの変更に思えますが、後述するように設定次第で要素が表示されなくなることがあります。

Spectraでブロックにアニメーションを付ける

Spectra では、ブロックごとにスクロールして表示されたときのアニメーションを設定できます。設定画面の表記や配置は更新で変わることがあるため、以下は流れとして読んでください（2026年10月現在）。

1. 管理画面の Spectra の設定画面で、アニメーションに関する拡張機能が有効になっているか確認します。Spectra は使わない機能を個別に無効化できるため、ここがオフだとブロック側に設定項目が出ません。
2. 投稿や固定ページの編集画面で、アニメーションを付けたいブロックを選びます。Spectra のブロック（コンテナ、情報ボックスなど）だけでなく、コアのブロックにも設定項目が追加される構成になっている場合があります。
3. 右側の設定サイドバーで、アニメーションの項目を開きます。多くの場合「詳細」やそれに相当するタブの中にあります。
4. アニメーションの種類（フェード、スライドなど）を選び、再生時間と遅延を設定します。
5. 下書き保存してプレビューで確認します。エディター上ではアニメーションが再生されない、あるいは常に表示された状態になることがあるので、判断はプレビューか公開ページで行います。

再生時間は0.5〜1秒程度、遅延は並べた要素を少しずつずらす場合でも合計で1秒前後に収めると、読みにくさを感じさせにくくなります。すべてのブロックに付けると、ページを読み進めるたびに待たされる印象になるため、見出しやカードなど強調したい箇所に絞るのがおすすめです。

Elementorの場合：本体の入場アニメーションを使う

Elementor では、アニメーション機能そのものは Elementor 本体が持っています。Ultimate Addons for Elementor のウィジェットも Elementor のウィジェットの一種なので、同じ場所から設定できます。

1. Elementor の編集画面でウィジェットやコンテナを選びます。
2. パネルの「高度な設定」タブを開き、「モーションエフェクト」の中にある「入場アニメーション」で種類を選びます。
3. 再生時間（遅い・標準・速い）と遅延（ミリ秒）を指定します。
4. 更新してから公開ページで確認します。

Ultimate Addons for Elementor のウィジェットには、これとは別にホバー時の効果や、ウィジェット独自の動き（カウンターの数字が増える、など）を持つものがあります。入場アニメーションと独自の動きを重ねると、動きが二重になって見づらくなることがあるので、どちらか一方にするのが無難です。スクロールに連動した視差効果などは Elementor Pro の機能に含まれるものもあり、無料版では項目が表示されないことがあります。

アニメーションが動かない・要素が消えるときの確認

設定したのに動かない、あるいは要素がまったく表示されない場合は、次の順に確認します。

• 最適化プラグインのJS遅延：キャッシュ・高速化プラグインでJavaScriptの遅延読み込みや結合を有効にしていると、アニメーション用のスクリプトがスクロールより後に動いたり、まったく動かなかったりします。一時的に最適化を無効にして症状が変わるかを確かめ、原因であれば該当スクリプトを遅延の対象から外します。
• 要素が透明のまま残る：入場アニメーションは、多くの場合「最初は透明にしておき、画面に入ったら表示する」という仕組みです。スクリプトが動かないと、要素が透明のまま残り、空白に見えます。開発者ツールで要素を選び、opacity: 0 や visibility: hidden が付いたままになっていないかを確認すると原因を絞り込めます。
• テーマや他プラグインのCSSとの干渉：親要素に overflow: hidden が付いていると、スライドして入ってくる要素が途中で切れることがあります。逆に横からスライドさせた要素が画面幅を超え、スマートフォンで横スクロールが発生することもあります。
• キャッシュの残り：設定を変えても反映されないときは、プラグインのキャッシュとブラウザのキャッシュを削除してから再確認します。

表示速度とアクセシビリティへの配慮

ページを開いてすぐ見える範囲（ファーストビュー）の画像や大見出しにアニメーションを付けると、表示が完了するまでの時間が延び、Core Web Vitals の LCP が悪化することがあります。ファーストビューは動かさず、スクロールした先の要素に限定すると影響を抑えられます。

また、OSで「視差効果を減らす」「アニメーションを減らす」といった設定をしている利用者もいます。乗り物酔いのような症状が出る人もいるため、その設定を尊重するCSSを子テーマや追加CSSに入れておくと安心です。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

プラグインによっては、アニメーションを opacity や transform 以外の方法で制御していることがあるため、設定後に実際にOSの設定を切り替えて表示を確かめてください。

プラグインを使わずにCSSで付ける方法

アニメーションのためだけにプラグインを増やしたくない場合は、ブロックの「追加CSSクラス」と少しのスクリプトで同じことができます。ここでは子テーマを使う前提で説明します。

まず、アニメーションさせたいブロックを選び、設定サイドバーの「高度な設定」にある「追加CSSクラス」に fade-up と入力します。次に子テーマの style.css に次を書きます。

/* スクリプトが動いたときだけ初期状態を透明にする */
.has-fade-up .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.has-fade-up .fade-up.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-fade-up .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

透明にする指定を .has-fade-up の下に限定しているのは、スクリプトが読み込まれなかったときに要素が消えたままになるのを防ぐためです。has-fade-up クラスはスクリプトの最初で html 要素に付けます。

子テーマに js/fade-up.js を作り、画面に入った要素に is-visible を付けます。

(function () {
  document.documentElement.classList.add('has-fade-up');
  var targets = document.querySelectorAll('.fade-up');
  if (!('IntersectionObserver' in window)) {
    targets.forEach(function (el) { el.classList.add('is-visible'); });
    return;
  }
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });
  targets.forEach(function (el) { observer.observe(el); });
})();

functions.php で読み込みます。フッターで読み込むので、スクリプトの実行時には対象の要素がすでに存在しています。

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'child-fade-up',
		get_stylesheet_directory_uri() . '/js/fade-up.js',
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
} );

フッターで実行するため、ページ下部の要素はスクリプトが動くまで一瞬表示された状態になりますが、通常はまだ画面外にあるので気になりません。ファーストビューの要素には fade-up を付けないでください。

まとめ

• Ultimate Addons はテーマではなくプラグイン群です。ブロックエディターなら Spectra、Elementor なら本体の入場アニメーションが設定の中心になります。
• Spectra では拡張機能が有効か確認したうえで、ブロックの設定サイドバーから種類・時間・遅延を指定し、プレビューで確かめます。
• 動かない・消えるときは、最適化プラグインのJS遅延、透明のまま残る要素、overflow の干渉、キャッシュの順に確認します。
• ファーストビューは動かさず、prefers-reduced-motion に配慮します。プラグインを増やしたくなければ、追加CSSクラスと IntersectionObserver で代替できます。

• IntersectionObserverでスクロール時にCSSアニメーションを付ける方法
• Elementorの基本的な使い方