WordPressで桜や雪を降らせる方法｜季節で自動切替する軽量プラグインを自作

春は桜、夏はクローバー、秋は紅葉、冬は雪の結晶。

ブログのトップページに、季節に合わせて自動で変わるエフェクトを付けてみました。しかも紅葉は、本物の木と同じように10月は緑、11月に黄色やオレンジ、11月末に真っ赤と、日付に合わせて少しずつ色づいていきます。

この記事では、その仕組みと、作ってみてわかったことをまとめます。

⤴︎ WordPressでこんなこともできる

完成イメージ：4つの季節が自動で巡る

期間	舞うもの	色のイメージ
3/15〜4/20	🌸 桜の花びら	やさしい桃色〜赤みのあるピンク
4/21〜10/14	🍀 クローバー	黄緑〜緑
10/15〜12/23	🍁 紅葉	緑 → 黄 → オレンジ → 赤 → 枯れ葉色
12/24〜3/14	❄️ 雪の結晶	白っぽい水色

クリスマスは雪のイメージなので、紅葉は12月23日でおしまいにしました。

サイトを開いた日付をブラウザが確認して、その日に合った季節のものが舞います。一度設置したら、1年中ほったらかしでOKです。

前回のHTMLブロック版から何が変わった？

以前、HTMLブロック1つで季節のエフェクトを付ける方法を紹介しました。

【WordPress】HTMLブロック1つで、LINE風の背景エフェクトを実装（季節の演出）プラグインは不要。WordPressの『カスタムHTMLブロック』1つで完結。LINEのトーク画面の背景エフェクトのような、桜や紅葉が舞う演出を自分のブログで再…

今回はそれを育てて、プラグインにしました。

	前回（HTMLブロック版）	今回（プラグイン版）
設置方法	HTMLブロックにコピペ	プラグインを有効化
季節の切り替え	自分で書き換える	日付を見て自動
紅葉の色	固定	暦に合わせて変化
使うライブラリ	p5.js（約1MB）	なし（約17KB）
表示する場所	ブロックを置いたページ	トップページだけ

いちばん大きな変化は、重さが約60分の1になったことです。

💡 たとえるなら
前回は、葉っぱを数枚落とすために「画材一式が入った大きな道具箱」を毎回運んでいた状態。
今回は「必要な筆1本だけ」を持っていく形に変えました。

1つの季節だけで十分な方や、プラグインを増やしたくない方は、前回のHTMLブロック版もまだまだ使えます。

紅葉を「暦どおり」に色づかせる仕組み

本物の紅葉はいつ色づく？

紅葉は、最低気温が8℃を下回るころから色づき始め、5℃前後まで冷え込むと一気に赤くなると言われています。

大阪の平地なら、だいたいこんなスケジュールです。

時期	葉の様子
10月中旬まで	まだ緑
10月下旬〜11月上旬	黄色っぽく色づき始める
11月中旬	オレンジ混じり
11月下旬〜12月上旬	真っ赤（見頃）
12月中旬以降	赤黒くなり、茶色い枯れ葉に

ちなみに、箕面や京都の名所は11月中旬〜下旬が見頃。気象庁の大阪の「カエデの紅葉日」の平年値は12月初めごろです。

「色のカレンダー」を作って、間を埋める

コードの中に、日付と色のセットを並べた色のカレンダーを作りました。

const MOMIJI_KEYS = [
  { m: 10, d: 15, h: 100, s: 70, b: 85 }, // まだ緑
  { m: 11, d:  1, h:  55, s: 75, b: 95 }, // 黄色く色づき始め
  { m: 11, d: 15, h:  28, s: 85, b: 95 }, // オレンジ
  { m: 11, d: 28, h:   5, s: 90, b: 90 }, // 真っ赤（見頃）
  { m: 12, d: 10, h:   0, s: 85, b: 72 }, // 深紅
  { m: 12, d: 23, h:  25, s: 55, b: 50 }, // 枯れ葉色
];

h は色合い（100が緑、55が黄色、0が赤）、s は鮮やかさ、b は明るさです。

カレンダーにない日、たとえば11月8日は、11月1日（黄色）と11月15日（オレンジ）のちょうど間くらいの色を計算で出します。

