Shopify にカスタムカーソルを設置できるアプリ4選を紹介！

カーソルを変えると、売上は上がるのでしょうか。

正直に答えると、カーソルそのものが直接コンバージョンを押し上げる、という話ではありません。ボタンの色を変えるような直接的な効果を期待して導入すると、期待外れになります。

では何のために入れるのか。ブランドの一貫性です。ロゴを整え、配色を決め、フォントを選び、写真のトーンをそろえたストアで、カーソルだけが Windows の白い矢印か、Mac の黒い矢印のまま。お客様がストアに来て最初に動かすもので、最後まで画面のどこかに映り続けているものが、唯一ブランドの外側にある。その状態を埋めるのがカスタムカーソルです。

そして、ここからが本題です。このカテゴリのアプリは、機能表を並べても差が見えません。 どれも「デザインを選べる」「画像を使える」「色を変えられる」と書いてあります。差が出るのは、機能表に書かれていない部分です。

この記事では、カスタムカーソルアプリを選ぶときに見るべき 5 つの観点を、それぞれなぜ重要なのかという理由とともに掘り下げます。アプリの紹介は、その観点への当てはめとして後半に置きます。

観点1：表示速度に影響するかどうか（＝どちらの方式で動いているか）

最初に見るべきはここです。カーソルの実現方式には 2 つあり、表示速度への影響がまったく違います。

CSS の cursor: url() で描く方式は、OS がカーソルを描きます。JavaScript は動きません。表示速度への影響はほぼゼロです。

JavaScript で疑似カーソルを描く方式は、標準のカーソルを消して、マウスに追従する要素を毎フレーム描画します。動くカーソルや軌跡エフェクトを出せるのはこちらだけですが、毎フレーム処理が走る分だけ負荷がかかります。

なぜこれが重要かというと、Shopify App Store にはストアフロントの Lighthouse スコアを 10 点を超えて下げるアプリは掲載できないという条件があるからです。これは任意の認定ではなく、掲載そのものの条件です。エフェクトを常時オンにする設計のアプリは、この条件に対して不利な位置にいます。

そして、あなたのストアにとっても同じ問題が起こります。商品ページの表示が 1 秒遅れれば、その分だけ離脱が増えます。カーソルの演出でその損失を上回れるかは、慎重に判断すべきです。

見るべきポイント：エフェクトを使わない状態でも JavaScript が動く設計か、それともエフェクトを有効にしたときだけ切り替わる設計か。後者なら、演出が不要なストアは影響ゼロで使えます。

観点2：画像サイズの壁を店に押し付けていないか

2 つ目は、外からは絶対に見えない観点です。

カーソル画像が 128×128 ピクセルを超えると、ブラウザは黙って無視して既定のカーソルに戻します。 エラーも警告も出ません。さらに Safari は厳しく、16 / 20 / 32 / 64 など特定のサイズ以外を無視します。48px の画像を指定すると、Chrome では出て Safari では出ない、という差が生まれます。

これがなぜ観点になるかというと、多くのアプリはこの壁を説明していないからです。「画像をアップロードできます」とは書いてあっても、「大きすぎると表示されません」とは書かれていません。ロゴをそのままアップロードして、カーソルが変わらず、原因が分からないまま解約する——という流れが実際に起こり得ます。

見るべきポイントは 2 つあります。

サイズの選択肢が固定値になっているか。 「16px / 20px / 32px / 64px」のように選択式になっていたら、それは手抜きではなく、ブラウザが確実に表示できるサイズだけを選ばせているということです。スライダーで自由に px を指定できるアプリは自由度が高そうに見えますが、環境によってカーソルが消えるリスクを店側に押し付けています。

大きな画像を自動で縮小してくれるか。 Shopify には画像を CDN 側でリサイズする仕組みがあるので、アプリ側は幅と高さを指定するだけで確実に収められます。ここを実装しているアプリなら、店側は画像サイズを一切気にせずに済みます。

観点3：入力欄とアクセシビリティの後始末ができているか

