【徹底解説】Shopify アプリ「シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト」でできること

冬になったら雪を、春になったら桜を、セールが始まったら紙吹雪を。ストアを開いた瞬間に季節やイベントの空気が伝わる演出は、実店舗でいえば店先の飾り付けにあたります。ところが Shopify のテーマには、画面全体に何かを降らせる機能は用意されていません。自分で作ろうとすると、JavaScript でアニメーションを書き、テーマのファイルに埋め込み、季節が終わったら外す、という作業を毎回くり返すことになります。

この記事では、その飾り付けをテーマエディタの設定だけで済ませられる Shopify アプリ「シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト」を、管理画面の 1 画面ずつ、テーマエディタの設定項目を 1 項目ずつ解説します。設定項目の既定値や、画面には書かれていない動作の条件（どんなときに表示されないのか、など）まで書いているので、導入前の検討にも、導入後の手引きにも使えます。

記事の後半では、同じことをアプリを使わずにコードで実装する場合の例と、他の季節演出アプリと一緒に入れるときの考え方も紹介します。

シンプル紙吹雪アニメーションとは

「シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト」は、ストアフロントの画面いっぱいに粒子を降らせる Shopify アプリです。英語名は「UR: Seasonal Confetti Effects」で、日本の開発元 UnReact が作っています。

降らせられる粒子は、雪・桜・雨・紅葉・ハート・星・紙吹雪・シャボン玉の 8 種類のプリセットと、好きな絵文字、自分で用意した画像の、合わせて 10 種類です。量や落ちる速さ、大きさ、横揺れ、透明度、回転、色まで変えられるので、同じ「雪」でも、しんしんと降る粉雪から吹雪のような演出まで作り分けられます。

アプリの仕組みは、テーマの「埋め込みアプリ（App Embed）」です。テーマのコードを書き換えるのではなく、Shopify が用意している埋め込みの枠にアプリのブロックを差し込み、トグルで ON/OFF します。アプリを削除すればブロックごと消えるので、テーマに不要な記述が残りません。

設定の保存先はテーマです。アプリ側のデータベースには、エフェクトの設定もお客様の情報も持っていません。アプリが要求する権限はテーマの読み取りだけで、氏名や住所、注文内容には触れません。

シンプル紙吹雪アニメーションのメリット

導入して得られることを、ストア運営の目線で 5 つにまとめます。

コードを書かずに季節の演出を出し入れできる

いちばんの利点は、エフェクトの種類を選択欄で切り替えるだけで季節を入れ替えられることです。冬の雪から春の桜へ移るときも、テーマのファイルを開く必要はありません。制作会社にテーマの改修を頼んでいるストアなら、季節のたびに発注していた作業が、担当者の数クリックに置き換わります。

期間を決めておけば自動で始まり、自動で終わる

開始日と終了日を入れておくと、その期間だけ表示されます。年末のセールに合わせて 12 月 1 日から雪を降らせ、25 日で止める、といった設定を前もって済ませておけば、当日に作業する必要がありません。とくに「終わらせ忘れ」を防げるのが大きく、年が明けてもクリスマスの雪が降り続けている、という事態を避けられます。

見せたいページだけに絞れる

トップページ・商品ページ・コレクションページ・カートページ・その他のページを個別に ON/OFF でき、さらに商品ハンドルや URL のパスで絞り込めます。キャンペーンの特設ページだけ紙吹雪を舞わせ、購入の判断をする商品ページでは止めておく、といった出し分けができます。

お客様の操作を邪魔しない

粒子はボタンやリンクの上に重なって見えますが、クリックやタップは粒子を素通りして下の要素に届きます。スクロールも普段どおりです。演出を足したせいで「カートに追加」が押しにくくなる、ということは起きません。

重くなりにくい作りになっている

粒子は 1 枚のキャンバスにまとめて描いており、粒子の数だけ HTML の要素を増やすことはしていません。ブラウザのタブが裏に回っている間は描画を止め、画面幅が 768px 未満の端末では粒子の数を自動で約半分に減らします。高精細ディスプレイでも描画の倍率は 2 倍までに抑えています。

シンプル紙吹雪アニメーションのデメリット

合わない場面も正直に書いておきます。

一度に降らせられるのは 1 種類だけ

雪と星を混ぜる、ハートと桜を同時に降らせる、といった組み合わせはできません。絵文字も、入力した文字のうち先頭の 1 文字だけが使われます。複数の絵柄を混ぜたいときは、カスタム画像を使っても 1 枚の画像が降るだけなので、同じ制約を受けます。

