てもとツール

GIFアニメ作成｜複数の画像を並べてアニメーションGIFにする

複数の画像を並べてアニメーションGIFを作るツール。コマごとの待ち時間・繰り返し・色数を選べ、256色に減らしたときの色の変化を数字で表示。できたGIFを読み直して設定どおりか確かめます。画像は手元のブラウザで処理します。

ブラウザ内処理 公開

画像を選ぶ（クリックまたはドラッグ＆ドロップ・複数可）

JPEG・PNG・WebP / 100枚まで / 1枚50MBまで

基本の設定
px（縦横比は1枚目の画像に合わせます）
秒

あとから入れる画像も、この待ち時間で入ります。

繰り返し

繰り返しの欄: 0（ずっと繰り返す）

詳細設定

大きさの違う画像の合わせ方

余白の色

再生の順

色の表

写真ごとに色合いが違うスライドショーは「コマごと」のほうが色のずれを抑えやすくなります。

画像を入れると出力の大きさが出ます

画像を入れるとここに一覧が出ます

並べた順にコマになります。順番と待ち時間はあとから直せます

このツールについて

使い方・特徴・補足情報

GIFアニメ作成とは

GIFアニメ作成は、複数の画像を並べた順にコマにして、1つのアニメーションGIFにまとめるツールです。 画像ごとに表示する時間を決め、繰り返しの回数も選べます。

GIFは1コマに使える色が256色までです。 色の多い写真は近い色に置き換わるので、色を変えた画素の割合とずれの大きさを数字で出します。

できたGIFは、その場でもう一度読み直します。 コマ数・待ち時間・繰り返しの欄・絵が、設定どおりに書けているかを表示します。

こんな人におすすめ

画像を並べて動きを見せたい人

楽になること

複数の画像を1つのGIFアニメにまとめる

避けたい手間

色や速さが思いどおりにならないこと

解決できる困りごと

  • 写真をGIFにしたら色がざらついた理由が分からず、設定を何度も試し直す手間を減らせる
  • 0.01秒のつもりで作ったGIFがブラウザでは遅く動く、という失敗に作る前に気づける
  • 大きさの違う画像を並べても、余白を入れるか端を切るかを選んで1つの枠にそろえられる
  • アプリを入れなくても、手元の画像を並べるだけで説明用のGIFアニメを用意できる
  • 作ったGIFのコマ数や待ち時間が設定どおりかを、読み直した結果で確かめられる

使い方

  1. 「画像を選ぶ」の枠に、GIFにしたい画像をまとめて入れます。
  2. 一覧の「↑」「↓」で並び順を整え、コマごとの待ち時間を秒で入れます。
  3. 長い辺の大きさと繰り返しを選びます。色数や余白は「詳細設定」で変えます。
  4. 「GIFを作る」を押し、プレビューと色の変化、読み直しの結果を確かめます。
  5. 「GIFを保存」を押して端末に保存します。

使用例

6色のドット絵4コマを0.2秒ずつ

半透明の無いドット絵を、元の大きさのまま並べた例です。色が256色以下なので、元の色がそのまま色の表に入り、色を1つも変えない点に注目してください。

入力

画像: 4枚（どれも 64 × 64 px・使っている色は全部で6色）
長い辺: 64 px / 待ち時間: 0.2 秒 / 繰り返し: ずっと

出力

64 × 64 px / 4コマ / 1周 0.80 秒
色を減らす前: 6色 → 色の表: 6色（色は減らしていません）

待ち時間に0.125秒と0.01秒を入れた

GIFの待ち時間は0.01秒刻みです。丸めて記録した値と、ブラウザで0.1秒に直される値の両方が出ます。

入力

1コマ目: 0.125 秒 / 2コマ目: 0.01 秒 / 3コマ目: 0.5 秒

出力

1コマ目: 0.13 秒で記録
2コマ目: ブラウザでは 0.1 秒で再生
1周: 0.64 秒（ブラウザでは 0.73 秒）

5枚を往復で3回だけ再生

往復は端のコマを2回続けないので、5枚から8コマになります。繰り返しの欄に書く値は、選んだ回数より1小さくなります。

入力

画像: 5枚 / 再生の順: 往復 / 繰り返し: 3回

出力

8コマ: 1→2→3→4→5→4→3→2
繰り返しの欄: 2（ChromiumとFirefoxで3回再生）

活用シーン

操作の手順を1枚のGIFにまとめる

