サイトを開いた時に自動で動画を再生したい場合、PCであればmp4ファイルを<video>タグで埋め込んで、属性を追加していくことでできます。
PCで<video>タグを使って自動再生させたい場合はこちらへ！
しかし、現状ではmp4ファイルなどの動画をスマホなどのデバイスではほぼ自動再生させることができません（例外を除く）。
そこで登場するのが昔ながらのGIFアニメです。
参考までに、こちらの私の記事ですが、PhotoshopのDEMO動画は全てGIFアニメです。
これなら、どのデバイスでも再生ボタンを押す必要もなく自動再生され、さらに繰り返し再生されます。
GIFアニメはファイルサイズが小さい
さらにGIFアニメの良いところはファイルサイズが小さいということです。
mp4動画はどうしても容量が大きくなってしまいます。
録画時間が長いほど容量も大きくなってきますね。
ユーザーからしても表示が遅いサイトはイライラしてしまいます。
例えば、この恐怖の「あああ…GIFアニメ」笑
元のmp4ファイルだと約1MB。
これくらいだと元が軽いですけどね。笑
しかしこれをGIFにしたことで約300KBになりました。
およそ70%も削減できたことがわかります。
オンラインでGIFに変換
ではmp4ファイルなどの動画をどのようにGIFに変換するのか？
調べると実に様々なファイルやサイトが紹介されていて悩むところだと思います。
私も色々試してみました。
Apowersoftが一番使いやすいと思っています。
もちろん無料で使えます。
さらに、いちいちソフトをダウンロードなどする必要なく、オンライン上でできるのでとても便利で個人的には気に入っています。
画面上の「ファイルを選択して起動」でオンライン上で変換できます。
Apowersoftの使い方
それでは実際にmp4の動画をGIFアニメに変換してみましょう。
Apowersoftのホーム画面を開きます。
「ファイルを選択して起動」をクリック。
GIFに変換したい動画ファイルを選択すると下の画面のように表示されます。
下に表示されている「形式」をクリックすると「出力形式」というボックスがでてくるのでその中から「GIF」を選択。
「形式」の右横にある「設定」をクリックしましょう。
GIFの解像度とフレームレートを設定することができます。
解像度はプルダウンで沢山でてくるので、選択して下さい。
フレームレートは1から15fpsまで選ぶことが可能です。
設定が終了したら「OK」をクリック。
フレームレートとは？
フレームレートとは「一秒間あたりのフレーム数」です。
パラパラ漫画をイメージして下さい。
例えば、フレームレートを10にした場合、1秒の間に10枚の静止画を見ることになります。
単純に考えると、
・フレーム数が多ければ滑らかな動きの画像
・フレーム数が少なければカクカクした画像
ということになります。
しかし、フレーム数が高ければ高いほどいいというわけでもないので難しいところですが...。
念のため「あああ…GIF」で10fpsと15fpsのとき、両方のせておきます。
上が10fps、下が15fps。
すごく差がでるわけではないですよね。
15fpsくらいまでしかないので特に気にすることはないと思います。
全て終了したらいよいよGIFに変換です。
一番下の右端にある「変換」をクリックして出力先（保存先）を選択して下さい。
今回はデスクトップを保存先にします。
あっという間にGIFに変換してくれます。
スピードがかなり早いです。
デスクトップに先ほどGIFに変換したファイルが出来上がっています。
GIFファイルを展開してもフレームだけ大量にでてきて画像自体の動きはありません。
これで動画ファイルをGIFアニメに変換できました。
すごく簡単ですよね。
ここから下はWordPressを利用している方にGIFのアップロードの仕方を説明します。
WordPressを利用している方は参考にして下さい^^
WordPressにGIFを埋め込む
投稿画面から「メディアを追加」でGIFファイルをアップロード。
任意の場所に挿入するのですが、ここで大事な注意点があります！
サイズのところはオリジナルで出力した人も、サイズ指定で出力した人もフルサイズで挿入して下さい。
あとでサイズは好きなように変えられるので最初の投稿時は「フルサイズ」です！
フルサイズ以外にしてしまうと少し手直ししないと表示されなくなってしまいます。
もし表示されなくて困っている方。
下の画像をご覧下さい。
上がフルサイズ選択、下が大サイズ(680×142)を選択したものです。
何が違うか見比べてみましょう。
赤線の『-680×142』この文字が最初のGIFファイルに書き足されています。
この文字のせいでちゃんと表示されなくなっています。
これを消すとちゃんと動き出します。
なので最初はフルサイズを選択しましょう。
最初からサイズ指定した方はフルサイズでもそのサイズのままなので問題ないですが、フルサイズを選択した方でサイズを変えたい場合。
ビジュアルエディタの方で、動画をクリックして端の四角の升をドラッグするだけです。
これで終了です。
慣れてしまえばとても簡単にできるので是非取り入れてみてください^^
お疲れ様でした！