ローディングスピナーGIFをブラウザで作成
このページは、くるくる回るローディングスピナー(読み込み中アニメ)のGIFを無料で作れるツールです。円弧・ドット・バーの3スタイルから選び、色・太さ・回転速度を調整して、透過GIFとして書き出せます。登録・インストールは不要で、画像はすべてブラウザ内で生成されます(サーバーには何も送信されません)。
使い方
- スタイルを選ぶ — 「円弧」はモダンなマテリアルデザイン風、「ドット」はやわらかい印象、「バー」はiOS風の定番スピナーです。
- 色と太さを調整 — 貼り先のテーマカラー(コーポレートカラーやスライドのアクセント色)に合わせると馴染みます。
- 速さを調整 — 1周0.8〜1.5秒程度が「読み込み中」として自然に見える速度です。
- フチ合わせ色を設定 — 貼り先の背景色(白背景なら白)を指定します。GIFの透明は2値のため、フチのなめらかな部分はこの色と混ぜて焼き込まれます。
- GIF書き出し —
spinner.gifがダウンロードされます。1周でちょうどループする継ぎ目のないGIFになります。
どんな場面で使える?
- スライドのデモ・モックアップ — 「ここで読み込みが走る」という画面遷移の説明に。Googleスライドでは挿入→画像でループ再生されます。
- アプリ・Webのデザインカンプ — FigmaやPowerPointで作る画面モックに読み込み中状態を再現できます。
- デモ動画・チュートリアル動画 — 編集ソフトに画像として重ねるだけで「処理中」の演出になります。
- NotionやWebページ — 「準備中」「工事中」セクションのアクセントに。
実装用ではなく「見せる用」です — 実際のWebサイトのローディング表示にはCSSアニメーション(
@keyframes)の方が軽量で高画質です。GIFが向いているのは、スライド・ドキュメント・動画などCSSが使えない場所で読み込み表現を見せたいときです。
よくある質問
- ループの継ぎ目が気になりませんか?
- 書き出されるGIFはちょうど1周分のフレームで構成されるため、継ぎ目なく無限ループします。
- 背景を完全に透明にできますか?
- GIFの透明は「透明か不透明か」の2値です。フチ合わせ色を貼り先の背景色に合わせれば、実用上フチは見えなくなります。仕組みは透過GIFの「白いフチ」はなぜ出る?で詳しく解説しています。
- 商用利用できますか?
- 作成したGIFは自由に使えます。資料・アプリ・動画など、商用・非商用を問わず利用でき、クレジット表記も不要です。
- もっと大きいサイズで書き出せますか?
- 書き出しサイズは最大600pxまで指定できます。スライドで使う場合は120〜200px程度が扱いやすいサイズです。