ブログ記事やWebサイトに、ページが重くならないように動画をgif画像に変換して、ページに埋め込みにはどうすればいいの？
今回の記事では、ブログやWebサイトに動画をgifに変換してページに埋め込む方法を初心者向けに解説します！
この記事を読むことで、、、
このようなgifアニメ（写真をつなぎ合わせてできた動画のようなもの）をサイトに埋め込むことが本記事のゴールです。
- ブログやサイトにサイズが大きくない、動画を埋め込みたい方
- 再生ボタンなしの動画をサイトに埋め込みたい方
そもそもgifアニメとは？
gifアニメは一見動画のように見えますが、動画ではなく複数の画像を繋ぎ合わせて動画っぽく見せているファイル形式です。
イメージでいうと、パラパラ漫画に近い表現になります。
最近では、SNSに用いられることが多く、Facebookのgif広告やTwitterでgifアニメをツイートすることも可能です。
gifアニメと動画の違いとメリット
gifアニメと動画は大きく違い、目的に応じて使い分ける必要があります。
gifアニメ
- サイズが軽い（244K）
- ループで動画が再生される
- 再生ボタンを押さなくても再生
- 画質が動画に比べて悪い
- 音声がない
動画
- サイズが大きい（436K）
- ループで再生されない
- 再生ボタンのクリックが必要
- 画質がgifに比べて綺麗
- 音声あり
gifと動画ファイルを比べるとこのような違いがあります。
gifアニメの特徴としては、「再生ボタンがなく、ループで再生される」特徴があるので、サイトの背景画像代わりにgifを使って華やかに装飾したり、解説記事などでgifを使って読者にイメージを持たせることができます。
- 解説記事などでユーザーに画像では伝わらないイメージを使える時（programming記事や動画編集の記事に有効）
- 背景動画にgifを用いてサイトをゴージャスにする
- webサイトのワンポイントにgifを用いて楽しサイトに仕上がる
動画をgifアニメに変換してブログ記事にループ動画を埋め込む方法
では早速、動画素材を準備してgifに変換しブログやサイトに埋め込んで行きましょう！
方法はとっても簡単なので、ぜひすぐに実践してみてください！
1.動画素材をツールを使ってgifに変換
まず、動画ファイル（mov、mp4、mp3）を準備します。
- https://convertio.co/ja/mp4-gif/ （MP4 GIF 変換。オンライン フリー — Convertio）
- Gifted（mac app）
上記のツールを使用して、簡単に動画ファイルをgifに変換することが可能です。
1-2.画像挿入と同じように埋め込む
gifアニメに変換できたら、ブログの投稿画面に移動し、画像挿入と同じようにgifファイルを選択すれば挿入することができます。
gifアニメをブログ記事に埋め込むのはとっても簡単だね！
2.cssを使ってgifを背景動画にする
次に、サイトのTOP画面などにgif画像を背景動画として埋め込む方法をご紹介します。
イメージとしてはこのような感じです。
このようにサイトのKV（キービジュアル）の背景にgifを埋め込めばとても印象的なリッチなサイトに仕上がります。
方法は先ほど同様にgifの素材を生成します。
#main{
background-image:url(images/main.gif);
}そして、CSSファイルに上記のようにコーディングすれば背景画像として表示されます。
動画をgifアニメに変換してブログ記事にループ動画を埋め込む方法 まとめ
これでブログのクオリティーがワンランク上がったね！
いかがでしたでしょうか！！
プログラミングなどの解説系の記事では、このgifアニメがとってもオススメなので、ぜひこの記事を参考に活用してみてください！
最後までご覧いただきありがとうございました！