💡 たとえるなら
絵の具の「黄色」と「オレンジ」を、日付の進み具合に合わせて少しずつ混ぜていくイメージです。

葉っぱ1枚ずつに「個性」を付ける

全部の葉が同じ色だと、なんだか作り物っぽく見えます。

そこで、葉っぱ1枚ずつに「±7日」のずれを持たせました。早く色づくせっかちな葉もあれば、のんびり緑のままの葉もある、という具合です。

おかげで、11月上旬なら黄色・オレンジ・まだ緑の葉が混ざり、本物の木を見上げたときのような雰囲気になりました。

季節の切り替えは「設定表」1つで管理

4つの季節は、1つの設定表にまとめています。

const SEASONS = [
  { name: 'sakura', from: [3, 15],  to: [4, 20],  scale: [0.3, 0.7],
    color: (p) => ({ h: p.random(330, 350), s: 35, b: 100 }) },
  { name: 'clover', from: [4, 21],  to: [10, 14], scale: [0.08, 0.12],
    color: (p) => ({ h: p.random(70, 125), s: 70, b: 100 }) },
  { name: 'momiji', from: [10, 15], to: [12, 23], scale: [0.8, 1.2],
    color: (p, date) => momijiColor(p, date) },
  { name: 'snow',   from: [12, 24], to: [3, 14],  scale: [0.05, 0.15],
    color: (p) => ({ h: p.random(180, 200), s: 25, b: 100 }) },
];

項目	意味
from / to	始まりと終わりの日付（月, 日）
scale	大きさの範囲（形の元データの大きさがバラバラなので、ここで調整）
color	色の決め方

「桜をもう1週間長く見たい」と思ったら、to: [4, 20] を to: [4, 27] に変えるだけです。

雪の結晶は彩度（s）を低めの25にしているので、水色というより白っぽく光る雪になります。

年をまたぐ冬だけ、ちょっと工夫

冬は「12月24日〜3月14日」と年をまたぐので、そのままでは判定できません。

そこで、日付を 1224 や 314 のような数字に変えて比べています。「始まりより大きい、または終わりより小さい」なら冬、という判定です。

AIと作ってみてわかったこと

ここからは、AIと会話しながら作った体験談です。

私が知っていたこと（基本の基本）	AIが教えてくれたこと
HTML・CSS・JavaScriptが何をするものか	紅葉の色を日付で混ぜていく計算
SVGのpathは「形のデータ」だということ	p5.jsを使わずに Path2D で軽くする方法
WordPressのプラグインは「機能を足す部品」	プラグインのファイル構成と、トップページだけで動かす書き方
「なんか固まって降ってくるなぁ」という違和感	その原因（最初の配置と、同じ速さ）
「季節で変わったら素敵やなぁ」という思いつき	年をまたぐ冬の判定、120Hz画面での速さ補正、「動きを減らす」設定への配慮

左の列は、どれも「なんとなく知っている」程度のことです。でも、この左の列があるからこそ、AIの説明が理解できて、「じゃあこうしたい」と相談できました。

今回も、始まりは「紅葉っていつ色づくんだっけ？」という、ただの雑談でした。

1. p5.jsは「試作用の道具」だった

最初はp5.jsという描画ライブラリで作りました。p5.jsは、思いついたことをすぐ形にできる、試作にとても向いた道具です。

ところが、プラグインにする段階でAIから「ブラウザに最初から入っている機能（Canvas2D）だけで書き直せますよ」と提案されました。

正直、Canvas2Dは「ややこしい」というイメージがありました。でも実際は、いちばん複雑だった部分がまるごと不要になったんです。

// SVGの形データをそのまま渡すだけで描ける
const shape = new Path2D(PATHS.momiji);
ctx.fill(shape);

以前は、SVGの形データを1文字ずつ読んで点を打つ関数（約40行）が必要でした。それが、ブラウザ標準の Path2D にお任せで済むようになりました。

💡 学んだこと
試作は手軽な道具で、完成形は軽い道具で。p5.jsで動きを決めておいたからこそ、「軽くするだけ」の作業で済みました。

2. スマホで葉っぱが固まって降ってくる問題

スマホで見ると、葉っぱがかたまりになって降ってくるのが気になりました。

原因は2つありました。

