---
title: "WordPress の背景グラデーションを動かす「OD Gradient Motion」を作りました"
canonical_url: "https://olein-design.com/blog/od-gradient-motion"
language: "ja"
date_published: "2026-09-02T09:42:17+09:00"
date_modified: "2026-09-02T09:42:19+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "オリジナルプラグイン"
---

# WordPress の背景グラデーションを動かす「OD Gradient Motion」を作りました

WordPress のブロックに背景グラデーションを設定してみたものの、もう少しだけ動きが欲しいと感じることがあります。

ただ、そのためだけに独自ブロックを作ったり、ページごとに CSS を書いたりするのは少し大げさです。色の設定は WordPress に任せたまま、必要なブロックにだけ穏やかな動きを加えられたら扱いやすいのではないか。そんな考えから「OD Gradient Motion」を作りました。

[埋め込みコンテンツ](https://github.com/Olein-jp/od-gradient-motion)

この記事では、プラグインの特徴、インストール方法、基本的な使い方を紹介します。僕自身のサイトへ導入した際に見つかった問題と、その修正についても触れておきます。

> この記事は、2026 年 9 月 2 日時点の OD Gradient Motion v0.4.1 をもとにしています。

## OD Gradient Motion とは

[OD Gradient Motion](https://github.com/Olein-jp/od-gradient-motion) は、WordPress のブロックに設定した背景グラデーションをアニメーションさせるプラグインです。

新しいグラデーション作成機能を追加するものではありません。色やグラデーションは、これまでどおり WordPress や利用中のブロックテーマで設定します。OD Gradient Motion が担当するのは、その背景を上下や左右へ動かす部分です。

この役割を分けたことで、プラグインを停止しても背景色やグラデーションは残ります。アニメーションだけが外れるため、装飾を追加するプラグインとして扱いやすい構成にしています。

主な特徴は次のとおりです。

- ブロック設定からアニメーションを有効化できる
- 横、縦、斜め、シフトの 4 種類から動きを選べる
- 再生方向と、1 周にかかる時間を調整できる
- よく使う組み合わせを 4 種類のプリセットから選べる
- ブロックエディターと公開画面の両方で動きを確認できる
- OS やブラウザーの「視差効果を減らす」設定に配慮している
- 公開画面のアニメーションは CSS だけで動作する

## どのような場面に向いているか

たとえば、ページの冒頭にある大きな見出し部分や、サービスを区切るセクションです。静止したグラデーションにゆっくりとした変化を加えると、内容を邪魔しない範囲で視線を引きつけやすくなります。

一方で、本文中のすべてのブロックを動かすような使い方はおすすめしません。動く要素が増えるほど、肝心の文章へ集中しにくくなるからです。ページ内で 1、2 か所に絞り、再生時間を長めにするところから試すとよいでしょう。

現在、初期状態で対応しているブロックは次の 3 つです。

- WordPress コアのグループブロック（`core/group`）
- Unitone のセクションブロック（`unitone/section`）
- Unitone のデコレーターブロック（`unitone/decorator`）

僕はブロックテーマの Unitone を利用しているため、セクションとデコレーターを初期対応に含めています。ほかのブロックも一定の条件を満たせば、WordPress のフィルターフックから追加できます。この点は後ほど説明します。

## インストール方法

OD Gradient Motion は、現時点では [GitHub の Releases ページ](https://github.com/Olein-jp/od-gradient-motion/releases/tag/v0.4.1)で配布しています。リリース用 ZIP ファイルをダウンロードし、WordPress の管理画面からインストールします。

1. v0.4.1 の Assets にある `od-gradient-motion.zip` をダウンロードします。
2. WordPress 管理画面で［プラグイン］→［新規プラグインを追加］を開きます。
3. ［プラグインのアップロード］を選び、ダウンロードした ZIP ファイルを指定します。
4. ［今すぐインストール］を押し、完了後にプラグインを有効化します。

GitHub のリポジトリ全体を［Code］からダウンロードした ZIP ではなく、Releases に添付されている `od-gradient-motion.zip` を使ってください。リリース用 ZIP には、動作に必要な依存パッケージが含まれています。

必要な環境は WordPress 6.2 以上、PHP 7.4 以上です。また、プラグインには [WP GitHub Plugin Updater](https://github.com/inc2734/wp-github-plugin-updater) を組み込んでおり、今後の GitHub Release を WordPress 管理画面から更新できる仕組みも用意しています。

## 基本的な使い方

インストール後に専用の設定画面を開く必要はありません。対応ブロックを選択すると、ブロック設定サイドバーに［グラデーションモーション］パネルが表示されます。

1. グループ、Unitone セクションなどの対応ブロックを配置します。
2. ブロックの背景設定でグラデーションを指定します。
3. ［グラデーションモーション］を開きます。
4. ［アニメーションを有効化］をオンにします。
5. ［プリセット］を選ぶか、動きの種類、再生方向、再生時間を個別に調整します。
6. ブロックエディターと公開画面で見え方を確認します。

先に背景グラデーションを設定する点が大切です。プラグインを有効化しただけではグラデーション自体は追加されないため、背景が単色のままでは変化が分かりません。

### 4 種類のプリセット

最初から細かな数値を決めなくても試せるように、次のプリセットを用意しました。

| プリセット | 動き | 再生方向 | 1 周の時間 |
| --- | --- | --- | --- |
| フロー | 横方向 | 通常 | 10 秒 |
| オーロラ | 斜め方向 | 交互 | 18 秒 |
| エナジー | シフト | 逆再生 | 4 秒 |
| カーム | 縦方向 | 交互 | 24 秒 |

目立たせすぎたくない場合は、まず［カーム］か［オーロラ］を試してみてください。動きをもう少し速くしたいときは、プリセット適用後に［再生時間（秒）］だけ変更できます。設定を個別に変えると、プリセット表示は［カスタム］へ切り替わりますが、現在の値はそのまま維持されます。

再生時間は 1 秒から 60 秒まで指定できます。短くするほど変化は強く見えます。背景として使うなら、10 秒以上から調整したほうが文章を読む邪魔になりにくいと感じています。

## サンプル

- **プリセット**：プリセットなし
- **アニメーション種類**：横方向
- **再生方向**：通常
- **再生時間**：20秒

- **プリセット**：フロー
- **アニメーション種類**：横方向
- **再生方向**：通常
- **再生時間**：10秒

- **プリセット**：オーロラ
- **アニメーション種類**：斜め方向
- **再生方向**：交互
- **再生時間**：18秒

- **プリセット**：エナジー
- **アニメーション種類**：シフト
- **再生方向**：逆再生
- **再生時間**：4秒

- **プリセット**：カーム
- **アニメーション種類**：縦
- **再生方向**：交互
- **再生時間**：24秒

## オレインデザインのトップページでも使っています

プラグインを公開したあと、僕自身のサイトである[オレインデザインのトップページ](https://olein-design.com/)に導入しました。ファーストビューにある Unitone のセクションブロックへ、縦方向、交互再生、7 秒の設定を適用しています。

ところが、導入直後は設定パネルも動作し、CSS のアニメーションも実行されているのに、見た目の変化がほとんど確認できませんでした。

原因は、Unitone が出力するインラインの `background` 指定でした。CSS の `background` は複数の背景関連プロパティーをまとめて指定する書き方なので、プラグイン側で設定した `background-size` が初期値へ戻っていました。背景画像の表示領域と要素の大きさが同じままでは、表示位置だけを変えても動きが見えません。

そこで v0.4.1 では、アニメーションを有効化した要素の背景サイズが確実に拡大されるよう修正しました。現在は Unitone のセクションでも、背景位置の変化を目で確認できます。

この修正では `!important` を使っています。ただし、対象は `.od-gradient-motion` が付いた要素の `background-size` だけです。プラグインを無効化したブロックには作用せず、背景色やグラデーションそのものを書き換えることもありません。

実際のサイトへ入れてみると、開発環境だけでは気づきにくい、テーマやブロック固有の CSS との組み合わせが見えてきます。今回も公開画面で確認したことで、Unitone を使う場合に必要な調整をプラグイン側へ反映できました。

## 動きを減らす設定にも配慮しています

背景のアニメーションは、すべての人にとって見やすいとは限りません。動きによって不快感やめまいを感じる人もいます。

OD Gradient Motion では、利用者の端末で「視差効果を減らす」などの設定が有効になっている場合、CSS の `prefers-reduced-motion` を使ってアニメーションを停止します。サイト運営者がブロックごとに別の設定を用意する必要はありません。

ただし、この対応があるから、どのような速さや配置でも問題ないという意味ではありません。公開前にはパソコンとスマートフォンの両方で確認し、文章やボタンの操作を邪魔していないかを見ておくと安心です。

## 対応ブロックをフィルターフックで追加できる

独自ブロックやサードパーティー製ブロックで使いたい場合は、次の 2 つのフィルターフックから対応ブロックを追加できます。

- `od_gradient_motion_registered_blocks`: プラグインが扱えるブロックとして登録する
- `od_gradient_motion_enabled_blocks`: 登録済みブロックのうち、実際に機能を有効化する

たとえば `example/decoration` というブロックを追加する場合は、次のように記述します。

```
add_filter(
	'od_gradient_motion_registered_blocks',
	function ( $blocks ) {
		$blocks['example/decoration'] = array(
			'label'  => 'Decoration',
			'target' => 'root',
		);

		return $blocks;
	}
);

add_filter(
	'od_gradient_motion_enabled_blocks',
	function ( $blocks ) {
		$blocks[] = 'example/decoration';

		return $blocks;
	}
);
```

フィルターは、テーマの `functions.php` または独自プラグインから追加できます。ブロック属性を登録する前に必要になるため、ファイルの読み込み時か `plugins_loaded` で登録してください。詳しい例は[リポジトリの README](https://github.com/Olein-jp/od-gradient-motion#%E3%83%95%E3%83%83%E3%82%AF%E3%81%AB%E3%82%88%E3%82%8B%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA)にまとめています。

背景の拡大率は、CSS カスタムプロパティー `--od-gradient-motion-background-size` でも変更できます。

```
.my-custom-block {
	--od-gradient-motion-background-size: 250% 250%;
}
```

初期値は `400% 400%` です。数値を変えるとグラデーションの見える範囲や動き方も変わるため、実際の配色を見ながら調整してください。

## 利用前に知っておきたい制限

現在のバージョンでは、背景グラデーションがブロックのルート要素に出力されることを前提にしています。

たとえば、ブロックの外側ではなく、内側の `.decoration__background` といった要素に背景が設定される構造には対応していません。フィルターフックへブロック名を追加しても、内部要素だけを指定して動かすことはできません。

また、次のような用途では、OD Gradient Motion だけで完結しない可能性があります。

- 背景グラデーションそのものを新しく作成したい
- スクロール量やマウス操作に連動させたい
- ブロック内部の特定要素だけを動かしたい
- 複数のアニメーションを細かく組み合わせたい

このような場合は、テーマ側の CSS や JavaScript、独自ブロックの実装を検討したほうが目的に合います。

## まとめ

OD Gradient Motion は、WordPress で設定した背景グラデーションをそのまま使い、必要な場所へ動きを加えることに役割を絞ったプラグインです。

特に、次のような方には試していただきやすいと思います。

- グループブロックや Unitone のセクションに、少しだけ動きを加えたい
- ページごとにアニメーション用の CSS を書きたくない
- 色の管理は WordPress 側に残しておきたい
- 端末の「動きを減らす」設定にも配慮したい

まずは、ページ内の目立たせたい 1 か所に、ゆっくりしたプリセットを設定してみてください。背景の変化が文章や操作の邪魔にならない程度であれば、静止したグラデーションとは少し違う印象を作れます。

プラグイン本体と最新版の ZIP ファイルは、[OD Gradient Motion の GitHub リポジトリ](https://github.com/Olein-jp/od-gradient-motion)で公開しています。不具合を見つけた場合は [GitHub Issues](https://github.com/Olein-jp/od-gradient-motion/issues)からお知らせください。

## 関連リンク

- [OD Gradient Motion — GitHub](https://github.com/Olein-jp/od-gradient-motion)
- [OD Gradient Motion v0.4.1](https://github.com/Olein-jp/od-gradient-motion/releases/tag/v0.4.1)
- [WP GitHub Plugin Updater — GitHub](https://github.com/inc2734/wp-github-plugin-updater)