Shopifyで雪や桜や紙吹雪のエフェクトをストアに降らせられるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/10/05

はじめに

エフェクトの種類は 10 種類、調整できる項目は 24 個、表示できるページは 5 区分。このガイドでは、そのすべてを 1 つずつ説明します。

Shopify は、ネットショップを開くためのサービスです。商品の登録から決済、配送の管理までを一通り備えており、「アプリ」を追加することで足りない機能を後から足せるようになっています。

「シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト」は、ストアの画面に雪や桜の花びら、紙吹雪といった粒子を降らせるアプリです。雪・桜・雨・紅葉・ハート・星・紙吹雪・シャボン玉に加えて、好きな絵文字や自分で用意した画像も降らせられます。量や落ち方、色、表示するページ、表示する期間まで指定できるので、クリスマスの 1 週間だけ雪を降らせる、春の新作ページだけ桜を舞わせる、といった使い方ができます。HTML や CSS を書く必要はありません。

料金は 月額 $1.99、年額 $19.99（年額なら 2 か月分がお得です）。7 日間の無料トライアルが付いているので、まずは実際のストアで見え方を確かめてから判断できます。

アプリストア: シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト

アプリのメイン画像

このアプリでできること

このアプリが用意している機能は、大きく次の 5 つです。

雪・桜・紙吹雪など 10 種類のエフェクトから選べます。
量・落下速度・大きさ・風・回転・色を調整できます。
カーソルの移動やタップで粒子を散らせます。
表示するページ・商品・URL を指定できます。
開始日と終了日を決めて、必要な期間だけ表示できます。

ストア全体にエフェクトを降らせる

エフェクトはストアの画面全体に重ねて表示されます。特定のセクションの中だけではなく、ページをスクロールしても常に画面いっぱいに降り続けます。

粒子はクリックやスクロールを一切邪魔しません。画面の上に重なってはいますが、マウスの操作はそのまま下のボタンやリンクに届くように作ってあります。「商品ボタンが押せなくなるのでは」という心配は不要です。

雪のエフェクトが表示されているストアフロント

季節に合わせて種類を切り替える

エフェクトの種類を変えるだけで、ストアの雰囲気が変わります。下は同じストアで「桜」を選んだ状態です。入れ替えに必要なのは、選択欄を 1 つ変えて保存するだけです。

桜のエフェクトが表示されているストアフロント

スマートフォンでも見え方を保つ

スマートフォンでは画面が狭いぶん、粒子が多いと重く見えてしまいます。そこでこのアプリは、画面の幅が 768px 未満のときは粒子の数を自動的に約半分に減らします。マーチャントが別途モバイル用の設定をする必要はありません。

スマートフォンでエフェクトが表示されているストアフロント

アプリをインストールする

Shopify アプリは、すべて Shopify App Store からインストールします。手順は次のとおりです。

1. 管理画面の「設定」を開く

Shopify 管理画面の左下にある「設定」をクリックします。

Shopify 管理画面の左下にある設定ボタン

2. 「アプリと販売チャネル」から App Store を開く

設定の中の「アプリと販売チャネル」を開き、「Shopify App Store」をクリックします。

設定のアプリと販売チャネルの画面

3. アプリを検索してインストールする

App Store の検索欄に「シンプル紙吹雪アニメーション」と入力して、表示されたアプリを開きます。アプリストアのページから直接開くこともできます。

アプリの詳細画面で「インストール」をクリックし、続けて表示される権限の確認画面で内容を確認して進めてください。このアプリが要求する権限はテーマの読み取りだけで、お客様の個人情報（氏名・住所・メールアドレス・注文内容）には一切アクセスしません。

まず最初にやる設定

インストールしただけでは、まだストアに何も表示されません。テーマにエフェクトを追加して、有効にするという操作が必要です。ここが最初の関門なので、順を追って説明します。

1. アプリを開く

管理画面の左メニュー「アプリ」から、このアプリを開きます。最初に出るのが「設定」画面です。

アプリを開いた直後の設定画面

2. テーマを選んで「テーマに追加」を押す

「テーマに紙吹雪エフェクトを追加」のカードで、エフェクトを追加したいテーマを選びます。初期状態では公開中のテーマが選ばれています。選択欄には、公開中のテーマには「（公開中のテーマ）」という注記が付くので、取り違える心配はありません。

テーマを選んだら「テーマに追加」をクリックします。新しいタブでテーマエディタが開きます。

テーマを選択してテーマに追加ボタンを押す画面

