このWEBサイトはInternetExplorerのサポートを終了しました。
GoogleChrome, Firefox, MicrosoftEdge など別のWEBブラウザを使用下さい。

GIFアニメーション画像作成ツール

WEBブラウザ上でGIFアニメーション画像が作れるツールです。複数枚の画像をまとめて、1枚のGIFアニメーション画像を出力します。
使い方をみる

お使いのブラウザはInternetExplorer (以下IE)です。開発元のマイクロソフトはIEの使用を非推奨としております。EdgeGoogle ChromeFirefoxなどの他ブラウザをお使いください。
当サイトでは、IEでも最低限の動作はしますがレイアウトが崩れる、一部の機能が使えない、処理速度が遅い、などの問題がございます。

入力
出力
解像度
x 縦
縦横比揃え
アニメ速度
(100=1s)
ループ回数
(-1で無制限)
背景

※解像度の大きい画像の作成には時間がかかります。縦横比は1枚目が基準になります。

プレビュー・保存
プレビュー領域 高さ

フィードバック

よろしければ使った感想やコメントをお聞かせください。改善の参考にさせて頂きます。バグ報告はこちらのフォームからお願いします。頂いたフィードバックは全てに目を通しております。感謝等のコメントについて返答はしていませんが励みになっております。ありがとうございます。

フィードバック送信時のお願い
  • 返信が必要な場合はメールアドレスを添えて下さい。(必ず返信することをお約束するものではございません)
  • 不便な点は具体的にどこがどう不便でどう改善してほしいかを教えて下さい。「分かりづらい」「使いづらい」だけの情報が何もない内容だと改善しようがありません。


最近の更新内容
08月09日
  • 画像個別に表示時間を長く設定できるようにしました。
  • 繰り返し回数0回を指定できるようにしました。
  • 入力に透過画像を使用した際に透過部分を背景色で塗りつぶすように変更しました。
03月03日
  • 入力エリアに設定ボタンを追加しました。画像を追加した際の並び方についての選択ができます。
  • 出力エリアに設定ボタンを追加しました。プレビュー枠の高さが設定できます。
  • 入力値やスケールバー値を自動保存し、再訪問時に復元するようにしました。ブラウザキャッシュを削除すると設定値は消えます。
02月28日
  • 一度に複数の画像を追加するときに読み込みが完了したものから順に表示していましたが、ファイル名順にソートしてから末尾に追加するようにしました。
  • 画像のソートボタンを追加しました。任意のタイミングでファイル名順に並び替えができます。
  • 入力画像のファイル名を表示するようにしました。
  • 入力画像のスケーリングを行えるようにしました。
  • 入力画像が多いとき、スクロールバーを表示していましたが、折り返して表示するようにしました。
  • 出力解像度を縦横同時指定できるようにしました。
  • 縦横比の揃えで、リサイズを選択したときの背景色(上下または左右の帯の色)を選択できるようにしました。
  • 出力画像のスケーリングを行えるようにしました。

使い方

1.画像の入力

GIFアニメのもとになる画像を読み込みます。方法は2種類あります。

  • 方法1. [画像追加]ボタンをボタンをクリックします。ファイル選択ダイアログが開くので読み込みたい画像ファイルを選択します。(PC/スマホ 両対応)
  • 方法2. ファイルエクスプローラなどから画像を選択し、ページ内にドラッグドロップします。(マウス操作時)

読み込んだファイルは下のリストに表示されます。画像ファイルは一度に複数を選択して読み込むことができます。使用デバイス、ブラウザによっては対応していないものもあります。対応ファイル形式はJPEG/PNG/GIFの3つです。

画像の並び替え

画像の並び順が結合時のアニメーションの順番になります。読み込んだ画像は任意の順番に並び変えることができます。並び変える方法は2種類あります。

  • 方法1. [ソート]ボタンをクリックします。ファイル名昇順に並び替えされます。OSによっては一部の文字のソート順がファイルエクスプローラの並び順と異なることがあります。
  • 方法2. 画像をドラッグ(タッチ)して、移動したい場所までドラッグ移動(スワイプ)します。
画像の削除

読み込んだ画像を全て削除するには[全削除]ボタンをクリックします。また、画像にマウスオーバー(タップ)したときに現れる×ボタンを押すことで個別に削除することもできます。

特定の画像を長く表示する

入力画像にマウスホバー(タップ)したときに左下に数値入力欄が現れます。これは画像の表示時間を個別に指定するためのものです。時間は、出力設定の[アニメ速度]×[数値]分になります。デフォルト値1が基準になり、2なら2倍、5なら5倍長く表示されます。

2.出力設定

出力する画像の設定を行います。

解像度
画像の解像度(縦と横の長さ)を指定します。[長辺]/[横]/[縦]の指定は該当辺の解像度が指定値になるように縮小または拡大されます。対の辺は、縦横比が同じになるように自動で計算されます。[横]x[縦]の指定は、もとの画像の縦横比を無視した絶対サイズです。よって画像の上下または左右が切り抜かれたり帯ができたりします。[オリジナル]は1枚目の画像と同じ解像度になります。高解像度の画像を使用する場合は画像作成に時間がかかり容量も大きくなるので注意して下さい。
縦横比揃え
縦横比の違う画像を使う時の表示方法を指定します。全ての画像の縦横比が同じときはこの設定を気にする必要はありません。[クロップ]を選択した場合は1枚目と同じ縦横比になるように2枚目以降の画像は、真ん中を中心に切り抜かれます。上下または左右の情報が失われます。[縮小]は出力画像の解像度内に入力画像の全画像領域が収まるように画像を縮小または拡大します。上下または左右に帯ができます。帯の色は[背景色]項目で指定したものになります。
アニメ速度
画像が切り替わる間隔を指定します。1=0.01秒になります。例えば1秒ごとに画像を切り替えたい場合は100を設定します。
ループ回数
全ての画像をアニメーションし終わったときに、再度繰り返す回数を指定します。-1を指定した場合は止まることなく繰り返しが行われます。0を指定した場合は繰り返しません。
背景色
[縦横比揃え]項目で縮小を選んで帯部分ができた時の帯の色を指定します。また、透過画像使用時の透過部分の色になります。
3.画像の作成と保存

[画像作成]ボタンを押すと、入力画像と出力設定をもとにGIFアニメ画像の作成が開始されます。作成が完了したらプレビューエリアに画像が表示されます。[保存]ボタンを押すと画像を保存します。

仕様

画像作成の全ての処理はお使いのPCまたはスマートフォン内で行っています。画像情報がネットワーク上のサーバーに送信されることはありません。

出力されるのはGIFアニメーション画像です。GIF形式の画像は最大256色しか扱えないため、写真などの色数が多い画像を使うとどうしても荒い画像になってしまいます。 漫画、イラスト、ロゴなど色数が少ない画像に適しています。

高解像度GIFアニメ画像の作成には時間がかかります。また、ファイル容量も大きくなります。

Acknowledgements

https://github.com/jnordberg/