PhotoshopでアニメーションGIFを作る方法｜動く画像で注目度アップ！

クリックやタップなしに動く「アニメーションGIF」は、静止画よりも目を引きます。バナーやボタンとして使えば、コンテンツのクリック率アップが期待できます。

この記事では、Photoshopを使ったアニメーションGIFの作り方を、３パターンに分けて丁寧に解説します。Photoshopがない方向けに、無料のWebサービスも合わせて紹介しています。

アニメーションGIFを作るための素材を用意する

アニメーションGIFを作るには、まず素材が必要です。イラストでも写真でも動画でも問題ありません。今回は素材の種類・目的に応じて、以下の３パターンの作り方を解説します。

• 少ない枚数の写真・イラストから動く画像を作る方法
• 複数枚の写真・イラストから長めの動く画像を作る方法
• 動画（YouTube含む）から動く画像を作る方法

PhotoshopでアニメーションGIFを作る方法

Photoshopを使うと、細かなデザイン設定まで作り込めるのが最大の強みです。各ステップではPhotoshopのほか、代替できる無料サービスも紹介しますので、Photoshopをお持ちでない方も参考にしてください。

方法①：少ない枚数の写真・イラストから作る

完成イメージ（赤丸と青四角が切り替わるシンプルなアニメーション）

1）素材となるイラストを作成します。今回は「赤丸」と「青四角」の２つのレイヤーを用意しました。

2）「ウィンドウ　＞　アニメーション」にチェックを入れて、タイムライン設定画面を表示します。

3）「フレームアニメーションに変更」アイコンをクリックします。

4）レイヤーパネルで「青四角」を非表示にします。これで「赤丸だけ」のフレーム1が完成です。

5）フレームを選択した状態で「選択したフレームをコピー」します。

6）コピーしたフレームを選択したまま、レイヤーで「赤丸を非表示・青四角を表示」に切り替えます。

7）２つのフレームを選択し（Shiftまたはctrlで複数選択）、ディレイを「１秒」・繰り返しを「無限」に設定します。

8）再生ボタンで動作を確認します。

9）「ファイル　＞　Web およびデバイス用に保存」からGIFを保存します。

10）保存形式を「GIF」に設定します。プリセットは「GIF128ディザ」で問題ありません。

11）保存したGIFファイルをブラウザで開いて動作を確認します。ダブルクリックでは静止画として表示されるため、必ずブラウザにドラッグ＆ドロップして確認してください。

方法②：複数枚の写真・イラストから長めのGIFを作る

完成イメージ（複数画像がスライドショー形式で切り替わる）

1）新規カンバスに、素材となる複数の画像をまとめてドラッグ＆ドロップで取り込みます。

2）上記「方法①」の手順2〜3を参考に、フレームアニメーションを表示します。

3）アニメーションパネル右上のメニューアイコンをクリックし、「レイヤーからフレームを作成」を選択します。

4）レイヤー数と同じ数だけフレームが作成されます。不要なフレームは削除しておきます。

5）全フレームを選択した状態でディレイを「0.1秒」・繰り返しを「無限」に変更します。

6）上記「方法①」の手順8〜11を参考にして、ファイルを保存・確認してください。

無料Webサービス「bannerkoubou.com」でGIFを作る方法

Photoshopがなくても、無料Webサービス「bannerkoubou.com」を使えばブラウザ上でアニメーションGIFを作れます。

完成イメージ

1）bannerkoubou.com（外部サイト）にアクセスします。

2）画像を1枚ずつアップロードします。スマートフォンの撮影画像は容量が大きいため5〜6枚程度が上限となります。容量が大きい場合は同サイトの圧縮サービス（外部）で事前に縮小してください。

3）点滅間隔（ディレイ）とループ設定を調整して「GIFアニメを作成する」ボタンをクリックします。

4）画面が切り替わったらダウンロードボタンをクリックして保存します。

方法③：動画からアニメーションGIFを作る

動画をGIF化するとファイルが重くなりやすいため、後述するファイルサイズ縮小の手順も合わせて実施することをおすすめします。

1）動画ファイル（例：MP4）をPhotoshopにドラッグ＆ドロップします。

2）「方法①」の手順2を参考に、アニメーション設定画面を開きます。

3）タイムラインが表示されます。

4）ワークエリアの開始点と終了点を調整して、GIFにしたい範囲を選びます。