3 つ目は、JavaScript 方式のアプリだけに関わる観点です。ただし、エフェクトを使いたいなら必ず JavaScript 方式になるので、実質的にほとんどのケースで関係します。

標準のカーソルを消して自分で描くと、ブラウザが面倒を見てくれていたことがすべてアプリの責任になります。具体的には次の点です。

疑似カーソルの要素がクリックを吸ってしまう問題。 対策をしないと、カーソルの下にあるボタンやリンクが押せなくなります。カーソルは動くのに何も押せない、という状態です。

入力欄で I ビームが消える問題。 テキスト入力欄の上では標準のカーソル（文字入力用の縦棒）に戻す必要があります。これがないと、検索窓やお問い合わせフォームでどこを打っているか分からなくなります。

動きに敏感な方への配慮。 OS に「視差効果を減らす」という設定があり、これを有効にしている方は動く演出で体調を崩すことがあります。この設定を検出したらエフェクトを停止するのが、最低限の配慮です。

タッチ環境での無駄な処理。 スマートフォンにはカーソルがありません。それでも処理が回り続けると、バッテリーを消費するだけです。

これらは外から確認する方法がありません。無料期間中に、次の 3 つを試すのが現実的です。検索窓に文字を打ってみる。カートに追加ボタンを押してみる。スマートフォンで開いてみる。この 3 つで大半の問題は見つかります。

観点4：テーマを切り替えたときに設定が消えることを知らせているか

4 つ目は、運用に効いてくる観点です。

この種のアプリの設定は、テーマの中に保存されます。アプリ側のデータベースではなく、テーマの設定ファイルに書き込まれる仕組みです。この方式には利点があります。サーバーへの問い合わせが不要なので速く、Shopify に追加の権限を要求せず、画像アップロードもテーマエディタの標準機能をそのまま使えます。

代わりに、テーマを複製したり別のテーマに切り替えたりすると、設定は引き継がれません。カーソルが既定に戻ります。しかもエラーは出ないので、「いつの間にかカーソルが元に戻っている」という状態になり、原因に辿り着けません。

見るべきポイント：この挙動を管理画面で明示しているか。さらに、公開中のテーマで有効になっているかを判定して表示してくれるか。ここまでやってくれるアプリなら、テーマを変えたときに気づけます。

テーマの入れ替えを頻繁に行うストア（季節ごとにテーマを変える、A/B テストをする）では、この観点の重みが上がります。

観点5：日本語で設定できるか

5 つ目は、実務的な観点です。

このカテゴリの主要アプリを調べると、6 本すべてが英語のみでした。日本語の管理画面を持つものは 1 つもありません。

「カーソルの設定くらい英語でもできる」と思われるかもしれませんが、実際に触ってみると引っかかる場所があります。エフェクトの名前です。trail・glow・ripple・magnetic・spotlight。単語の意味は分かっても、それが画面上でどう見えるかは想像しづらいものです。1 つずつ試して確かめることになります。

さらに、テーマエディタに出る設定ラベルも英語のままになります。テーマエディタは店のスタッフが日常的に触る画面なので、そこに英語の項目が混ざると運用上のノイズになります。

サポートの言語も同様です。不具合が起きたとき、英語でやり取りできるかどうかで解決までの時間が変わります。

見るべきポイント：管理画面だけでなく、テーマエディタの設定ラベルまで日本語化されているか。この 2 つは別のファイルで管理されているため、片方だけ対応しているケースがあります。

5 つの観点で選ぶとどうなるか

ここからは、実際のアプリを 5 つの観点に当てはめていきます。

シンプルカスタムマウスカーソル｜お手軽ポインターカスタマイズ ☆ 迷ったらこれ

ストアのマウスカーソルを、図形・絵文字・自社画像に差し替えられるアプリ。

特徴・機能

