「ドット絵を動かす方法がわからない」「静止画をレトロな動きに変えにはどうしたらいい？」といった悩みをお持ちではありませんか。
このような編集は専用ソフトを使った知識が必要だと思われていますが、最近ではAIやスマホアプリで初心者でも簡単に作れるようになりました。
本記事では、ドット絵アニメーションの作り方と初心者でも簡単に使えるおすすめツールを画像付きでわかりやすく解説します。
ドット絵アニメーションの作り方を比較！
ドット絵アニメーションを作れる代表的な6種類のアプリを比較した一覧は、以下のとおりです。
| 対応端末 | ドット絵アニメーションを作るための料金 | 広告 | 作り方の特徴 | 難易度 | |
| Gazoulab | スマホタブレットPC | 無料 | なし | 既存画像の挿入とプロンプト入力で作れる | ⭐︎ |
| YouCam Video | スマホタブレット | 年額8,000円（7日間の無料トライアルあり） | あり | テンプレートから既存画像を動かすイメージを選択できる | ⭐︎⭐︎ |
| dotpict | スマホタブレット | 無料 | あり | 多様なブラシを使ってドット絵を作成する | ⭐︎⭐︎ |
| GraphicGale | PC（Windowsのみ） | 無料 | なし | ページ設定をした上でドット絵を作成する | ⭐︎⭐︎⭐︎ |
| DOTDOT | スマホタブレット | 無料 | あり | 一つの画面でドット絵を作成する | ⭐︎ |
| Photoshop | PC | 月額1,180円〜（7日間の無料トライアルあり） | なし | ページとブラシを設定した上でドット絵を作成する | ⭐︎⭐︎⭐︎ |
一口に「ドット絵アニメーション」といっても、既存のドット絵をアニメーションに変換するタイプ、ドット絵を複数作成してフレームを組み合わせるタイプに区分されます。
すでにドット絵の静止画がある場合は「Gazoulab」「YouCam Video」、ゼロからドット絵を作成する場合は「dotpict」「GraphicGale」「DOTDOT」「Photoshop」の利用をご検討ください。
ドット絵アニメーションの作り方6通り
画像をアニメーションに変換する編集は、上級者の技術だと思われがちですが、直感的な仕様になっているアプリやツールがたくさんあります。
ここでは、ドット絵アニメーションの作り方を6通り、画像付きで解説します。
Gazoulab
Gazoulabは、既存の画像を挿入するだけでAIが即座にアニメーション化できるアプリです。直感的な仕様になっているので、既存のドット絵があれば最長60秒であっという間にドット絵アニメーションを作成できます。
特徴
Gazoulabは、サイトにアクセスするだけで、会員登録をしなくてもドット絵アニメーションを作れます。
個人情報を登録したり、アプリやツールをダウンロードしたりする必要がないので、情報漏えいやハッキングなどの心配がありません。
また、既存の画像を挿入してプロンプトを入力するだけでアニメーション化できるため、編集ツールを使ったことがない初心者でも簡単に利用できます。
プロンプトは最大2,000文字まで入力できるため、細かく指示を出すことで、上級者でも精度の高いアニメーションを作成できる点が魅力です。
メリット
- 会員登録・広告なしで無料利用できる
- 直感的な仕様になっているので初心者でも簡単に使える
- 元の画像の解像度や鮮明さが落ちることなくアニメーション化できる
デメリット
- シンプルな仕様なので、ディテールまでこだわったアニメーション化にはプロンプトの工夫が必要で、うまくいかないことがある
Gazoulabでドット絵アニメーションを作る方法
Gazoulabを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
編集画面を開く
まずは、Gazoulabのホームページから「画像生成」→「画像から動画生成」の順にクリックして、編集画面を開いてください。
ステップ2:
アニメーション化したい画像を挿入してプロンプトを入力
編集画面を開いたら、アニメーション化したいドット絵の画像を挿入します。
続いて、必要に応じて2,000文字以内のプロンプトを入力してください。
ここでは「黒猫が森の中を走っている様子」と指示を出していますが、「歩いている」「手を上に挙げている」など具体的な指示を出すことで、精度が高まります。
画像挿入とプロンプト入力が完了したら「動画生成」をクリックしてください。
ステップ3:
完了
ドット絵の画像がアニメーション化されるまでには、最大60秒かかります。
アニメーションの仕上がりに納得したら右上の「ダウンロード」を選択すると、デバイスに動画を保存できます。
処理後
YouCam Video
YouCam Videoは、数あるテンプレートの中から背景や被写体の動かし方を選択することで、簡単に画像をアニメーション化できるアプリです。スマホから手軽に画像を動画に変換したい人におすすめです。
特徴
YouCam Videoは、アプリ上でドット絵の画像をアニメーション化できます。
アプリをインストールすれば、インターネット環境に左右されることなく画像編集ができるので、どこでも作業をしたい人に向いています。
「ハグ」「ダンス」「ランニング」「ズームアウト」など数多くのテンプレートが用意されているのも、簡単にアニメーション化できるポイントです。
なお、YouCam Videoの編集ツールは無料で提供されているものが数多くありますが、画像から動画に変換するためにはクレジットが必要です。
メリット
- プロンプトではなくテンプレートからアニメーションの指示を出せる
- 同時にテキスト入力やエフェクトなどの編集が可能
- オフラインでも利用できる
デメリット
- アプリのインストールが必要でPCやスマホのWebから操作できない
YouCam Videoでドット絵アニメーションを作る方法
YouCam Videoを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
アニメーション化したい画像を挿入
アプリを開いて、画面下「＋」からアニメーション化したいドット絵の画像を挿入してください。
ステップ2:
「動画変換」を選択
メニューバーを右にスクロールして「画像-動画変換」を選択してください。
ステップ3:
クレジットを使って動画生成
複数のテンプレートが用意されているため、どのように被写体や背景を動かしたいかによって、最適なテンプレートを選択してください。
「生成」を選択すると、挿入した画像とテンプレートにあわせて動画が生成されます。
dotpict
dotpictは、スマホ・タブレットから簡単にドット絵アニメーションを作ることができるアプリです。ドット絵に特化したアプリだからこそ、ドット絵が好きな人にとって便利で嬉しい機能が多数搭載されています。
特徴
dotpictは、フレームを組み合わせてアニメーションを作る仕様であり、1枚ずつこだわって編集できます。
また、以下のような「コミュニティ機能」が搭載されているため、ほかのユーザーと交流できます。
- タイムライン：作品を投稿したり、ほかのユーザーの作品を閲覧できたりする
- パレット：ほかのユーザーが使った色パレットを共有・ダウンロードできる
SNS機能が搭載されていると、ドット絵作りのインスピレーションを得たり、ほかのユーザーからのリアクションをもらえたりするので、楽しくアプリを使い続けられます。
また、ドット絵に特化したアプリであり、上級者向けにメッシュペンや縁取りなどの機能、初心者向けにテンプレートが用意されているので、誰でも利用しやすいです。
メリット
- タイムラインからユーザーの作品をみてドット絵作成の参考にできる
- メッシュペン、縁取り、プレビューなどの多機能を無料で使える
- 作成中のものはオートセーブされるので時間をかけてドット絵を完成させられる
デメリット
- アプリのインストールが必要で作品を保存するためには広告が入る
dotpictでドット絵アニメーションを作る方法
dotpictを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
編集画面に切り替え
アプリを開いて画面下「描く」から「新規作成」を選択してください。
有料会員になると、端末に保存されている画像をドット絵に変換することができます。
ステップ2:
アニメーションに設定
続いて、ドット絵アニメーションを作成するのであれば「アニメーション」、静止画を作成するのであれば「キャンバス」を選択して「作成する」をクリックしてください。
このとき、サイズやパレットも自由に変更できます。
ステップ3:
ドット絵を作成
キャンバスの上で鉛筆アイコンをスクロールすることで、塗りつぶすドット箇所を選ぶことができ、画面下「push」をクリックして、ドットを打ってください。
「設定」→「タッチペンモード」を選択すれば、鉛筆アイコンでなぞったマスをまとめてドット打ちできて便利です。
もしも、ドットを打つマスを間違えたときは、消しゴムで削除できます。
ステップ4:
アニメーションのためにフレームを追加
続いて、アニメーションを完成させるためには、2つ目のドット絵を作成します。
画面中央「フレーム＋」をクリックすると、真っ白の画面がでてくるので、先ほどと同じようにマスにドットを打って、ドット絵を作ってください。
「▶︎」をクリックすると、ドット絵のアニメーションをプレビューで確認可能です。
ステップ5:
「設定」を選択
ドット絵アニメーションの作成が完了したら、保存します。
アニメーションを保存するためには、まず「設定」をクリックしてください。
ステップ6:
アニメーションで保存
保存に関するメニューが表示されたら「GIFを保存する」をクリックしてください。
このとき「鉛筆アイコン」をクリックすると名前を変更、「サイズを変更」をクリックするとアニメーションサイズを変更できます。
ステップ7:
端末に保存
続いて、画面下から新たに保存に関するメニューバーが表示されるので「画像を保存」をクリックしてください。
これによって、スマホ端末にドット絵アニメーションが保存されます。
処理後
GraphicsGale
GraphicsGaleは、Windows向けに開発されたドット絵の編集ツールです。
無料の専用ソフトをダウンロードすれば広告なしで、誰でもすぐにドット絵のアニメーション作成に取り掛かれます。
特徴
GraphicsGaleは、WindowsのPCを使って本格的なドット絵を作成できます。
AIやテンプレートを使えば直感的で簡単にドット絵アニメーションを作れますが、細部までこだわり抜くことはできません。
その点において、GraphicsGaleでは、以下のような機能が搭載されているので、こだわりぬいたオリジナリティあふれる作品を作りたいときに役立ちます。
- ズーム：表示倍率を変更できる
- 移動：画像が画面よりも大きいときにスクロールして移動できる
- 円形選択：楕円形でエリアを選択できるので編集がスムーズになる
- 投縄：フリーハンドでエリアを選択できるので編集がスムーズになる
- 連続直線：ドラッグで直線を引くので編集がスムーズになる など
ページサイズや色、選択範囲の種類が豊富にあるため、これまで編集ツールを使ったことがない人にとっては、難易度が高いと感じる可能性があります。
なお、GraphicsGaleは、Windows向けに開発されたエディタツールなので、スマホやタブレット、Windows以外のPCからは利用できません。
メリット
- 広告なしで利用できる
- ページサイズやドットの色などの自由度が高い
- マニュアルがあるので初心者でも順を追って操作しやすい
デメリット
- 操作工程が多いので、初心者は慣れるまでに時間がかかる可能性がある
GraphicsGaleでドット絵アニメーションを作る方法
GraphicsGaleを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
編集するためのページを作成
WindowsのPCに無料の専用ソフトをダウンロードしたら、ソフトを開いて「ファイル」→「新規作成」を選択してください。
次に、サイズとカラーを設定します。
ドットを細かくしたければ大きい数字を選ぶ必要がありますが、ここでは「48×48」を選び、カラーは初期設定の「24ビット（フルカラー）」で進めます。
ステップ2:
ドット絵を描くための土台を作成
編集画面に小さなウィンドウが表示されたら、右下をクリックしたまま拡大してください。
「Ctrl＋マウスホイール」でも拡大できます。
ステップ3:
ドット絵用のマス目をセッティング
続いて、白いマス目になっている「カスタムグリッド」から幅を選択してください。
ここでは、48×48ピクセルにあわせて「4×4」のグリッド（幅）に設定したため、縦横12マスの大きさになっています。
ステップ4:
ドット絵を作成
ここから、本格的にドット絵作成が始まります。
右のパレット（色がたくさん選択できる箇所）から色を選択して、「矩形塗りアイコン」→「スナップアイコン」をクリックしてください。
それからマス目をクリックすると、選択した色で塗れます。
このとき、円形選択、投げ縄、マジックワンド、連続直線などの機能を使えば、スムーズにドット絵を進められます。
ステップ5:
ドット絵をアニメーションに変換
画面左下の「フレーム」から「複製」→「右側に複製」をクリックしてください。
「追加」を選択して、ゼロから2枚目のドット絵を作ることもできますが、複製したほうが編集負担を減らせるのでおすすめです。
GraphicsGaleには消しゴムツールが搭載されていないので、削除したいマスには白色で塗りつぶすようにしてください。
ステップ6:
ドット絵アニメーションを保存
アニメーションのためのフレームを複数作成できたら「ファイル」→「名前をつけて保存」から端末に保存してください。
このとき、保存する名前、透過色（背景色）、ウェイトなどを変更できます。
最終的な保存の詳細設定が決まったら「OK」をクリックして完了です。
処理後
DOTDOT
DOTDOTは、一つの画面だけでドット絵アニメーションを作成できるアプリです。
ドット絵の編集中にはリラックスできる音楽が流れたり、ドットを打つとき・削除するときにゲームのような音がでるので、楽しくドット絵アニメーションを完成させられます。
特徴
DOTDOTは、リラックス効果のあるLofiの音楽を聴きながらドット絵アニメーションを作ることができ、とにかくシンプルな仕様が特徴的です。
また、アプリを開いた瞬間から12×12ピクセルのマス目が表示され、16種類の色からイラストを作れる直感的なデザインになっているので、誰でも簡単に使いこなせます。
「ワールドギャラリー」というSNSのような機能も搭載されており、ほかのユーザーが作ったアニメーションをみられるので、作品作りの参考にできます。
自分の作品をワールドギャラリーに投稿すれば、ほかのユーザーから「いいね」をもらえるため、仕上がりに対する客観的な評価を受けられる点も魅力です。
メリット
- とにかくシンプルな仕様で初心者でも簡単に作れる
- アプリをダウンロードするだけで会員登録・広告なしで使える
- 作成したドット絵をアプリ内のコミュニティページで公開・閲覧できる
デメリット
- 12×12ピクセルしか選択できないので複雑なアニメーションは作れない
DOTDOTでドット絵アニメーションを作る方法
DOTDOTを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
ドット絵を作成
DOTDOTのアプリを開くと、すぐに編集画面が表示されます。
16種類のカラーから1つを選択したら、ドットをクリックしてドット絵を作成してください。
ステップ2:
2枚目のドット絵を作成
ドット絵アニメーションを完成させるためには、複数のフレームが必要です。
画面中央の「＋」を選択すると、新しい編集画面が表示されるので、ステップ1と同じようにカラーを選んでドットをクリックしてください。
さらに「＋」を選択して、新しいドット絵を挿入すれば、アニメーションの動きを増やせます。
ステップ3:
アニメーションの保存設定
ドット絵アニメーションが完成したら、画面右上の「チェック」を選択してください。
このとき、左上の「爆弾アイコン」をクリックすると、編集中のドット絵アニメーションを削除できます。
ステップ4:
端末に保存
設定のメニューページから左下の「ダウンロードアイコン」をクリックして、作成したドット絵アニメーションをスマホに保存してください。
右下の「地球儀アイコン」をクリックすると、ほかのユーザーも閲覧できるワールドギャラリーに共有されます。
左上「爆弾アイコン」をクリックすると、作成したドット絵アニメーションがアプリ内からも削除されます。
処理後
Photoshop
Photoshopは、初心者から上級者まで幅広いエディターから愛用される編集ツールです。
画像サイズ、マスのサイズ、カラー、ブラシまで細かく設定してからドット絵を作成できたり、アニメーションの秒数まで指定できたりします。
特徴
Photoshopは、画像やアニメーションを編集するために必要な機能が豊富に揃っているので、機能性を理解するほど精度の高いドット絵アニメーションを作成できます。
これは編集に慣れている人にとっては大きな魅力になりますが、初心者や編集ツールに使い慣れていない人にとっては、ハードルが高く感じられるかもしれません。
ドット絵を作成するまでの設定は、基本的に決まったことをやればいいので、これから紹介する手順を参考にしながら、細かい部分の編集までこなせるように練習してみてください。
メリット
- フィルターやテキスト入力など画像編集を同時に行える
- 画像サイズやカラー、ブラシサイズまで自由度が高い
- フレームごとの表示時間を設定できるのでアニメーションにもこだわれる
デメリット
- 編集工程が多くて初心者は使いこなせない可能性がある
Photoshopでドット絵アニメーションを作る方法
Photoshopを使ってドット絵アニメーションを作成する際は、以下を参考にしてください。
ステップ1:
ドット絵の編集ページを設定
Photoshopを開いたら、「新規ファイル」→「カスタム」を選択してください。
このとき、幅と高さを同じサイズにすることで四角形の編集ページを作成できます。
画面設定が完了したら「作成」をクリックします。
ステップ2:
マス目を設定
ドット絵アニメーションを作成するためには、マス目が必要です。
画面上部の「表示」→「表示・非表示」→「グリッド」を選択してください。
続いて「Photoshop 2025」→「設定」→「ガイド・グリッド・スライス」を選択してください。
ガイド・グリッド・スライスの詳細ページが表示されたら、グリッドの項目で「グリッド数」「分割数」を選択します。
グリッド数・分割数が多いほど、細かい部分までドット絵を調整できます。
ここでは、グリッド数を「5ピクセルl」、分割数を「10」に設定しました。
ステップ3:
ブラシの設定
続いて、マス目に沿って四角く塗ってドット絵を作るため、ブラシ設定に進みます。
画面上部「ウィンドウ」→「ブラシ」を選択してください。
ブラシの詳細ページが表示されたら、右上の「三本線アイコン」→「レガシーブラシ」を選択してください。
すると、ブラシの選択肢の中に「四角形のブラシ」が表示されます。
左の「右矢印アイコン」をクリックすると、ブラシサイズが表示されるので、先ほど設定したグリッド数・分割数に合わせて選んでください。
すると、マス目をクリックしたとき、ぴったりと四角形の色を塗れます。
ステップ4:
ドット絵作成と複製
マス目に沿ってドット絵を作成したら、右下のレイヤーのメニューバーを出して「レイヤーを複製」を選択してください。
レイヤーを新規作成して、ゼロからドット絵を作成することもできます。
ステップ5:
ドット絵アニメーションを作成
ドット絵を静止画からアニメーションに変換するためには、複数のフレームが必要です。
まずは画面上「ウィンドウ」→「タイムライン」をクリックしてください。
ステップ6:
フレームアニメーションを作成
続いて、画面下「ビデオタイムラインを作成」から「フレームアニメーションを作成」に変更してください。
画面上に表示されない場合、右側「三本線アイコン」をクリックしてメニューバーを開くと「フレームアニメーションを作成」が選択できます。
ステップ7:
アニメーションの詳細設定
左下に複数のフレームが表示されます。
各フレームの表示時間を調整できるので、短めなら1秒未満、ゆっくりと切り替えたいなら数秒程度を目安に調整してください。
ステップ8:
ドット絵アニメーションの保存
ドット絵アニメーションが完成したら、メニューバー「ファイル」→「書き出し」→「Web用に保存」をクリックしてください。
このあと、保存の詳細設定をすれば端末にドット絵アニメーションを保存できます。
処理後
よくある質問
ここでは、ドット絵アニメーションについてよくある質問に回答します。
ChatGPTでドット絵風画像を作る方法は？
ChatGPTでドット絵風画像を作る方法は、2つあります。
既存の画像をドット絵風にする場合、プロンプト入力欄の左にある「＋」→「写真とファイルを追加」から写真をアップロードしてください。
続いて、プロンプト入力欄に「ドット絵風」「pixel art style」と入力して送信すると、ドット絵風に編集された画像が生成されます。
ゼロからドット絵風の画像を生成する場合、プロンプト入力画面に「ドット絵風＋黒猫がジャンプしている姿（自由に設定）を生成して」と入力して送信してください。
英語では「a black cat jumping in pixel art style」のように入力します。
すると、ChatGPTがプロンプトで指示された通りに、ドット絵風の画像を生成します。
無料でドット絵ができるアプリは？
無料でドット絵が作れるアプリとして、以下のようなものがあります。
- ChatGPT
- dotpict
- Graphic Gale
- DOTDOT
- Photoshop（無料トライアル） など
それぞれ作り方には違いがありますが、ChatGPTを使うとプロンプトを入力するだけで、指示したドット絵を即座に作ってくれます。
ドット絵をゼロから作るのは難易度が高いと感じているのであれば、AI機能が搭載されたChatGPTがおすすめです。
ドット絵アニメーションはスマホだけで作れますか？
ドット絵アニメーションは、以下のアプリ・ツールを使うことでスマホだけで作れます。
- Gazoulab
- YouCam Video
- dotpict
- DOTDOT
中でも、GazoulabはWebサイトから画像編集できるツールであり、専用アプリをダウンロードしなくても、ドット絵アニメーションを作成できます。
dotpictとDOTDOTは、ドット絵に特化したスマホアプリで、ほかのユーザーの作品を見たり、自分の作品にいいねをもらったりできるのが魅力です。
一枚絵からキャラクターを動かすことはできますか？
GazoulabやYouCam Videoを使うことで、一枚絵からキャラクターを動かすことができます。
- Gazoulab：プロンプトを入力
- YouCam Video：テンプレートから選択
既存のドット絵をアニメーションに変換する方法は、異なるので、実際に使ってみて自分に合ったツールをご利用ください。
ドット絵アニメーションを作るのにおすすめのサイズは？
ドット絵アニメーションを作る際は「32×32」「64×64」「128×128」あたりのサイズがおすすめです。
サイズが大きくなるほど、マス目が細かくなるので、より細部までこだわり抜いたドット絵に仕上げられます。
逆に、初めてドット絵に挑戦するのであれば、小さいサイズにすると挑戦しやすいです。
まとめ
ドット絵アニメーションを作れるアプリやツールは複数ありますが、既存画像をアニメーションに変換するタイプと複数のドット絵をフレームにしてつなぎ合わせるタイプがあります。
無料でご利用いただけるものも多くあるので、用途にあわせて気になるアプリやツールをお試しください。
今回紹介したGazoulabは、アプリやソフトのダウンロード、会員登録が必要なく、完全無料でドット絵アニメーションを作成できます。
直感的な仕様で、初心者から上級者まで幅広いエディターさんから愛用されていますので、ぜひご利用ください。