隣にある「テーマをプレビュー」は、エフェクトを追加せずにそのテーマの表示を確認するためのボタンです。こちらも新しいタブで開きます。

3. 「埋め込みアプリ」が有効になっていることを確認する

開いたテーマエディタの左側に「埋め込みアプリ」のパネルが表示され、その中にこのアプリが並びます。右側のトグルが ON になっていればエフェクトは有効です。

テーマエディタの埋め込みアプリ一覧でトグルが有効になっている画面

4. 「保存」を押す

テーマエディタの右上にある「保存」をクリックすると、ストアに反映されます。保存を押すまでは、プレビューに見えていても実際のストアには出ません。

自動で追加されなかったときは

テーマのバージョンによっては、手順 2 の選択欄が空欄になったり、「テーマに追加」を押してもエフェクトが追加されないことがあります。アプリの画面にも、その場合の注意が黄色のバナーで表示されます。

そのときは手動で追加してください。

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

サイドバーに出る項目について

アプリを開くと、左のサイドバーに「設定」が表示されます。
日本語で利用していて、かつ公開中のよくある質問が登録されている場合は、
これに加えて**サイドバーの「よくある質問」**が表示されます。
登録がないときは項目そのものが出ないため、見当たらなくても異常ではありません。

エフェクトを設定する（テーマエディタ）

エフェクトの中身は、すべてテーマエディタの「埋め込みアプリ」から設定します。設定は 5 つのグループに分かれています。順に見ていきます。

設定を変えると、右側のプレビューにその場で反映されます。気に入った状態になったら、右上の「保存」を押すのを忘れないでください。

エフェクト設定

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

テーマエディタのエフェクト設定と動き設定のパネル

エフェクトの種類

降らせる粒子を 10 種類から選びます。**初期値は「雪」**です。

選択肢	どんな見た目か	向いている場面
雪	白い丸がゆっくり舞い落ちます	冬季・クリスマス・年末セール
桜	桜色の花びらがひらひらと落ちます	春の新作・入学シーズン
雨	細い線がまっすぐ速く落ちます	梅雨・レイングッズの特集
紅葉	もみじの葉が回りながら落ちます	秋のセール・ハロウィン前
ハート	ハート形が揺れながら落ちます	バレンタイン・母の日・記念日
星	星形が揺れながら落ちます	誕生日・周年・キラキラした演出
紙吹雪	色とりどりの紙片が舞います	セール開始・新規オープン・お祝い
シャボン玉	透明な球が浮かぶように落ちます	夏・コスメ・キッズ向け
絵文字	指定した絵文字が落ちます	好きな記号で雰囲気を作りたいとき
カスタム画像	アップロードした画像が落ちます	ロゴやキャラクターを降らせたいとき

桜・紅葉・紙吹雪・星・ハートの 5 種類は、専用の配色パレットを持っていて複数の色が混ざって降ります。1 色に揃えたいときは、後述の「色設定」で「指定した色」を選んでください。

絵文字

「エフェクトの種類」で**「絵文字」を選んだときだけ表示される**項目です。初期値は雪の結晶（❄️）が入っています。

🚨 使われるのは先頭の 1 文字だけです。 複数の絵文字を並べて入力しても、2 文字目以降は無視されます。混ぜて降らせることはできません。

🚨 **この欄を空にすると、エフェクトは何も表示されません。**エラーも警告も出ないので、「絵文字を選んだのに何も出ない」ときは、まずこの欄を確認してください。

カスタム画像

「エフェクトの種類」で**「カスタム画像」を選んだときだけ表示される**項目です。Shopify のファイル選択画面から画像を選びます。

背景が透明な PNG がおすすめです。背景が白い画像を使うと、四角い白板が降ってくるように見えてしまいます。

🚨 **画像を選んでいない状態では、何も表示されません。**また、選んだ画像の読み込みに失敗した場合もアニメーションは止まります。

マウス・タップ操作で散らす

初期値は OFF です。ON にすると、お客様がカーソルを動かした場所やタップした場所の周りで、粒子がぱっと散るようになります。

遊び心のある演出になりますが、常に動きが増えるぶん画面がにぎやかになります。商品を落ち着いて見せたいストアでは OFF のままをおすすめします。

コンテンツの背面に表示

初期値は OFF（＝商品や文字の手前に表示）です。ON にすると、粒子がストアのコンテンツより後ろに回り、文字や画像の邪魔をしなくなります。

