ワードプレスでGIFを表示・挿入する方法｜動かない原因と解決策も解説

はじめに

ワードプレスでは、通常の画像と同じようにGIFファイルをアップロードし、投稿や固定ページに表示できます。操作手順の説明、サービスのデモ、ビフォーアフターなど、静止画だけでは伝えにくい動きを短時間で見せられる点がGIFのメリットです。

一方で、ワードプレスに挿入したGIFが動かず、静止画のように表示されることがあります。主な原因は、フルサイズではなくワードプレスが自動生成した縮小画像を選んでいることです。画像最適化プラグイン、キャッシュ、CDN、Lazy Loadなどが影響しているケースもあります。

この記事では、ワードプレスでGIFを表示・挿入する基本手順から、GIFが動かない原因と解決策、表示速度やSEOを考慮した使い方まで詳しく解説します。

1. ワードプレスでGIFは表示・挿入できる？

1-1. WordPressでGIFアニメを使える仕組み

WordPressはGIF形式の画像ファイルに対応しているため、管理画面のメディアライブラリへアップロードして記事内に挿入できます。GIFを表示するためだけに、専用プラグインを導入する必要はありません。

基本的な流れは次のとおりです。

GIFファイルを用意する
WordPressのメディアライブラリへアップロードする
投稿または固定ページに画像として挿入する
公開ページでアニメーションが再生されるか確認する

ただし、WordPressはアップロードされた画像から、サムネイル、中サイズ、大サイズなどの縮小画像を自動生成します。GIFの縮小画像ではアニメーション情報が引き継がれず、最初のフレームだけが静止画として表示される場合があります。

そのため、GIFアニメを確実に動かしたいときは、原則として「フルサイズ」の画像を選択します。

1-2. GIFが向いている用途と向いていない用途

GIFが向いているのは、短く単純な動きを繰り返し見せたい場面です。たとえば、次のような用途で役立ちます。

WordPressやアプリの操作手順
ボタンをクリックしたあとの動作
商品や機能の簡単なデモ
ビフォーアフターの比較
数秒程度のループアニメーション
装飾用の小さなアニメーション

再生ボタンを押さなくても自動的に動くため、読者に操作を求めず内容を伝えられます。

一方、長時間の映像、高画質な実写映像、音声付きの解説には向いていません。GIFは使用できる色数が限られており、動画よりファイル容量が大きくなることもあります。

数十秒以上の操作説明や、画面全体を高画質で見せたい場合は、MP4などの動画形式を検討しましょう。

1-3. GIF・動画・WebP・APNGの違い

GIF、動画、WebP、APNGには、それぞれ異なる特徴があります。

形式	主な特徴	適した用途
GIF	自動再生やループに対応し、幅広い環境で表示しやすい	短い操作説明、簡単なアニメーション
MP4・WebM	高画質でも容量を抑えやすく、音声にも対応できる	長いデモ、実写映像、画面録画
WebP	静止画とアニメーションの両方に対応し、軽量化しやすい	容量を抑えたい画像やアニメーション
APNG	透過表現や色の再現性に優れる	高品質な透過アニメーション

GIFは互換性が高く、手軽に使える形式です。しかし、色数が多い映像や長いアニメーションでは容量が増えやすいため、用途によって動画やアニメーションWebPと使い分ける必要があります。

なお、WordPressや使用中のプラグイン、CDNによっては、アップロードした画像がWebPなどへ自動変換されることがあります。GIFのアニメーションを維持したい場合は、変換後のファイルがアニメーションに対応しているか確認しましょう。

1-4. GIFを使う前に確認したい容量・表示速度・著作権

GIFをアップロードする前に、次の点を確認しておきましょう。

まず重要なのがファイル容量です。容量の大きなGIFを記事内に挿入すると、ページの読み込みが遅くなります。特にスマートフォンや通信環境が不安定な場所では、表示されるまでに時間がかかる可能性があります。

次に、アニメーションの見やすさです。激しい点滅や高速で切り替わるGIFは、読者の負担になることがあります。記事内容の理解に必要な動きだけを残し、再生時間やフレーム数を抑えましょう。

著作権にも注意が必要です。インターネット上で公開されているGIFを、自由に転載できるとは限りません。自分で作成したGIF、利用許可を得たGIF、利用規約で使用が認められている素材を使ってください。