ページごとに違うエフェクトは出せない

ページごとに切り替えられるのは「表示するかどうか」までで、種類や色はストア全体で共通です。トップページは雪、特設ページは紙吹雪、という出し分けはできません。

設定はテーマエディタで行う

アプリの管理画面にあるのは、テーマへの追加と言語の切り替えだけです。エフェクトの中身は、すべてテーマエディタの「埋め込みアプリ」で設定します。アプリの画面だけで完結すると思って開くと、少し戸惑うかもしれません。

動きを減らす設定の端末では表示されない

パソコンやスマートフォンの OS で「視差効果を減らす」「アニメーションを減らす」を有効にしているお客様には、エフェクトが描かれません。画面全体で動き続ける演出が負担になる方への配慮で、意図した動作です。ストアの担当者の端末でこの設定が有効になっていると「自分の画面だけ出ない」ように見えるので、確認するときは気を付けてください。

料金プラン

料金は次の 2 つから選びます。どちらも機能の差はありません。

• 月額プラン … $1.99／月
• 年額プラン … $19.99／年（月額で 12 か月払うより約 2 か月分安くなります）

どちらにも 7 日間の無料トライアルが付きます。季節の演出は実際のストアに載せてみないと似合うかどうか判断しにくいので、トライアルの間に、自分のストアの配色やヒーロー画像と組み合わせて確かめるのがおすすめです。

インストール

インストールは Shopify 管理画面から行います。

まず、管理画面の左下にある「設定」を開きます。

設定の中の「アプリと販売チャネル」を開き、アプリストアへ進みます。

App Store で「シンプル紙吹雪アニメーション」と検索するか、Shopify App Store のアプリのページを直接開き、「インストール」を押します。権限の確認画面が出たら内容を確認して進めます。

アプリ管理画面の構成

アプリを開くと、管理画面は次の構成になっています。

• 設定 … アプリを開いたときに最初に出る画面です。テーマへの追加、表示と設定の案内、言語の切り替え、おすすめアプリが縦に並びます
• よくある質問 … 日本語で使っていて、公開中の質問が登録されているときだけ、サイドバーに出る画面です

画面の数は少なく、日常的に触るのは「設定」の画面だけです。エフェクトの見た目に関わる設定は、ここではなくテーマエディタにあります。

各画面の説明

設定画面は 1 枚のページですが、役割の違うカードが積み重なっています。カードごとに見ていきます。

テーマに紙吹雪エフェクトを追加

エフェクトをテーマに入れるためのカードです。

• テーマを選択 … エフェクトを追加するテーマを選びます。最初は公開中のテーマが選ばれていて、選択欄でも名前の後ろに「（公開中のテーマ）」と付くので、下書きのテーマと取り違えにくくなっています
• テーマに追加 … 押すと新しいタブでテーマエディタが開き、このアプリの埋め込みブロックが有効になった状態で表示されます
• テーマをプレビュー … エフェクトを追加せずに、選んだテーマのプレビューを新しいタブで開きます。セール用に用意した別テーマの見え方を確かめるときに使います

ここで押した時点では、まだストアに反映されていません。テーマエディタ側で「保存」を押して初めて公開されます。ボタンを押しただけで満足してしまうのが、導入初日にいちばん多いつまずきです。

自動追加が失敗したときの注意バナー

カードのすぐ下に、黄色い注意のバナーが出ています。テーマのバージョンによっては、「テーマに追加」を押してもブロックが自動で有効にならないことがあり、そのときはご利用ガイドを見て手動で追加してほしい、という案内です。日本語の画面でだけ表示されます。

このバナーが常に出ているのは、失敗したかどうかをアプリ側から確実に知る手段が無いためです。表示されていても、エラーが起きているわけではありません。手動で追加する手順は、この記事の「テーマへの追加」でも説明しています。

エフェクトの表示と設定についての案内

青い見出しのカードは、エフェクトの中身をどこで設定するかを伝える案内です。テーマエディタの「アプリ埋め込み」から、種類・量・色・表示ページ・表示期間などをいつでも変更できる、と書かれています。

アプリの画面に設定項目が並んでいないのは、設定をテーマに持たせているからです。テーマに持たせておくと、テーマを複製したときに設定も一緒に複製され、セール用のテーマに切り替えたときにはそのテーマ独自の設定で動きます。

言語設定

アプリの管理画面の表示言語を切り替えるカードです。

