オリジナル【マウスカーソル】の作り方と設定

ドット絵の可愛いオリジナルカーソルを作って設定してみましょう！静止マウスカーソルとアニメーションマウスカーソルの作り方もご紹介します（Windows）☆

自分だけのオリジナルマウスカーソルにすると、バックグラウンドで作業中のときやアプリが固まって待ち状態のときも可愛くて許せます☆

今回はお絵描きアプリProcreateを使ってドット絵を描きます！カーソルに変換するにはRWCursorEditorを使用します！

Windowsを対象としたカーソルを作る記事だよ！

うーたみ

★BOOTHとココナラで出来合いのマウスカーソル販売を開始しました★

クリックしてBOOTHへGO！
クリックしてココナラへGO！

・マウスポインターのファイル形式

マウスポインターのファイル形式（拡張子）は「.cur」です。アニメーションマウスポインターは「.ani」です。

この2つはWindowsで使われるカーソル形式のため、macOSの標準機能ではそのまま設定することができません。ただし、外部ツールを使ったりファイルを変換したりすることで、Macでもオリジナルカーソルを使う方法はあります。こちらはまた今度、実際に試しながら記事にしたいと思います！

ゴリたみ

ドット絵を描いて「.cur/.ani」で保存すればいいってことね？

そうだよ！その拡張子に変換するために「RWCursorEditor」を使うよ！

うーたみ

・マウスカーソル作成手順

①マウスカーソルを描いて背景透過で書き出す（PNG）
②RWCursorEditorをダウンロードする
③RWCursorEditorから.cur/.aniに変換する
④PCに設定する（Windows）

以上がざっくりとしたオリジナルマウスカーソルの作り方です。

ゴリたみ

なんだか簡単そうだね！

カーソルの種類の数だけドット絵を用意しないといけないけど、難しくないから一緒に作ってみよう！

うーたみ

・マウスカーソルの種類

１.通常の選択
２.ヘルプの選択
３.バックグラウンドで作業中
４.待ち状態
５.領域選択
６.テキスト選択
７.手書き
８.利用不可
９.上下に拡大/縮小
10.左右の拡大/縮小
11.斜めに拡大/縮小１
12.斜めに拡大/縮小２
13.移動
14.代替選択
15.リンクの選択

ゴリたみ

15種類だけ？

「場所の選択」と「人の選択」もあるけど、使う機会が少ないから今回は作らなかったよ！「手書き」もなかなか出てこないけどね。

うーたみ

・Step1：マウスカーソルを描く

今回は32pxのドット絵をお絵描きアプリProcreateで描きました！

キャンバスサイズは32×32pxにします。dpiは72です。カラープロファイルはRGBです。１カーソルにつき1キャンバスを使用します。

1キャンバスに1カーソルを描きます。カーソルのデザインや描き方は自由です！

ドット絵用のブラシの作成方法と描き方はこちらの記事をご覧ください。

ドット絵の描き方【プロクリエイト】

ピクセルアートとも呼ばれるドット絵とは1pixel(ドット)で描かれる絵です。ドット絵を描くブラシの作成方法、ぼやけさせずドット絵を保存する方法をご紹介します。ドット絵を描くときのキャンバスサイズは32×32px・64×64px・128×128pxがおすすめです。

カーソルが描けたら、画像を書き出します。背景は必要ないので、「背景色」のチェックを外して透過させます。

「アクション」＞「共有」から「PNG」を選択して、PCと共有できるフォルダーに書き出します。

わしはOneDriveに書き出しました。アニメーションカーソルもレイヤーの数だけPNG形式で書き出します。後で分かりやすいように、アニメーションカーソル用の画像はフォルダーでまとめてます。

ゴリたみ

アニメーションカーソルはどうやって描くの？

アニメーションを作る時と同じで1つのキャンバスに複数のレイヤーで作成するよ！この後説明するね☆

うーたみ

アニメーションカーソルの「描き方」と「書き出し方」

アニメーションマウスカーソルは6種類作成しました！左から順に「通常選択」「テキスト選択」「リンクの選択」「バックグランドで作業中」「手書き」「待ち状態」です。

「アクション」＞「キャンバス」＞「アニメーションアシスト」をONにしてアニメーションを作成します。レイヤーごとに動きの違う絵を描いたら「再生」をタップして動作を確認します。

アニメーションの速度は画面下のパネルにある「設定」から「フレーム/秒」で設定することができます。

今回はGIFのようにループ再生するアニメーションなので、「1秒間に何フレーム！」と厳密に決めず、ちょうどいい速度になるように感覚的に作ってもOKです！