2. ワードプレスでGIFを表示・挿入する基本手順

2-1. 投稿・固定ページにGIFを挿入する方法

ブロックエディターを使用している場合、GIFは通常の画像とほぼ同じ手順で挿入できます。

WordPressの管理画面へログインする
「投稿」または「固定ページ」を開く
新規追加するか、編集したいページを選ぶ
GIFを表示したい位置で「＋」をクリックする
「画像」ブロックを追加する
GIFファイルをアップロードする
画像サイズを「フルサイズ」に設定する
プレビューでGIFが動くか確認する
記事を公開または更新する

編集画面でGIFが動かなくても、公開ページでは正常に再生される場合があります。必ずプレビューまたは公開ページでも確認してください。

2-2. 画像ブロックでGIFをアップロードする方法

パソコンに保存しているGIFを直接挿入する場合は、画像ブロックの「アップロード」を利用します。

GIFを表示したい場所に画像ブロックを追加し、「アップロード」をクリックしてください。ファイル選択画面が開いたら、対象のGIFファイルを選択します。

アップロード後は、ブロックの設定画面で画像サイズを確認します。「サムネイル」「中」「大」ではなく、「フルサイズ」を選ぶことがポイントです。

また、パソコン上のGIFファイルを編集画面へドラッグ＆ドロップして挿入することもできます。挿入後は、alt属性、配置、リンク設定などを必要に応じて調整しましょう。

2-3. メディアライブラリからGIFを選んで挿入する方法

すでにWordPressへアップロードしているGIFは、メディアライブラリから選択できます。

編集画面で画像ブロックを追加する
「メディアライブラリ」をクリックする
使用するGIFを選択する
「選択」をクリックする
画像サイズを「フルサイズ」にする

メディアライブラリに画像が多い場合は、検索欄にファイル名を入力すると探しやすくなります。

選択画面に表示されるサムネイルが静止していても、元のGIFが壊れているとは限りません。記事へ挿入したあと、公開ページで動作を確認しましょう。

2-4. GIFのURLを指定して表示する方法

外部サーバーやCDNに保存されたGIFは、URLを指定して表示できます。

画像ブロックを追加し、「URLから挿入」を選択して、GIFファイルのURLを入力してください。URLは、末尾が「.gif」になっている画像ファイルへの直接URLを指定するのが基本です。

たとえば、次のようなURLです。


https://example.com/images/sample.gif

GIFが掲載されているWebページのURLを入力しても、画像として表示できない場合があります。ブラウザでURLを開き、GIF画像だけが表示されるか確認しましょう。

外部サイトのGIFを直接読み込む方法は、相手側のサーバーに負荷をかける可能性があります。また、ファイルの削除やURL変更によって突然表示されなくなることもあるため、自分で利用できるGIFは原則として自サイトへアップロードするほうが安全です。

2-5. クラシックエディターでGIFを挿入する方法

クラシックエディターでもGIFを挿入できます。

投稿または固定ページの編集画面を開く
GIFを入れたい位置にカーソルを置く
「メディアを追加」をクリックする
GIFをアップロードするか、メディアライブラリから選ぶ
添付ファイルの表示設定を確認する
サイズで「フルサイズ」を選ぶ
「投稿に挿入」をクリックする

挿入後にGIFが動かない場合は、画像をクリックして編集画面を開き、サイズ設定を確認してください。

HTML表示へ切り替え、imgタグのsrcに元のGIFファイルのURLが指定されているか調べる方法もあります。

2-6. HTMLコードでGIFを直接表示する方法

カスタムHTMLブロックを使えば、HTMLコードでGIFを直接表示できます。

HTML
<img
  src="https://example.com/wp-content/uploads/sample.gif"
  alt="WordPressの設定手順を示すGIF"
  width="800"
  height="450"
>

srcにはGIFファイルのURL、altには画像の内容を簡潔に説明する文章を入力します。

画像をレスポンシブ表示させたい場合は、次のようにスタイルを指定できます。

HTML
<img
  src="https://example.com/wp-content/uploads/sample.gif"
  alt="WordPressでGIFを挿入する操作手順"
  width="800"
  height="450"
  style="max-width: 100%; height: auto;"
>

WordPressが生成した縮小画像ではなく、元のGIFファイルをsrcへ直接指定できるため、通常の画像ブロックで動かないときの確認方法としても有効です。

