PhotoshopでGIFアニメを作るには、ウィンドウ／タイムラインを開いて「フレームアニメーションを作成」を選び、フレームごとにレイヤーの表示や位置を変えます。
できたら、ファイル／書き出し／Web 用に保存（従来）でGIFを選び、ループを「無限」にして保存します。
連続写真や短い動画からなら、全部をレイヤーとして読み込み、「レイヤーからフレームを作成」で一度にフレームにできます。
この記事では、フレームアニメーションの作り方、遅延時間とループ、トゥイーン、写真・動画からの作り方、GIFでの書き出し方を、Adobeの公式ヘルプとAdobe Learnのチュートリアル（2026年11月1日に確認）をもとにまとめました。
すでにあるGIFを編集したり、MP4にしたりする手順はGIFアニメーションの編集方法にあります。
作り方の流れ
| 段階 | 操作 | ポイント |
|---|---|---|
| 1．素材を用意 | 動かすものをレイヤーに分けておく | 背景レイヤーは通常のレイヤーに変えておく |
| 2．タイムラインを開く | ウィンドウ／タイムライン | 中央の下向き矢印から「フレームアニメーションを作成」 |
| 3．フレームを作る | 選択したフレームを複製して、レイヤーを変える | 表示・位置・不透明度・スタイルを変えられる |
| 4．時間とループ | 各フレームの遅延時間とループオプション | ループの既定は「無限」 |
| 5．書き出す | Web 用に保存（従来）でGIF | 色数と画像サイズでファイルサイズを調整 |
フレームアニメーションを作る
- ウィンドウ／タイムラインとウィンドウ／レイヤーを選んで、2つのパネルを開く
- タイムラインパネル中央の下向き矢印を選び、「フレームアニメーションを作成」を選ぶ
- 新しいレイヤーを追加するか、背景レイヤーを通常のレイヤーに変える
- 動かすものを別々のレイヤーに作る
- タイムラインパネル下の「選択したフレームを複製」で新しいフレームを足す
- 新しいフレームを選んだ状態で、レイヤーの表示・位置・不透明度・レイヤースタイルを変える
- 必要な数だけフレームを足して、同じように変える
フレームの数の上限は、PCで使えるメモリの量だけで決まります（Adobe：フレームベースのアニメーションの作成）。
フレームアニメーションは1枚ずつ正確に決められるので、はっきりした状態の切り替わりがあるシンプルな動きに向いています。
遅延時間とループを決める
各フレームの下にある遅延時間を選び、メニューからそのフレームを表示する時間を選びます。
ループは、タイムラインパネル左下のループオプションのメニューから「一度」「3 回」「無限」「その他」を選びます。
既定は「無限」で、「その他」では回数を入力できます（Adobe：ループの指定）。
ループの設定はPhotoshopでの編集中の表示には影響せず、GIFに書き出したときの再生のしかたを決めます。
タイムラインパネルの再生アイコンで、動きを確かめられます。
トゥイーンで中間のフレームを足す
2つのフレームの間を滑らかにつなぐときは、トゥイーンを使うと中間のフレームを自動で作れます。
- レイヤーパネルで、動かすレイヤーを選ぶ
- タイムラインパネルで、対象のフレームを選ぶ（隣り合う2つを選ぶと、その間にフレームが入る）
- 「アニメーションフレームをトゥイーン」のアイコンを選ぶ
- トゥイーンの相手、追加するフレーム数、対象のレイヤー、変える項目（位置・不透明度・エフェクト）を決めて「OK」を選ぶ
足すフレームが多いほど、動きは緩やかで滑らかになります（Adobe：トゥイーンを使用したフレームの作成）。
連続写真や動画から作る
連続写真は、ファイル／スクリプト／ファイルをレイヤーとして読み込みで、1つのファイルに1枚ずつのレイヤーとして読み込みます。
短い動画は、ファイル／読み込み／ビデオフレームからレイヤーで、フレームごとのレイヤーにします。
動画が長いとすべては読み込めないことがあるので、読み込む範囲を限ったり、2フレームおきに読み込んだりします。
次に、タイムラインパネルで「フレームアニメーションを作成」を選び、パネル右上のメニューから「レイヤーからフレームを作成」を選ぶと、すべてのレイヤーがフレームになります。
逆向きに再生されるときは、同じメニューの「フレームを入れ替え」を選びます（Adobe Learn：連続写真でアニメーションGIFを作成する方法）。
読み込みが止まる・エラーが出るときは「ファイルをレイヤーとして読み込み」の使い方に対処をまとめています。
GIFで書き出す
Web 用に保存（従来）で書き出す
- ファイル／書き出し／Web 用に保存（従来）を選ぶ
- プリセットで「GIF 128ディザ」を選ぶ
- カラーで「256」を選ぶ
- ファイルサイズを小さくしたいときは、画像サイズの幅と高さを小さくする
- ループオプションで「無限」を選ぶ
- 左下の「プレビュー」でブラウザーに表示して確かめる
- 「保存」を選んで保存先を決める
手順はAdobe Learnのチュートリアルに沿っています（Adobe Learn）。
Adobeのヘルプでは、このメニューを「Web 用に保存」と書いています（Adobe：Web 用に保存）。
版によって表記が違うので、書き出しメニューの中の「Web 用に保存」を探してください。
別名で保存でGIFにする
ファイル／別名で保存で形式にGIFを選び、「GIF 保存オプション」でフレームとアニメーションの扱いを決めて保存する方法もあります。
Adobeのヘルプは、GIF形式は複数のフレームを持つドキュメントからアニメーション画像を作れると説明しています（Adobe：PNG および GIF 形式で画像を保存、2026年10月29日更新）。
MP4や連番にしたいとき
SNSに動画として載せたいときは、ファイル／書き出し／ビデオをレンダリングで、MP4などの動画や連番画像として書き出せます（Adobe：ビデオファイルの書き出し）。
GIFから動画への変換の手順はGIFアニメーションの編集方法にあります。
つまずきやすい所と対処
| つまずき | 起きること | 対処 |
|---|---|---|
| 動くものを1つのレイヤーにまとめている | 別々に動かせない | 別々に動くものはレイヤーを分けて作る |
| 写真の順番が逆 | 逆向きに再生される | タイムラインのメニューで「フレームを入れ替え」 |
| ループが「一度」 | 1回再生して止まる | ループオプションを「無限」にする |
| 長い動画を全部読み込む | 途中までしか入らない・重い | 範囲を限るか、2フレームおきにする |
| 画像サイズが大きいまま | GIFのファイルが大きい | Web 用に保存で幅と高さを小さくする |
| 編集中にループが効かない | Photoshopでは何度も再生されない | ループは書き出したGIFの再生に効く。プレビューで確かめる |
よくある質問：PhotoshopでGIFアニメを作る
「書き出し形式」でGIFアニメにできますか？
Adobeのヘルプには、書き出し形式でアニメーションが保たれるかの記載がありません。
GIFアニメにするときは、Web 用に保存（従来）か、別名で保存のGIFを使います。
書き出し方式の違いは書き出し3方式の比較にまとめています。
何フレームまで作れますか？
フレームの数は、PCで使えるメモリの量だけで決まります。
動画をそのままGIFにできますか？
ファイル／読み込み／ビデオフレームからレイヤーでフレームごとのレイヤーにし、「レイヤーからフレームを作成」でフレームアニメーションにしてから書き出します。
GIFとPNG・WebPはどう使い分けますか？
GIFはシンプルなアニメーションと、色数の少ない画像に向いた形式です。
形式ごとの向き不向きは書き出し形式の違いで比べています。
まとめ
PhotoshopのGIFアニメは、タイムラインで「フレームアニメーションを作成」を選び、フレームごとにレイヤーを変えて作ります。
遅延時間とループを決め、トゥイーンで中間のフレームを足すと滑らかになります。
書き出しはWeb 用に保存（従来）でGIFを選び、色数と画像サイズでファイルの大きさを整えてください。
