GIFファイルを作成する方法

GIFファイルは、World Wide Web（ワールド・ワイド・ウェブ）上で最も広く使用されている画像ファイルフォーマットのひとつです。256色までの色を含めることができ、特に、動画のようにアニメーション画像や文字を扱えることから人気があります。多くのウェブツールを使って、誰もが数分で動画や画像からオリジナルのGIFアニメを作成することができます。パソコンに詳しい方であれば、PhotoshopやGIMPなどのソフトウェアを使ってGIFアニメをゼロから作成できます。

方法 1

方法 1 の 5:

動画からGIFアニメを作成する

PDF形式でダウンロード

1
動画からGIFアニメへの変換を行う、信頼できるツールを使う　たとえば、お使いのウェブブラウザ上ですぐに利用できる（ダウンロードの必要はありません！）Giphy GIF Maker^{[1]X出典文献} や IMGUR Video to GIF^{[2]X出典文献} など、たくさんの選択肢があります。
- ダウンロードするタイプのアプリケーションを使用したい場合は、お使いの端末のアプリストアでレビューをたくさん読むようにしましょう。信頼できないサイトからソフトウェアをダウンロードしたり、実行したりしないようにしましょう。
- ご紹介した2つのアプリケーションは、最長15秒のオンライン上にある動画からGIFアニメを作成できます。ごく一般的な仕様です。
- ほとんどの変換サイトでは、GIFアニメに変換する動画がYouTubeやVimeoといった動画共有サイトにアップロードされている必要があります。Giphyなど、自分の動画をアップロードできるサイトもあります。
0.5秒から15秒程度の動画をインターネット上で探しましょう（Giphyなどのサイトを利用する場合は、お使いの端末の中から動画を探しましょう）。インターネット上の動画を使用する場合、ブラウザで動画を開きます。
3
変換ツールに動画を読み込む　利用する変換ツールによって、手順が異なります。
- YouTubeのようなサイトを使用する場合は、ブラウザで動画を開きます。ブラウザのアドレスバーから動画のURLをすべてコピーし、変換ツール上の適切なテキストボックスに貼り付けます。テキストボックスには「Paste URL here（ここにURLを貼り付ける）」といった表示があるはずです。↵ Enter を押して、「OK」をクリックしましょう。
- 動画をアップロードする場合は、変換ツール上でボタン（「Browse Your Video Files（動画ファイルを見る）」といった表示があるはずです）を探して、お好みの動画ファイルを選択しましょう。
GIFの長さを指定する^{[3]X出典文献}　各サイトにはさまざまな編集オプションがありますが、どのサイトでも、GIFに変換する動画の範囲を指定できます。たとえば、Imgurでは、動画の下にスライダーが表示され、スライダーを使って「開始」位置と「終了」位置を設定できます。
ほぼすべての変換ツールでは、GIFにテキストや効果を追加することができます。「Add Text（テキストの追加）」や「Add Caption（キャプションの追加）」といったボタンを探してみましょう。
6
ファイルを作成する　編集が終わったら、変換ツール上で「Create GIF（GIFの作成）」や「Save GIF（GIFの保存）」をクリックして保存メニューを開きます。GIFファイルの名前を指定し、パソコン上の覚えておきやすいフォルダに保存しましょう。
- GIFが10MBより大きい場合、変換ツールで作成されるファイルは、「.GIF」ではなく「.GIFV」で終わるファイル名になっていますが、通常のGIFアニメとして扱うことができます。
- 作成したGIFは、ウェブブラウザで開いて確認できます。GIFを保存したフォルダを開き、ブラウザのウィンドウにGIFファイルをドラッグしましょう。携帯端末をお使いの場合は、ファイルの場所を開き、ファイルをタップして開きます。アニメーションが即座に再生されるでしょう。
広告

方法 2

方法 2 の 5:

画像からGIFアニメを作成する

PDF形式でダウンロード

