Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

GIF

Others

簡単!!動画をGIFアニメーションに変換できるサイト

 

WEBサイトを閲覧していると動画でもないアニメーションが自動再生されているのを見かけますよね?
このような感じの・・・
original
画像だけだと少し寂しいサイトもどこか動きがあればそれだけで華やかになります。
読み手としても動画やアニメーションなどで動きがあるサイトはもっと興味が湧いてきますよね!!
GIF画像は最大256色で表現された画像で、その画像をパラパラ漫画みたく組み合わせていったものがGIFアニメーションです。
特徴を以下にまとめました。

特徴

  • ○アニメーションだけど画像(拡張子.gif)←扱いやすい
  • ○自動再生される(再生ボタンがない)
  • ○多くのブラウザをサポートしている
  • ×色数が少ない(最大256色)
  • ×音声が出ない

次にGIFアニメーションに向いているコンテンツをまとめました。

向いているコンテンツ

  • 繰り返すだけ(単純)
  • 美しさが重要じゃない
  • 写真だけしかない(写真だけでは動画にできないが、GIFアニメーションであれば組み合わせて動画風に出来る)
  • 音声が必要(重要)ではないもの

今回はそんなGIFアニメーションを動画から変換できるサイトを紹介します!!


EZ GIF.COM

EZGIFのトップページ
EZ GIF.COMは動画編集ソフトがない制作するのが難しいGIFアニメーションをWEB上で簡単に制作することのできるサイトです。
画像をアップロードして自分でGIFアニメーションを作ることも、自分で撮影した動画をGIFアニメーションに変換することも可能です!!


EZ GIF.COMで自ら撮影した動画をGIFアニメーションに変換する手順を解説します。
1.トップページから[Video to GIF]を選択
video to gifを選択
トップページから[Video to GIF]を選択します。

2.ファイルをアップロード
ファイルをアップロード
画面が切り替わったら[ファイルを選択]ボタンからGIFアニメーションに変換したい動画をアップロードします。
ファイル名が表示されたら下のを選択します。
ほとんどの動画形式をカバーしていますのでスマートフォンなどで撮影した動画でも大丈夫です。
ただし最大100MBを超える動画は変換することが出来ないので注意が必要です。

3.設定をする
設定をする
次に詳細設定を行います。
[Size]でフレームのサイズを変更でき、[Frame rate]で1秒間に何フレーム使用するかを設定できます。
[Method]は特別変更する必要はありません。
設定をしたらを選択します。

4.完成
を選択した後、画面下に変換結果が表示されます。
完成

この結果で大丈夫であれば、右下の[Save]を選択します。
保存されたGIFアニメーションはPCのダウンロードフォルダに格納されます。

最適化する

今回変換したデータは7.04MBでしたがこのサイトにアップロードできるのは5MBまでのデータです。
なのでこの状態のままではアップロード出来ません。
その時にファイルサイズを小さくできる機能が「Optimize」機能です!!
optimize
「Optimize」を選択
「Optimize」を選択すると下のような画面に切り替わります。
optimizeを選択
「Compression level」なので圧縮してサイズを小さくします。
横のコントローラーを操作して圧縮します。
5~200まで数値はあるのですが何故か30が一番サイズが小さくなります。
数値を設定したらを選択します。


結果
optimize後
「Optimize」を実行したら4.1MBまで小さくすることができました。
これで完了であれば先ほど同様「save」を選択すればPCのダウンロードフォルダに保存されます。
完了

そのほかの機能

トップページを見てみると他にもGIFに特化したコンテンツが用意されています。
様々な機能
①Resize
Resizeはアニメーションのサイズを小さくする機能です。
デフォルトでは[W:600px H:auto]に設定されていますがその大きさを自由に変更することが可能です。
参考[W:300px H:169px]
resize

②Crop
Cropはアニメーションのトリミング機能です。
余計な部分をカットしたい場面などに最適です。この時もデフォルトサイズから切り取った分だけ大きさが変化します。
参考[W:419px H:271px]
Crop

③GIF optimizor
GIF optimizorは先ほどの「Optimize」と同様の機能でファイルサイズを圧縮することができます。

④Effect
Effectはアニメーションに様々な効果を加えることができる機能です。
フィルターやフェードイン・アウト機能などが用意されています。
参考[フィルター:sepia]
セピア色

⑤Split
Splitはアニメーションを一枚ずつ画像データとして取り出してくれる機能です。
参考
split

⑥Add text
Add textはアニメーション内にテキストを挿入することができる機能です。
ただし日本語は挿入できないので注意が必要です。
参考
text


いかがでしたでしょうか?
是非みなさんもEZ GIF.COMのサイトで手軽に動画をGIFアニメーションに変換してみては?

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Others

    暑中見舞いをつくろう

    オリジナリティのある、暑中見舞いを作ってみませんか?本項では、Il…

  2. 黄色いバラの花

    Others

    適正露出の写真を撮る・後編(EV値とカメラの設定)

    EV値(露出量)と、絞り・シャッタースピード・ISO感度の関係前回…

  3. Figmaを使ってみようーアニメーション作成ー

    Others

    Figmaを使ってみようーアニメーション作成ー

    今回は番外編でFigmaでアニメーション作成の紹介になります。ただ…

  4. ai ps

    Others

    illustratorかphotoshopか

    illustratorで出来ること ロゴ ア…

  5. Others

    AutoDrawでイラストを描こう

    アイコンやワンポイントとしてイラストを作りたいけど、絵を描くのは苦手・…

  6. Others

    とても便利な画面共有ソフト「Gyazo」

    さっとデザインを共有したいその時に画面を共有しようと思ってもスクリ…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP