画像からGIFを作成する方法：ステップバイステップ完全チュートリアル（2026年版）
GIFは静止画像のシーケンスをループアニメーションに変換します。動画プレーヤーも自動再生の許可も不要です。ここでは、GIFをゼロから作成し、各プラットフォーム向けに最適化して、ファイルサイズをコントロールする方法を順を追って説明します。
ステップ1：画像を準備する
GIFは順番に再生されるフレームの集まりです。出力の品質は、素材として使う画像の質に直結します。以下の点を確認しておきましょう。
- 寸法を統一する。 位置合わせと切り抜きが意図どおりになるよう、すべてのフレームを同じキャンバスで準備します。開始前にVizuaの画像サイズ変更で適切なコピーを作り、リサンプリング結果を確認してください。
- 適切なフレーム数を選ぶ。 2秒の映像を15 fpsでサンプリングすると30フレームです。スライドショーなら大幅に少なくて済む場合があります。異なるフレームを増やすと通常はデータも増えますが、エンコーダーの最適化とフレーム間の変化量もサイズに影響します。
- きれいな元データを使う。 入手できる最良のオリジナルから始めます。GIFパレットへの変換ではバンディングやディザリングが加わることがあり、すでに圧縮された素材のアーティファクトは全フレームに引き継がれる可能性があります。
- 順番どおりにファイル名を付ける。
frame-01.png、frame-02.pngのような規則なら、手動並べ替えに対応する画面でも、意図した順番を保持して確認しやすくなります。
ステップ2：GIFを作成する
VizuaのGIFメーカーを開き、画像ファイルをドロップゾーンにドラッグして、以下の設定を行います。
- フレームの順序。必要に応じてフレームをドラッグして並べ替えます。最初のフレームは、自動再生されないプラットフォームでサムネイルとして表示されます。
- フレームディレイ。各フレームの表示時間を設定します。GIF形式では100分の1秒単位で指定します。ディレイ10は100ms（0.1秒）、つまり10fpsに相当します。よく使われる設定の目安：
- 7（約14 fps）— ブラウザーの遅延制限を受ける、速めの出発点
- 10（10 fps）— 単純な動き向けの中程度の出発点
- 50（2 fps）— 遅いスライドショーの出発点
- 100（1 fps）— 読む時間が必要な内容向けの毎秒1フレーム
- ループ回数。0に設定すると無限ループ（Web用GIFの標準）になります。数値を指定するとN回再生後に停止します。
- 出力サイズ。 GIFが実際に表示される最大サイズに近い寸法で書き出します。キャンバスを小さくすればファイルを大きく減らせますが、適切な幅は配信先と閲覧状況によって異なります。
Vizuaは選択した画像からブラウザー内でGIFを組み立て、画像処理サーバーには送信しません。ただし、必要なコードやサイト機能のためにページがネットワークを使用することはあります。
ステップ3：ファイルサイズを最適化する
アニメーションGIFは、多数のインデックス画像とタイミング情報を組み合わせるため大きくなることがあります。特定のフレーム数や幅なら一定サイズになると考えず、実際の素材と配信先に合わせて最適化してください。
| 手法 | ファイルサイズへの効果 | 画質への影響 |
|---|---|---|
| サイズ縮小（800px → 480px） | 大幅に減ることが多いが、元データによる | 空間的な細部が減り、文字や輪郭がぼやける場合がある |
| 色数削減（256色 → 128色） | パレットと符号化コストを減らせる場合がある | バンディングやディザリングが増える場合があるため、ループを確認 |
| 色数削減（256色 → 64色） | 適したイラストではさらに有効な場合がある | グラデーション、写真、アンチエイリアスが変わりやすい |
| 重複フレームの削除 | エンコーダーの最適化とフレーム処理による | タイミングと表示ピクセルが本当に同等なら影響なし |
| 非可逆圧縮の適用 | 元データとエンコーダーによる | 目に見えるノイズ、色変化、輪郭の劣化が生じる場合がある |
| 不要フレームの削除 | 削除フレーム数に比例 | アニメーションが若干カクつく |
実用的な順序は、最初に切り抜きとサイズ変更を行い、不要なフレームを削除してから、パレット削減や非可逆オプションを試すことです。一度に1つの変数だけを変え、想定表示サイズでループ全体を比較してください。
プラットフォーム別のサイズ制限と推奨設定
アップロード上限やアニメーションの扱いは、アカウント、プラン、アプリ、投稿場所、日付によって異なります。2026年7月17日に確認したこの表は、変動する数値を恒久的なプリセットにせず、何を確認すべきかを示します。
| プラットフォーム | 最大ファイルサイズ | 推奨サイズ | 備考 |
|---|---|---|---|
| Twitter/X | 現在のWebまたはモバイル投稿画面で確認 | 想定する切り抜きと表示サイズに合わせる | Webとモバイルのアップロード経路で動作が異なる場合がある |
| Discord | アカウント、サーバー、アップロード種別による | 絵文字または添付の現行仕様を使用 | カスタム絵文字と通常の添付には別の規則がある |
| Slack | カスタム絵文字の現在の上限を確認 | 絵文字用に小さい正方形キャンバスを準備 | ワークスペース設定や製品変更で受け付け条件が変わる場合がある |
| 使用予定の投稿場所で確認 | 現在の配置と切り抜きに合わせる | サービスがアニメーションを変換したり別の形で表示したりする場合がある | |
| GIPHY / Tenor | 現在のクリエイター／アップロード文書を確認 | 配信先の現在の品質ガイドを使用 | 検索、審査、配信の要件はサービスごとに異なる |
どこでも必ず動作する単一のファイルはありません。高品質な元データを保管し、配信先ごとに書き出して、大規模なキャンペーンを制作する前に実際のアップロード経路をテストしてください。
既存のGIFを編集する
すでにGIFがあって修正したい場合もあるでしょう。よくある2つの作業を紹介します。
- GIFからフレームを抽出する。VizuaのGIFからフレームツールを使うと、GIFを個別の画像に分割できます。特定のフレームを編集したり、不要なコンテンツを取り除いたり、別のタイミングで新しいアニメーションを作り直したりするときに便利です。
- 既存GIFのサイズを変える。 プラットフォームの上限を超える場合は、対応している範囲で画像サイズ変更を使って小さいキャンバスを準備します。削減量はフレーム内容とエンコーダー次第です。固定の割合を想定せず、書き出したファイルを確認してください。
各プラットフォーム向けの画像最適化については、SNS向け画像サイズガイドもあわせてご覧ください。
よくある質問
GIFに最適なフレームレートはどれですか？
あらゆる用途に最適なレートはありません。多くのWebアニメーションでは毎秒10～15フレームが出発点として有用ですが、スライドショーはさらに遅くでき、速い動きにはより多くのフレームが必要な場合があります。実際のループを対象端末でプレビューしてください。ブラウザーは非常に短いGIFの遅延を制限することがあり、フレームを増やすとファイルも大きくなります。
SNSのアップロード上限にGIFを収めるにはどうすればよいですか？
上限やGIFの扱いは変わる可能性があるため、実際に使うアプリまたは投稿画面で現在の上限を確認してください。そのうえで、収まるまでピクセル寸法を縮小し、不要なフレームを削除し、パレットを単純化するか、ループを短くします。固定プリセットに頼らず、書き出すたびに動き、文字、グラデーション、輪郭を確認してください。
画像が2枚だけでもGIFを作れますか？
はい。2つのフレームを交互に表示すれば、ビフォー／アフターや切り替えを表現できます。1フレームあたり500～1000 msは読み取りやすい出発範囲の一例であり、規則ではありません。内容に合わせて調整し、両方を理解できる時間があるか確認してください。アクセシビリティ上の危険になり得る高速な点滅は避けます。
GIFファイルが大きいのはなぜですか？
ピクセル寸法、フレーム数、フレーム間で変化する領域、パレットの複雑さ、ディザリング、エンコーダーの設定がサイズに影響します。まず実際の表示サイズに切り抜いて縮小し、不要なフレームを削除して、小さいパレットを試します。削減量と見た目への影響はアニメーション次第なので、結果を元データと比較してください。
GIFで使える色数の上限はいくつですか？
GIFのカラーテーブルは最大256エントリーです。ファイルにはグローバルテーブルを使え、各フレームにはローカルテーブルも持てますが、個々のインデックス画像が選ぶのは最大256エントリーです。写真やグラデーションではバンディングやディザリングが見える場合があり、少数の単色を使うグラフィックなら必要なエントリーが少ないこともあります。64、128、256色が同じに見えると決めつけず、パレットをテストしてください。