静止画からGIFアニメを作成したい場合は、お使いのパソコンか携帯端末に画像があることを確認しましょう。画像がインターネット上にある場合は、最初にお使いのパソコンへダウンロードしておきましょう。
2
画像からGIFへ変換するツールを選ぶ　GifCreator ^{[4]X出典文献} や GIFMaker Video Maker^{[5]X出典文献} など、たくさんのツールがあります。GifCreatorやGIFMaker Video Maker、その他の多くのツールはオンラインでの利用が可能で、ダウンロードの必要がありません。
- このような変換ツールは、一般的に、各フレームのサイズを変更したり、アニメーションの速度をコントロールする機能といった類似する機能を備えています。また、ウェブブラウザを通して、携帯端末からも利用することができます。
- GIFを作成できる、ダウンロードが可能なアプリもありますが、多くの無料アプリは広告で溢れています。アプリをダウンロードしたい場合は、ダウンロードする前に各製品のレビューを読むようにしましょう。
ブラウザで変換ツールを開き、「Upload Images（画像アップロード）」といった表示のあるボタン（利用する変換ツールによって異なります）を見つけましょう。画像を選択できるダイアログボックスが表示されるはずです。画像をダブルクリックするか、画像を選択して「開く」をクリックしましょう。変換ツール上にサムネイルが表示されるはずです。
ほとんどの変換ツールでは、画像の下にサイズや繰り返し回数などの調整可能な設定が表示されているでしょう。スライダーを動かし、設定を調整しましょう。画像のサムネイルをクリックすると、後からでも調整可能です。
「Upload Images（画像アップロード）」ボタンをクリックして、追加の画像をアップロードしましょう。ほとんどの変換ツールでは、画像をドラッグして順番を変更できるので、画像を順番通りにアップロードできなくても問題ありません。また、各画像のサイズも調整できます。アニメーションのプレビューが表示されなければ、「Preview（プレビュー）」や「Play（再生）」といったボタンを探して、アニメーションの出来をチェックしましょう。
アニメーションの順番やサイズの調整が完了したら、「Create GIF animation（GIFアニメの作成）」や「Create GIF（GIF作成）」をクリックして、保存ダイアログを開きましょう。覚えておきやすい端末上のフォルダと、覚えやすいファイル名を選択します。「Save（保存）」または「Download（ダウンロード）」をクリックして、GIFファイルを保存しましょう。
広告

方法 3

方法 3 の 5:

GIMPでゼロからGIFアニメを作成する

PDF形式でダウンロード