5）「方法①」の手順8〜11を参考に、ファイルを保存・確認してください。

YouTubeから無料でGIFを作る「gifs.com」の使い方

YouTubeの動画URLさえわかれば、Webサービス「gifs.com」で誰でも簡単にアニメーションGIFを作れます。利用には無料の会員登録（メールアドレスのみ）が必要です。なお、YouTubeの動画を使う際は著作権にご注意ください。

完成イメージ

1）gifs.com（外部サイト）にアクセスします。

2）YouTubeの動画URLを入力します。

3）各種設定を決めたら、画面右上の「Create GIF」をクリックします。

4）「DOWNLOAD GIF」をクリックしてダウンロードします。

アニメーションGIFのファイルサイズを小さくする方法

ファイルが重いと読み込みが遅くなったり、SNSへのアップロード制限にひっかかったりします。目安として1MB以下に抑えるのがおすすめです。効果的な縮小方法は以下の3つです。

• トリミング（不要な部分を削除してピクセル数を減らす）
• コマ落とし（フレーム数を減らす）
• 画質設定の変更（色数・ディザ・劣化を調整）

ファイルサイズの確認方法

ファイルサイズはいくつかの方法で確認できます。Windowsのエクスプローラーで選択して確認する方法、右クリック→「プロパティ」から確認する方法、Photoshopの保存設定画面で確認する方法があります。

縮小方法①：トリミング

不要な余白部分を切り取る方法です。縦横比を維持したままピクセル数だけ縮小することも可能です。Webバナー用途なら横幅300px程度で十分なケースが多いため、必要最小限のサイズに抑えましょう。

1）切り取りツールで必要な範囲を選択し、Enterを押します。

2）「方法①」の手順8〜11を参考にして保存・確認してください。今回の例では654KBから323KBへ、約半分まで縮小できました。トリミングは最も効果が大きい手法です。

縮小方法②：コマ落とし（フレーム数削減）

動画から作成したGIFや、フレーム数の多いGIFに有効な方法です。フレーム数を減らすことで動きがカクカクしたり早送りになる場合がありますが、ループ再生で補えます。

1）作成済みのGIFファイルをPhotoshopにドラッグ＆ドロップして取り込みます。

2）アニメーションパネルで不要なフレームを削除します。フレーム数が500・ファイルサイズ23MBの場合を例にすると、1MB程度を目標に約480フレームを削除します。全フレームを選択してからCtrl+クリックで20フレームだけ選択を外し、残りを削除するのが効率的です。

3）「方法①」の手順8〜11を参考に保存・確認してください。今回の例では23.3MBから1.44MBまで縮小できました。

縮小方法③：画質設定の変更

保存時の設定で画質を下げることでファイルサイズを縮小できます。特に効果的な設定項目は以下の3つです。

• カラー：色数を減らすほどファイルが軽くなります（ただし減色されます）
• ディザ：数値を下げると画像が粗くなりますがサイズが小さくなります
• 劣化：5〜10程度なら見た目への影響は軽微で、効果的にサイズを縮小できます

今回の例では323KBから221KBに縮小できました。前2つの方法と比べると縮小幅は小さいですが、仕上げとして合わせて実施するのがおすすめです。

無料Webサービス「I LOVE IMG」でGIFを圧縮する方法

Photoshopなしで圧縮したい場合は、オンラインサービス「I LOVE IMG」が使いやすくておすすめです。

1）I LOVE IMG（外部サイト）にアクセスします。

2）圧縮したいGIFファイルをドラッグ＆ドロップで取り込みます。

3）「画像の圧縮」をクリックします。

4）「圧縮された画像をダウンロード」をクリックして保存します。

まとめ：アニメーションGIFでコンテンツの注目度を上げよう

アニメーションGIFは、静止画より目を引きやすく、バナーやボタンとして使うとクリック率アップが期待できます。Photoshopがあれば細かく作り込めますし、無料Webサービスを使えばブラウザ上で手軽に作ることも可能です。

ファイルサイズは1MB以下を目安に、トリミング・コマ落とし・画質調整の3ステップで管理しましょう。まずは少ない枚数の画像で試してみると、意外と簡単に完成します。

Photoshopをまだお持ちでない方は、Adobe Creative Cloudのサブスクリプション（最新価格はAmazonで確認できます）から始めてみてください。