既存のGIFやMP4を編集する

TinyImageでGIFやMP4を読み込み、リサイズ、変形、カット、タイミング調整を行って、編集したアニメーションをエクスポートします。

個別のFigmaレイヤーから作り直さずに既存のアニメーションGIFやMP4を編集するには、TinyImageのGIFタブにあるGIF Editorを使います。

動画チュートリアル：FigmaでアニメーションGIFを直接編集する

この動画では、TinyImageでアニメーションGIFを編集、結合、カット、変形、エクスポートする方法を紹介しています。

GIFやMP4を読み込む ​

Figma Designで、次のいずれかを選択します。

  • アニメーションGIFの塗りを含むレイヤー
  • ネストの深さを問わず、1つ以上のGIFレイヤーを含むフレーム

これらのレイヤーを選択した状態でGIF Editorを開くと、TinyImageが自動で読み込みます。それ以外の場合は、Use selected Figma GIF layerを選びます。ローカルのGIFやMP4を読み込むには、Choose file from your computerを選ぶこともできます。

フレームを読み込むと、TinyImageはそのフレームで表示されているレイヤーの重なりを、アニメーションのすべてのフレームに焼き込みます。これには、ネストしたGIFレイヤーの上下にあるコンテンツ、マスク、エフェクト、その他のレイヤーが含まれます。元のFigmaのフレームとそのレイヤーは変更されません。

フレームに複数のGIFが含まれている場合、TinyImageはそれぞれのフレームの切り替わりを同期させ、編集可能な1つのタイムラインにまとめます。安定性のため、結合したフレームのアニメーションは最大2分、結合後のフレーム数は最大500個までです。

最初に読み込んだGIFに戻すには、いつでもResetを選べます。

エクスポートしていない変更があるGIFを置き換える前には、TinyImageが警告を表示します。大きなGIFでは、処理に関する警告も表示されます。GIFは最大2,000フレーム、最大8,192 pxのサイズ、最大100 MBのファイルサイズまで対応しています。

MP4ファイルは最大60秒、100 MBまで対応しています。TinyImageは動画を1秒あたり10フレームでサンプリングし、安定して編集できるように、必要に応じて非常に大きな動画のサイズを自動で縮小します。

アニメーションのリサイズと変形 ​

出力の幅または高さを入力し、元の比率を保つにはLock ratioを有効にしたままにします。Apply sizeを選ぶと、すべてのフレームがリサイズされます。

変形のコントロールでは、次の操作ができます。

  • すべてのフレームを左または右に90度回転する
  • すべてのフレームを水平または垂直に反転する
  • 範囲の選択、またはX、Y、幅、高さの正確な値を使って、すべてのフレームをトリミングする

GIFのカットとタイミング調整 ​

タイムラインのハンドルで、残す最初と最後のフレームを選びます。Speedのドロップダウンで、アニメーション全体を50%または25%遅くするか、通常の100%のタイミングのままにするか、25%、50%、100%速くします。TinyImageは各フレームを元のタイミングから再計算するため、フレーム間の意図的なタイミングの違いは保たれます。

Reverseを有効にすると、プレビュー、タイムライン、エクスポートするフレームの順序が逆になります。すでにアニメーションをカットしている場合は、選んだフレームはそのままで、その順序が逆になります。GIFとAPNGの出力では、繰り返し再生するにはInfiniteを有効にしたままにします。決まった回数だけ再生するには、Infiniteを無効にして、数値の入力欄に合計の再生回数を入力します。

出力の設定とエクスポート ​

エクスポートボタンの横にある形式メニューを使って、編集したアニメーションを次の形式でダウンロードできます。

  • アニメーションGIF
  • アニメーションPNG（APNG）
  • アニメーションWebP
  • MP4動画
  • WebM動画

GIFとAPNGのエクスポートにはループのコントロールが、MP4とWebMのエクスポートには動画のループのコントロールがあります。アニメーションWebPは繰り返し再生されます。

GIF Editorでは、Create a GIF/MP4と同じQualityスライダーとLosslessオプションを使います。これらのコントロールは、GIF、APNG、アニメーションWebPのエクスポートに適用されます。Losslessを有効にすると画質スライダーが無効になり、画質が保たれます。画質の値を下げると、非可逆圧縮でファイルサイズを削減できます。MP4とWebMでは、代わりにエディターが対応する最高の動画画質が使われます。

アニメーションGIFの出力では、Size Targetを有効にして最大サイズをKBで入力すると、TinyImageが非可逆の度合いとカラーパレットを自動で調整します。目標サイズが有効な間は、手動のQualityコントロールがKBの入力欄に置き換わり、Losslessは非表示になります。目標に届かない場合、TinyImageは見つかった中で最も小さい有効な結果をエクスポートします。厳密な上限があるサービスにアップロードする前に、保存したファイルを確認してください。

元のGIFを編集していない場合、TinyImageは元のファイルデータを入力として使い、すべてのフレームを再エンコードせずに選んだ圧縮を適用します。編集したGIFは、選んだ圧縮を適用する前に、形式の上限である256色のパレットで作り直されます。ダウンロードとInsert GIF to Figmaでは、同じGIFの圧縮設定が使われます。

変更のたびに再生プレビューを確認し、Export GIF、Export APNG、Export WebP、Export MP4、Export WebMのいずれかを選びます。編集したアニメーションをGIFとして現在のFigmaページに追加するには、Insert GIF to Figmaを選びます。TinyImageはフレームごとのエクスポートの進行状況を表示し、次のフレームが処理される前にキャンセルできます。