ゼロからGIFアニメを作成する場合、GIMPを使い慣れているのであれば、この方法がぴったりです。GIMPをお持ちでなければ、インストールして、アプリを起動しましょう。
2
新しい画像を作成する^{[6]X出典文献} 　「ファイル」メニューで、「新規」をクリックします。画像に関するオプションが示されたダイアログボックスが表示されます。
- 「幅」と「高さ」というテキストボックスが、「ピクセル」と一緒に表示されます。お好みのサイズを（ピクセル単位で）各テキストボックスに入力します。インチの方が使いやすければ、「インチ」をリストから選んで、お好みの画像サイズを入力しましょう。
- 「塗りつぶし色」で、GIFの背景色を選択します。GIMPのツールボックスには、塗りつぶされた四角が2つあります。「描画色」を選択すると、前面にある四角の色が適用され、「背景色」を選択すると、背面にある四角の色が適用されます。
- 「OK」をクリックして画像を作成します。
レイヤーウィンドウを表示させる^{[7]X出典文献}　「ウィンドウ」メニューを開いて、「ドッキング可能なダイアログ」を選択します。リストの中から「レイヤー」を選択しましょう。
4
最初の要素として、新規レイヤーを作成する　アニメーションの各部品は、別のレイヤーに分かれていなくてはなりません。レイヤーウィンドウの左下にある小さな紙切れのアイコンをクリックして、新規レイヤーダイアログを開きます。
- 「レイヤー名」にレイヤーの名前を入力して、後でレイヤーを入れ替えやすくしましょう。
- シームレスなアニメーションにするため、レイヤー塗りつぶし方法を「透明」にして、「OK」をクリックします。
5
画像やテキストをレイヤーに追加する　絵を描きたい場合は、ツールボックスでブラシアイコンをクリックし、色を選択して絵を描きましょう。テキストを挿入する場合は、ツールボックスで「A」アイコンをクリックして、キャンバス上をクリックし、文字を入力します。
- 1つのレイヤーに配置した内容はすべて一緒にアニメーション化されます。つまり、あるレイヤーに文字を入力し、絵を描いた場合、この2つの要素はアニメーションの中の同じフレームに表示されるということです。
- レイヤーに画像やテキストを配置したら、レイヤーウィンドウを確認して「不透明度」オプションを見てみましょう。レイヤーを透明に近づけたい場合は、お好みの値になるまでスライダーを下げます。
アニメーションに必要なレイヤーの数だけ、このステップを繰り返しましょう。新しいレイヤーには、他のレイヤーと被らない名前を付けて「OK」をクリックします。
「フィルター」メニューを開いて、「アニメーション」、そして「再生」を選択します。各レイヤーから作成されたアニメーションのプレビューが表示されます。
8
アニメーションのオプションを変更する　「ファイル」メニューを開いて「エクスポート」をクリックします。そして、「GIF画像」を選択します。「アニメーションとして保存」のオプションにチェックが入っていることを確認しましょう。
- アニメーションを無限にループさせたい場合は、「無限ループ」にチェックを入れます。
- 「指定しない場合のフレーム間の時間」には、各フレームを表示させたい時間（ミリ秒）を入力します。デフォルトでは100になっています（プレビューがやや速く見えるのはこの値のためです）。300や600などの大きめの数字に変更して、「保存」をクリックします。
9
フレーム間の微調整を行う　各レイヤーの表示する長さを同じにしたくない場合、レイヤー毎に表示する長さを個別に編集できます。
- レイヤーウィンドウでレイヤー名を右クリックして、「レイヤー属性の編集」を選択します。
- レイヤー名と長さ（ミリ秒）をスペースを入れずに、次のように入力します。LAYERNAME(200ms)
- 「OK」をクリックして、レイヤーを保存します。他のレイヤーも同様に編集しましょう。
「フィルター」メニューで「アニメーション」をクリックし、「再生」を選択して、アニメーションに加えた変更を確認して見ましょう。画像を保存する準備ができたら、「ファイル」そして「エクスポート」をクリックして、「GIF画像」を再度選択します。アニメーションに名前を付けて、「保存」をクリックして作業を終了しましょう。
広告

方法 4

方法 4 の 5:

PhotoshopでゼロからGIFアニメを作成する

PDF形式でダウンロード