3. ワードプレスの各場所にGIFを表示する方法

3-1. 記事本文内にGIFを表示する方法

記事本文内では、画像ブロックを使う方法が最も簡単です。GIFを見せたい段落の直後に画像ブロックを追加し、アップロードまたはメディアライブラリから選択します。

操作説明で使用する場合は、GIFだけに頼らず、前後に文章を入れましょう。

たとえば、「画面右上の公開ボタンをクリックします」と文章で説明し、その直後に操作を示すGIFを配置します。GIFを再生できない環境でも内容を理解できる構成にすることが大切です。

また、本文の横幅を超えるGIFを使用すると、スマートフォンでレイアウトが崩れる場合があります。表示幅はテーマのコンテンツ領域に合わせて調整してください。

3-2. サイドバーやフッターにGIFを表示する方法

ブロックテーマやウィジェット対応テーマでは、サイドバーやフッターにもGIFを設置できます。

管理画面の「外観」から「ウィジェット」または「エディター」を開き、対象エリアへ画像ブロックを追加します。その後、GIFをアップロードするか、メディアライブラリから選択してください。

クラシックウィジェットを使用している場合は、画像ウィジェットやカスタムHTMLウィジェットで表示できます。

HTML
<img
  src="https://example.com/wp-content/uploads/banner.gif"
  alt="キャンペーンのお知らせ"
  style="max-width: 100%; height: auto;"
>

サイドバーやフッターは多くのページで共通表示されるため、重いGIFを置くとサイト全体の表示速度に影響します。容量を十分に圧縮し、本当に必要な場合だけ使用しましょう。

3-3. トップページや固定ページの任意の位置にGIFを表示する方法

固定ページをトップページとして設定しているサイトでは、通常の固定ページと同じ方法でGIFを挿入できます。画像ブロックやカスタムHTMLブロックを使い、表示したい位置へ配置してください。

サイトエディターに対応したブロックテーマでは、「外観」から「エディター」を開き、テンプレートやテンプレートパーツへ画像ブロックを追加できる場合があります。

ページビルダーを使用している場合は、画像ウィジェットやHTMLウィジェットからGIFを設定します。ただし、ページビルダー側の画像最適化機能によって静止画へ変換されることがあるため、公開後の表示確認が必要です。

3-4. アイキャッチ画像にGIFを設定する方法

GIFをアイキャッチ画像として設定する操作は、通常の画像と同じです。

投稿の編集画面を開く
投稿設定から「アイキャッチ画像」を選ぶ
GIFをアップロードするか、メディアライブラリから選ぶ
アイキャッチ画像に設定する
投稿を更新して公開ページを確認する

ただし、アイキャッチ画像の表示方法はテーマによって異なります。テーマがサムネイル用の縮小画像を呼び出している場合、GIFは動かず静止画として表示されます。

一覧ページ、関連記事、SNSシェア画像では、静止画として扱われることもあります。アイキャッチ画像でGIFを動かすには、テーマ側の出力処理を変更しなければならない場合があります。

3-5. テーマファイル内にGIFを埋め込む方法

テーマファイルへGIFを直接埋め込む場合は、imgタグを使用します。

子テーマ内のimagesフォルダにGIFを保存した例は次のとおりです。

PHP
<img
  src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/sample.gif' ); ?>"
  alt="サービスの利用手順"
  width="800"
  height="450"
>

メディアライブラリ内のGIFを表示する場合は、ファイルURLを指定できます。

PHP
<img
  src="<?php echo esc_url( 'https://example.com/wp-content/uploads/sample.gif' ); ?>"
  alt="サービスの利用手順"
  width="800"
  height="450"
>

親テーマのファイルを直接編集すると、テーマ更新時に変更内容が失われる可能性があります。カスタマイズするときは子テーマを使用し、作業前にバックアップを取得してください。

4. ワードプレスでGIFが動かない主な原因

4-1. 画像サイズが「フルサイズ」以外になっている

ワードプレスでGIFが動かないとき、最初に確認したいのが画像サイズです。

画像ブロックで「サムネイル」「中」「大」などを選ぶと、WordPressが自動生成した縮小画像が表示されることがあります。この縮小画像はGIFアニメーションではなく、最初のフレームだけを表示する静止画になっている場合があります。

