Illustrator で GIF を作成する方法: 静的およびアニメーション化されたワークフロー

2026-11-04

Adobe Illustrator では、アートワークを静的 GIF としてエクスポートできます。 ファイル → エクスポート → Web 用に保存 (レガシー)。 Illustrator はタイムラインアニメーションエディタではないため、マルチフレームアニメーション GIF には通常、Photoshop や Adobe Animate などの 2 番目のアプリケーションが必要です。クリーンなワークフローは、Illustrator でフレームをデザインし、一貫してエクスポートし、その後アニメーションを組み立てることです。

Illustrator から静的 GIF をエクスポートする

アートワークを完成させ、編集可能なファイルを保存します .ai コピーする。
アートボードを最終的なアスペクト比に設定し、エクスポート領域の外側にあるオブジェクトを削除します。
選択してください ファイル → エクスポート → Web 用に保存 (レガシー).
GIF を選択し、減色をプレビューして、出力先に合った透明度およびマット設定を選択します。
画質とファイルサイズを比較し、最適化されたファイルを保存します。

GIF は限られたパレットをサポートしているため、グラデーションや写真にバンディングが発生する可能性があります。ディザリングはバンドを隠すことができますが、ファイルサイズが増加する可能性があります。通常、ロゴ、アイコン、フラットなイラスト、および小さな制御パレットを使用したアートワークは、きれいにエクスポートされます。

Illustratorでアニメーションフレームを準備する

フレームごとに 1 つのアートボードを作成するか、明確に名前が付けられたレイヤーに各フレームを配置します。すべてのアートボードを同じピクセル寸法に保ち、静止オブジェクトをまったく同じ座標に揃えます。小さな変更を加える前に、前のフレームを複製します。これにより、完成したループ内での偶発的なジャンプが防止されます。

必要に応じて、背景が透明な番号付き PNG ファイルとしてフレームをエクスポートします。 PNG は透明性を維持し、アセンブリの前に損失の多いステップを追加することを回避します。などの名前 フレーム-001.png, フレーム-002.png、そして フレーム-003.png 順序を明確にしてください。

フレームを組み立ててアニメーション GIF を作成する

Photoshop で、エクスポートされたファイルをレイヤーとして読み込み、タイムラインパネルを開き、フレームアニメーションを作成し、レイヤーからフレームを作成し、フレーム遅延を設定し、ループオプションを選択します。「Web 用に GIF として保存」を使用してエクスポートします。 Adobe Animate では、アートワークをタイムラインにインポートし、アニメーション GIF エクスポートワークフローを使用します。

ブラウザーのワークフローを使用する場合は、番号付きの PNG シーケンスを GIFDB にアップロードします。画像をGIFツールに変換、フレームを配置し、遅延とループ設定を選択し、結果をダウンロードします。

完成したGIFは小さくしてください

後で巨大なエクスポートを縮小するのではなく、最終的なピクセル寸法でデザインします。
動かす必要がある部分のみをアニメーション化します。
重複したフレームを削除し、長いホールドを短縮します。
慎重に減色してください。フラットベクターアートでは、多くの場合、256 よりもはるかに少ない数が必要になります。
明るい背景と暗い背景の両方に対する透明度をテストします。

Illustrator から GIF への一般的な問題を修正する

GIF はアニメーション化されていません: 「Web 用に保存」では、単一の Illustrator 状態がエクスポートされました。個別のフレームをエクスポートし、タイムラインツールで組み立てます。

白いエッジが表示されます。 マットな色が目的地と一致しません。正しい透明度とマットを選択して再エクスポートします。

アートワークがジャンプします: フレームのアートボードまたはレイヤーが整列していません。 Illustrator に戻り、同じアートボードのサイズと座標を使用します。

色が荒く見える: GIF の 256 色の制限が適切でない場合は、パレットを簡素化し、ディザリングを調整し、ビデオ/WebP をエクスポートします。

公式リファレンス

Adobe が GIF を Illustrator の下にリスト Web 形式で保存。アドビの専用アニメーション GIF エクスポートドキュメントタイムラインベースのオプションである Adobe Animate に適用されます。