下記のように、短い動画が表示されるウェブページを見たことはありませんか？
これはGIFアニメーションとよばれるもので、特別なツール・操作不要で簡単に見られることから、幅広い場面で使われています。GIFアニメーションを作るにはさまざまな方法がありますが、今回は特に高機能な「Photoshop」を使ったやり方にフォーカス。GIFアニメを自分でも作ってみたいとお考えの方は、ぜひ参考にしてください。
人気の猫ダンスミーム素材が新搭載｜画像・動画編集ソフトFilmora
目次
1. PhotoshopでGIFアニメーションを作るための基礎知識
まず、GIFアニメーションとPhotoshop、それぞれの特徴を把握しましょう。
1.1 GIFアニメーションとは？
GIFアニメーションとは、複数のGIF画像を連続して表示することで、パラパラ漫画のように動きを出している動画形式です。
MP4やWAVといった他の動画形式とは違い、GIFアニメーションはコンピュータ上では「画像」として扱われます。また、他の動画形式と比べると、下記のメリット・デメリットがあります。
メリット
特別なツールがなくても動画を作成・再生できる
他の動画と比べてデータ容量が小さい
デメリット
音声データを扱えない
使える色が256色までに限られる
関係記事: 【2025年完全版】無料GIF素材サイトが見つかる・使える！動画クオリティを爆上げする“神”GIF活用術【10選】
1.2 Photoshopとは？ GIFアニメ制作に最適な5つの理由とは？
続いて、Photoshop（フォトショップ）について簡単に説明します。
Photoshopとは、Adobeが提供する画像編集ソフトです。特に写真の編集（フォトレタッチ）機能の性能には定評があり、デザイン・アート業界のプロフェッショナルにも広く使われています。豊富な機能が持ち味のPhotoshopですが、GIFアニメを作るときには特に下記5つの機能・特徴が役立つでしょう。
- プロフェッショナルな編集機能で、動画の細部まで思い通りに制御できる
- フレーム単位の精密な制御が可能で、狙った通りのタイミングで編集できる
- 高度なカラー調整・最適化機能により、豊かな雰囲気を表現できる
動画編集には、タイムライン／フレームアニメーションの2つのワークフローが用意されており、ニーズに合わせて切り替えられる
豊富なエフェクトとレイヤー機能を備えており、クリエイティビティを自由に発揮できる
2. Photoshopで作る！GIFアニメーション実践ガイド
ここからは、PhotoshopでGIFアニメーションを作る手順を、具体的に紹介していきます。「プロ向けのソフトは使い方が難しそう……」と思いがちですが、基本的な使い方は意外と簡単。ぜひ本ガイドを見ながら試してみてください。
2.1 【基本編】画像からGIFアニメーションを作る手順
まず、複数の画像から、スライドショーのようなGIFアニメを作る手順をご紹介します。本ガイドではサンプルとして、下記のコマ撮り動画を作っていきます。
1. Photoshopを起動し、画像をPhotoshopに読み込み
Photoshopを起動します。メニューバーの「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を順にクリックします。
「参照」をクリックして、GIFアニメ化したい画像をすべて選択します。その後「OK」をクリックします。
各画像がレイヤーとして読み込まれます。このタイミングで、必要に応じて画像を編集しておきましょう。
2.タイムラインパネルの設定・アニメーションの作成
メニューバーの「ウィンドウ」>「タイムライン」を順にクリックします。Photoshopで動画を作成・編集するためのタイムラインが画面下に表示されます。
プルダウンから「フレームアニメーションを作成」を選びます。もう一度「フレームアニメーションを作成」をクリックすると、タイムラインに画像が配置されます。
タイムライン右側のパネルメニュー（3本線のアイコン）をクリックし、「レイヤーからフレームを作成」を選びます。タイムライン上に、各レイヤーの画像が表示されます。
3. アニメーションの調整・編集
タイムライン下の「再生」アイコンをクリックすると、アニメーションをプレビューできます。
必要に応じて、下記のような編集を行いましょう。
フレームの順序を入れ替え
タイムライン上のフレームをドラッグ&ドロップして、映し出す順番を入れ替えられます。
フレームの表示時間を変更
各フレームの下にあるプルダウンから、フレームを表示する時間を変更できます。
アニメーションのループ回数を設定
画面最下部のプルダウンから、アニメーションのループ回数を変更できます。「無限」に設定すると、アニメーションが繰り返し再生されます。
4. GIFアニメーションとして書き出し
メニューバーの「ファイル」>「書き出し」>「Web用に保存」を順にクリックします。
「最適化」タブで、形式が「GIF」になっていることを確認します。必要に応じて、画像サイズなどの設定も変更しておきましょう。
「保存」を選択すると、ポップアップが表示されます。ファイル名・保存先などを指定して「保存」をクリックします。
これで、Photoshopを使って画像からGIFアニメを作る手順は完了です！
2.2 【応用編】動画をGIFアニメーションに変換する手順
Photoshopを使えば、スマホで撮った動画をGIFアニメーションに変換することもできます。下記に、その手順をご紹介します。
1. 動画ファイルのインポート
Photoshopを起動し、メニューバーの「ファイル」>「読み込み」>「ビデオフレームからレイヤー」を順に選択します。その後、GIF化したい動画を選択して「開く」をクリックします。
「ビデオをレイヤーに読み込み」ウィンドウが開いたら、必要に応じて読み込む範囲を指定してください。
「OK」をクリックすると、Photoshopに動画が読み込まれます。
2. 「ビデオタイムライン」に変換し、動画を編集
先に説明した「画像からGIFアニメーションを作る手順」と同じように、フレーム（レイヤー）ごとに編集を加えていくこともできますが、動画を読み込んだ場合は「ビデオタイムライン」に変換するのが便利です。
タイムライン左下の「ビデオタイムラインに変換」アイコンをクリックします。
タイムライン表示が切り替わります。ビデオタイムラインでは、キーフレームの設定や背景レイヤーの追加などを行えます。
通常、MP4などの動画からGIFアニメを作ろうとすると、ファイルサイズが非常に大きくなってしまいます。扱いやすいGIFアニメにするには、下記の編集がおすすめです。
フレームレートを低くするフレームレート（fps）とは、1秒間に何枚のフレームを表示するかを示す数値です。この数値が高いほどアニメーションは滑らかになりますが、ファイルサイズも増えてしまいます。
フレームレートを変更するには、タイムライン右側のパネルメニュー（3本線のアイコン）をクリックし、「タイムラインのフレームレートを設定」を選択します。
次に、表示されたウィンドウでフレームレートを設定し、「OK」をクリックします。GIFアニメの場合、15〜24fpsにしておくとファイルサイズと見栄えのバランスが取りやすいでしょう。
解像度を下げる解像度（ppi）は、1インチあたり何ピクセルを表示するかを示す数値です。数値が高いほど画像はくっきり精細になりますが、やはりファイルサイズが大きくなります。
Photoshopで解像度を変更するには、メニューバーの「イメージ」>「画像解像度」を順にクリックします。
表示されたウィンドウで解像度を指定します。GIFアニメの場合は72ppi（pixel/inch）がおすすめです。さらにここで画像サイズ（幅・高さ）を小さくすれば、よりファイルサイズを削減できます。
3. GIFアニメーションとして書き出し
メニューバーの「ファイル」>「書き出し」>「Web用に保存」を順にクリックします。
「最適化」タブで、形式が「GIF」になっていることを確認します。必要に応じて、画像サイズやループ設定などを調整できます。
「保存」を選択すると、ポップアップが表示されます。ファイル名・保存先などを指定して「保存」をクリックします。
これで、Photoshopを使って画像からGIFアニメを作る手順は完了です！ ちなみに、今回作成したGIFアニメは下記のとおりです。
関係記事: 【完全保存版】MOV/AVIとGIFの相互変換完全マニュアル
3. Photoshop以外の選択肢 - FilmoraでGIFアニメ作りをさらに簡単に！
先にお伝えしたとおり、Photoshopはプロ仕様の画像編集ソフト。GIFアニメーション作りにも便利に使えますが、「ソフトが重くてスムーズに動かない……」「もっとシンプルにGIFアニメを作りたい！」と感じる方もいらっしゃるかもしれません。
そこでおすすめしたいのが、初心者も使いやすい直感操作とプロも納得の高度な機能を兼ね備えた動画編集ソフト「Filmora（フィモーラ）」です。ここからは、Filmoraの概要から使い方まで、GIFアニメ作りに役立つ情報を余すところなくお伝えします。
Filmora画像から動画生成機能を使ってGIFを生成する
3.1 動画編集ソフトFilmora（フィモーラ）とは
Filmora（フィモーラ）は、Wondershare社が提供するオールインワンの動画編集ソフトです。マウス操作中心の直感的なインターフェースは、動画編集が初めてでも迷わず使えるほど。もちろん日本語に完全対応しています。
Filmoraの主なメリットを下記にご紹介します。
高機能かつ豊富なAI機能
長い動画をショート動画にリミックスする、動画に字幕をつけて翻訳する、無音シーンをカットするなど、手動では多大な手間がかかる編集も、AIに1クリックでお任せできます。さらに、画像・動画・音楽や効果音など、動画に必要なあらゆるものをAI生成で作り出せます。
Filmoraの新機能テキストから動画生成！Google Veo 3で高品質動画を作ろう！
直感的・視覚的なユーザーインターフェース
動画編集ソフトの中には、前提知識やスキルがないと使いこなせないものも少なくありません。ですがFilmoraなら、動画編集に必要な操作・情報が1画面にまとまっているため、必要なものを一目で探せます。
さらに、アイコンにマウスカーソルをホバーしてナビゲーションを見ることも可能。チュートリアルに煩わされることなく、自分の作りたいものを作りながら、動画編集スキルを磨けます。
リーズナブルで導入しやすい価格設定
Filmoraには、無料体験版と有料版が用意されています。無料体験版でもFilmoraのほとんどの機能を使えるうえに、期間の制限はありません。思う存分に使い勝手を試せます。
無料版で付与されるAIクレジットを使い切った、あるいはウォーターマーク（透かし）のない動画をアウトプットしたいとお考えなら、有料版をご検討ください。ベーシックプランの料金は年間6,980円（税込）〜、月々の価格にするとわずか約580円。Photoshopや他の動画編集ソフトと比べても、抜群のコストパフォーマンスを誇ります。
3.2 FilmoraでGIFアニメーションを作る手順
それでは、FilmoraでGIFアニメーションを作る方法を見ていきましょう。複数枚の写真・画像からGIFアニメを作る場合も、動画をGIFアニメに変換する場合も、操作方法は同じです。
1. Filmoraで新しいプロジェクトを開始し、GIFアニメにしたい素材を読み込み
Filmoraを起動し、「新しいプロジェクト」をクリックします。
「インポート」をクリックして、GIFアニメにしたい画像・動画を選択します。
2. 素材をタイムラインに配置し、編集
読み込んだ素材を、ドラッグ＆ドロップでタイムラインに配置します。
Filmoraのストック素材（画像・動画など）、トランジション（画面遷移）、エフェクト（視覚効果）、ステッカーなども、同様にドラッグ＆ドロップで追加できます。
3. GIF形式でエクスポート
編集ができたら、画面右上の「エクスポート」をクリックします。
ファイル名や保存先を指定します。「フォーマット」は「GIF」を選んでください。「詳細設定」をクリックすると、解像度やフレームレートを調整できます。
設定ができたら「エクスポート」をクリックします。
これでFilmoraを使ったGIFアニメーション作りは完了です！ この記事では、下記のようなGIFアニメを作成しました。
よくある質問
GIFアニメーションに最適な解像度やフレームレートはいくつですか？
一般的に、GIFアニメーションとしておすすめの設定は下記の通りです。
画面サイズ
横長：1280 × 720 pixel（アスペクト比 16:9）
縦長：720 × 1280 pixel（アスペクト比 9:16）
正方形：1080 × 1080 pixel
解像度：72 ppi
フレームレート：15〜24 fps
ファイルサイズは、ウェブページに載せるなら1MB以下、SNSに投稿するなら5MB以下を目安にしましょう。
GIFアニメーションをPhotoshopで再度読み込んで編集することはできますか？
はい、編集可能な形でGIFアニメーションを開くには、Photoshopを起動し、メニューバーの「ファイル」>「開く」からファイルを指定します。
GIFアニメーションを編集画面にドラッグ＆ドロップして追加する方法では、Photoshop上での動画編集ができないため、ご注意ください。
Photoshopから書き出したGIFアニメーションが動かないのはなぜですか？
書き出したGIFが動画として見られない場合は、次の点を確認してみましょう。
再生ソフト、ウェブブラウザがGIFアニメに対応しているかMacのデフォルトアプリ「プレビュー」など、ソフトによってはGIFアニメを再生できません。
デバイスがアニメーションを表示できる設定になっているかアクセシビリティ設定により、アニメーションが表示されないことがあります。Windowsの場合は「アニメーションを表示する」、Macの場合は「アニメーション画像自動再生」がオンになっているかを確かめましょう。
GIFアニメのループ再生が適切に設定できているかループ回数を「1度」にしていると、GIFアニメは再生後に停止するため、動かないように見えることがあります。編集ソフトの書き出し設定でループ回数を「無限」に設定し、アニメーションが繰り返し再生されるようにしておきましょう。
まとめ
この記事では、PhotoshopでGIFアニメーションを作る方法を、くわしくご紹介しました。Photoshopを使えば、画像からでも動画からでも、高品質なGIFアニメを生み出せます。さらに簡単・手軽にGIFアニメを作りたいという方には、直感的な操作性とお手頃な価格を兼ね備えた動画編集ソフト「Filmora」がおすすめ。
GIFアニメはウェブページやSNSなど、さまざまな場面で活用できます。この記事を参考に、スムーズなGIFアニメ制作をぜひお楽しみください！
役に立ちましたか？コメントしましょう！