• 7 種類の組み込み図形（丸・リング・小さな点・矢印・十字・ハート・星）
• 絵文字を 1 文字入力してカーソルにできる
• ロゴやキャラクター画像をアップロードできる
• カーソルの色を指定できる（矢印を選んだときは縁の色も）
• 大きさは 16px / 20px / 32px / 64px から選ぶ
• 8 種類のエフェクト（軌跡・発光・波紋・虹色の軌跡・きらめき・吸着・スポットライト・反転）
• エフェクトの色、軌跡・粒子の量（3〜20）、スポットライトのまわりの暗さ（20〜90%）を調整できる
• 既定は CSS で動き、エフェクトを有効にしたときだけ JavaScript に切り替わる
• ストア全体のすべてのページに一括適用
• 公開中のテーマで有効になっているかを管理画面で判定・表示
• 管理画面とテーマエディタの設定ラベルが 20 言語対応

5 つの観点への当てはめを順に見ていきます。

観点1（表示速度）：既定は CSS の cursor: url() で動きます。JavaScript は動きません。エフェクトを有効にしたときだけ疑似カーソルに切り替わる二段構えの設計です。エフェクトの設定欄には「エフェクトを有効にすると、動きのある演出が使えるようになります。そのぶんストアの表示速度にわずかに影響します。演出が不要な場合は無効のままにしてください」という説明が常設されています。演出が要らないストアは、表示速度への影響をほぼゼロにしたまま使えます。 これは 5 つの観点の中で最も重要な部分で、ここを設計の起点にしているアプリは多くありません。

観点2（サイズの壁）：大きさの選択肢は 16px / 20px / 32px / 64px の 4 つに限定されています。設定画面には「ブラウザが確実に表示できる大きさだけを選べるようにしています」という説明が出ます。Safari が特定サイズ以外を無視する挙動を踏まえた選択肢です。画像は大きなものを選んでも、カーソルとして表示できるサイズへ自動的に縮小されるため、128×128 の壁を店側が意識する必要がありません。設定の説明には「背景が透明な PNG をおすすめします」という案内もあります。背景が白い画像だと、暗い背景のページで白い四角が付いてくるためです。

観点3（後始末）：エフェクトを有効にすると JavaScript 方式に切り替わりますが、動きに敏感な方への配慮として、OS の「視差効果を減らす」設定を検出した場合はエフェクトが停止します。タッチ環境では処理自体が動きません。テーマエディタの設定パネルの先頭には「マウスカーソルはパソコンにしか存在しないため、この機能はパソコンで見ているお客様にだけ表示されます。スマートフォンやタブレットでは何も起きません（不具合ではありません）」という説明が常設されています。仕様上の限界を事前に明示しておくことで、期待違いによる不満を防ぐ設計です。

観点4（テーマ切替）：設定はテーマの中に保存されるため、テーマを複製・切り替えると引き継がれません。この点について、アプリの管理画面は公開中のテーマでカスタムカーソルが有効になっているかを判定して表示します。有効なら「カスタムカーソルは公開中のテーマで有効です」、無効なら「カスタムカーソルはまだ有効になっていません」と表示され、後者にはテーマエディタへのリンクが付きます。テーマを変えたら設定し直しが必要であることも案内されています。

観点5（日本語）：管理画面が 20 言語に対応しているのに加えて、テーマエディタに出る設定ラベルも 20 言語に対応しています。エフェクトの名前も「軌跡（カーソルを追いかける）」「発光（カーソルが光る）」「波紋（クリックで広がる）」「吸着（リンクに寄る）」のように、動きが分かる日本語になっています。英語の magnetic を見て何が起きるか想像するより、明らかに速く選べます。

運用のコツも挙げておきます。まず、カーソルの種類を選ぶと、関係のない設定項目は自動的に隠れます。「図形から選ぶ」を選べば図形と色の項目だけが、「絵文字を使う」を選べば絵文字の入力欄だけが表示されます。設定画面で迷う要素が構造的に減らされています。

