画像からGIFアニメを作る手順｜待ち時間と色を確かめて保存

手元の画像を何枚か選ぶだけで、並べた順に切り替わるGIFアニメが作れます。 GIFアニメ作成は、コマごとの待ち時間と繰り返しの回数を決めて、1つのGIFにまとめるツールです。

作ったあとには、色がどれだけ変わったかと、できたGIFが設定どおりに書けているかが表示されます。 この記事では、3枚の画像からGIFを作って保存するまでの手順を、画面を追って説明します。

GIFアニメ作りで困る「あるある」3つ

画像をつないで動きを見せようとすると、次のような場面に出会います。

• 写真をGIFにしたら、色がざらざらしたり縞が出たりした
• 0.01秒にしたはずのコマが、なぜかゆっくり動いた
• 繰り返しを3回にしたつもりが、思った回数と違って再生された

どれも、GIFという形式の決まりや数え方から来るものです。 作る前に知っておくと、思いどおりにならない理由が分かります。

GIFで色や速さが変わる理由

GIFは、1コマに使える色が256色までです。 写真のように色の多い画像は、近い色に置き換えて256色に収めます。

待ち時間は0.01秒刻みで記録されます。 さらに主要なブラウザは、0.01秒以下の待ち時間を0.1秒に直して再生します。

繰り返しの回数は、GIFの拡張の欄に「最初の再生のあとに繰り返す回数」として書きます。 ChromeやFirefoxで3回再生させるなら欄は2で、このツールは選んだ回数から欄の値を決めます。

色が荒れる理由と直し方はGIFの画質が悪い原因、遅く動く理由はGIFアニメが遅い原因で詳しく説明しています。 このツールは、どちらも作る前と作ったあとに画面で知らせます。

GIFアニメ作成の使い方

1. 画像を入れる

ツールを開くと、画像を選ぶ枠と基本の設定が出ます。 枠をクリックするか、画像をまとめてドラッグ＆ドロップします。

JPEG・PNG・WebPを、合わせて100枚まで入れられます。 アニメーションGIFを入れたいときは、先にGIF分解でコマの画像に分けてください。

2. 並び順と待ち時間を決める

入れた画像は、一覧の上から順にコマになります。 「↑」「↓」で並び順を入れ替え、「×」で一覧から外します。

待ち時間は、そのコマを表示する時間を秒で入れます。 0.125秒のように0.01秒より細かい値は、四捨五入して「0.13 秒で記録」と欄の下に出ます。

全部のコマを同じ時間にしたいときは、基本の設定の「待ち時間（全コマ）」に入れて「全コマに当てる」を押します。

3. 大きさと繰り返しを選ぶ

「長い辺」で、できあがりの大きさを決めます。 縦横比は1枚目の画像に合わせ、2枚目からはその枠に収めます。

繰り返しは「ずっと」「1回だけ」「回数を決める」から選びます。 下の行には、GIFの繰り返しの欄に書く値が出ます。

4. GIFを作って確かめる

「GIFを作る」を押すと、進み具合が出てからプレビューが表示されます。 大きさ・コマ数・1周の時間・ファイルの大きさが並びます。

5. 色の変化を見比べる

「色の変化」に、色を減らす前の色の数と、GIFの色の表の色の数が出ます。 例の3枚は合わせて35,143色あり、256色に減らしています。

色を変えた画素の割合と、元の色からのずれの平均・最大も出ます。 誤差拡散を使うと、ずれを周りの画素に配るので、1画素ごとのずれはかえって大きく出ます。

「見比べるコマ」を選ぶと、GIFにする前の絵とGIFの絵が並びます。 数字だけでなく、目で見て気になるかどうかで決めてください。

6. 読み直しの結果を見て保存する

できたGIFは、その場でもう一度読み直します。 大きさ・コマ数・待ち時間・繰り返しの欄・絵が、作るときに決めた値と同じかを確かめます。

この画像は「往復」で作り、2枚目の待ち時間を0.01秒にしたときのものです。 0.1秒で再生されるコマは、番号つきで通知に出ます。

確かめたら「GIFを保存」を押します。 設定を変えたあとは保存が止まるので、もう一度「GIFを作る」を押してください。

スマホで作るとき

スマホの幅では、結果が縦1列に並びます。 プレビュー・要約・保存のボタン・色の変化・読み直しの確認の順に、上から確かめられます。

iPhoneでは保存ボタンを押すと共有シートが開きます。 そこから保存先を選んでください。

さらに詳しく使いたいとき

「詳細設定」を開くと、次の設定を変えられます。

• 大きさの違う画像の合わせ方: 余白を入れて全体を入れるか、端を切って枠を埋めるかを選びます
• 余白の色: 白・黒・透明・指定の色から選びます
• 再生の順: 「往復」にすると、1→2→3→2の順になり、端のコマが2回続きません
• 色の表: 全コマで1つにするか、コマごとに持たせるかを選びます
• 最大の色数: 256色から2色まで減らせます
• 誤差拡散: 色の段差を、細かい点の混ざりで表すかを選びます
• 変わらない部分を省く: 前のコマと違う範囲だけを書いて、ファイルを小さくします

余白を透明にすると、半透明の縁は透明か不透明のどちらかになります。 「縁をなじませる色」を貼る先の背景色にすると、縁が目立ちにくくなります。

こんな場面で使える

• 手順の説明: 画面のスクリーンショットを順に並べ、1枚2秒ほどで切り替える
• ドット絵のアニメーション: 元の大きさで並べ、色を変えずにGIFにする
• 写真のスライドショー: 色合いの違う写真は、色の表を「コマごと」にする
• チャットに貼る小さな動き: 長い辺を320pxほどにして、ファイルを小さくする

使用例

たとえば、操作マニュアルを作る事務担当の方が、設定画面の手順を1枚のGIFにまとめたいとします。 スクリーンショットを5枚選んで一覧に入れ、待ち時間を2秒にそろえます。

最後の画面だけ長く見せたいので、5枚目の待ち時間を4秒に変えて作ります。 1周の時間と読み直しの結果を確かめてから保存し、マニュアルに貼ります。

安心して使えるポイント

選んだ画像は、ブラウザの中だけで読み込まれます。 GIFの組み立ても読み直しも端末の中で行い、画像をサーバーへは送りません。

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

関連ツール

• GIF分解：アニメーションGIFを1コマずつのPNGに分ける
• 画像リサイズ：GIFにする前に、画像の大きさをそろえる
• 画像から色を抽出：画像の主要な色を確かめる
• 画像一括加工：明るさをまとめて補正してから並べる

まとめ

GIFアニメは、画像を並べて待ち時間を決めるだけで作れます。 色は256色まで、待ち時間は0.01秒刻みという決まりがあるので、作ったあとの数字と見比べで確かめてから保存すると安心です。

GIFアニメ作成を開く