🚨 背面に回すと見えなくなるテーマがあります。 背景色が設定されたセクションがあると、粒子はその背景の下に潜ってしまい、画面から完全に消えてしまいます。そこでこのアプリは、起動時に「背面にしても見えるか」を自動で判定し、隠れてしまう場合は自動的に手前へ戻します。「背面にしたのに手前に出ている」ように見えるときは、この自動判定が働いています。画面にも同じ趣旨の注記が表示されます。

動き設定

粒子の落ち方を細かく決めるグループです。画面にも「エフェクトの種類によっては、一部の設定（回転・ひらひらなど）が反映されない場合があります」という注記が出ています。

テーマエディタの動き設定のパネル

項目	範囲	刻み	初期値	何が変わるか
量	10〜300	10	80	同時に表示される粒子の数
落下速度	0.5〜3	0.5	1	落ちる速さの倍率
大きさ	4〜60px	2	18px	粒子 1 つの大きさ
風（横揺れ）	0〜3	0.5	1	横方向の揺れの強さ
透明度	0.1〜1	0.1	0.9	粒子の濃さ

量

初期値は 80 です。10 から 300 まで 10 刻みで調整できます。控えめに見せたいなら 40〜60、しっかり降らせたいなら 150〜200 が目安です。

先に書いたとおり、スマートフォンでは指定した数の約半分になります。パソコンで見ながら数を決めると、スマートフォンでは思ったより控えめに見える点にご注意ください。

落下速度

初期値は 1 で、0.5 から 3 まで 0.5 刻みです。0.5 にするとゆっくり漂うように、3 にすると勢いよく降り注ぎます。雪や桜は 0.5〜1、雨は 2〜3 が雰囲気に合います。

大きさ

初期値は 18px で、4px から 60px まで 2px 刻みです。絵文字やカスタム画像を使うときは、小さすぎると何の形か分からなくなるので 30px 以上がおすすめです。

風（横揺れ）

初期値は 1 で、0 から 3 まで 0.5 刻みです。数値を上げるほど横に大きく流れます。0 にしても完全な直線にはならず、最低限の揺らぎは残ります。まっすぐ落とす表現をしたいときは「雨」を選んでください。

透明度

初期値は 0.9 で、0.1 から 1 まで 0.1 刻みです。0.3〜0.5 まで下げると、商品写真の邪魔をしにくい控えめな演出になります。

回転させる

初期値は ON です。粒子が落ちながら回転します。ただし形によって動きが変わります。

種類	ON のとき	OFF のとき
雨	落ちる向きに沿って傾きます（回転しません）	同じ
ハート・星・絵文字・カスタム画像	正立のまま左右に揺れます	ほぼ正立のまま
雪・桜・紅葉など	一回転します	ほぼ正立のまま

ハートや星、絵文字が「回転しない」のは仕様です。ハートが逆さまに降ってくると不自然に見えるため、向きを保ったまま揺れる動きにしてあります。

ひらひら（裏表の反転）

初期値は OFF です。ON にすると、花びらや葉が舞うように、落ちながら裏返る動きが加わります。桜と紅葉で特に効果的です。雨では効きません。

色設定

粒子の色を決めるグループです。

🚨 **このグループは、「エフェクトの種類」が「絵文字」「カスタム画像」のときは表示されません。**絵文字と画像はもとの色のまま描かれるため、色の指定が効かないからです。

色の指定を指定した色にして色の欄が表示された状態

色の指定

**初期値は「プリセットの色」**です。選択肢は 2 つあります。

プリセットの色 … エフェクトごとに用意された配色で表示します。桜ならピンク系、紅葉なら赤・橙・黄が混ざって降ります。
指定した色 … すべての粒子を 1 色に揃えます。

色

「色の指定」を「指定した色」にしたときだけ表示される項目です。初期値は白（#FFFFFF）。ストアのブランドカラーに合わせたいときや、背景が白いストアで雪を見せたいときに薄いグレーへ変える、といった使い方ができます。

表示ページ設定

どのページでエフェクトを出すかを決めるグループです。全部のページで降らせる必要はありません。トップページだけ、セールページだけ、といった絞り込みができます。

テーマエディタの表示ページ設定のパネル

ページ種別ごとの ON/OFF

次の 5 つは、すべて初期値が ON です。不要なページを OFF にしてください。

項目	対象になるページ
トップページに表示	ストアのトップページ
商品ページに表示	各商品の詳細ページ
コレクションページに表示	コレクションの一覧・コレクション一覧ページ
カートページに表示	カートページ
その他のページに表示	ブログ・固定ページ・検索結果など、上記以外すべて