図形の選び方には目安があります。ミニマルに見せたいなら「小さな点」か「リング」をブランドカラーで。遊び心を出したいなら「ハート」や「星」。操作しやすさを優先するなら「矢印」で、縁の色を背景と反対の色にしておくとどんなページでも見失いません。細かい図形（点・十字）は小さめ、画像やハート・星は大きめにすると意図した見え方になります。

絵文字は季節の切り替えに最も向いています。夏は 🌻、冬は ❄️、セール期間は 🔥。1 文字入れ替えるだけなので、キャンペーンの準備コストがほぼゼロです。ただし絵文字の見た目はお客様のパソコンの種類（Windows・Mac など）で少し変わるため、どの環境でも同じ見た目にしたい場合は画像を選ぶことになります。

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

数値の目安も挙げておきます。軌跡の量は、控えめにしたいなら 3〜5、はっきり見せたいなら 12 以上。商品写真が多いページでは抑えたほうが商品が見やすくなります。スポットライトの「まわりの暗さ」は、20% だとうっすら影が落ちる程度、90% だとほぼ真っ暗になります。商品を探してもらうページでは 30〜50%、1 点を見せるページでは 70% 以上が目安です。

価格設定

• Basic Plan $1.99/月（年額 $19.99）
• 7 日間の無料体験あり
• 年払いで実質 2 ヶ月分無料

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

ご利用ガイドを読む

AIO Cursor

月額 $1（年額 $5）という、この分野で最も安価な有料プランを持つアプリ。

特徴・機能

• 組み込みプリセット図形
• プレビュー機能
• 無料プランあり

価格が最大の特徴です。月額 $1、年額 $5 という設定で、この分野の相場（$1〜$4/月）の下限に位置します。シンプルカスタムマウスカーソルとの違いは、機能量と言語です。 AIO Cursor はレビューが 0 件のため実績の判断材料が少なく、管理画面も英語のみです。とにかく安く試したいなら AIO Cursor、日本語で設定してエフェクトまで使いたいならシンプルカスタムマウスカーソル、という選び分けになります。年額 $5 と $19.99 の差をどう見るかは、日本語対応と 8 種類のエフェクトに $15/年の価値を認めるかどうかです。

価格設定

• 無料プランあり
• 有料プラン $1/月（年額 $5）

Kaching Custom Cursor

100 種類以上のデザインと画像アップロードを完全無料で提供するアプリ。

特徴・機能

• 100 種類以上の組み込みデザイン
• 画像アップロード（PNG）
• プレビュー機能
• 完全無料

も完全無料で、デザインも画像アップロードも使えます。まず試すならここから、というのが率直なところです。 観点1（表示速度）については、動くエフェクトを持たないぶん軽い構成と考えられます。シンプルカスタムマウスカーソルとの違いは、言語とエフェクト、そして対応画像形式です。 Kaching は管理画面が英語のみで、軌跡などの動くエフェクトは持ちません。レビューでは「SVG をアップロードできない（PNG のみ）」という指摘も出ています。日本語で設定したい、動くエフェクトを使いたい、という要件がないなら、無料の Kaching で十分に足ります。

価格設定

• 完全無料

Curse Your Cursor

ページ別の出し分けに対応した、キャラクターカーソル向けのアプリ。

特徴・機能

• 画像アップロード
• アニメーション
• 軌跡エフェクト
• ホバー時の変化
• ページ別の出し分け（上位プラン）
• 無料プランはキャラクター 1 体まで

ページ別の出し分けができるのが、この分野では珍しい特徴です。上位プランで「トップページだけ別のカーソルにする」「商品ページでは通常のカーソルに戻す」といった設定ができます。シンプルカスタムマウスカーソルはストア全体に一括適用する設計なので、ここが明確な役割の違いです。 商品ページでは操作性を優先して通常のカーソルに戻したい、といった要件があるなら Curse Your Cursor が候補になります。一括適用で足りるなら、価格（$1.99 対 $4）と日本語対応で選ぶことになります。

価格設定

• 無料プランあり（キャラクター 1 体まで）
• 有料プラン $4/月

