画像をGIFに — 複数の画像をつないで動かす
複数の画像を並べて、順番に切り替わるGIFを作ります。表示時間と大きさを指定でき、処理はブラウザの中だけで行われます。
操作手順を数枚の画面写真で見せる、ビフォーアフターを交互に出す、写真をつないで簡単なアニメーションにする。動画にするほどではない場面で、GIFはちょうどよい形式です。
並べた順番がそのまま再生順になります。矢印で入れ替えるか、名前順に並べ替えてください。
大きさを揃えてから
画像の寸法がばらばらだと、切り替わるたびに絵が伸び縮みして見づらくなります。先に画像リサイズで同じ大きさに揃えてから読み込ませてください。
比率が違う画像が混ざる場合は、切り抜いて揃えるか、余白を足して揃えます。切り替えの瞬間に位置がずれないことが、見やすさの大半を決めます。
GIFは256色までしか使えません。写真をつなぐと色が粗くなることがあります。画面写真やイラストのように色数の少ない素材のほうがきれいに仕上がります。
表示時間の目安
| 1枚あたり | 向いている内容 |
|---|---|
| 0.1〜0.3秒 | なめらかな動き |
| 0.5秒 | 操作手順。読む時間は足りない |
| 1〜2秒 | 文字を読ませる画面 |
| 3秒以上 | ビフォーアフターの比較 |
容量に気をつける
GIFは1枚ずつの画像を保存するため、枚数と寸法にそのまま比例して重くなります。10枚の写真を大きなまま並べると、すぐに数MBになります。
幅を実際に表示される大きさに合わせ、枚数を必要最小限にしてください。800px以上の幅が必要な場面は多くありません。
文字を読ませる画面が含まれるなら、その1枚だけ表示時間を長くするより、枚数を減らして全体を短くするほうが軽く済みます。
よくある質問
何枚まで使えますか？
枚数が増えるほど容量が増え、処理にも時間がかかります。実用上は20枚程度までにしてください。
画像の大きさが違うとどうなりますか？
切り替わるたびに伸び縮みします。先に揃えてから読み込ませてください。
音は付けられますか？
GIFに音声は入りません。必要なら動画にしてください。
画像はアップロードされますか？
されません。処理はすべてブラウザの中で行われます。