商品ページは、お客様が購入を検討する大事な場面です。動きが集中力を削ぐことを避けたい場合は、商品ページだけ OFF にするのがおすすめです。

特定の商品ページのみ表示

商品ハンドルをカンマ区切りで入力すると、商品ページの中でさらに絞り込めます。空欄にするとすべての商品に表示されます。

商品ハンドルは、商品ページの URL の末尾（/products/ のあとの部分）です。

🚨 この欄が効くのは商品ページだけです。 コレクションページやトップページには影響しません。

🚨 **「商品ページに表示」が OFF だと、ここに入力しても出ません。**両方の条件を満たす必要があります。

区切りはカンマのほか、空白や改行でも区切れます。1 行に 1 つずつ書いても問題ありません。

特定の URL のみ表示

URL のパスをカンマ区切りで入力すると、そのページだけに表示できます（例: /pages/sale）。空欄にすると、上のページ種別の設定に従います。

指定は前方一致で判定されます。/pages/sale と入力した場合:

/pages/sale … 表示されます
/pages/sale/winter … 表示されます（配下のページも対象）
/pages/sale-2026 … 表示されません（途中で区切られていないため別のページ扱い）

🚨 **こちらもページ種別の設定と組み合わせで判定されます。**たとえば /pages/sale を指定しても、「その他のページに表示」が OFF だと表示されません。固定ページは「その他のページ」に含まれるためです。

https:// から始まる完全な URL を貼り付けても構いません。ドメイン部分は自動的に無視されます。

表示期間設定

エフェクトを出す期間を決めるグループです。クリスマスや桜のシーズンなど、期間が決まっている演出を、設定し忘れずに自動で終わらせるために使います。

期間を指定して表示を有効にして開始日と終了日が表示された状態

期間を指定して表示

初期値は OFF です。OFF の間は期間に関係なく常に表示されます。ON にすると、下に「開始日」と「終了日」の入力欄が現れます。

開始日 / 終了日

YYYY-MM-DD の形式で入力します（例: 2026-12-01）。

終了日は当日を含みます。 2026-12-25 と入れると、12 月 25 日いっぱいまで表示されます。
片方だけの指定もできます。 開始日だけ入れれば「その日から先ずっと」、終了日だけ入れれば「その日まで」になります。
判定はストアのタイムゾーンの日付で行います。 お客様の端末の時計や所在地には影響されないので、海外からのアクセスでも開始・終了が 1 日ずれることはありません。

🚨 形式を間違えると、期間の制限そのものが外れて常に表示されます。2026/12/1 のような区切り違いや、2026-02-31 のような実在しない日付を入れると、その指定は無視されます。**エラーも警告も出ません。**期間を指定したのに終わらない、というときは、まずここの書き方を確認してください。

管理画面の言語を変える

アプリの管理画面は 20 言語に対応しています。「言語設定」のカードで切り替えられます。

アプリの言語設定カード

「言語を選択」から使いたい言語を選びます。
「変更する」をクリックします。

選べるのは、チェコ語・デンマーク語・ドイツ語・英語・スペイン語・フランス語・イタリア語・オランダ語・ノルウェー語（ブークモール）・ポーランド語・ポルトガル語（ブラジル）・ポルトガル語（ポルトガル）・フィンランド語・スウェーデン語・トルコ語・タイ語・日本語・簡体中国語・繁体中国語・韓国語の 20 言語です。

🚨 **ここで変わるのはアプリの管理画面だけです。**テーマエディタに出る設定項目の名前は、Shopify アカウントの表示言語に従います。テーマエディタだけ英語で出る場合は、Shopify アカウント側の言語設定を確認してください。

こんなときはこう設定する

設定の組み合わせに迷ったときの、目的別の例です。

クリスマス限定で雪を降らせたいとき

項目	設定
エフェクトの種類	雪
量	120
落下速度	1
大きさ	18px
風（横揺れ）	1.5
透明度	0.8
期間を指定して表示	ON
開始日 / 終了日	2026-12-01 / 2026-12-25

期間を設定しておけば、26 日になった時点で自動的に止まります。消し忘れの心配がありません。

春の新作ページだけ桜を舞わせたいとき

項目	設定
エフェクトの種類	桜
量	60
落下速度	0.5
ひらひら（裏表の反転）	ON
特定の URL のみ表示	/pages/spring
その他のページに表示	ON のまま