GIF画像作成(GIFアニメーション)

「バナー工房」では、オンライン上で簡単に無料でGIFアニメーションを作成できます。GIFのほか、Animated WebP・APNG形式のアニメーションも作成できます。
半透明を含む透過画像を使う場合や、より高画質のアニメーションを作成したい場合は、出力形式で「Animated WebP」または「APNG」を選んでください。
アニメーションの作り方
  1. 1
    アニメーションの設定を選ぶ

    「①点滅の間隔」「②ループ」「③出力形式」「④画質」「⑤切り取り設定」

  2. 2
    画像を複数追加する

    最低でも2枚以上

  3. 3
    順番や見せ方を整える並び順・切り取り範囲の調整
  4. 4
    アニメーションを作成するボタンを押すアニメーションの完成
  5. 5
    保存するボタンを押す自分の端末に保存
GIFアニメ画像とは、「複数の静止画像」を1つの画像に重ね合わせたアニメーション動画(GIF形式に変換した画像)の名称です。
アニメーションの設定

「点滅の間隔」は、1枚を表示する時間です。短いほど速く切り替わります。
各画像が「全体設定に従う」のときはこの値を使い、個別の画像エリアで、個別に調整できます。

②ループ設定

回数指定はアニメーション全体を再生する回数です。

③出力形式

形式ごとの特徴:
GIF:互換性重視
WebP:高画質・半透明対応・軽量
PNG:最高画質・半透明対応・容量大

④画質とファイル容量

高画質では色の段差を抑える処理を行うため、ファイル容量と作成時間が増えることがあります。

⑤切り取り設定
px

アニメーションの形・大きさをそろえたいときは、「比率を指定」または「完成サイズを指定」を選び、画像ごとにある「切り取り範囲」ボタンを選んでください。
少しでもアニメーションをきれいに仕上げるには?
あらかじめ「画像の切り取り加工ページ」で、すべての静止画像を完成画像と同じ「同じ縦横pxサイズ」にそろえてからアニメーションを作ると、 作成時の縮小を減らせるため、画質の劣化を抑えやすくなります。 例:600×400pxのアニメーションを作る場合は、静止画像も「画像の切り取り加工ページ」で、600×400pxで保存してから追加してください。

画像を追加(2枚以上)
0 / 100枚
ここに画像をドラッグ&ドロップ または上の「画像を選択」から追加(最大100枚)
まずは画像を2枚以上追加してください。一度に複数選ぶことも、後から追加することも可能。GIF・JPEG・JPG・PNG・WebP、1枚あたり15MBまで。
詳しい使い方
  1. 1
    全体の設定を決める

    「アニメーションの設定」で、出力形式・点滅の間隔・繰り返し・画質・切り取りサイズを選びます。設定は何度でも変更できます。

  2. 2
    画像を追加する

    「画像を選択」から、画像をまとめて選びます。パソコンでは点線の枠へドラッグ&ドロップもできます。最低でも画像を2枚以上追加してください。

  3. 3
    表示する順番を整える

    個別画像の下にある「前へ」「次へ」ボタンで、順番を変更できます。パソコンでは、カード上部の緑の帯をドラッグして順番を並び替え可能です。

  4. 4
    点滅の間隔・繰り返し・画質を整える

    全体の点滅の間隔を決めます。特定の画像だけ長く見せたいときは、その画像の「点滅の間隔」を変えます。繰り返す回数と画質もここで選べます。

  5. 5
    アニメーションを作成して保存する

    「アニメーションを作成する」を押して完成を待ちます。完成画像を確認し、「保存する」を押します。

よくある質問(Q&A)
保存したアニメーションが写真フォルダで動かないのはなぜですか?

アニメーション画像は、通常ウェブ上で表示されるときに動作します。一部の端末の写真フォルダ上では、形式によって動かないことがあります。その場合はウェブブラウザで表示してください。

縦横の幅が異なる画像はどうなりますか?

完成するアニメーションではすべてのコマを同じ大きさにそろえます。完成比率と元画像の比率が異なる場合は、必要な範囲だけ中央で切り取ります。同じ比率なら画像全体を使います。画像ごとに「切り取り範囲」ボタンから位置や拡大を変えられます。

画像はサーバーへアップロードされますか?

画像データはブラウザ内で処理し、サーバーへ送信しません。

1枚だけ別の画像へ変更できますか?

できます。対象カードの「変更」を押して、新しい画像を1枚選んでください。順番とその画像の点滅間隔は維持し、表示範囲は画像全体を使う初期状態へ戻します。ほかの画像は変更しません。