画像ブロックの設定を開き、「フルサイズ」を選択して公開ページを確認してください。

4-2. WordPressが自動生成した縮小画像を表示している

WordPressは、画像をアップロードすると複数のサイズを自動生成します。テーマやプラグインが、その中から表示場所に合った画像を自動的に選ぶこともあります。

GIFの元ファイルが正常でも、HTML内で次のような縮小画像が読み込まれていると動かない可能性があります。


sample-300x200.gif

元ファイルは、一般的に次のようなURLです。


sample.gif

ブラウザの開発者ツールやページのソースで、実際に読み込まれているファイルURLを確認すると原因を特定しやすくなります。

4-3. 画像圧縮・最適化プラグインがGIFを変換している

画像圧縮プラグインや画像最適化サービスが、アップロードしたGIFを圧縮または別形式へ変換している場合があります。

特に確認したい機能は次のとおりです。

GIFの自動圧縮
WebPやAVIFへの自動変換
CDNによる画像変換
画像サイズの自動変更
メタデータ削除
アニメーション画像の最適化

変換先がアニメーションに対応していなかったり、最初のフレームだけが変換されたりすると、GIFが静止画になります。

画像最適化プラグインの設定画面で、GIFを変換対象から除外できるか確認しましょう。

4-4. キャッシュやCDNの影響で正しく反映されていない

GIFを差し替えたあとも古い画像が表示される場合は、キャッシュが原因かもしれません。

WordPressのキャッシュプラグイン、サーバーキャッシュ、CDN、ブラウザキャッシュには、変更前のファイルが残ることがあります。元のGIFを修正して同じファイル名で再アップロードした場合は、特に古いデータが表示されやすくなります。

各キャッシュを削除し、シークレットモードで再確認してください。ファイル名を変更してアップロードする方法も有効です。

4-5. Lazy Load設定でGIFの読み込みが止まっている

Lazy Loadは、画面に近づいた画像だけを読み込むことで、初期表示を軽くする仕組みです。しかし、テーマやプラグインの実装によっては、GIFが正しく読み込まれないことがあります。

よくある症状は、次のとおりです。

GIFの表示領域が空白になる
スクロールしても読み込まれない
最初のフレームだけが表示される
JavaScriptエラーが発生する
パソコンでは動くがスマートフォンでは動かない

一時的にLazy Loadを無効にし、GIFが正常に動くか確認しましょう。正常に動く場合は、対象のGIFや特定のCSSクラスをLazy Loadの除外対象へ設定します。

4-6. GIFファイル自体の書き出しや容量に問題がある

WordPressの設定ではなく、GIFファイル自体に問題があるケースもあります。

たとえば、次のような状態です。

アニメーションではなく静止GIFとして保存されている
ループ設定が無効になっている
書き出し処理が途中で失敗している
ファイル容量が大きすぎる
ファイルが破損している
拡張子だけをGIFに変更している

アップロード前のGIFをパソコンやブラウザで開き、正常に動くか確認してください。元ファイルでも動かない場合は、作成ツールから再度書き出す必要があります。

4-7. スマホや特定ブラウザだけで動かない

パソコンでは動くのにスマートフォンで動かない場合は、ブラウザキャッシュ、通信制限、省データ設定、テーマのレスポンシブ処理などが影響している可能性があります。

端末やブラウザによって、画像の読み込み方法やメモリ制限も異なります。容量が大きいGIFは、端末の性能や通信状況によって正常に再生されないことがあります。

別のブラウザや端末でも確認し、特定環境だけの問題なのか、サイト全体の問題なのかを切り分けましょう。

5. ワードプレスでGIFが動かないときの解決策

5-1. 画像サイズを「フルサイズ」に変更する

最初に試したい解決策は、表示サイズを「フルサイズ」に変更することです。

ブロックエディターでは、対象のGIFをクリックし、右側のブロック設定から解像度や画像サイズを確認します。選択肢に「フルサイズ」がある場合は変更してください。

表示上の横幅を小さくしたいときも、元画像はフルサイズのまま使用し、ブロック設定やCSSで見た目の幅を調整します。縮小画像ファイルを選ぶのではなく、元のGIFをブラウザ上で縮小表示させるのがポイントです。

5-2. GIFをメディアライブラリに再アップロードする