• 最初の配置：葉っぱを「画面2つ分」の範囲にばらまいていたのに、落ちて戻る1周は「画面1つ分＋余白」。はみ出した分が重なって、密集地帯ができていた
• 落ちる速さ：全員が同じ速さなので、密集がずっと崩れない

💡 たとえるなら
回転寿司のレーンに、レーン2周分のお皿を一度に置いたようなもの。重なったお皿は、同じ速さで回り続けるかぎり、ずっと重なったままです。

最初の配置を「1周分」に収め、落ちる速さを1枚ずつ少し変えたら、自然にばらけるようになりました。

3. テストでは動いたのに、本番で何も降らない（1.6pxの落とし穴）

これがいちばんの学びでした。

このエフェクトには、スクロールして見えなくなったら止まる省エネ機能があります。ページの上のほうに目に見えない「センサー」を置き、それが画面から消えたら止める仕組みです。

HTMLファイルでのテストは完璧でした。ところが、AIがプラグイン版を実際のブラウザで動かして確認すると、何も降ってこないのです。

原因は、センサーに付けていた margin-top: -0.1rem（少しだけ上にずらす指定）でした。

• テスト用HTML：ブラウザが最初から付けるすき間（8px）があったので、上にずらしても画面内に収まっていた
• プラグイン版：ページのいちばん上に置かれるので、1.6pxだけ画面の外にはみ出していた

その結果、ページを開いた瞬間に「もうスクロールして通り過ぎた」と判断され、エフェクトが止まっていたのです。

💡 学んだこと
「テストで動いた」と「本番で動く」は別物。置く場所が変わると、たった1.6pxで結果が変わることもあります。

今はセンサーを「ページ上部の1画面分の見えない帯」に変えたので、1画面分スクロールすると止まり、上に戻るとまた舞い始めます。

プラグインの中身

プラグインは、3つのファイルだけのシンプルな作りです。

kk-season-fall/
├── kk-season-fall.php   ← WordPressへの登録係
├── season-fall.js       ← 季節の判定と、舞い落ちる動き
└── season-fall.css      ← 表示位置の設定

PHPファイルの役目は、「トップページのときだけ、JSとCSSを読み込む」ことです。

add_action( 'wp_enqueue_scripts', function () {
	if ( ! is_front_page() ) {
		return; // トップページ以外なら、何もせず帰る
	}
	// ここでJSとCSSを読み込む
} );

! is_front_page() は「トップページではないなら」という意味です。トップページ以外ではファイルすら読み込まないので、他のページの表示速度には影響しません。

細かい配慮も入れました

「動きを減らす」設定の人には表示しない

パソコンやスマホには、画面の動きを控えめにする設定があります。目が疲れやすい人や、動きで酔いやすい人が使う設定です。この設定がオンの人には、エフェクトを表示しないようにしました。

画面の更新速度が違っても、同じ速さで落ちる

最近のiPhoneなどは、1秒間に120回画面を書き換えます（一般的な画面は60回）。何も対策しないと、120回の画面では葉っぱが2倍速で落ちてしまいます。そこで、前回からの経過時間を測って速さを補正しています。

日付を変えて確認する方法

11月や12月まで待たなくても、見た目を確認できるようにしています。

URLの後ろに ?koro-date=日付 を付けると、その日の表示になります。

• https://koro-koro.com?koro-date=2026-04-01 → 🌸 桜
• https://koro-koro.com?koro-date=2026-11-05 → 🍁 色づき始め
• https://koro-koro.com?koro-date=2026-11-28→ 🍁 真っ赤
• https://koro-koro.com?koro-date=2027-01-15 → ❄️ 雪

まとめ：WordPressはやっぱり楽しい

• 季節の切り替えは、日付と設定表で自動化できる
• 紅葉は色のカレンダーと1枚ずつの個性で、本物らしく色づく
• 試作はp5.jsで、完成形はCanvas2Dで、約1MB → 約17KBに
• 「テストで動いた」を過信しない。1.6pxで結果が変わることもある

「紅葉っていつ色づくんだっけ？」という雑談から始まって、気づけばプラグインが1つできていました。

この記事に書いた工夫のほとんどは、AIが教えてくれたものです。私に必要だったのは、基本の基本の知識と、「こうしたい」という思いつきだけでした。

紅葉が真っ赤になる11月末に、ぜひ当ブログのトップページものぞいてみてください。