ただし、Procreateで作成したアニメーションと同じ速度を再現したい場合は、60の約数（1、2、3、4、5、6、10、12、15、20、30）でProcreateのフレーム/秒を設定しておくと便利です。

Windowsのアニメーションカーソル（ANI）は、フレームの表示時間を1/60秒単位で扱えるため、60の約数なら1フレームの表示時間を整数で割り当てることができ、RealWorld Cursor Editor側でも同じ速度に設定できます。

アニメーション速度を揃える方法は「フレーム数をProcreateと揃える方法（アニメーション速度）」セクションで説明するね！

うーたみ

【アニメーションの基本】についてはこちらの記事をご覧ください。

【Procreate】でアニメーションを作る基本！初めに知っておくと作成が楽になる！

Procreateでのアニメーション作成の流れは、ざっくりと「アニメーションアシストをONにする」「フレームを追加する」「絵を描く」といった感じです。フレームの追加方法、背景の設定、動く速度がわかれば描いた絵を動かすことができます。パラパラ漫画と同じで、複数のフレームに絵をかくことで絵が動いて見えます。

アニメーションができたらレイヤーごとにPNGで書き出します。5レイヤーあるアニメーションなら5枚の静止画として書き出します。

ゴリたみ

GIFじゃなくて静止画（PNG）として書き出すんだね！

そう！1レイヤーずつ書き出す場合は、書き出すレイヤー以外を非表示にしてから書き出してね！

うーたみ

一度に複数のレイヤーを書き出すには、全てのレイヤーを表示させて「アクション」＞「共有」＞「PNGファイル」から書き出します。

全てのアニメーションカーソルをPNGで書き出せたら、次はいよいよ「RWCursorEditor」を使って「.cur」と「.ani」に変換するよ！

うーたみ

・Step2：RWCursorEditor：ダウンロードする

まずはRWCursorEditorをダウンロードするをクリックしてダウンロードします。
使っているWindowsが64bitなのでRealWorld Cursor Editor（64bit版）をダウンロードしました。

32bitか64bitか確認するには「Windowsキー」と「X」を押して「システム」をクリックします。「システムの種類」から32bitか64bitかわかります。

RealWorld Cursor Editorをダウンロードをします。画面右上のアイコンをクリックするとダウンロード状況が確認できます。

ダウンロードするとデフォルトではエクスプローラーの「Downloads」に保存されているのでダブルクリックして起動します。

セットアップウィザードが出るので「Next」をクリックします。

ライセンス規約では「I Agree」にチェックを入れて「Next」をクリックします。規約内容は翻訳すると次の通りです。

RealWorld Cursor Editor のエンドユーザー使用許諾契約

これは RealWorld Cursor Editor の EULA であり、お客様と RealWorld Cursor Editor の作者である Vlastimil Miléř および Jan Miléř との間の法的契約です。

次の行為を行うことができます:

ソフトウェアを無料でインストールして使用すること。

次の行為は禁止されています:

RealWorld Cursor Editor を使用して悪事を行うこと。悪事には、人種差別、ソフトウェア特許、過激な宗教または全体主義組織の宣伝、ネットいじめ、スパム、またはネット中立性の危険化が含まれますが、これらに限定されません。

作者が明示的に許可しない限り、RealWorld Cursor Editor を再配布またはバンドルすること。

RealWorld Cursor Editor をレンタル、リース、または貸与すること。

保証、救済、および制限:

作者は、ソフトウェアのエラー、他のソフトウェアとの予期しない競合、またはソフトウェアの不適切な使用によって生じた損害について責任を負いません。

「同意する」を選択し、RealWorld Cursor Editor のいずれかの部分をインストール、コピー、またはその他の方法で使用することにより、お客様は本 EULA の条件に拘束されることに同意するものとします。

チェックを入れると日本語に設定することができるのでチェックを入れてから「Next」をクリックします。

ソフトの保存先を指定する場合は「Browse」をクリックして指定します。指定しない場合は保存先フォルダーが選択された状態になっているので「Next」をクリックします。

インストールする準備ができたので「Next」をクリックしてインストールを開始します。

インストールが完了したら「Close」をクリックします。

・Step3：RWCursorEditorからドット絵を【静止画カーソル(.cur)】に変換

RealWorld Cursor Editorを起動して左のタブから「オンライン」をクリックします。「言語」から「日本語」を選択します。

次に左のタブから「作成①」をクリックして「新規マウスカーソル②」を選択します。

画面右側で「キャンバスサイズ：32,48,64-Win11」「色深度：8bits-256色」「Start with：ラスタレイヤー③」を選択して、最後に「作成④」をクリックします。