GIFファイルが破損している可能性がある場合は、一度削除して再アップロードします。

ただし、同じファイル名を使うとキャッシュが残ることがあります。次のようにファイル名を変更してからアップロードすると確実です。


wordpress-gif-setting-v2.gif

再アップロード後は、古いGIFを記事から削除し、新しいファイルを挿入してください。最後に、フルサイズが選択されていることを確認します。

5-3. GIFのURLを直接指定して挿入する

画像ブロックでGIFが動かない場合は、元ファイルのURLを直接指定すると解決することがあります。

メディアライブラリで対象のGIFを開き、「ファイルのURL」をコピーします。その後、カスタムHTMLブロックへ次のコードを入力します。

HTML
<img
  src="https://example.com/wp-content/uploads/wordpress-guide.gif"
  alt="WordPressの操作手順"
  style="max-width: 100%; height: auto;"
>

URLに画像サイズを示す「-300x200」などが含まれていないか確認してください。元ファイルのURLを指定する必要があります。

5-4. 画像最適化プラグインのGIF除外設定を確認する

画像最適化プラグインを停止した状態でGIFが動く場合は、プラグインの設定が原因と考えられます。

設定画面でGIFの圧縮、次世代形式への変換、CDN配信などを確認してください。除外設定がある場合は、次のいずれかを対象にします。

GIF形式のファイル全体
特定のGIFファイル
GIFを保存しているフォルダ
特定のCSSクラス
特定ページの画像

プラグインを完全に無効化するのではなく、GIFだけを除外できれば、ほかの画像の最適化を継続できます。

設定変更後は、プラグイン、サーバー、CDNのキャッシュも削除しましょう。

5-5. キャッシュ・CDNを削除して表示を確認する

GIFを変更したあとに表示が更新されない場合は、次の順序でキャッシュを削除します。

WordPressのキャッシュプラグイン
レンタルサーバーのキャッシュ
CDNのキャッシュ
ブラウザキャッシュ

削除後は、シークレットモードで対象ページを開きます。スマートフォンでは、Wi-Fiとモバイル通信を切り替えて確認する方法もあります。

キャッシュの影響を避けるため、GIFのファイル名を変更して再アップロードするのも効果的です。

5-6. GIFを作り直して容量やサイズを調整する

元ファイルに問題がある場合は、GIFを作り直します。

見直したい項目は次のとおりです。

画像の横幅と高さ
フレーム数
フレームレート
再生時間
使用する色数
ループ設定
ファイル容量

操作説明であれば、必要な範囲だけを切り抜き、待ち時間や無操作の部分を削除します。見せたい操作が終わったらすぐループする構成にすると、容量を抑えやすくなります。

再書き出し後は、WordPressへアップロードする前にブラウザで再生確認を行いましょう。

5-7. 別ブラウザ・スマホ・シークレットモードで確認する

原因を切り分けるため、複数の環境で表示を確認します。

通常モードとシークレットモード
Chrome、Safari、Firefox、Edgeなどの別ブラウザ
パソコンとスマートフォン
Wi-Fiとモバイル通信
ログイン状態とログアウト状態

シークレットモードだけで正常に動く場合は、ブラウザキャッシュや拡張機能が影響している可能性があります。

特定の端末だけで動かない場合は、端末の省データ設定、コンテンツブロッカー、ブラウザの設定なども確認してください。

6. GIFを軽くしてワードプレスの表示速度を改善する方法

6-1. GIFの横幅・高さを必要最小限にする

GIFの容量を減らすには、画像サイズを小さくする方法が効果的です。

たとえば、記事の本文幅が800ピクセルであるにもかかわらず、横幅1,920ピクセルのGIFを掲載する必要はありません。実際に表示する大きさに近いサイズで書き出しましょう。

操作説明では、画面全体を録画するのではなく、クリックするボタンや設定項目の周辺だけを切り抜くと、視認性と軽量化の両方を改善できます。

ただし、WordPressで縮小画像を選ぶとアニメーションが止まることがあります。GIF作成ツールで適切な寸法に縮小してからアップロードし、WordPress上ではフルサイズを選択してください。

6-2. フレーム数や再生時間を短くする

GIFはフレーム数が多いほど容量が増えます。滑らかさを保つために過剰なフレームレートを設定すると、ファイルが重くなります。