自分で実装する：JavaScript の疑似カーソルを作る

エフェクト付きのカーソルを自作する場合、何を書くことになるのかを見ておきます。観点3 で挙げた「後始末」が具体的に何を指すのかが分かります。

ステップ1：標準カーソルを消して、疑似カーソルを置く

/* assets/fake-cursor.css */
@media (pointer: fine) {
  /* マウスがある環境だけ適用する。タッチ端末には効かせない */
  body { cursor: none; }

  .fake-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;  /* 中心をマウス位置に合わせる */
    border-radius: 50%;
    background: #5b4be0;
    pointer-events: none;      /* ← これが無いとクリックできなくなる */
    z-index: 2147483647;
    will-change: transform;
  }
}

@media (pointer: fine) で囲んでいるのがポイントです。マウスなど精密なポインタがある環境だけに適用され、タッチ端末には効きません。これがないと、スマートフォンで cursor: none が効いてしまう環境が出てきます。

pointer-events: none は必須です。これがないと疑似カーソルの要素自体がマウスイベントを受け取り、その下にあるボタンやリンクがクリックできなくなります。カーソルは動くのに何も押せない、という最悪の状態になります。

margin でサイズの半分だけ左上にずらしているのは、要素の中心をマウス位置に合わせるためです。ここを忘れると、カーソルが右下にずれた位置に描かれます。

ステップ2：マウス位置を追従させる

