Shopify のマウスカーソルをノーコードで変えられる「シンプルカスタムマウスカーソル」ご利用ガイド

株式会社UnReact

2026/09/03

Shopify のマウスカーソルをノーコードで変えられる「シンプルカスタムマウスカーソル」ご利用ガイド

はじめに

このアプリを入れると、ストアのマウスカーソルが変わります。それだけのアプリです。ただ、お客様がストアに来て最初に動かすものがカーソルで、最後まで画面のどこかに映っているのもカーソルです。ロゴも配色もフォントも整えたのに、カーソルだけが Windows と Mac の既定のまま、という状態を終わらせられます。

Shopify は世界中で使われているネットショップ作成サービスで、Shopify アプリはそのストアに後から機能を足せる拡張パーツです。テーマのコードを触らなくても、インストールと設定だけで新しい機能が使えるようになります。

「シンプルカスタムマウスカーソル」では、7 種類の組み込み図形から選ぶか、絵文字を 1 文字入れるか、自分のロゴやキャラクター画像をアップロードするか、3 つの方法でカーソルを差し替えられます。色と大きさも選べます。さらに、軌跡・きらめき・発光・波紋・スポットライトなど 8 種類のエフェクトを付けられます。設定はすべてテーマエディタの画面で完結し、テーマのコードを編集する必要はありません。テーマの更新でカスタマイズが消える心配もありません。

料金：Basic Plan $1.99/月（年額 $19.99）。インストールから 7 日間は無料でお試しいただけます。年払いなら実質 2 ヶ月分無料でお得にご利用いただけます。

▼ アプリストアはこちら
シンプルカスタムマウスカーソル｜お手軽ポインターカスタマイズ

アプリストアのメイン画像

このアプリはパソコンで見ているお客様にだけ効きます。 マウスカーソルはパソコンにしか存在しないため、スマートフォンやタブレットでは何も起きません（不具合ではありません）。

「シンプルカスタムマウスカーソル」でできること

ストアの世界観を作り込みたいお店のためのアプリです。アパレル・雑貨のようにブランドの空気感が売りになるストア、季節のキャンペーンで雰囲気を変えたいストア、キャラクターグッズや推し活系のストアと特に相性がいいアプリです。

アプリストアのメイン画像

アプリの主な特徴

7 種類のカーソル図形から選べます。絵文字や自分の画像も使えます。
カーソルの色と大きさを選べます。大きさはブラウザが確実に表示できるものだけを用意しています。
軌跡・きらめき・スポットライト・発光など 8 種類のエフェクトを有効にできます。
ストアのすべてのページに適用されます。テーマのコードを編集する必要はありません。
1 クリックでテーマに追加できます。

ストア全体のカーソルを差し替えられる

設定を保存した瞬間から、トップページ・商品ページ・コレクションページなど、ストアのすべてのページでカーソルが変わります。ページごとの設定は不要です。

カスタムカーソルが表示されたストアフロント

図形・絵文字・画像の 3 通りから選べる

カーソルの決め方は 3 つあります。手軽に始めるなら図形か絵文字、ブランドを出したいなら画像がおすすめです。画像は大きなものを選んでも、カーソルとして表示できるサイズへ自動的に縮小されるので、事前のリサイズは要りません。

カーソルの種類を選ぶ設定画面

軌跡やきらめきのエフェクトを足せる

エフェクトを有効にすると、カーソルに動きが付きます。軌跡が付いてくる、きらめきが散る、クリックすると波紋が広がる、まわりが暗くなってカーソルの周囲だけ明るくなる、リンクに近づくと吸い寄せられる、といった演出が選べます。

エフェクトを有効にしたカーソル

コードを書かずに見た目を調整できる

種類・図形・色・大きさ・エフェクト・エフェクトの色・軌跡の量まで、すべてテーマエディタの画面から調整できます。設定を変えるとその場で表示に反映されるので、確かめながら決められます。

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

1 クリックでテーマに追加できる

アプリの管理画面でテーマを選んで「テーマに追加」を押すだけで、テーマエディタが開いて設定できる状態になります。

アプリ管理画面の「テーマに追加」

アプリをインストールできる

所要時間は 1 分ほど、手順は 5 ステップです。7 日間の無料期間があるので、まずは入れて試してみてください。

▼ アプリストアはこちら
シンプルカスタムマウスカーソル｜お手軽ポインターカスタマイズ（Basic Plan $1.99/月・7 日間無料）

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

Shopify 管理画面の左下にある「設定」

「アプリ」をクリックし、「Shopify App Store」へ移動します。