次の方法でフレーム数を削減できます。

動きのない時間を削除する
録画範囲を必要部分だけにする
フレームレートを下げる
同じ画面が続くフレームを間引く
再生時間を短くする
操作の開始前と終了後をカットする

読者が操作内容を理解できる範囲で、できるだけ短くまとめましょう。複数の操作を一つの長いGIFに入れるより、手順ごとに分割したほうが見やすくなる場合もあります。

6-3. GIF圧縮ツールを使って容量を削減する

GIF圧縮ツールを使うと、見た目への影響を抑えながら容量を減らせます。

一般的な圧縮方法には、次のものがあります。

使用色数を減らす
重複フレームを削除する
フレーム間の差分だけを保存する
不要なメタデータを削除する
非可逆圧縮を適用する
画像サイズを縮小する

圧縮後は、文字が読めるか、動きが不自然になっていないか、色が崩れていないかを確認してください。

オンライン圧縮サービスへ機密情報を含む画面録画をアップロードするのは避けましょう。管理画面、顧客情報、メールアドレスなどが映っている場合は、ローカル環境で処理できるツールを利用するほうが安全です。

6-4. 大きなGIFはMP4動画への置き換えを検討する

容量の大きなGIFは、MP4やWebMへ変換すると軽くなることがあります。色数が多い画面録画や長いアニメーションでは、動画形式のほうが効率的です。

音声を使わない短い動画は、videoタグで自動再生とループを設定できます。

HTML
<video
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  width="800"
  height="450"
>
  <source src="https://example.com/wp-content/uploads/demo.mp4" type="video/mp4">
</video>

自動再生させるには、通常はmutedの指定が必要です。スマートフォン上でページ内再生させるため、playsinlineも指定しておきます。

ただし、自動再生動画は通信量やユーザビリティに影響します。必要に応じて、再生・停止ボタンや代替画像も用意しましょう。

6-5. Lazy Loadや遅延読み込みを適切に設定する

ページ下部のGIFを最初から読み込むと、初期表示に不要な通信が発生します。画面に近づいてから読み込むLazy Loadを適切に使えば、ページ表示を軽くできます。

HTMLで指定する場合は、次のようにloading="lazy"を追加します。

HTML
<img
  src="https://example.com/wp-content/uploads/sample.gif"
  alt="WordPressの操作方法"
  width="800"
  height="450"
  loading="lazy"
>

ただし、ページ上部にある重要なGIFまで遅延読み込みすると、表示が遅れて見える場合があります。ファーストビュー内の画像は除外し、ページ下部のGIFに限定して利用するなど、配置に応じて調整してください。

Lazy Loadの導入後は、スクロール時にGIFが正しく読み込まれるか、複数の端末で確認しましょう。

6-6. Core Web Vitalsへの影響を確認する

重いGIFは、ページの表示速度やCore Web Vitalsに影響する可能性があります。

特に注意したいのは、表示領域の大きなGIFです。読み込みに時間がかかると、主要コンテンツの表示が遅くなることがあります。また、画像の幅と高さを指定していない場合、読み込み後にレイアウトがずれる原因になります。

対策として、次の点を確認しましょう。

GIFの容量を削減する
横幅と高さを指定する
ページ上部に重いGIFを置かない
必要に応じて動画へ変換する
ページ下部ではLazy Loadを利用する
不要なGIFを削除する
表示速度測定ツールで改善前後を比較する

GIFを入れたページだけ数値が悪化している場合は、ファイル容量や配置を見直してください。

7. GIFをワードプレスで使うときのSEO・ユーザビリティ対策

7-1. GIFにもalt属性を設定する

GIFにも、通常の画像と同じようにalt属性を設定します。

alt属性には、GIFが伝えている内容を簡潔に記述してください。たとえば、WordPressの画像ブロックからGIFをアップロードする操作を示している場合は、次のように設定できます。

HTML
alt="WordPressの画像ブロックからGIFをアップロードする手順"

「GIF画像」「アニメーション」といった抽象的な表現だけでは、内容が伝わりません。また、SEOキーワードを不自然に繰り返すのも避けましょう。

装飾だけを目的としたGIFで、前後の文章を理解するうえで情報を追加しない場合は、空のalt属性を使う方法もあります。

HTML
alt=""

