縦型GIF動画を作る方法→【EZGIF.COM】で実現できました

ブログ

iPhoneの動きを説明する記事を昨日書きました。

まず、iPhoneの設定を説明するなら動画だ、と思いました。
そして、動画なら自動再生させたいのでGIF形式にする必要がありましたが、色々手間取ってしまいました。

今回試した方法と、最終的にEZGIF.COMで実現できたので、そのことを紹介します。

前提(要件)

  • iPhoneの操作動画なので縦型動画
  • 加工するパソコンはMac
  • ブログ上では自動再生・繰り返し再生させたいので動画ファイルはGIF形式
  • 動画にテキストを入れる
    →結果としては今回はやめました。これをはじめから除外していればもう少し早く正解にたどり着いたかもしれません

また、準備として、iPhoneで操作した動画を撮り、MP4ファイルを作成しました。

その1. iMovieを試す

ぼくは、なにか新しいことをするとき、基本的には正攻法を取りたい人です。
今回で言えば、OS標準やプレインストールのソフトで対応できるなら、その方法でやりたいと思いました。
iPhone、Macの動画編集ならiMovieです。

縦型動画をそのままiMovieに入れるとこんな感じになります。

iMovieで縦型動画を普通に編集した場合

横型になってしまうんですね。
一工夫すれば縦型になります。(やり方はgoogle検索で出てきます)
でも、動画自体の向きを変える方法なので、挿入したテキストは横になってしまいます(少なくとも2020/8時点のバージョンでは)。この方法は諦めました。

その2. Filmora9を試す

[公式] 動画編集ソフト Filmora 12(フィモーラ 12)
【公式】動画編集ソフト - Wondershare Filmora(フィモーラ) 誰でも簡単な操作でハイクオリティな動画に仕上がる!エフェクト・音楽・ステッカー・タイトルなど提供素材が2000種類以上!

Macで無料動画編集を探すと大体上位に出てきます。
縦型動画はそのまま編集できます。
縦型動画に対応したテキストもOKです。
ただし、編集した動画をファイルにエクスポートすると、無料版には製品名の透かしが入り、動画の最後にも広告が入ります。

Filmoraで出力した動画

無料で使わせてもらってるので文句は言えません。
でも他にいい方法がないか探すことにしました。

その3. ConvertioでのGIF変換

ブログの読みやすさを考えると要件に書いたGIF形式は必須です。
(初心者向けに書くと、GIF形式は静止画を集めたもので”動画”ではなく”画像”なので、ブラウザは自動再生します。MP4やMOVなどの動画形式の場合、通常は再生するには再生ボタンをクリックしなければなりません。説明用ブログは自動再生させた方が、見る人にやさしいサイトになります。)

Filmoraで作った動画はMOV形式なので(GIF形式もエクスポートできますが縦型は解像度が合いません)、GIFに変換する必要があります。

convertioというサイトで各種動画をGIF形式に変換できます。

MP4 GIF 変換。オンラインフリー — Convertio
数秒でMP4をGIFファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

ただ、このサイトは無料アカウントは1日10ファイルまでという制限がありました。
今回の記事で何度も試行錯誤していたためすぐに上限に達してしまい、作業が進みません…

そもそも20秒くらいの動画はGIFにすると4Mbくらいのサイズになります。
これをwordpressに画像として載せるとエラーになりアップロードできません。(何が引っかかるのかちゃんと調べてませんが、投稿画面の該当のブロックで”返答が正しいJSONレスポンスではありません。“となります)

ブログに最終的に掲載するときは半分以下のサイズにするのだから(iPhoneで撮影したままのサイズだと大きすぎて読みづらいため)、最初から動画サイズを小さくすべきだということに気づき、動画サイズ(解像度)を縮小できるもの(それも規定サイズではなく、カスタムで指定できないとダメです)を探すことにしました。

その4. HandBrake を試す

HandBrakeは動画形式の変換を行うオープンソースのソフトウェアです。

HandBrake: Open Source Video Transcoder
HandBrake is an open-source, GPL-licensed, multiplatform, multithreaded video transcoder.

変換時に解像度を任意で指定することができ、これで目的を達成できそうでしたが、数字の指定にDisplay SizeとStorage Sizeがあり、Storage Sizeは任意で指定できるのですが、縦型動画は等比での縮小値になりません。

HandBrakeの編集画面
Sizeが2つあり、Strage Sizeは本来のサイズと違う。縦と横の両方を変えるとDisplay Sizeも変わってしまい、変換後の動画で縦横比率が維持されない…

もしかしたらうまくできるのかもしれませんが、よくわからなかったのでこれも諦めました。

その5. EZGIF.COM にたどり着く

たどりついたのは EZGIF.COM というサイトで、ここでほぼやりたいことは叶えられました。

Animated GIF editor and GIF maker
Easy to use online animated GIF maker and image editor. Upload and edit GIF images for free. Create, crop, resize, reverse, optimize and split animated GIFs, cu...

以下で紹介する機能以外にもたくさんの機能があり、すべて無料です
すばらしいサイトです。

MP4をGIFに変換する

「Video to GIF」で変換したいファイルをアップロードして、GIFに変換します。

変換後のファイルが表示されるのでその状態からさらに編集ができます。

GIFをリサイズする

ここでは「resize」で縮小します。任意の数値を指定できるし、割合でも指定できるので便利です。

このファイルは
MP4で1.9Mb、GIFにして1.8Mb、リサイズして318Kbになりました。

ファイルをダウンロード

この状態でsaveしてファイルをダウンロードできます。

さらに「write」でテキストを入れることができます。
ただ、ここだけ残念なことに日本語に対応するフォントがなく、日本語は入れられません。数字、アルファベット、記号は大丈夫です。

また「crop」で任意のエリアに切り取ることもできます。

‥‥‥‥‥‥‥‥‥‥

かくして、iPhoneの説明記事を作るのに当初の目的は達せられたのでした。
EZGIF.COMはすばらしいサイトです。今後もブログ作成に必要な画像加工に使っていこうと思います。

Thank you very much to the creator of EZGIF.COM!


ブログサイトの構築について書いてます↓