ブログで動くGIF画像を使うには？準備方法と注意点

ブログでGIF画像を使えるようになると、より表現の幅が広がります。

今回は、実際にGIF画像を作る一連の流れと、GIF画像を使う際の注意点をご紹介します。

ブログで動くGIF画像を使うには？準備方法と注意点

GIF画像は、簡素な画質で短い動画をループさせるのに適しています。
10秒を超える長さや、高画質で見せたい場合には、MP4動画として埋め込みましょう。

ブログでGIF画像を使うまでの流れ

• 動画を用意する
• GIFアニメーションに変換
• WordPressに埋め込む

①動画を用意する

パソコンやゲームの画面録画や、カメラで撮った動画を用意します。

見せたい部分だけを切り抜いたり、いらない部分をカットするために、動画を編集しましょう。

長くても10秒くらいに抑えるのが好ましいです。

おすすめのPC動画編集ツール
aviutl（無料）

②GIFアニメーションに変換

用意した動画ファイル（通常はMP4など）をGIFアニメーション形式に変換します。

おすすめのオンラインツールは「ezgif.com」です。

変換する際、フレームレート・解像度・色数などを調整して、ファイルサイズをできるだけ小さくすることがポイントです。

③WordPressに埋め込む

作成したGIFアニメーションファイル（.gif）を、WordPressのメディアライブラリにアップロード。

記事編集画面で、通常の画像を挿入するのと同じように、アップロードしたGIF画像を挿入します。

GIF画像を使う際の注意点

表現の幅が広がり、使えると便利なGIF画像ですが、いくつかの注意点があるのでしっかり確認しましょう。

ファイルサイズを小さくする

GIFアニメーションは、長時間になったり、色数が多かったり、解像度が高いとファイルサイズが非常に大きくなりがちです。

ファイルサイズが大きいと、ページの表示速度が大きく低下し、読者の離脱やSEO評価の低下に繋がります。

1つのGIFアニメーションは数秒～長くても10数秒程度に収めましょう。

音声がない

GIFアニメーションには音声を含めることができません。

音声での説明が必要な場合は、動画（MP4など）を検討しましょう。

アクセシビリティ（利便性）

スクリーンリーダーはGIFアニメーションの内容を読み上げられません。

必ずalt属性（代替テキスト）で、そのGIFアニメーションが何を表現しているのかを簡潔に説明します。

さいごに

GIF画像は、読者を一目で引き付ける魅力をもっています。

ただし、それは適度な使用であればこそ。

サイトが重くならないよう、しっかり使いどころを検討してくださいね🍓