7-2. 内容が伝わるファイル名にする

アップロード前に、GIFの内容が分かるファイル名を付けましょう。

悪い例は次のとおりです。


img001.gif
animation-final-2.gif
名称未設定.gif

分かりやすい例は次のとおりです。


wordpress-gif-upload.gif
wordpress-gif-full-size-setting.gif
wordpress-gif-not-moving-fix.gif

英数字とハイフンを使い、簡潔な名前にするのが基本です。日本語ファイル名は環境によってURLの扱いが複雑になる場合があるため、半角英数字の使用が無難です。

7-3. 必要に応じてキャプションや説明文を入れる

GIFだけでは、読者がどこに注目すべきか分からないことがあります。必要に応じて、キャプションや前後の説明文を追加しましょう。

たとえば、次のように説明します。

画像ブロックを選択し、解像度を「フルサイズ」に変更します。

操作の目的や確認ポイントを文章で補うことで、GIFを再生できない環境でも情報を伝えられます。

GIF内に小さな文字を大量に入れると、スマートフォンで読みにくくなります。重要な情報は記事本文にも記載してください。

7-4. 点滅や高速アニメーションを避ける

高速な点滅、激しい明暗の変化、急な拡大・縮小を繰り返すGIFは避けましょう。読者に不快感を与えたり、内容に集中しにくくなったりする可能性があります。

アニメーションを使用するときは、次の点を意識してください。

激しい点滅を使わない
動きを必要以上に速くしない
長時間ループさせない
ページ内に多数配置しない
動きの意味を文章でも説明する
必要に応じて静止画や動画の停止手段を用意する

目立たせることよりも、情報を分かりやすく伝えることを優先しましょう。

7-5. 著作権・利用規約を確認してから使う

他人が作成したGIFには、著作権があります。検索結果やSNSで見つけたGIFを、そのままWordPressへ転載してよいとは限りません。

次のいずれかを確認したうえで使用してください。

自分で作成した素材である
著作権者から許可を得ている
商用利用を含む利用条件を満たしている
素材サイトの利用規約に従っている
必要なクレジットを表示している

映画、テレビ番組、アニメ、スポーツ映像などの一部をGIF化したものにも権利があります。短い映像であっても、自由に利用できるとは限りません。

GIPHYなど外部サービスの素材を使用する場合も、サービスの利用規約、埋め込み条件、商用利用の可否を確認しましょう。

7-6. GIFを使いすぎず記事の読みやすさを優先する

GIFは視線を引きつけるため、ページ内に多数配置すると文章を読みづらくすることがあります。複数のGIFが同時に動くと、読者がどこを見ればよいか分からなくなる可能性もあります。

使用するGIFは、文章や静止画だけでは説明しにくい箇所に限定しましょう。

操作手順の記事では、重要な操作だけGIFにし、それ以外は静止画と文章で説明すると、ページ容量を抑えながら読みやすさを維持できます。

8. ワードプレスのGIF表示でよくある質問

8-1. WordPressでGIFを表示するのにプラグインは必要？

基本的には必要ありません。WordPressのメディアライブラリへGIFをアップロードし、画像ブロックから挿入できます。

GIFが動かない場合も、まずはプラグインを追加するのではなく、画像サイズが「フルサイズ」になっているか確認しましょう。縮小画像が表示されていることが、よくある原因です。

高度なギャラリー表示、GIFの自動最適化、特定条件での再生制御などが必要な場合は、目的に合ったプラグインを検討します。

8-2. GIFを中央寄せ・横幅調整するには？

ブロックエディターでは、GIFを選択してツールバーの配置設定から中央寄せを選択できます。横幅は、画像ブロックの設定やドラッグ操作で調整します。

HTMLで指定する場合は、次のように記述できます。

HTML
<div style="text-align: center;">
  <img
    src="https://example.com/wp-content/uploads/sample.gif"
    alt="WordPressのGIF設定手順"
    style="width: 600px; max-width: 100%; height: auto;"
  >
</div>

max-width: 100%を指定すると、スマートフォンで画面幅を超えにくくなります。

見た目の横幅を小さくする場合も、元のGIFファイルを表示し、CSSで縮小する方法が基本です。WordPressが生成した縮小GIFを選ぶと、アニメーションが止まることがあります。

