コマを並べるとアニメーションになる
JPGを2〜50枚入れると、決めた順番どおりに再生される1つのGIFになります。出てくるファイルは1つだけです。
複数のJPGを、1つのループするアニメーションに
または画像をここにドロップ、または貼り付けCtrl V
画像ツール · ブラウザ内で処理
JPGを2〜50枚読み込み、順番を決めて、1コマを何秒見せるかを選ぶと、1つのアニメーションGIFになります。パラパラ漫画と同じで、必要なのは並び順と速さだけです。GIFはこのタブの中で作られ、画像がアップロードされることはありません。
手元の写真やスクリーンショットを数枚並べるだけで、ループするアニメーションになります。
JPGを2〜50枚入れると、決めた順番どおりに再生される1つのGIFになります。出てくるファイルは1つだけです。
1コマを何秒見せるかを0.05秒から選べます。0.20秒あたりから、紙芝居ではなく動きとして見えはじめます。
反応用のGIFや商品の見せ方ならずっとループ。決まった時間で止めたいときは1回だけ再生を選ぶと、最後のコマで止まります。
名前順に並べ替えを押すと、frame10より先にframe2が来ます。逆順にするのも、カードをドラッグして手で入れ替えるのも1手です。
作業画面のアニメーションは、指定した1コマの長さで再生されています。速いか遅いかは、何もエンコードしないうちに目で決められます。
長辺を320〜800pxから選びます。小さいGIFほど早く表示され、チャットやメールの容量制限にも収まります。
| 元のコマ | GIFにすると | おすすめ |
|---|---|---|
| 画面録画、操作画面、線画 | きれい — 平らな色はGIFが得意です | そのままどうぞ。まず640pxで |
| 写真を数枚つないだもの | ざらつきと縞模様が出ます | 320〜480pxなら許容範囲。大きいほど目立ちます |
| グラデーション、空 | 必ず縞模様になります | 256色ではグラデーションを表現できません |
| 640pxで20コマを超えるもの | 数MBになります | コマを減らす前に、まず長辺を下げてください |
写真のざらつき、細かい刻みの長さ、50コマの上限。どれもこのページの設定ではなく、GIFという形式そのものから来ています。
GIFが1コマに使える色は最大256色です。そのため写真では、足りない色合いを細かい点の模様でそれらしく見せることになります。空や肌に見えるざらつきはこれで、どの設定でも消せません。
“To simulate more than 255 or 256 colors, dithering is generally used.”GIFは、各コマを画面に出しておく時間を100分の1秒単位で記録します。「1コマの長さ」は0.05秒刻みなので、どの値を選んでもそのとおりに保存されます。
“If not 0, this field specifies the number of hundredths (1/100) of a second to wait before continuing with the processing of the Data Stream.”長いアニメーションになると、GIFは不利です。Googleのウェブ担当チームが同じ映像を測ったところ、GIFでは3.7MB、MP4では551KBでした。このツールが50コマまでで、それより長いものには動画をすすめているのはそのためです。
“In this example, the initial GIF is 3.7 MB, compared to the MP4 version, which is 551 KB, and the WebM version, which is only 341 KB!”アニメーションGIFの長さ・容量・コマ数に決まりがある6つの場面と、その決まりに合わせる作り方です。どの数字も、その団体自身のページにリンクしています。
STORESは商品画像にアニメーションGIFを使えますが、「すべてのフレームの画素数の合計が 50メガピクセル以内に収まっている必要があります」と決めています。例として「横幅 1000px、高さ 1000px の GIF アニメーションについて、50フレームまでは 登録できます」「51フレーム以上の場合はエラーとなります」と書かれています。1枚あたりの上限は10MBです。
Vormlyでの解決方法
この予算は「1コマの画素数 × コマ数」です。Vormlyの長辺は最大800pxなので、正方形のコマを上限いっぱいの50コマ並べても合計は約32メガピクセル、50メガピクセルの内側に収まります。コマ数は「◯コマ × ◯秒 ＝ 1周◯秒」の表示に常に出ていて、書き出したGIFの容量はダウンロードボタンに出ます。
noteは「テキスト記事に挿入できるGIFアニメの最大サイズは20MBまでです」と決めていて、「横幅620px以上の画像をアップロードした場合は、自動で横幅620pxになるように縮小されます」。うまく再生できないときの対処として、note自身が「フレーム数を減らす」「サイズを小さくする」を挙げています。
Vormlyでの解決方法
その2つは、どちらもこの画面のつまみです。記事での表示は620pxまでなので、長辺は640pxで足ります——それ以上大きくしても容量が増えるだけです。コマを減らすのはカードを外すか、1コマの長さを伸ばして枚数を抑えるか。20MBに収まったかどうかは、ダウンロードボタンの容量で書き出す前に分かります。
さいたま市のホームページバナー広告表現ガイドラインは、GIFアニメについて「画面の大部分の領域が切り替わるものは、切替えの間隔を2秒以上とする」「画面が点滅するものは、点滅間隔を0.4秒以上とする」と定めています。「コントラスト（明度差）の強い画面の反転表示が継続するもの」は禁止です。
Vormlyでの解決方法
1コマの長さ（秒）は0.05秒から2.00秒まで、0.05秒きざみです。絵が大きく切り替わるバナーなら2.00秒、小さく動くだけなら0.40秒より下げない——規定に書かれている値をそのまま指定できます。1周が何秒になるかはつまみの下に出るので、出稿前に数えずに確かめられます。
環境省のウェブサイト作成ガイドラインは「1秒間に3回より多く明滅させない」「点滅をさせる必要がある場合は、5秒経過したら静止させる」と定め、さらに「画像内のテキスト内容が変化する画像（バナー広告など）を作成する必要がある場合は、5秒経過したら静止させる」としています。回り続けるGIFは、この作成方針に合いません。
Vormlyでの解決方法
再生で1回だけ再生を選ぶと、最後のコマで止まったまま動かなくなります。あとは1周を5秒以内に収めるだけで、「◯コマ × ◯秒 ＝ 1周◯秒」の表示がそのまま答えです（10コマ × 0.40秒なら1周4.00秒）。切り替わりの速さも1コマの長さで決まるので、1秒に3回を超えないかどうかはこの数字で判断できます。
Qiitaは「月に合計100MB まで、単体で10MB までの画像ファイルをアップロードすることが可能です」としていて、アップロードできる形式に gif を挙げています（apng は「サポート外のため正しく表示されない場合があります」）。表示については「記事の横幅最大になる目安は横幅約800pxです」。画面を丸ごと撮った手順GIFは、数手順で10MBに届きます。
Vormlyでの解決方法
手順を1枚ずつJPGで保存し（PNGのスクリーンショットは先にPNGをJPGに変換してから）、名前順に並べ替えを押して、長辺は800px。平らな色の操作画面は、GIFがいちばん得意な素材です。月100MBの枠があるので、1本あたりの容量はダウンロードボタンで確かめてから貼ってください。
ココナラはサービス画像について「アップロードは『jpeg,png,gif』画像形式のみ可能です」としながら、同じ節に「※『gif』のアニメーション機能は登録できません」と明記しています。プロフィール画像も同じで、こちらは「最大10MBまで」という条件がつきます。GIFファイル自体は通るのに、動きだけが出ない場所です。
Vormlyでの解決方法
ここは、動くGIFの出し先ではありません。見せたい工程は1枚の静止画にまとめ、動きが要るならサービス動画の枠（YouTubeの動画URLを貼る方式）を使ってください。GIFにするのは、規定が動きを認めている場所だけにしておくと、出し直しになりません。
2枚から50枚までです。それを超えるとGIFは急に重くなり、短い動画にしたほうが結果もファイルサイズもよくなります。1本のGIFに入るのは、ここで選んだコマだけです。
GIFは1コマにつき256色しか持てないからです。書き出しの設定の問題ではなく、形式そのものの限界で、写真はざらつき、空やグラデーションには縞模様が出ます。操作画面や線画のように平らな色でできた素材は、この制限をほとんど受けません。写真のように色数の多い素材を見せたいなら、GIFではなく短い動画のほうが向いています。
画面に並んでいるとおり、左から右の順です。ファイル選択の順番は名前順とはかぎらないので、名前順に並べ替えのボタンがあります。押すと、frame10より先にframe2が来ます。逆順にするボタンもあり、カードをドラッグして手で入れ替えることもできます。
ここではできません。このツールが読み込めるのは静止画のJPGだけです。先に使いたい場面を1枚ずつ書き出してから、ここへ持ってきてください。PNGやWebPのままでもお預かりできないので、その場合は先にJPGへの変換をご案内します。
アップロードされません。VormlyのGIF作成は、読み込みからエンコードまですべてあなたのブラウザの中で行います。社内の操作画面でも、身内の写真でも、どこかのサーバーに届くことはありません。会員登録も不要で、費用もかかりません。