• 言語を選択 … 20 言語から選びます。チェコ語・デンマーク語・ドイツ語・英語・スペイン語・フランス語・イタリア語・オランダ語・ノルウェー語（ブークモール）・ポーランド語・ポルトガル語（ブラジル）・ポルトガル語（ポルトガル）・フィンランド語・スウェーデン語・トルコ語・タイ語・日本語・簡体中国語・繁体中国語・韓国語に対応しています
• 変更する … 押すと、選んだ言語で画面が表示し直されます

ここで変わるのはアプリの画面だけです。テーマエディタに並ぶ設定項目の名前は、Shopify アカウントの表示言語に従います。海外のスタッフと運営していて、アプリの画面は英語、テーマエディタは日本語、という状態になっても不具合ではありません。

おすすめアプリ

画面の最後には、同じ開発元のアプリが紹介されています。閉じるボタンで隠せるので、不要なら閉じてしまって構いません。エフェクトの動作には関係しません。

サイドバーとよくある質問

Shopify 管理画面の左のサイドバーには、アプリの名前の下に「設定」が出ます。上の画像のストアでは「設定」だけが並んでいます。

日本語で使っていて、開発元が公開しているよくある質問が登録されているときは、その下に「よくある質問」が追加されます。登録が無いときは項目そのものが出ないので、見当たらなくても異常ではありません。

テーマへの追加

設定画面で「テーマに追加」を押すと、テーマエディタの左側に「埋め込みアプリ」のパネルが開き、このアプリが並んだ状態になります。右のトグルが ON になっていれば有効です。

確認できたら、右上の「保存」を押します。保存するまではプレビューの中にしか表示されません。

自動で有効にならなかったときは、次の順で手動で追加します。

1. 管理画面の「オンラインストア」から「テーマ」を開きます
2. 対象のテーマの「カスタマイズ」を押します
3. 左側のパネルで「埋め込みアプリ」を選びます
4. 一覧から「シンプル紙吹雪アニメーション」を探して、トグルを ON にします
5. 右上の「保存」を押します

この埋め込みは、どのページにも共通で入ります。トップページのテンプレート、商品ページのテンプレート、とテンプレートごとに追加し直す必要はありません。ページごとの出し分けは、後で説明する「表示ページ設定」で行います。

ストアフロントの見た目を変える

ここからが設定の本体です。テーマエディタの「埋め込みアプリ」でこのアプリを開くと、設定が次の 5 つのグループに分かれて並びます。

• エフェクト設定
• 動き設定
• 色設定
• 表示ページ設定
• 表示期間設定

設定を変えると、テーマエディタの右側のプレビューにすぐ反映されます。気に入った見た目になったら、最後に「保存」を押してください。

エフェクト設定の各項目

どの粒子を、どう振る舞わせるかを決めるグループです。

• エフェクトの種類（既定: 雪）… 降らせる粒子を、雪・桜・雨・紅葉・ハート・星・紙吹雪・シャボン玉・絵文字・カスタム画像の 10 種類から選びます。この選択によって、下に出てくる項目が変わります
• 絵文字（既定: ❄️）… 種類で「絵文字」を選んだときだけ現れる入力欄です。入力した文字の先頭 1 文字が降ります。空欄のままだと何も表示されません
• カスタム画像（既定: 未選択）… 種類で「カスタム画像」を選んだときだけ現れる、Shopify のファイル選択欄です。画像を選んでいない間は何も表示されず、読み込みに失敗した場合もアニメーションが止まります
• マウス・タップ操作で散らす（既定: OFF）… ON にすると、カーソルを動かした場所やタップした場所の周りで粒子が散ります
• コンテンツの背面に表示（既定: OFF）… ON にすると、粒子が文字や画像の後ろに回ります

絵文字は、ハロウィンのかぼちゃ（🎃）やお正月の門松（🎍）のように、プリセットに無い季節を表すのに向いています。サイズを 30px 以上にすると、何の絵文字かがはっきり分かります。

カスタム画像には、背景が透明な PNG を使ってください。背景が白い画像だと、白い四角が降ってくるように見えてしまいます。ストアのロゴやブランドのキャラクターを小さく降らせると、他のストアには無い演出になります。

「マウス・タップ操作で散らす」は、お客様が画面に触れたときの反応がつくぶん遊び心が出ますが、常に動きが増えます。ギフトやキッズ向けのストアなら楽しい演出になり、高価格帯の商品を落ち着いて見せたいストアなら OFF のままが無難です。

