ウェブページがスクロールするアニメーション GIF を URL から作り、メール、ドキュメント、README に使えるサイズに抑える方法。GIF を使うべきときと、MP4 のほうが良いとき。
Aviral Lakhanpaul 更新4 分で読めます
Website Scroll Video のように GIF を書き出せるツールにページの URL を貼り、スクロールを 20 秒未満、720p か 1080p、24 fps 以下に抑えて書き出します。GIF が正解なのは、メールや一部のドキュメントのように動画が再生されない場所です。それ以外では、同じスクロールでも MP4 や WebM のほうがくっきりしていて、ファイルも何分の一にもなります。
GIF は古い形式で、1 フレームあたり 256 色のパレットしか使えず、圧縮方式も動く写真を想定して作られていません。グラデーションや画像の多い今どきのウェブサイトのスクロールは、GIF にとってほぼ最悪の素材です。それでも生き残っているのは、プレーヤーもクリックも不要で、自動再生のルールにも縛られず、ほとんどどこでも再生できるからです。
<video> タグが使えるあらゆる場所。動きは同じで、色はきれいに、サイズは何分の一かになります。ホームページにアドレスを貼り、ページが読み込まれるのを待ちます。Cookie バナーとチャットウィジェットは、収録の前に取り除かれます。
GIF では扱えない設定には、自動で上限がかかります。フレームレートは最大 24 fps、解像度は最大 1080p、長さは最大 20 秒です。
スクロールはページの大事な部分だけにトリミングし、動きはゆっくりにします。24 fps で速くスクロールすると文字が流れてにじみ、それは動画よりも GIF のほうが目につきます。
プレビューは無料です。納得できたら書き出せば、GIF はほかのファイルと同じようにダウンロードされます。
GIF のサイズは、ピクセル、フレーム、変化する色が増えるたびに大きくなります。効果の大きい順に、おおよそ次のとおりです。
| 設定 | ファイルを小さくするなら | 理由 |
|---|---|---|
| 解像度 | 1080p より 720p | 1 フレームあたりのピクセル数が半分未満になる |
| 長さ | 6〜10 秒 | 1 秒ごとに、まるごとのフレームが 24 枚増える |
| フレームレート | 24 fps 以下 | GIF には動きを圧縮する仕組みがほとんどない |
| 背景 | ノイズのない単色 | フィルムの粒子や写真は、毎フレームすべてのピクセルを変化させる |
| ページ | スクロール範囲を短く | 1 フレームあたりの動きが減り、新しいピクセルも減る |
リンクを貼れば、スクロールのプレビューは無料です。登録すると 51 クレジットが無料で付き、クレジットカードは不要。書き出した動画にウォーターマークは入りません。
GIF を書き出せる、URL から動画を作るツールに URL を貼り、スクロールを短くして書き出します。あるいは、スクリプトでページをスクロールさせながら画面を録画し、それを GIF に変換します。
GIF はほぼすべてのフレームをまるごと保存するので、解像度、長さ、フレームレートが掛け算で効いてきます。720p に下げ、10 秒未満に抑え、写真やノイズの入った背景は避けましょう。
たいていのメールアプリでは再生されます。それが GIF を選ぶいちばんの理由です。最初のフレームしか表示しないデスクトップのメールソフトもあるので、最初のフレームだけでも成り立つようにしておきましょう。