// assets/fake-cursor.js
(function () {
  // タッチ環境では何もしない
  if (!window.matchMedia('(pointer: fine)').matches) return;

  // 動きを減らす設定が有効なら何もしない
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  const cursor = document.createElement('div');
  cursor.className = 'fake-cursor';
  document.body.appendChild(cursor);

  let targetX = 0, targetY = 0;
  let currentX = 0, currentY = 0;

  document.addEventListener('mousemove', function (e) {
    targetX = e.clientX;
    targetY = e.clientY;
  }, { passive: true });

  function render() {
    // 少し遅れて追いつく動き（イージング）。1 なら遅延なし
    currentX += (targetX - currentX) * 0.2;
    currentY += (targetY - currentY) * 0.2;

    // top/left ではなく transform を使う（再レイアウトを避ける）
    cursor.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
})();

3 つの後始末がここに入っています。

(pointer: fine) のチェックで、タッチ環境では処理自体を開始しません。監視も描画ループも動かないので、スマートフォンのバッテリーを無駄に消費しません。

prefers-reduced-motion のチェックで、OS の「視差効果を減らす」設定を尊重します。この設定を有効にしている方は動く演出で体調を崩すことがあるため、そもそも疑似カーソルを作らない判断にしています。

位置の更新に transform を使っているのが 3 つ目です。top / left を書き換えると毎フレーム再レイアウトが走ってカクつきます。translate3d なら GPU 側で処理され、滑らかに動きます。will-change: transform を CSS で指定しているのも同じ目的です。

{ passive: true } は、mousemove の監視がスクロール性能に影響しないようにするための指定です。

ステップ3：入力欄では標準カーソルに戻す

ここが忘れられやすい部分です。

const TEXT_INPUT_SELECTOR =
  'input[type="text"], input[type="email"], input[type="search"], ' +
  'input[type="tel"], input[type="url"], input[type="password"], ' +
  'input[type="number"], textarea, [contenteditable="true"]';

document.addEventListener('mouseover', function (e) {
  const isTextInput = e.target.closest(TEXT_INPUT_SELECTOR);
  if (isTextInput) {
    cursor.style.opacity = '0';        // 疑似カーソルを隠す
    document.body.style.cursor = 'auto'; // 標準のカーソルに戻す
  }
}, { passive: true });

document.addEventListener('mouseout', function (e) {
  const isTextInput = e.target.closest(TEXT_INPUT_SELECTOR);
  if (isTextInput) {
    cursor.style.opacity = '1';
    document.body.style.cursor = 'none';
  }
}, { passive: true });

これがないと、検索窓やお問い合わせフォームで I ビーム（文字入力用の縦棒）が消えます。どこにカーソルがあるか分からないまま文字を打つことになり、実害が大きい部分です。

セレクタに input の各 type を列挙しているのは、input[type="checkbox"] や input[type="radio"] まで含めてしまうと、チェックボックスの上でだけカーソルが標準に戻る、という不自然な挙動になるためです。

ステップ4：軌跡エフェクトを足す

ここまでできたら、エフェクトを追加できます。軌跡（トレイル）の例です。

const TRAIL_LENGTH = 8;   // 尾の長さ。3〜20 程度が実用的
const trail = [];

for (let i = 0; i < TRAIL_LENGTH; i++) {
  const dot = document.createElement('div');
  dot.className = 'fake-cursor-trail';
  dot.style.opacity = String(1 - i / TRAIL_LENGTH); // 後ろほど薄く
  document.body.appendChild(dot);
  trail.push({ el: dot, x: 0, y: 0 });
}

function renderTrail() {
  let prevX = currentX;
  let prevY = currentY;

  for (const dot of trail) {
    // 前の点に少しずつ近づく = 尾のように付いてくる
    dot.x += (prevX - dot.x) * 0.35;
    dot.y += (prevY - dot.y) * 0.35;
    dot.el.style.transform = `translate3d(${dot.x}px, ${dot.y}px, 0)`;
    prevX = dot.x;
    prevY = dot.y;
  }
}

各点が「1 つ前の点」を追いかける構造にすることで、尾を引く動きになります。追従係数（0.35）を小さくすると尾が長く伸び、大きくすると短くなります。

ただし、尾の長さの分だけ DOM 要素が増え、毎フレームその全部を動かします。TRAIL_LENGTH を 50 にすると、1 秒間に 60 回 × 50 要素の transform 更新が走ります。実用的な上限は 20 程度、というのがここから出てくる数字です。

自作したあとに待っている保守

ここまでで、後始末を含めた疑似カーソルは動きます。ただし運用に載せるとなると、次が残ります。

設定を外から変えられません。 色やサイズを変えるたびにコードを編集することになります。テーマエディタから設定できるようにするには、Liquid のセクション化と schema の定義が必要です。

テーマの更新で消えます。 テーマのファイルを直接編集した場合、テーマをアップデートすると変更が失われます。アプリ（テーマ拡張）として実装すればこの問題は起きませんが、それは Shopify アプリを 1 本作るということです。

全画面表示時の挙動が残ります。 macOS の全画面表示では cursor: none と Fullscreen API の挙動が衝突することがあり、無効化する処理が必要です。

「カーソルを変えたい」という要件に対して、ここまでのコードと保守を持つ価値があるかどうか。月額 $2 前後という相場を考えると、独自の演出をどうしても作りたい場合を除いて、既製品を使うほうが合理的です。

まとめ

カスタムカーソルアプリを選ぶときに見るべき 5 つの観点は、次のとおりです。

観点1、表示速度。エフェクトを使わないときも JavaScript が動く設計か、必要なときだけ切り替わる設計か。

観点2、画像サイズの壁。128×128 を超えると黙って無視されること、Safari が特定サイズ以外を無視することへの対応があるか。

観点3、入力欄とアクセシビリティの後始末。クリックできるか、文字が打てるか、スマートフォンで無駄な処理が走らないか。

観点4、テーマ切替時の消失。設定がテーマに保存されることを知らせ、有効かどうかを判定してくれるか。

観点5、日本語対応。管理画面だけでなく、テーマエディタの設定ラベルまで日本語か。

完全無料で高評価のアプリもあるため、まず無料のもので試して、上の観点で不足を感じたら有料を検討するという順序が現実的です。特に観点1 と観点3 は、無料期間中に自分のストアで実際に触ってみないと分かりません。

参考記事

Shopify でカスタムカーソルを設置できるアプリ5選！仕組みと表示速度も解説