まず4枚の画像で例を作成し、次に順序、フレームの持続時間、キャンバスを独自の写真シーケンスに合わせて調整してください。 GIFメーカーを開く.
画像を選択してフレームシーケンスを配置する
GIF Makerを開き、[画像]を選択します。写真をアップロードするか、[例を試す]を選択します。一般的な入力にはJPG、PNG、WebP、GIFが含まれます。アップロードフォームには、追加のサポートされている形式がリストされています。バッチには最大50個のファイルを含めることができ、画像ごとに25 MBの制限と全体的な処理制限があります。
この例では、[例を試す]を使用してgif-orbit-01.webpからgif-orbit-04.webpまでを読み込みます。各オリジナルは640 × 640ピクセルで、4枚の写真は同じ軌道シーン内の異なる位置を示しています。作業結果のために元の順序を保持してください。
フレームカードはプレビューの上に表示されます。カードをドラッグして位置を変更するか、カードを選択して設定パネルの「前へ移動」または「次へ移動」を使用してください。キーボードユーザーは矢印キーでカードを選択し、Altキーと矢印キーで並べ替えが可能です。「プレビューの上で再生」で現在のシーケンスを確認できます。
「複製」は選択したフレームのコピーを追加します。「削除」はシーケンスからフレームを削除しますが、少なくとも1枚は残ります。「元に戻す」と「やり直し」で最近の編集を復元できます。ソースファイルを追加または削除すると新しいファイルセットが開始され、編集履歴がリセットされます。シーケンスに画像を追加する必要がある場合は「画像を追加」を使用してください。
明確な進行順序を持つ関連画像を使用してください。関連性のない多数の写真を素早く切り替えるよりも、シンプルなシーケンスの方が追いやすいです。
各フレームの時間を設定し、トランジションを選択します
フレームを選択し、「秒単位の持続時間」を設定します。サポートされている範囲はソースフレームあたり0.02～10秒です。「この時間を全フレームに適用」を選択すると、すべてのフレームに同じタイミングが設定されます。タイトル付きのスライドショーや詳細な最後の写真の場合、そのフレームを他のフレームより長く表示させておきます。
例として、すべての「持続時間」を0.65秒に保ちます。「例を試す」でこの値が既に設定されています。独自の画像を使用する場合は、1つのフレームに0.65と入力し、「この時間を全フレームに適用」を選択してください。「トランジション」で「ソフトフェード」を選択し、「トランジション時間」を0.20秒（または200ミリ秒）に設定します。
「テキストとエクスポート品質」を開き、「トランジションステップ」を4に保ちます。各フェードで4つの中間フレームが追加されます。4つのオリジナルフレーム、4つのループフェード、「順方向再生」、「無限ループ」の設定で、この例には20枚のレンダリング済みフレームが含まれます。4つの0.65秒の保持と4つの0.20秒のフェードにより、3.4秒のサイクルが構成されます。
「クリーンカット」はトランジションフレームを追加せずに画像間を直接切り替えます。「左へスライド」は次の画像をキャンバス全体に移動させます。トランジションステップを増やすと動きは滑らかになりますが、200フレームのエクスポート予算を多く消費します。選択したシーケンスとエフェクトが制限を超えると、エディターが通知します。
「順方向」はシーケンスを順番に再生し、「逆方向」は逆順に再生し、「バウンス」は両端のフレームを繰り返さずにシーケンスを往復します。「ループ」は無限ループまたは指定回数の再生を選択します。今回の例では、「順方向」と「無限ループ」を維持してください。
「持続時間」はトランジション前の保持時間であり、そこに「トランジション時間」が加算されます。フェードが有効な場合、0.65秒の写真を4枚並べても2.6秒のループにはなりません。
このガイドの例
元の順序での4枚のサンプル画像。フレームあたり0.65秒。順方向。無限ループ。ソフトフェード。0.20秒のトランジション時間。4のトランジションステップ。正方形640 × 640 px。画像全体を表示。100%ズームで中央揃え。最初のフレームのキャプション「Made to loop」。下部。32 px。白。256色。滑らかなカラーグラデーションとファイルサイズの最適化を有効化。
- ソース画像
- 4 WebP · 各640 × 640 px
- フレームタイミング
- 0.65秒表示 + 0.20秒フェード
- ダウンロードされたGIF
- 640 × 640 px · 20フレーム
- アニメーションサイクル
- 3.4秒 · 無限ループ
キャンバスを選択し、画像のフレーミングを調整してキャプションを追加します
「キャンバスと背景」で、例として「正方形 · 1:1」を選択し、「幅」と「高さ」を640 pxに保ちます。他のプリセットには「ポートレート」、「ストーリー」、「ランドスケープ」、「ワイドスクリーン」があります。「最初の画像に合わせる」は最初の画像の形状から開始し、「カスタムサイズ」は各辺16～1600 pxの寸法を受け付けますが、アニメーションの合計処理制限に従います。
「画像のフィット」には「画像全体を表示」と「キャンバスを塗りつぶす」があります。「画像全体を表示」を100%ズームにすると、ソースのすべての端が保持され、形状の異なる写真の周囲に背景が残ることがあります。「キャンバスを塗りつぶす」は出力エリアをカバーし、端が切り取られる場合があります。「背景」を希望の塗りつぶし色に設定するか、宛先で必要な場合は「透明な背景」を有効にします。
フレームを選択して、そのフレーミングを個別に変更します。プレビューをドラッグするか、「ズーム」を変更し、「左」または「右」を使用して90度回転させるか、「反転」でミラーリングします。「フレームをリセット」は、そのフレームを中央揃え、回転なし、100%ズームの状態に戻します。この例では、4枚のオリジナルの正方形の写真をすべて中央に配置し、「画像全体を表示」を使用しています。
最初のフレームを選択し、キャプションに「Made to loop.」と入力します。他の3つのキャプションは空のままにします。「テキストとエクスポート品質」で、「キャプション位置」を「下」、「キャプションサイズ」を32 px、「キャプション色」を白に保ちます。キャプションは個々のフレームに属しているため、別のフレームを選択すると別の行を入力できます。この例の最初のキャプションは、そのフレームと共にフェードアウトします。
作業結果には、「GIF色」を「256 · 詳細」に設定し、「滑らかなカラーグラデーション」と「ファイルサイズを最適化」を有効にします。色数を減らすとファイルは軽くなりますが、微妙な色合いが変化する可能性があります。「滑らかなカラーグラデーション」はディザリングを使用し、目に見える細かいパターンを追加しながら色の帯を柔らかくすることができます。
キャンバスの形状を変更した後は、すべてのフレームを確認してください。1枚の写真に合う構図でも、別の写真では被写体が切り取られる可能性があります。出力寸法を大きくしても、小さなソースから失われた詳細を復元することはできません。
GIFを作成し、ダウンロードしたアニメーションを確認します
プレビューを再生し、最後のフレームから最初に戻るまでの完全なサイクルを視聴します。キャプションが十分に長く表示されているか、切り抜きが一貫しているか、急いでいるように見えるフレームがないかを確認します。シーケンスの準備ができたら「GIFを作成」を選択してください。サーバーがアップロードされたオリジナルから最終的なアニメーションをレンダリングします。
この例ではanimation.gifを640 × 640ピクセルでダウンロードします。実際の出力には20フレーム、3.4秒のサイクル、無限ループが含まれます。上記の比較は、4枚のオリジナル画像をコンタクトシートとして表示し、ダウンロードしたGIFの実際の最初のフレーム（追加された「Made to loop.」キャプションを含む）を示しています。
記事内の画像はプレビューであり、アニメーションプレーヤーではありません。ダウンロードしたGIFをアニメーション対応アプリで開き、タイミングとループを確認してください。滑らかに見えるプレビューでも、GIFパレット変換後に色が変わる可能性があるため、共有する前に保存された結果を検査してください。
より小さな結果を得るには、ソースフレームを減らす、トランジションを短くする、トランジションステップを減らす、キャンバスを小さくする、または「GIF色」の値を低くすることを試してください。保持時間を短縮するだけでは画像フレームは削除されないため、ファイルサイズをあまり減らさずにペースが変わる可能性があります。
更新または離れる前にダウンロードしてください。エディターやダウンロードページを更新すると、メインのツールページに戻ります。エクスポートされたGIFはフラット化されたアニメーションであり、編集可能なソースコントロールを含むプロジェクトファイルではないため、オリジナルの画像は手元に保管してください。
静止画ビューアーでは最初のGIFフレームしか表示されない場合があります。アニメーションが欠落していると結論付ける前に、ブラウザや他のアニメーション対応ビューアーでファイルをテストしてください。
よくある質問
JPGとPNGの画像を組み合わせてGIFを作成できますか？
はい。画像モードでは、サポートされている画像形式を1つのシーケンスに結合できます。各入力は1つ以上のタイムラインフレームになります。共通のキャンバスサイズを選択し、各画像のフィット感を確認してください。
各画像の表示時間を個別に設定できますか？
はい。フレームを選択して「Duration（持続時間）」を変更します。「Apply this duration to all frames（この持続時間を全フレームに適用）」はオプションです。画像ごとに異なる表示時間が必要な場合は、このオプションを使用しないでください。
GIFのフレーム数が写真の枚数より多いのはなぜですか？
「Soft fade（ソフトフェード）」や「Slide left（左へスライド）」はトランジションフレームを挿入し、「Bounce（バウンス）」は戻りのシーケンスを追加します。アップロードされたアニメーションファイル自体に複数のフレームが含まれている場合もあります。200フレームの制限は、アップロードされた写真の枚数ではなく、レンダリングされたアニメーション全体に適用されます。
画像ごとに異なるキャプションを付けられますか？
はい。キャプションは選択したフレームに適用されます。各フレームを選択してテキストを入力してください。キャプションの位置、サイズ、色はアニメーションの共通スタイル設定です。
GIFの背景を透明にできますか？
はい。「Canvas & background（キャンバスと背景）」で「Transparent background（透明な背景）」を有効にします。GIFはPNGのような滑らかな半透明ではなく、完全な透明ピクセルをサポートしているため、ソフトなエッジが変化する可能性があります。ダウンロードした結果を、意図した背景で確認してください。
写真の端が欠けているのはなぜですか？
「Fill the canvas（キャンバスを埋める）」や過度な「Zoom（ズーム）」はソースの端を切り取ることがあります。画像を完全に保持するには、「Show the whole image（画像全体を表示）」を選択し、ズームを100%に設定して中央揃えにしてください。キャンバスの形状が異なると、周囲に背景が見える場合があります。
GIFの再生速度を上げるとファイルサイズは小さくなりますか？
必ずしもそうとは限りません。表示時間を短くしてもフレーム数は同じだからです。ファイルサイズを直接減らすには、寸法、レンダリングされるフレーム数、または色数を減らすのが効果的です。
画像はすべてブラウザで処理されますか？
いいえ。ブラウザはインタラクティブな構成を表示しますが、フレームのプレビューと最終的なGIFのエンコードにはサーバー処理を使用します。最終的なファイルは、アップロードされたオリジナル画像と選択された設定に基づいてレンダリングされます。
写真をリズム感のあるループに変換する
サンプルを試すか、独自のファイルを使用して、共有前に結果を確認します。
