ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

動画をgifアニメに変換してブログ記事にループ動画を埋め込む方法

ブログ運営
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

ブログ記事やWebサイトに、ページが重くならないように動画をgif画像に変換して、ページに埋め込みにはどうすればいいの?

今回の記事では、ブログやWebサイトに動画をgifに変換してページに埋め込む方法を初心者向けに解説します!

この記事を読むことで、、、

このようなgifアニメ(写真をつなぎ合わせてできた動画のようなもの)をサイトに埋め込むことが本記事のゴールです。

こんな方にオススメ
  • ブログやサイトにサイズが大きくない、動画を埋め込みたい方
  • 再生ボタンなしの動画をサイトに埋め込みたい方
スポンサーリンク

そもそもgifアニメとは?

gifアニメは一見動画のように見えますが、動画ではなく複数の画像を繋ぎ合わせて動画っぽく見せているファイル形式です。

イメージでいうと、パラパラ漫画に近い表現になります。

最近では、SNSに用いられることが多く、Facebookのgif広告やTwitterでgifアニメをツイートすることも可能です。

gifアニメと動画の違いとメリット

gifアニメと動画は大きく違い、目的に応じて使い分ける必要があります。

gifアニメ

  • サイズが軽い(244K)
  • ループで動画が再生される
  • 再生ボタンを押さなくても再生
  • 画質が動画に比べて悪い
  • 音声がない

動画

  • サイズが大きい(436K)
  • ループで再生されない
  • 再生ボタンのクリックが必要
  • 画質がgifに比べて綺麗
  • 音声あり

gifと動画ファイルを比べるとこのような違いがあります。

gifアニメの特徴としては、「再生ボタンがなく、ループで再生される」特徴があるので、サイトの背景画像代わりにgifを使って華やかに装飾したり、解説記事などでgifを使って読者にイメージを持たせることができます。

オススメのgifアニメの使い方
  • 解説記事などでユーザーに画像では伝わらないイメージを使える時(programming記事や動画編集の記事に有効)
  • 背景動画にgifを用いてサイトをゴージャスにする
  • webサイトのワンポイントにgifを用いて楽しサイトに仕上がる

動画をgifアニメに変換してブログ記事にループ動画を埋め込む方法

では早速、動画素材を準備してgifに変換しブログやサイトに埋め込んで行きましょう!

方法はとっても簡単なので、ぜひすぐに実践してみてください!

1.動画素材をツールを使ってgifに変換

まず、動画ファイル(mov、mp4、mp3)を準備します。

上記のツールを使用して、簡単に動画ファイルをgifに変換することが可能です。

1-2.画像挿入と同じように埋め込む

gifアニメに変換できたら、ブログの投稿画面に移動し、画像挿入と同じようにgifファイルを選択すれば挿入することができます。

例)WordPressでgif画像を挿入
ネコ君
ネコ君

gifアニメをブログ記事に埋め込むのはとっても簡単だね!

2.cssを使ってgifを背景動画にする

次に、サイトのTOP画面などにgif画像を背景動画として埋め込む方法をご紹介します。

イメージとしてはこのような感じです。

このようにサイトのKV(キービジュアル)の背景にgifを埋め込めばとても印象的なリッチなサイトに仕上がります。

方法は先ほど同様にgifの素材を生成します。

#main{
background-image:url(images/main.gif);
}

そして、CSSファイルに上記のようにコーディングすれば背景画像として表示されます。

動画をgifアニメに変換してブログ記事にループ動画を埋め込む方法 まとめ

ネコ君
ネコ君

これでブログのクオリティーがワンランク上がったね!

いかがでしたでしょうか!!

プログラミングなどの解説系の記事では、このgifアニメがとってもオススメなので、ぜひこの記事を参考に活用してみてください!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ブログ運営
HikoPro Blog

コメント

タイトルとURLをコピーしました