アニメーションGIFの作り方｜Photoshopと無料Webサービスで動く画像を作る3つの手順

パッと目に入って思わず見てしまう「アニメーションGIF」は、止まっている画像よりもずっと注目を集めやすい素材です。バナーやボタンに取り入れるだけで、クリックされる確率がぐっと高まることもあります。この記事では、Photoshopを使って動く画像を仕上げる手順を、手元にある素材のタイプ別に3通りに分けてじっくり解説していきます。あわせて、Photoshopを持っていない方でもブラウザだけで作成できる無料サービスも取り上げますので、自分のやりやすい方法を探してみてください。

作業を始める前に、素材を準備しておこう

アニメーションGIFを完成させるには、まず元になる素材が欠かせません。写真でもイラストでも動画でも構いませんが、用意できる素材の種類や、どんな仕上がりにしたいかによって最適な作り方は変わってきます。今回は、次の3つのパターンに分けて手順を紹介していきます。

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

「言葉だけだと完成形がイメージしづらい」という方は、先に動く画像（アニメーションGIF）の動作比較デモページを見てから読み進めると理解しやすくなるはずです。

Photoshopを使ってアニメーションGIFを仕上げる

Photoshopの大きな魅力は、タイミングや見た目を細部まで自分好みに調整できることです。各手順ではPhotoshopでの操作と並行して、代わりに使える無料サービスも紹介していきますので、Photoshopを持っていない方も役立ててください。

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

こちらが完成イメージです。赤い丸と青い四角が交互に切り替わる、とてもシンプルな動きになっています。

1）まずは元になるイラストを準備します。今回の例では「赤丸」と「青四角」という2つのレイヤーを作成しました。

2）メニューから「ウィンドウ＞アニメーション」を選び、チェックを入れてタイムラインのパネルを開きます。

3）パネル内にある「フレームアニメーションに変更」のアイコンをクリックしましょう。

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

5）作成したフレームを選んだ状態のまま、「選択したフレームをコピー」のボタンを押します。

6）コピーしたフレームを選んだまま、今度は「赤丸を非表示・青四角を表示」になるようレイヤーを切り替えます。

7）2つのフレームをまとめて選択し（Shiftキーやctrlキーを使うと複数選択できます）、ディレイを「1秒」、繰り返し回数を「無限」に設定してください。

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さえわかれば、「gifs.com」というサービスで誰でも手軽にアニメーションGIFを作成できます。利用にはメールアドレスだけで完了する無料の会員登録が必要です。なお、他人の動画を素材として使う場合は、著作権の扱いに十分注意してください。

こちらが実際の完成イメージです。

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の流れにしたがって保存・確認すればOKです。今回試した例では654KBだったファイルが323KBまで減り、ほぼ半分のサイズに抑えられました。3つの方法の中でも、トリミングはとりわけ効果が大きい手段だと言えます。

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

動画から書き出したGIFや、もともとフレーム数が多いGIFに向いている方法です。フレームを間引くと動きがやや早送りやカクカクした印象になることがありますが、ループ再生にすればそれほど気にならなくなります。

1）すでに作成済みのGIFファイルを、Photoshopの画面にドラッグ＆ドロップで読み込みます。

2）アニメーションパネルの中から、いらないフレームを選んで削除していきます。たとえばフレーム数が500・容量が23MBあるような場合、目標の1MB程度に近づけるにはおよそ480フレームほどを削る必要があります。一度すべてのフレームを選択してから、残したい20フレームだけCtrlキーを押しながらクリックして選択を外し、それ以外をまとめて削除すると効率よく進められます。

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は静止画よりも視線を集めやすく、バナーやボタンに使うことでクリックされる回数が増える効果も期待できます。Photoshopを使えば細部まで作り込めますし、無料のWebサービスを利用すればブラウザだけで気軽に作成することも可能です。

仕上げる際は、ファイルサイズを1MB以下に収めることを目安に、トリミング・コマ落とし・画質調整の3つを組み合わせて調整してみてください。最初は枚数の少ないシンプルな素材から試してみると、思ったよりあっさり完成させられるはずです。

まだPhotoshopを持っていない方は、Adobe Creative Cloudのサブスクリプション（最新の価格はAmazonのページで確認できます）から検討してみるとよいでしょう。