1
Photoshopで新規ファイルを作成する^{[8]X出典文献}
- 「ファイル」メニューを開いて、「新規」をクリックし、新規ファイルのオプションを確認します。「ファイル名」にアニメーションの名前を入力しましょう。
- 「幅」と「高さ」のテキストボックスには、テキストボックスの隣に単位が表示されます。過去に使用した設定によって、インチまたはピクセルが設定されています。ピクセルでサイズを指定したければ、「pixel」を選択しましょう。インチの方が扱いやすければ、インチを選びます。対応するテキストボックスにお好みの値を入力しましょう。
- アニメーションの背景色を選択します。「カンバスカラー」（お使いのPhotoshopバージョンによって表記が異なります）をクリックして、色のオプションを選択しましょう。
- 「OK」をクリックして、指定した設定で新規ファイルを作成します。
レイヤーパネルとタイムラインパネルを開く^{[9]X出典文献}　アニメーションの各フレームが、それぞれ1つのレイヤーに表示される必要があるため、レイヤーパネルを表示しておきましょう。「ウィンドウ」メニューをクリックして、「レイヤー」と「タイムライン」両方をチェックします。すると、ワークスペース上にパネルが表示されます。
3
最初のフレーム用に新しいレイヤーを作成する　レイヤーパネルで、プラスのマーク（+）をクリックし、新規レイヤーを追加します。「レイヤー名」のテキストボックスに、「フレーム1」といった名前を入力します。描画モードを透明または背景色に設定します。「OK」をクリックして、新しいレイヤーを作成しましょう。
- アニメーションの各要素は、独自のフレームに配置する必要があります。あるレイヤーに配置した要素は、1つのフレームとしてアニメーション化されます。
レイヤーに絵を追加したい場合は、スウォッチパネル（色のついた四角が並べられたパネル）から色を選び、ブラシツールを選択します。テキストを追加したい場合は、「T」のアイコンをクリックしてテキストツールを開きます。
5
次のフレームを作成する　別のレイヤーを作成して、アニメーションの2つ目のフレームを作成しましょう。
- 2つ目のフレームが、単純に1つ目のフレームを少し変更したものであれば、レイヤーを新しく作成するのではなく、レイヤーを複製すると良いでしょう。レイヤーの複製を作成するには、レイヤーパネルで元のレイヤーを右クリックして「レイヤーを複製」を選択します。
- アニメーションのフレームの数だけレイヤーを揃えるまで、レイヤーの作成、またはレイヤーの複製を繰り返します。
画面の下部にあるタイムラインパネルで、小さな長方形の上に小さな正方形がのったアイコン（新規フレームボタン）をクリックします。アイコンをクリックすると、新しいフレームが作成されます。このボタンをレイヤーの数だけクリックしましょう。アニメーションに7つのレイヤーがあれば、フレームを7つ作成します。
7
タイムラインパネルで、最初のフレームの内容を編集する　パネル上で最初のフレームをクリックします。サムネイルを見てわかるように、このフレームにはアニメーションのすべてのレイヤーが含まれています。
- レイヤーパネル上の各レイヤーに表示されている小さな目のマークを見てみましょう。この記号は、該当のレイヤーが表示状態であることを示します。アニメーションの最初のフレームで、最初のレイヤーだけを表示させたい場合は、他のすべてのレイヤーから目のマークを消しましょう。
- サムネイルの下に表示された時間（秒）を調整して、フレームの長さを変更しましょう。デフォルトでは、「0秒」になっています。
各フレームをクリックして、フレームに表示したいレイヤー以外のレイヤーを非表示にします。それぞれのサムネイルの下にある表示時間の調整も忘れないようにしましょう。
再生ボタンは、タイムラインパネルのサムネイルが表示されている部分の下にあります。
「ファイル」、そして「Web用に保存」をクリックします。「プリセット」という表示の下のドロップダウンでGIFが選択されていることを確認し、「保存」をクリックします。
広告

方法 5

方法 5 の 5:

画像から（アニメーションではない）GIFを作成する

PDF形式でダウンロード

1
GIFに変換する画像を決める　ウェブサイトの中には、GIFフォーマットの画像が必要なものがあります。幸い、ほとんどすべての画像がGIFフォーマットに変換可能です。GIFファイルは256色しか扱えないことを頭に入れておきましょう。つまり、JPGやBMP、TIFFなど高画質の画像をGIFに変換する場合、画質が落ちてしまう可能性があります。
- 変換したい画像がインターネット上にある場合、まず、お使いのパソコンへ画像をダウンロードしましょう。
2
画像編集ソフトで画像を開く　Finder、またはエクスプローラーでパソコン上の画像の場所を特定します。そして、次の操作を行います。
- Macの場合：画像をダブルクリックして、プレビューで画像を開きます。^{[10]X出典文献}
- Windowsの場合：画像を右クリックして、「このアプリケーションで開く」を選択し、メニューから「ペイント」を選びます。
3
ファイルをGIFとして保存する　プレビュー（Macの場合）、またはペイント（Windowsの場合）で画像を開き、次の操作を行います。
- Macの場合：「ファイル」メニューを開き、「名前を付けて保存」を選択します。「フォーマット」のメニューで、「GIF」をクリックしましょう。新しいファイル名を入力し、「保存」をクリックしてGIFを作成します。
- Windowsの場合：「ファイル」をクリックして、「名前を付けて保存」の隣にある三角をクリックします。リストの中から「GIF画像」を選択して、ファイル名を入力しましょう。「保存」をクリックして、GIFを作成します。
広告

ポイント

アニメーションを使った画像やバナーは便利ですが、ウェブページで使用する場合、アニメーションに含まれる内容を制限しなくてはなりません。一般的に、過度なアニメーションは、ウェブページ上にある他の情報から注意をそらしてしまうため、適切なWebデザインには、アニメーションがほとんど必要ありません。
GIFアニメは、標準的な動画よりもサイズが非常に小さなショートビデオとしても機能します。