「キャンバスサイズ：32,48,64-Win11」を選択すると、32×32px・48×48px・64×64pxの3つの編集領域が作成されます。この3つのサイズは、Windowsのカーソルサイズや表示環境に合わせて、適したサイズで表示するためのものです。

それぞれの編集領域を選択して、同じカーソル画像をドラッグ&ドロップして挿入します。32px・48px・64pxの3つすべてに画像を挿入してください。

わしのドット絵では、64pxを含めるとカーソルサイズ変更時にピクセルが崩れることがあったため、32px・48pxの2サイズで作成したよ！

うーたみ

3つすべてに画像を挿入したら、次にホットスポットを設定します。

ホットスポットとはマウスカーソルのクリックの対象となる部分だよ！

うーたみ

上部にあるメニューバーから「カーソルホットスポット①」機能をクリックします。左上に緑色の点②（ホットスポット）が出てくるのでクリックの対象となる位置を決めます。

32px・48px・64pxはそれぞれ個別にホットスポットを持っているため、3つの編集領域を順番に選択して、それぞれにホットスポットを設定します。

カーソルのサイズが切り替わってもクリックする位置が変わらないように、3つとも同じ位置をホットスポットに設定してください。

「移動」カーソルのホットスポットは十字の中心にあると操作がしやすいので、クリックして十字の中心をホットスポットに設定します。

ホットスポットのテストは画面左側にある「テスト領域」にカーソルを合わせてマウスの左をクリックしたまま移動させると線が書けるのでクリックの位置を確認します。

ホットスポットが設定できたら次はカーソルを保存します。「ファイル①」から「名前を付けて保②」をクリックします。保存する先のフォルダーを指定します。

「ファイル名③」を入力して「ファイルの種類③」に「静止画カーソル」を選択して「OK④」をクリックして保存します。

ゴリたみ

同じようにその他のカーソルもドラッグ&ドロップしてホットスポットを設定して保存するよ！

同じ手順で、すべての静止カーソルを作成して保存していきます。

メニューバーにある「新規作成」をクリックし、「新規マウスカーソル」＞「作成」と進んで、ほかのカーソルも同じように作成・保存します。

ホットスポット位置のサンプル一覧

各カーソルのホットスポット（クリック位置）の一例です。設定する際の参考にしてください。

PC： 画像にカーソルを合わせると拡大表示されます。
スマホ・タブレット： ピンチ操作で画像を拡大してご確認ください。

緑の丸いぽっちがホットスポットだよ！
だいたいはカーソルの先や真ん中に設定しているよ！

うーたみ

・Step4：RWCursorEditorからドット絵を【アニメーションカーソル(.ani)】に変換

アニメーションカーソルは、1フレームにつき1枚のカーソル画像をドラッグ＆ドロップして挿入します。

フレームを追加するときは、画面左下にある「フレームを挿入」アイコンをクリックします。すべての画像を挿入したら、ホットスポットを設定します。

ホットスポットはフレームごとに設定してね！

うーたみ

アニメーションの速度を設定します。上部メニューにある「カーソル」から「アニメーションの速度を変更」をクリックします。

スライダーをドラッグして、ちょうどいい速度に調整したら「OK」をクリックします。

Procreateで作成したアニメーションと同じ速度に揃える必要がなければ、ここで実際の動きを確認しながら、好みの速度に調整するだけでOKです！問題がなければ、このままアニメーションカーソルを書き出します。

ゴリたみ

感覚的にスピードを設定できるからいいね！

Procreateの「フレーム/秒」と揃える方法は「フレーム数をProcreateと揃える方法（アニメーション速度）」セクションで説明するね！

うーたみ

静止カーソルを保存したときと同じように「ファイル」から「名前を付けて保存」をクリックします。保存する先のフォルダーを指定します。「ファイル名」を入力して「ファイルの種類」に「アニメーションカーソル」を選択して「OK」から保存します。

その他のアニメーションカーソルも同じように設定して書き出します。

フレーム/秒をProcreateと揃える方法（アニメーション速度）

上部メニューにある「カーソル」＞「アニメーションの速度を変更」から感覚的に速度を調節できるので簡単ですが、Procreateで作成した速度と揃える方法もご紹介します☆

RealWorld Cursor Editorの「フレーム時間」は、1/60秒を1単位として設定します。Procreateで設定した「フレーム/秒（fps）」に合わせたい場合は、60をProcreateで設定したfpsで割った数字をRealWorld Cursor Editorの「フレーム時間」に入力します。

上記画像のアニメーションはProcreate側で「3フレーム/秒」に設定しているので、60 ÷ 3 ＝ 20となります。そのため、RealWorld Cursor Editorの「フレーム時間」に「20」と入力します。