画面のスクリーンショットを手順の順に並べ、1枚2秒ほどで切り替えます。説明書やチャットで、動画を開かずに流れが伝わります。

ドット絵のアニメーションを仕上げる

描いたコマを元の大きさで並べると、使った色のまま1つのGIFになります。色を変えていないと表示されるので、色崩れを心配せずに済みます。

旅行の写真をスライドショーにする

数枚の写真を1枚1秒で切り替えます。写真ごとに色合いが違うときは、色の表を「コマごと」にすると色のずれを抑えやすくなります。

表情を往復させて動かす

3枚の表情を往復で並べると、1→2→3→2の順でつながります。端のコマが2回続かないので、折り返しで止まって見えません。

チャットに貼る小さなGIFを作る

長い辺を320pxほどにすると、ファイルが小さくなります。できたGIFの大きさはKBで出るので、送り先の上限と比べられます。

技術的な解説

補足: 仕組み

画像はCanvasのdrawImageで枠の大きさに描き、getImageDataで画素を取り出します。 色の表は、色の数が収まればそのまま使い、収まらなければメディアンカットで作ります。

近い色への置き換えには、Floyd–Steinbergの誤差拡散を使えます。 色の番号はGIF89aの仕様どおりLZWで縮め、できたバイト列を自前のデコーダで読み直して照らします。

もっと詳しく

256色を超える画像で起きる縞とざらつき

GIFの色の表は、1コマにつき256色までです。 写真やグラデーションは色がそれより多いので、近い色にまとめて置き換えます。

このツールはメディアンカットで、画素が多く色の幅が広い範囲から順に分けて色を決めます。 なめらかな色の変わり目では、置き換えた色の境目が縞に見えることがあります。

誤差拡散は、置き換えで生じた色の差を周りの画素に配ります。 縞の代わりに細かい点の混ざりで色を表すので、1画素ごとのずれはかえって大きく出ます。

変わらない部分を省いてファイルを小さくする

2コマ目からは、前のコマと色が違う画素を囲む長方形だけを書きます。 動く部分が小さいアニメほど、書く画素が減ってファイルが小さくなります。

余白を透明にしたGIFでは、この省き方を使いません。 透明の画素から前のコマが透けて見え、消えたはずの絵が残ってしまうためです。

どれだけ省けたかは、書いた画素の割合で表示します。

繰り返しの回数は欄の値に1を足して数えられる

GIFの繰り返しの回数は、仕様書には無い拡張の欄で決まります。 ChromiumとFirefoxは、この欄の値を最初の再生のあとに繰り返す回数として扱います。

そこで「3回」を選ぶと、欄には2を書きます。 「1回だけ」を選んだときは、欄そのものを書きません。

Safariは端末の画像処理に任せていて、数え方をソースから確かめられません。 回数が大事な場面では、表示するブラウザで確かめてください。

よくある質問

写真をGIFにすると色がざらざらするのはなぜですか？

GIFは1コマ256色までなので、近い色に置き換えています。 ざらつきは、誤差拡散で色の差を周りに配った点の混ざりです。

詳細設定で誤差拡散を外すと点は消えます。 その代わり、なめらかな部分に縞が出やすくなります。

半透明の影や縁はどうなりますか？

GIFの透明は、透明か不透明かの2つだけです。 余白を透明にしたときは、半透明の画素をアルファ値128（約50%）を境にどちらかへ倒します。

不透明にした画素は「縁をなじませる色」と混ぜます。 貼る先の背景色を選ぶと、縁が目立ちにくくなります。

何枚まで入れられますか？

コマは100コマまで、長い辺は1,000pxまでです。 往復にしたときは、増えたあとのコマ数で数えます。

コマ数と大きさの掛け算が3,000万画素を超えるときは、作れる長い辺を案内します。

0.01秒にしたのに遅く動きます。

Chrome、Firefox、Safariの画像処理は、0.01秒以下の待ち時間を0.1秒に直して再生します。 そのまま再生されるいちばん短い値は0.02秒です。

このツールは、0.1秒に直されるコマの欄の下に注記を出します。

画像はどこかへ送られますか？

選んだ画像はブラウザの中だけで処理され、サーバーへは送られません。 GIFの組み立ても読み直しも、端末の中で完結します。

なお、サイト自体はアクセス解析と広告を使っています。 詳しくはプライバシーポリシーをご覧ください。

参考・出典

本ツールの計算式・判定基準は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。