設定の「アプリ」から Shopify App Store へ移動する画面

このページの上にある「アプリストアはこちら」のリンクを開きます。App Store の検索窓に「シンプルカスタムマウスカーソル」と入力して探すこともできます。

App Store のアプリ詳細ページ

アプリ詳細画面で「インストール」をクリックします。

アプリ詳細画面の「インストール」ボタン

権限の確認画面を確認し、「インストール」を完了します。

アプリのインストール時に表示される権限の確認画面

アプリをテーマに追加できる

このアプリはテーマの「アプリ埋め込み」として動きます。追加する方法は 2 通りあります。

アプリの管理画面から 1 クリックで追加できる

一番かんたんな方法です。

アプリの管理画面を開きます。
「テーマにカスタムカーソルを追加」のカードで、追加したいテーマを選びます。
「テーマに追加」をクリックします。
テーマエディタが開き、カスタムカーソルの設定パネルが表示された状態になります。
カーソルを設定して「保存する」をクリックします。

アプリ管理画面の「テーマにカスタムカーソルを追加」カード

「テーマをプレビュー」を押すと、保存する前に見た目を確認できます。

テーマエディタから手動で有効にできる

すでにテーマエディタを開いている場合は、こちらでも構いません。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
左側のメニュー下部にある「アプリ埋め込み」を開きます。
「シンプルカスタムマウスカーソル｜お手軽ポインターカスタマイズ」のトグルをオンにします。
「保存する」をクリックします。

テーマエディタの「埋め込みアプリ」一覧

有効になっているか確認できる

アプリの管理画面を開くと、公開中のテーマでカスタムカーソルが有効になっているかを表示します。

有効なとき：「カスタムカーソルは公開中のテーマで有効です」
無効なとき：「カスタムカーソルはまだ有効になっていません」（テーマエディタへのリンクが出ます）

公開中のテーマで有効になっていることを示す表示

設定はテーマごとに保存されます。 テーマを複製したり別のテーマに切り替えたりすると、カーソルの設定は引き継がれず、既定のカーソルに戻ります。エラーは出ないので気づきにくい点です。テーマを変えたら、新しいテーマでもう一度アプリ埋め込みを有効にして設定し直してください。

カーソルの見た目を決められる

テーマエディタの「アプリ埋め込み」でカスタムカーソルを開くと、「カーソル設定」というグループがあります。ここでカーソルそのものを決めます。

カーソルの種類を選べる

設定名	内容
カーソルの種類	「図形から選ぶ」「画像を使う」「絵文字を使う」の 3 つから選びます（初期値は「図形から選ぶ」）。

選んだ種類によって、下に表示される設定項目が切り替わります。使わない項目は自動的に隠れるので、迷うことはありません。

カーソルの種類を選ぶセレクト

図形から選べる

「カーソルの種類」で「図形から選ぶ」を選んだときの設定です。

設定名	内容
図形	丸・リング・小さな点・矢印・十字・ハート・星の 7 種類から選びます（初期値は「丸」）。
カーソルの色	図形の色です（初期値は黒 `#000000`）。
縁の色	矢印を選んだときだけ表示されます。背景が暗いストアでは明るい色にすると見やすくなります（初期値は白 `#ffffff`）。

用途別のおすすめ

ミニマルに見せたい場合：「小さな点」か「リング」を選び、色をブランドカラーにします。主張しすぎず、ブランドの色だけがさりげなく残ります。
遊び心を出したい場合：「ハート」や「星」を選びます。キャラクターグッズや推し活系のストアと相性がいい図形です。
操作しやすさを優先したい場合：「矢印」を選びます。既定のカーソルに近い形なので、お客様が迷いません。縁の色を背景と反対の色にしておくと、どんなページでも見失いません。

図形の選択とカーソルの色の設定

自分の画像を使える

「カーソルの種類」で「画像を使う」を選んだときの設定です。

設定名	内容
カーソル画像	ロゴやキャラクター画像を指定できます。Shopify のファイルから選ぶことも、その場でアップロードすることもできます。

大きな画像を選んでも、カーソルとして表示できるサイズへ自動的に縮小されます。事前にリサイズする必要はありません。

背景が透明な PNG をおすすめします。 背景が白い画像を使うと、暗い背景のページで白い四角が付いてきてしまいます。

カーソル画像のアップロード欄

絵文字を使える

「カーソルの種類」で「絵文字を使う」を選んだときの設定です。

設定名	内容
絵文字	絵文字を 1 文字だけ入力します（初期値は ✨）。