「コンテンツの背面に表示」には、画面にも注記が出ているとおり条件があります。背景色を敷いたセクションがあるテーマでは、背面に回した粒子がその背景の下に潜り、まったく見えなくなります。そこでアプリは、表示を始めるときに画面の数か所を調べ、背面だと隠れてしまうと判断した場合は自動で前面に戻します。「背面にしたはずなのに手前に出ている」ときは、この判定が働いています。

10 種類のエフェクトの見え方

種類ごとの見た目を、同じストアで並べます。設定画面の名前だけでは雰囲気が分かりにくいので、選ぶときの参考にしてください。

まずは既定の「雪」です。白い丸がゆっくりと舞い落ちます。

量と大きさを上げると、雪の存在感が増します。冬のセールのトップページなら、このくらい降らせても商品が隠れません。

「桜」は、ピンク系の花びらが何色か混ざって降ります。

桜はゆっくり落とし、裏表が返る動きを加えると、花びららしさが出ます。

「雨」は、細い線がまっすぐ速く落ちます。梅雨の時期のレイングッズ特集に向いています。

「紅葉」は、赤・橙・黄のもみじの葉が回りながら落ちます。星と見分けがつくよう、葉の形は下側に茎を持たせてあります。

「ハート」は、ピンクから赤のハートが、向きを保ったまま揺れて落ちます。

「星」は、黄色系の星形が揺れながら落ちます。周年記念や誕生日の企画に合います。

「紙吹雪」は、色とりどりの細長い紙片が舞います。セールの開始や新規オープンのお祝いに使いやすい演出です。

「シャボン玉」は、透明な球が浮かぶようにゆっくり落ちます。夏のコスメや子ども向けの商品と相性が良い見た目です。

「絵文字」は、指定した絵文字がそのままの色で降ります。下の例はかぼちゃの絵文字を入れたハロウィン用の設定です。

「カスタム画像」は、選んだ画像が同じように降ります。動きの設定はほかの種類と共通です。

動き設定の各項目

粒子の落ち方を決めるグループです。数値の項目はスライダーで動かすか、右の欄に直接入力します。

• 量（10〜300、10 刻み、既定: 80）… 同時に表示される粒子の数です。控えめにするなら 40〜60、しっかり降らせるなら 150〜200 が目安です
• 落下速度（0.5〜3、0.5 刻み、既定: 1）… 落ちる速さの倍率です。0.5 は漂うように、3 は叩きつけるように落ちます
• 大きさ（4〜60px、2 刻み、既定: 18px）… 粒子 1 つの大きさです
• 風（横揺れ）（0〜3、0.5 刻み、既定: 1）… 横方向の揺れの強さです
• 透明度（0.1〜1、0.1 刻み、既定: 0.9）… 粒子の濃さです。下げるほど薄く、背景が透けます
• 回転させる（既定: ON）… 落ちながら回転させます
• ひらひら（裏表の反転）（既定: OFF）… 落ちながら裏返る動きを加えます

量について 1 つ注意があります。スマートフォンでは粒子の数が自動で約半分になるため、パソコンで決めた量はスマートフォンでは控えめに見えます。逆に言えば、スマートフォンで十分に見える量に合わせると、パソコンではかなり多く感じられます。両方の画面で確かめてから保存してください。

風を 0 にしても、粒子は完全な直線では落ちません。自然に見えるよう、最低限の揺らぎを残しているためです。まっすぐ落ちる表現が欲しいときは、種類を「雨」にします。

回転の効き方は、形によって変わります。

• 雨 … 回転の設定にかかわらず、落ちる向きに沿って傾くだけで回転しません
• ハート・星・絵文字・カスタム画像 … ON でも一回転はせず、正立したまま左右に揺れます。逆さまのハートや絵文字は不自然に見えるためです
• 雪・桜・紅葉・紙吹雪・シャボン玉 … ON にすると一回転します
• OFF にした場合 … どの形もほぼ正立のまま、わずかに揺れる程度になります

ひらひらは、桜と紅葉で特に映えます。雨では効きません。画面にも「エフェクトの種類によっては、一部の設定（回転・ひらひらなど）が反映されない場合があります」と注記が出ています。

色設定の各項目

粒子の色を決めるグループです。種類が「絵文字」「カスタム画像」のときは、もとの色のまま描かれるため、このグループ自体が表示されません。

• 色の指定（既定: プリセットの色）… 「プリセットの色」なら種類ごとに用意された配色で、「指定した色」ならすべての粒子を 1 色で描きます
• 色（既定: 白 #FFFFFF）… 「色の指定」を「指定した色」にしたときだけ現れる、色の選択欄です