最大何枚まで追加できますか?

100枚までです。上限を超えてまとめて選んだ場合は、100枚に達するまでの正常な画像を追加し、残りは追加しません。大きな画像を多数使うと、端末のメモリや処理速度によって時間がかかることがあります。

1枚だけでも使えますか?

アニメーションを作るには2枚以上必要です。

画像の大きさや縦横比が違っても使えますか?

使えます。完成比率が同じ画像は全体を使い、異なる画像だけ必要な範囲を中央で切り取ります。端が切れる場合は、その画像の写真部分または「切り取り範囲」ボタンから、残したい部分へ動かしたり、内側を切り取って拡大したりできます。

画像の表示範囲を自分で変えられますか?

調整できます。先に全体設定の「比率を指定」または「完成サイズを指定」を選んでください。「切り取らない」では画像ごとの表示範囲は調整しません。比率・サイズは全画像共通です。画像カードの写真部分または「切り取り範囲」ボタンを押すと、白枠の内側で位置、四隅で大きさを調整できます。「中央へ戻す」は拡大の大きさを保ったまま中央へ戻し、「全体に戻す」は位置と拡大を初期状態へ戻します。「表示範囲を確定」を押すと、その画像の位置と枠の大きさを保存します。

「全体設定に従う」とは何ですか?

その画像だけの時間を指定せず、上部の全体設定を使う意味です。例えば全体を1秒にして、1枚だけ3秒に変更できます。

再生回数は指定できますか?

指定できます。「繰り返し」で「回数を指定」を選ぶと、1〜100回を入力できます。1回は最初から最後までを1度だけ再生します。初期値は無限ループです。

スマートフォンで画像の並部順番を変更する方法は?

各画像にある「前へ」「次へ」を使ってください。PCではカード上部の緑色の帯全体をドラッグできます。

アニメーションGIFを追加するとフレームに分解されますか?

この画面では1つの画像素材として扱い、フレーム分解はしません。一覧にはブラウザが表示する代表フレームを使います。既存アニメーションの分解や再設定にはアニメーションの再編集を使用してください。

透明なPNGやWebPは使えますか?

使えます。切り取り画面と完成結果は市松模様の背景上で確認できます。WebPとPNG(APNG)は半透明を保ったまま保存できます。GIFは半透明を扱えないため、透明・不透明の細かな点描に変換して近い見た目を保ちます。背景色や表示倍率によって点描が見える場合があります。

完成画像の色が元画像と違って見えるのはなぜですか?

GIFは1フレームで使える色が最大256色です。「画質とファイル容量」で高画質(256色・色の段差を抑える処理)、標準(128色)、軽量(64色)を選べます。WebPとPNG(APNG)はGIFのような色数制限を設けません。GIFを選んだときは、保存前に完成結果を確認してください。

スマートフォンではどのように保存されますか?

端末とブラウザが完成ファイルの共有に対応している場合、「保存」を押すと共有画面が開きます。iPhoneでは共有画面から「画像を保存」などを選び、AndroidではFiles、フォト、ギャラリーなど保存先のアプリを選んでください。共有に対応していない場合は通常のダウンロードになります。表示される項目は端末やブラウザによって異なります。

Q. 画像を追加できない、または作成時に「画像を読み込めませんでした」と表示された場合は?

A. まずはそのままもう一度お試しください。作成中のエラーであれば、追加した画像や設定は残るため、画像を選び直さずに再度「アニメーションを作成する」を押せます。
改善しない場合は、Chromeを最新版にしたうえでページを更新してください。ページを更新すると、追加済みの画像・順番・未保存の設定は消えるため、必要な内容を確認してから行ってください。
何度も起きる場合は、端末名・Chromeのバージョン・画像の縦横サイズ・表示された「何枚目」のエラーを添えてお問い合わせください。

「アニメーションを作成する」ボタンを押せないのはなぜですか?

アニメーションにする画像が2枚未満の場合、または画像の読み込み・作成中は押せません。2枚以上の読み込みが完了すると有効になります。

お知らせ
バナー工房では、無料サービス維持のために「全画面広告」を表示させていただく場合があります。
全画面広告が表示された際は、広告の右上にある「×」ボタン等で閉じていただけますと幸いです。
無料サービス運営継続のため、何卒ご理解とご協力をお願いいたします。

完成品サンプル

静止画像を重ね合わせることによって、まるで動画のような仕上がりになります!連続して表示される複数の静止画像が、素早く切り替わることで動くように見えます。