ブログ・READMEに動くデモGIFを貼る

最終更新: 2026年6月16日

「このアプリ、こうやって使うんです」を文字と静止画だけで説明すると、読者は3行目で離脱します。5〜10秒のデモGIFを1枚貼るだけで、滞在時間が3倍に伸び、被リンク率も上がります（実体験ベース）。埋め込み動画（YouTube・Vimeo）と違って、GIFはimg要素として認識されるためGoogle画像検索に載りやすく、Cookieバナーや広告も挟まりません。この記事では、WordPress・はてなブログ・GitHub READMEそれぞれにデモGIFを貼る具体的な手順、リポジトリ10MB上限とGit LFSの判断基準、Open Graphに使うときの注意点を整理します。

埋め込み動画よりGIFが優れる場面

自動再生される：YouTube/Vimeoはモバイルで自動再生されないが、GIFは開いた瞬間にループ再生。離脱率が下がる。
img要素として認識される：alt属性が効いて、Google画像検索・スクリーンリーダー・Sitemap画像インデックスに載る。
再生時間が読者の都合：「ボタンを押して再生開始」の摩擦がない。流し見の読者も内容を把握できる。
サードパーティJSを呼ばない：YouTube埋め込みはCore Web Vitalsを悪化させがち。GIFは静的画像と同じ扱いでLCPに優しい。
音がない：オフィスや図書館でも安心して開ける。BGM不要のデモに最適。

一方で、30秒以上の長尺・音声解説あり・高画質が必要なケースはYouTube埋め込みに軍配。GIFは「数秒の場面を繰り返し見せる」のに向いた形式（W3C GIF89a仕様）です。

WordPressに貼る

ダッシュボード→メディア→新規追加でGIFをアップロード。GIFも画像扱いなので「画像ブロック」で選択できる。
ブロックエディタで「画像」ブロックを置き、メディアライブラリからGIFを選ぶ。alt属性に「○○の操作デモ」と書くとSEO・アクセシビリティに効く。
キャプションに「（動くデモ）」と書いておくと、画像が表示されない環境でも読者が文脈を掴める。
幅は1024px以下を推奨。それ以上だと記事ページ全体が重くなり、Core Web Vitalsが下がる。
アイキャッチ画像にGIFを使うと、一覧サムネは静止画化されることが多い（テーマによる）。アイキャッチ用は別途PNGを用意。

はてなブログに貼る

編集画面サイドバーの「写真を投稿」アイコン→「フォトライフ」にGIFをアップロード。
「貼り付ける」を押すと、はてな記法（[f:id:xxx:...]）またはMarkdownでGIFタグが挿入される。
はてなフォトライフは1ファイル10MBまで（無料プラン）。GIFが10MBを超える場合は、幅・fps・秒数を縮めて再変換する。
はてなブログMedium以上のプランなら、独自ドメインでホスティングするほうがOGP最適化しやすい。
読者層がモバイル中心なら、幅360px・fps10程度に絞ると体感が軽い。

GitHub READMEに貼る

OSSプロジェクトの「最初の30秒」を決めるのがREADMEのデモGIF。次の手順で貼ります:

リポジトリに docs/demo.gif としてGIFをコミット。
README.md に ![Demo](docs/demo.gif) と書く。GitHubは自動でループ再生する。
GIFが10MBを超えるとGitリポジトリが肥大化する。Git LFSに切り替える（lfs trackで.gifを指定）か、外部CDN（Imgur・自社S3）にホスティングしてURL指定する。
ダークモード／ライトモード両対応のリポジトリは、<picture>タグでGIFをmedia切替できる（GitHubはHTMLタグ一部許容）。
幅は640px以下を推奨。READMEは横幅が決まっているため、それ以上だと自動で縮小されて文字が読めない。

Open Graph（OGP）に使うときの注意

記事のOGP画像（Twitter Card・Slackプレビュー）にGIFを指定したくなりますが、現状は静止画として扱われるサービスが大半:

X（旧Twitter）：og:imageにGIFを指定すると、最初の1フレームが表示される。
Slack：プレビューでも最初の1フレームが表示される（プレビュー領域では再生されない）。
Facebook：og:imageは静止画扱い。動かしたい場合はog:videoでMP4を指定。
LINE：URLプレビューはog:imageの最初の1フレームを表示。

つまり、OGP用には「最初の1フレームでも内容が伝わるGIF」を意識して作るのがコツ。タイトル文字を冒頭に入れる、被写体を中央に置く、など。