プリセットの色では、桜・紅葉・紙吹雪・星・ハートの 5 種類が複数の色を混ぜて降ります。ブランドカラーで統一したいときは「指定した色」に切り替えます。下は紙吹雪を金色 1 色にした例で、多色のときよりも落ち着いた、記念日らしい雰囲気になります。

背景が白いストアで雪を降らせると、白い雪が背景に溶けて見えにくくなります。そういうときは、色を薄いグレーや淡い水色に変えると輪郭が出ます。

表示ページ設定の各項目

どのページで表示するかを決めるグループです。

• トップページに表示（既定: ON）… ストアのトップページです
• 商品ページに表示（既定: ON）… 各商品の詳細ページです
• コレクションページに表示（既定: ON）… コレクションの一覧と、コレクションの一覧ページです
• カートページに表示（既定: ON）… カートのページです
• その他のページに表示（既定: ON）… ブログ・固定ページ・検索結果など、上の 4 つに当てはまらないページです
• 特定の商品ページのみ表示（既定: 空欄）… 商品ハンドルを入れると、商品ページの中でその商品だけに絞ります
• 特定の URL のみ表示（既定: 空欄）… URL のパスを入れると、そのページだけに絞ります

画面からは読み取りにくい判定の決まりを、まとめて書いておきます。

• 絞り込みの 2 項目は、ページ種別の ON/OFF と両方を満たしたときに表示されます。たとえば特定の URL に固定ページを指定しても、「その他のページに表示」が OFF なら出ません
• 「特定の商品ページのみ表示」は商品ページでだけ効きます。トップページやコレクションページの表示には影響しません
• 商品ハンドルと URL は、カンマのほか空白や改行でも区切れます。1 行に 1 つずつ書いても読み取られます
• URL は前方一致で判定されます。/pages/sale と入れると /pages/sale/winter にも表示されますが、/pages/sale-2026 には表示されません。パスの区切り（/）までが一致したときだけ「同じページの配下」とみなすためです
• https:// から始まる URL をそのまま貼っても構いません。ドメインの部分は無視されます

商品ハンドルは、商品ページの URL の /products/ より後ろの部分です。管理画面の商品編集ページの下部、「検索エンジンリスティング」でも確認できます。

表示期間設定の各項目

いつからいつまで表示するかを決めるグループです。

• 期間を指定して表示（既定: OFF）… OFF の間は日付に関係なく常に表示されます。ON にすると下に 2 つの欄が現れます
• 開始日（既定: 空欄）… この日から表示します。YYYY-MM-DD の形で入れます
• 終了日（既定: 空欄）… この日まで表示します。終了日の当日も表示されます

日付の判定は、お客様の端末の時計ではなく、ストアに設定されたタイムゾーンの日付で行います。海外から見ているお客様にとっては、まだ前日の夜であっても、ストアの日付が開始日になっていれば表示が始まります。

開始日だけ、終了日だけの指定もできます。開始日だけ入れれば「その日から先ずっと」、終了日だけ入れれば「その日まで」です。

いちばん気を付けたいのは日付の書き方です。2026/12/01 のようにスラッシュで区切ったり、2026-02-31 のように存在しない日付を入れたりすると、その日付は無視されます。両方が無視されると期間の制限そのものが外れ、常に表示される状態になります。このとき画面にはエラーも警告も出ません。「期間を決めたのに終わらない」ときは、まず書き方を見直してください。

季節ごとの設定の組み立て方

設定項目が多いぶん、何から決めればよいか迷うかもしれません。1 年の販促カレンダーに沿って、組み立ての例を挙げます。数値はあくまで出発点なので、プレビューを見ながら調整してください。

1〜2 月：初売りと冬物の在庫処分

年が明けたらクリスマスの雪をいったん止め、初売りの期間だけ紙吹雪を降らせます。種類を「紙吹雪」、量を 150、落下速度を 2 にし、表示期間を 1 月 1 日から 1 月 7 日までにしておけば、松の内が明けたところで自動で止まります。1 月の後半は冬物の在庫処分に合わせて、雪を控えめに戻すのも手です。

2 月：バレンタイン

ハートを、量 60、大きさ 20px、透明度 0.7 くらいで降らせると、甘くなりすぎない演出になります。ギフト向けの商品だけを扱うコレクションがあるなら、トップページと商品ページを OFF にし、コレクションページだけに出す方法もあります。