一番手軽に季節感を出せる方法です。 夏は 🌻、冬は ❄️、セール期間は 🔥 のように、キャンペーンに合わせて 1 文字入れ替えるだけで雰囲気が変わります。

絵文字の見た目は、お客様のパソコンの種類（Windows・Mac など）によって少し変わります。どの環境でも同じ見た目にしたい場合は、画像を使ってください。

大きさを選べる

設定名	内容
カーソルの大きさ	「小（16px）」「やや小（20px）」「標準（32px）」「大（64px）」から選びます（初期値は「標準（32px）」）。

ブラウザが確実に表示できる大きさだけを選べるようにしています。中途半端なサイズを指定すると、ブラウザによっては何も表示されずに既定のカーソルへ戻ってしまうためです。

細かい図形（点・十字）は小さめ、画像やハート・星は大きめにすると、意図した見え方になります。

カーソルの大きさの設定

エフェクトで動きを付けられる

「エフェクト設定」のグループで、カーソルに動きを付けられます。

設定名	内容
エフェクトを有効にする	オンにすると、動きのある演出が使えるようになります（初期値はオフ）。

エフェクトを有効にすると、ストアの表示速度にわずかに影響します。 演出が不要な場合は無効のままにしてください。オフのままなら、カーソルの差し替えは表示速度にほとんど影響しません。

エフェクトの種類を選べる

「エフェクトを有効にする」をオンにすると表示されます。

エフェクト	見え方
軌跡（カーソルを追いかける）	カーソルの後ろに、少し遅れて付いてくる粒が並びます（初期値）。
発光（カーソルが光る）	カーソルのまわりがぼんやりと光ります。
波紋（クリックで広がる）	クリックした場所から輪が広がります。
虹色の軌跡	軌跡が虹色に変化しながら付いてきます。
きらめき	カーソルの動きに合わせて、きらきらした粒が散ります。
吸着（リンクに寄る）	リンクやボタンに近づくと、カーソルがそちらへ引き寄せられます。
スポットライト	カーソルのまわり以外が暗くなり、舞台照明のように見えます。
反転（背景の色を反転）	カーソルが重なった部分の色が反転します。

用途別のおすすめ

ブランドの上品さを保ちたい場合：「発光」を控えめな色で使います。動きが穏やかなので、商品写真の邪魔をしません。
セール・イベントで盛り上げたい場合：「きらめき」や「虹色の軌跡」を選びます。期間が終わったらオフに戻せます。
商品を 1 点ずつ見せたい場合：「スポットライト」を使います。写真集のような見せ方をするストアに向いています。
押してほしいボタンがある場合：「吸着」を選ぶと、リンクの上でカーソルが吸い寄せられ、クリックできる場所が伝わりやすくなります。

エフェクト設定とエフェクトの種類のセレクト

エフェクトの色と量を調整できる

選んだエフェクトによって、表示される調整項目が変わります。

設定名	いつ表示されるか	内容
エフェクトの色	軌跡・きらめき・発光・波紋・吸着のとき	エフェクトの色です（初期値は黒 `#000000`）。
軌跡・粒子の量	軌跡・虹色の軌跡・きらめきのとき	3〜20 の範囲で調整します（初期値は 8）。数が大きいほど尾が長く、粒が多くなります。
まわりの暗さ	スポットライトのとき	カーソルのまわり以外をどれだけ暗くするかです。20〜90% の範囲で 5% 刻みに調整します（初期値は 60%）。

軌跡の量は、控えめにしたいなら 3〜5、はっきり見せたいなら 12 以上が目安です。 商品写真が多いページでは、量を抑えたほうが商品が見やすくなります。

スポットライトの「まわりの暗さ」は、20% だとうっすらと影が落ちる程度、90% だとほぼ真っ暗になってカーソルの周囲しか見えません。商品を探してもらうページでは 30〜50%、1 点を見せるページでは 70% 以上が目安です。

エフェクトの色と軌跡・粒子の量の設定

カーソルが変わらないときは

考えられる原因は主に 4 つです。

パソコンで見ていない — このアプリはパソコン（マウスがある環境）でのみ動きます。スマートフォンやタブレットでは何も起きません。
アプリ埋め込みが有効になっていない — アプリの管理画面に「まだ有効になっていません」と表示されていないか確認してください。表示されている場合は、そこからテーマエディタを開いて有効にします。
テーマを変えた — 設定はテーマごとに保存されます。テーマを複製・切り替えた場合は、新しいテーマで設定し直してください。
保存していない — テーマエディタで設定を変えたあと、右上の「保存する」を押したか確認してください。