カスタムカーソルとは？

カスタムカーソルは、ブラウザのデフォルトの矢印またはポインターアイコンを置き換えるユーザー定義のマウスポインターです。ウェブサイトとアプリケーションは、ブランディングを強化したり、ゲームやクリエイティブ体験への没入感を向上させたり、単にインターフェースにユニークなビジュアルタッチを追加したりするためにカスタムカーソルを使用します。カスタムカーソルは通常、.cur、.png、.svg などの画像ファイルを指す url() 値を持つ cursor プロパティを使用して CSS で定義されます。

ウェブブラウザは、複数のカーソルファイル形式をネイティブでサポートしています。.cur 形式は Windows カーソルの古典的な形式で、.ani はアニメーションサポートを追加し、.png と .svg はすべてのプラットフォームで機能する最新の解像度非依存の代替手段を提供します。

ツールの説明

Custom Cursor Tester を使用すると、任意のカーソルファイルをアップロードして、ブラウザでどのように見え、動作するかを即座にプレビューできます。アップロード後、カーソルは専用のテストエリア（チェッカーボード模様のビューポートとボタン）内のデフォルトポインターを置き換えるため、CSS を1行も書かずに自由空間での移動とホバー動作の両方を評価できます。

サポートされている形式

形式 説明
.cur Windows カーソル形式、広くサポート
.ani アニメーション Windows カーソル
.png ラスター画像、高品質カーソルに最適
.svg スケーラブルベクター画像、任意のサイズで鮮明
.ico Windows アイコン形式、カーソルとしても使用可能

機能

  • 即座のプレビュー: ファイルがアップロードされるとすぐにカーソルがライブで適用されます。ページの再読み込みは不要です
  • インタラクティブなテストエリア: チェッカーボード模様のビューポートは、ニュートラルな背景上にカーソルを表示して、明確な可視性を実現します
  • ボタンテストターゲット: テストエリア内のボタンを使用して、インタラクティブ要素でのカーソル動作を検証できます
  • 一貫したカーソル継承: ボタンはカスタムカーソルを継承し、ブラウザのデフォルトに戻りません
  • クライアント側のみ: ファイルはブラウザで直接読み込まれ、サーバーにアップロードされることはありません

ユースケース

  • カーソルデザイナー: 新しく作成した .cur または .png カーソルファイルがリリース前にどのように見えるかを確認します
  • ウェブ開発者: cursor: url(...) プロパティで CSS に統合する前に、カーソルアセットを素早くテストします
  • ゲームおよびクリエイティブ開発者: インタラクティブ UI コンテキストでカスタムポインターの感覚と可視性を確認します

仕組み

ファイルをアップロードすると、ツールはブラウザの URL.createObjectURL() API を使用してそのオブジェクト URL を作成し、テストエリアに CSS cursor スタイルとして注入します。これは、スタイルシートに cursor: url(your-file.cur), auto と記述することと同等です。フォールバック auto により、ファイルを読み込めない場合やパースできない場合、ブラウザはデフォルトカーソルを使用します。

ヒント

  • .png カーソルの場合、ブラウザはデフォルトでホットスポットとして左上隅（0 0）を使用します。カーソルのアクティブポイントが別の場所（例えば、鉛筆の先端）にある場合は、テスト後に CSS でこれを調整する必要があります
  • アニメーション .ani カーソルは、それをサポートするブラウザ（主に Chromium ベース）で自動的に再生されます
  • SVG カーソルは、ほとんどのブラウザでカーソルとして正しくレンダリングされるために小さくする必要があります（通常は 128×128 px 未満）