3〜4 月：桜と新生活

桜は春の定番です。落下速度を 0.5、ひらひらを ON にすると、ゆっくり舞う花びらになります。新生活のキャンペーンページを固定ページで作っている場合は、特定の URL にそのページのパスを入れ、「その他のページに表示」を ON のままにしておきます。

6 月：梅雨

雨は、速く、細く、多めにするのが雰囲気に合います。量 150、落下速度 2.5 から始めてみてください。透明度を 0.5 くらいに下げると、商品写真の上を流れても邪魔になりません。

7〜8 月：夏のセール

シャボン玉をゆっくり降らせると、涼しげな印象になります。セールの開始日だけ紙吹雪にして盛り上げ、2 日目からシャボン玉に戻す、という使い方をする場合は、期間を区切って設定を入れ替える必要があります（同時に 2 種類は降らせられないため）。

10 月：ハロウィン

プリセットにかぼちゃは無いので、絵文字の 🎃 を使います。大きさを 30px 以上にすると、かぼちゃの顔まで見えるようになります。月末まで期間を指定しておけば、11 月 1 日には止まります。

11 月：紅葉とブラックフライデー

紅葉はひらひらを ON にすると葉が舞う感じが出ます。ブラックフライデーの数日間だけ紙吹雪に切り替えるなら、紅葉の期間の終了日と、紙吹雪の期間の開始日をきちんとつなげておきます。

12 月：クリスマスと年末

雪の出番です。12 月 1 日から 25 日までの期間を入れ、量 120、大きさ 18px、風 1.5 くらいにすると、ほどよく横に流れる雪になります。終了日を入れておけば、26 日には自動で止まります。

コードで自作する場合

アプリを使わずに、テーマのコードを直接編集して雪を降らせることもできます。仕組みを知っておくと、アプリが裏で何をしているのかも見えてきます。ここでは、ごく単純な雪を、指定した期間だけトップページに降らせる例を紹介します。

作業の前に、必ずテーマを複製してバックアップを取ってください。テーマのコード編集は、管理画面の「オンラインストア」→「テーマ」→「…」→「コードを編集」から行います。

手順 1：スニペットを作る

snippets フォルダに simple-snow.liquid というファイルを作り、次のコードを貼り付けます。最初の Liquid の部分で、表示するページと期間を判定しています。request.page_type はいま開いているページの種類で、'now' | date はストアのタイムゾーンでの今日の日付です。条件に合わないときは、何も出力せずに終わります。

{%- assign today = 'now' | date: '%Y-%m-%d' -%}
{%- if request.page_type == 'index' and today >= '2026-12-01' and today <= '2026-12-25' -%}
  <canvas id="simple-snow" aria-hidden="true"
    style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483600;"></canvas>
  <script src="{{ 'simple-snow.js' | asset_url }}" defer></script>
{%- endif -%}

<canvas> には pointer-events:none を付けて、クリックが下の要素に届くようにしています。これを忘れると、画面全体を覆ったキャンバスがクリックを奪い、ストアのボタンが一切押せなくなります。日付は文字列のまま比べていますが、YYYY-MM-DD の形で揃っていれば辞書順と日付順が一致するので、この比較で正しく判定できます。

手順 2：描画のスクリプトを書く

assets フォルダに simple-snow.js を作り、次のコードを貼り付けます。粒子を 1 つずつ HTML の要素にするのではなく、1 枚のキャンバスにまとめて描くのがポイントです。