8-3. アイキャッチ画像のGIFが動かないのはなぜ？

テーマがアイキャッチ画像として、元のGIFではなく自動生成されたサムネイルを表示している可能性があります。

記事本文ではフルサイズを選べますが、アイキャッチ画像のサイズはテーマ側のテンプレートで指定されていることがあります。その場合、管理画面で設定を変えるだけでは解決できません。

テーマの設定にアイキャッチ画像サイズの変更項目がないか確認してください。変更できない場合は、子テーマでテンプレートを調整するか、テーマ開発者へ確認します。

なお、記事一覧やSNSシェアではGIFが静止画になることもあるため、アイキャッチ画像は静止画、記事本文はGIFという使い分けも有効です。

8-4. スマホだけGIFが動かないときはどうする？

次の項目を順番に確認してください。

別のスマートフォンで開く
別ブラウザで確認する
シークレットモードで開く
Wi-Fiとモバイル通信を切り替える
ブラウザキャッシュを削除する
省データ設定を解除して確認する
Lazy Loadを一時的に無効化する
GIFの容量を小さくする

特定の端末だけで動かない場合は、その端末やブラウザの設定が原因である可能性があります。複数の端末で動かない場合は、WordPress、テーマ、プラグイン、CDNの設定を確認しましょう。

8-5. GIFの容量上限でアップロードできないときの対処法は？

WordPressへアップロードできるファイル容量の上限は、サーバーやPHPの設定によって異なります。管理画面の「メディア」から「新しいメディアファイルを追加」を開くと、最大アップロードサイズが表示される場合があります。

上限を超えている場合は、まずGIFを圧縮してください。画像サイズ、フレーム数、再生時間、色数を減らすことで容量を削減できます。

それでもアップロードできない場合は、レンタルサーバーの管理画面やPHP設定で、次の値を確認します。

upload_max_filesize
post_max_size
memory_limit
max_execution_time

設定変更の方法はサーバーによって異なります。無理に上限を引き上げるより、重いGIFをMP4へ変換したほうが、ページ表示の面でも適切な場合があります。

8-6. GIPHYやCanvaで作ったGIFもWordPressで使える？

GIFファイルとしてダウンロードできれば、基本的にはWordPressへアップロードして使用できます。

Canvaなどで作成したGIFは、ダウンロード後にパソコン上で再生確認を行い、WordPressのメディアライブラリへアップロードしてください。容量が大きい場合は、書き出すページ数やアニメーション時間、画像サイズを調整します。

GIPHYのGIFは、埋め込みコードや提供された共有機能を使える場合があります。ただし、素材ごとの権利関係やサービスの利用規約を確認する必要があります。外部URLから直接読み込むと、ファイルの削除や仕様変更で表示されなくなる可能性もあります。

8-7. GIFではなく動画にしたほうがよいケースは？

次のようなケースでは、GIFよりMP4やWebMなどの動画が適しています。

再生時間が長い
実写映像を掲載する
色数が多い
高画質を維持したい
音声を付けたい
GIFの容量が数MB以上になる
再生や停止を読者が操作できるようにしたい
長い画面操作を説明したい

GIFは、数秒程度の単純な動きを繰り返す用途に向いています。圧縮しても容量が十分に減らない場合は、動画へ変換して表示速度を比較しましょう。

まとめ

ワードプレスでは、GIFを通常の画像と同じようにメディアライブラリへアップロードし、投稿や固定ページに挿入できます。基本的に専用プラグインは必要ありません。

GIFが動かない場合は、最初に画像サイズが「フルサイズ」になっているか確認してください。WordPressが自動生成したサムネイルや中サイズの画像では、アニメーションが失われて静止画になることがあります。

フルサイズへ変更しても改善しない場合は、画像最適化プラグイン、キャッシュ、CDN、Lazy Load、GIFファイル自体の状態を順番に確認します。元ファイルのURLをHTMLで直接指定する方法も、原因の切り分けに有効です。

GIFは短い操作説明や簡単なデモに便利ですが、容量が大きくなりやすい形式です。画像サイズ、フレーム数、再生時間を必要最小限にし、重いGIFはMP4などの動画へ置き換えましょう。

alt属性や分かりやすいファイル名を設定し、著作権やアクセシビリティにも配慮することで、表示速度と読みやすさを損なわずにGIFを活用できます。