(function () {
  var canvas = document.getElementById('simple-snow');
  if (!canvas) return;
  // 動きを減らす設定の端末では描かない
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  var ctx = canvas.getContext('2d');
  var dpr = Math.min(window.devicePixelRatio || 1, 2);
  var flakes = [];
  var count = window.innerWidth < 768 ? 40 : 80;

  function resize() {
    canvas.width = window.innerWidth * dpr;
    canvas.height = window.innerHeight * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  function spawn(atTop) {
    return {
      x: Math.random() * window.innerWidth,
      y: atTop ? -10 : Math.random() * window.innerHeight,
      r: 2 + Math.random() * 4,
      speed: 30 + Math.random() * 40,
      sway: Math.random() * Math.PI * 2
    };
  }

  for (var i = 0; i < count; i++) flakes.push(spawn(false));

  var last = performance.now();
  function tick(now) {
    var dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ctx.fillStyle = 'rgba(255,255,255,0.9)';
    flakes.forEach(function (f, i) {
      f.sway += dt;
      f.y += f.speed * dt;
      f.x += Math.sin(f.sway) * 20 * dt;
      if (f.y > window.innerHeight + 10) flakes[i] = spawn(true);
      ctx.beginPath();
      ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
      ctx.fill();
    });
    if (!document.hidden) requestAnimationFrame(tick);
  }

  document.addEventListener('visibilitychange', function () {
    if (!document.hidden) { last = performance.now(); requestAnimationFrame(tick); }
  });
  window.addEventListener('resize', resize);
  resize();
  requestAnimationFrame(tick);
})();

前半では、高精細ディスプレイに合わせてキャンバスの解像度を決めています。倍率を 2 で頭打ちにしているのは、3 倍の端末で描く画素数が増えすぎるのを防ぐためです。tick の中では前のフレームからの経過時間を使って位置を進めているので、画面のリフレッシュレートが 60Hz でも 120Hz でも同じ速さで落ちます。画面の下に出た粒子は捨てずに上へ戻して再利用し、タブが裏に回ったら描画を止めます。

手順 3：テーマに読み込む

layout/theme.liquid を開き、</body> の直前に次の 1 行を足して保存します。これで、すべてのページでスニペットが読み込まれ、条件に合うページでだけ雪が降ります。

{% render 'simple-snow' %}

render はスニペットを呼び出すタグです。スニペットの中でページと日付を判定しているので、ここでは条件を書かずに毎回呼んで構いません。</body> の直前に置くのは、ページの中身を読み込んだ後にキャンバスを重ねるためです。

自作した場合に残る手間

上のコードで、トップページに 12 月の間だけ雪を降らせることはできます。ただ、実際のストアで使い続けるには、まだ足りないものがあります。

• 季節を変えるたびに、形を描く処理を書き直す必要があります（桜の花びらや、もみじの葉の形を描くのは、雪の丸よりずっと手間がかかります）
• 量や速さを変えるたびにコードを開くことになり、担当者がコードを触れないストアでは外注が要ります
• 商品ハンドルや URL で絞り込む処理、背面に回すと見えなくなるテーマへの対策は、まだ入っていません
• テーマを更新したり乗り換えたりすると、theme.liquid に足した 1 行が消え、気づかないうちに演出が止まります

アプリは、これらをテーマエディタの設定に置き換えています。月額 $1.99 は、季節ごとの改修を 1 回頼む費用と比べて、どちらが安く済むかで判断するとよいでしょう。

他の季節演出アプリとの使い分けと併用の注意

アプリストアには、画面に雪や紙吹雪を降らせるアプリがほかにもあります。たとえば「Dakaas Store Effects」「FX：季節エフェクトアニメーション」「Hura Snowfall Effects & Decor」「SFX - Snow Christmas Effects」などです。降らせるだけでなく、カーソルの装飾や BGM、サイトの飾り付けまでまとめて扱うものもあります。

ここでは個々のアプリの比較ではなく、すでに別のアプリを使っているストアが、このアプリを追加したり乗り換えたりするときに気を付けることを書きます。

同じ時期に 2 つの埋め込みを ON にしない

この種のアプリは、どれもテーマの「埋め込みアプリ」として画面全体に重なります。2 つを同時に ON にすると、雪が 2 重に降ったり、片方の粒子がもう片方の上に重なったりします。描画の負荷も単純に倍になります。

テーマエディタの「埋め込みアプリ」の一覧には、入っているアプリのトグルが縦に並びます。乗り換えの検証をするときは、片方のトグルを OFF にしてから、もう片方を ON にして見比べてください。

役割で分けるなら、期間で切り替える

カーソルの装飾は別のアプリ、季節の粒子はこのアプリ、と役割で分けて使うこと自体はできます。ただし、両方が画面全体に何かを描く場合は、見た目がぶつからないか、プレビューで必ず確かめてください。

時期で使い分けたい場合は、このアプリの「表示期間設定」が役に立ちます。たとえば 12 月は別のアプリのクリスマス演出を使い、このアプリは 1 月 1 日からの初売りの紙吹雪だけを担当させる、という分担なら、このアプリ側は開始日と終了日を入れておくだけで済みます。

テーマを分けて検証する

本番のテーマで 2 つのアプリを切り替えると、お客様が切り替えの途中を見ることになります。設定画面の「テーマを選択」で下書きのテーマを選んで追加すれば、公開中のテーマに影響を与えずに試せます。設定はテーマに保存されるので、下書きで作り込んだ設定は、そのテーマを公開したときにそのまま使われます。

乗り換えるときの手順

1. 下書きのテーマに、このアプリの埋め込みを追加して設定を作り込みます
2. 公開中のテーマで、元のアプリの埋め込みを OFF にして保存します
3. 公開中のテーマで、このアプリの埋め込みを ON にし、同じ設定を入れて保存します
4. ストアフロントを開き、エフェクトが 1 種類だけ降っていることを確かめます
5. 問題がなければ、元のアプリを管理画面からアンインストールします

元のアプリをアンインストールする前に OFF にしておくのは、切り替えの間にエフェクトが 2 重になる時間を作らないためです。

うまく表示されないときの確認順

最後に、エフェクトが出ないときに確認する順番をまとめます。このアプリは、表示しない条件に当てはまると、エラーを出さずに描画をやめます。画面のどこにもエラーが出ないので、上から順に見ていくのが近道です。

1. テーマエディタの「埋め込みアプリ」でトグルが ON になっていて、「保存」まで押してあるか
2. いま見ているページの種別が、表示ページ設定で ON になっているか
3. 特定の商品ページ・特定の URL を入れている場合、その条件とページ種別の ON/OFF を両方満たしているか
4. 表示期間を指定している場合、今日の日付が期間に入っているか、日付の書き方が YYYY-MM-DD になっているか
5. 種類が「絵文字」なら絵文字の欄、「カスタム画像」なら画像が空になっていないか
6. 「コンテンツの背面に表示」を ON にしているなら、OFF に戻すと見えるようになるか
7. 確認している端末で、OS の「視差効果を減らす」が有効になっていないか

7 番目の OS の設定は、解除するとページを読み込み直さなくても表示が始まります。どれにも当てはまらないときは、ストアフロントのキャッシュが残っていることがあるので、少し待ってから再読み込みしてください。

より詳しい手順は、Shopifyで雪や桜や紙吹雪のエフェクトをストアに降らせられるアプリについて徹底解説｜ご利用ガイド にもまとめています。

まとめ

「シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト」は、季節やイベントの演出を、テーマエディタの設定だけで出し入れできるアプリです。

• 雪・桜・雨・紅葉・ハート・星・紙吹雪・シャボン玉・絵文字・カスタム画像の 10 種類から選べます
• 量・落下速度・大きさ・風・透明度・回転・ひらひら・色を、プレビューを見ながら調整できます
• ページ種別・商品ハンドル・URL で、表示する場所を絞れます
• 開始日と終了日を入れておけば、演出が自動で始まり、自動で終わります
• お客様のクリックやスクロールを妨げず、スマートフォンでは粒子の数を自動で減らします

コードで自作すれば費用はかかりませんが、季節ごとの描き分けや、ページ・期間の判定、テーマの乗り換えへの対応まで含めると、保守の手間は小さくありません。年に何度も演出を入れ替えるストアほど、設定だけで済む価値が大きくなります。

料金は月額 $1.99、年額 $19.99 で、7 日間の無料トライアルがあります。まずは次の季節のイベントに合わせて、Shopify App Store からストアに入れて、プレビューで見え方を確かめてみてください。

おすすめ Shopify アプリ

同じ開発元 UnReact のアプリの中から、季節のキャンペーンと組み合わせやすいものを紹介します。

シンプルカウントダウンタイマー｜お手軽残り時間表示

商品ページに、セールの終了までの残り時間を表示するアプリです。紙吹雪でセールの始まりを盛り上げ、商品ページでは残り時間で購入を後押しする、という組み合わせができます。

• シンプルカウントダウンタイマー｜お手軽残り時間表示

シンプル流れる告知｜流れるお知らせ挿入アプリ

ストアの上部などに、横に流れるお知らせの帯を入れるアプリです。季節の演出で目を引いたあとに、キャンペーンの内容を文字で伝えられます。

• シンプル流れる告知｜流れるお知らせ挿入アプリ

シンプル画像バナー｜お手軽広告バナーアプリ

ストアに画像のバナーを表示するアプリです。パソコン用とスマートフォン用で別の画像を設定でき、季節の特集ページへの入り口を作るのに向いています。

• シンプル画像バナー｜お手軽広告バナーアプリ

シンプルギフトラッピング｜お手軽ギフト包装アプリ

カートページにギフト包装の選択肢を追加するアプリです。クリスマスやバレンタインのように、エフェクトを降らせる時期とギフトの需要が重なる季節に役立ちます。

• シンプルギフトラッピング｜お手軽ギフト包装アプリ