今日は、GIFアニメーションをブログに貼り付ける方法をご紹介します。
そんなの簡単じゃん。画像と同じように貼り付ければいいだけだよ、と思ったとしたら、それは古い考え方かも。
GIFアニメが低画質だったのは昔の話。今は、とても高画質のアニメーションを見かけるようになりました。
どうやってこんな高画質アニメーションを表示しているのだろう？ 疑問に思ったことが少なからずあると思います。
今日は、この『貼り付け方』というテーマで書きたいと思います。せっかく時間をかけて作ったGIFや動画が大きすぎてアップロードできなかったり、小さなファイルサイズにしたために画質が著しく劣化してしまうという問題も解決できると思います。
ファイルのサイズが大きくなりすぎたために、YouTubeにアップして、そのタグをブログに貼り付けるという方法もあります。しかし、無限ループするGIFアニメーション（のように）として見せたいときは、YouTubeにアップする方法はおすすめできません。ブログ側で連続再生の設定も可能ですが、どうしてもつなぎ目が表示されるため、綺麗な連続再生にはなりません。
さらに、このような表示設定をしていると、再生回数を稼いでいると見られ、YouTubeから警告が来るかも知れません。
この元ファイルはmp4形式の動画で、最終的にはPhotoshopを使って出力しています。GIFアニメーション形式で出力するとどうしても画質の低下は避けられません。そこで、動画としてレンダリングします。
参考までに、Photoshopの場合は、次のようにして動画として出力します。
[ファイル] ⇒ [書き出し] ⇒ [ビデオをレンダリング]
mp4形式でレンダリングします。サイズが1920 x 1080 ととても大きいことが分かると思います。通常は、GIFアニメにするには、幅500px程度かそれ以下にしなければ巨大なファイルになり、アップロード自体も難しくなります。
さて、具体的な表示の仕方を説明しましょう。
出力したMP4ファイルを「imgur」というサイトにアップロードします。このサイトはアップロードできる最大サイズは200MBまでOKなので、使い勝手がとても良いです。
アップロードするには、上のリンクから開いた画面上に動画ファイルをドロップします。
アップロードが完了すると、右側に表示される「Embed post」をクリックし、貼り付けタグをコピーし、ブログに貼り付けます。
貼り付けられた画像は左寄せになっています。この貼り付けタグは「blockquoteタグ」を使っているため「pタグ」は使えないので、「divタグ」でセンタリングすると中央に表示できます。
GIFVsは、GIFのような軽量でシンプルな機能とビデオのような高品質の機能を併せ持つ、imgurが採用している方式のようです。これは、次のような特徴があります。
- すぐに読み込みが可能
- 永遠にループする
- GIFと同様にサウンドはありません
- 2MBを超えるすべてのGIFはアップロード時にGIFVに変換されます。 最大200MBのファイルをアップロードできます。
- 変換されたビデオは同等のGIFよりも大幅に小さなファイルサイズのため、高品質を保ったままで、より高速で速やかに読み込むことができます。
「GIPHY」にアップロードする方法
次に、大きなサイズのGIFファイルを持っている場合。そのようなファイルを自分のサーバーにアップロードするのではなく、外部のサービスを使い、そこを経由して表示するようにします。
また、動画の一部を抜き出してGIFアニメとして表示することも可能です。
まず、「GIPHY」にアクセスします。
開いた画面上部右側に青いアイコン[Upload]と[Create]があります。
[Upload]アイコンは『GIFファイル』をアップロードするのに使います。動画はアップロードできません。
[Create]アイコンは、動画をGIFアニメに変換後、アップロードします。動画は必要な箇所を指定できます。作れる最大時間は11.6秒です。
この操作パネルは上のものとほとんど同じなので、使ってすぐに分かると思うので、説明は省略します。
これを実際に使った事例が下のGIFアニメーションです。幅、高さを100%で表示しているので、大きく綺麗に表示できていると思います。
このタグは、過去記事『ルノワールの「イレーヌの肖像画」を３Ｄにする：超高画質GIFアニメの作り方』で使ったものです。
スタートボタンを設置する
GIFアニメーションの欠点としてあげられるのは、無限ループしているため、アニメーションの開始位置が分からないこと、いつも自動的に読み込まれるので、ページを開く時間が余計にかかること、などです。
特に、大きなサイズのGIFアニメをアップすると、ページの表示に時間がかかるという問題は深刻です。
この解決策として、最初はGIFアニメとして読み込むのではなく、静止画像を表示し、画像をクリックするとアニメーションが読み込まれスタートするという方法があります。
この方法は、大きく分けて三つのやり方があります。① 静止画像を用意し、最初にそれを表示させ、画像がクリックされたらGIFアニメーションファイルに切り替えて表示する方法、② GiffferというJavaスクリプトを使って、GIFアニメーションのスタートボタンを表示させ、クリックされたときにスタートする方法、③ プラグインを使う方法
ただし、③ のプラグインを使う方法は、「WP GIF Player」という便利なWordpressのプラグインがあったのですが、つい最近、2018年4月1日をもってこのプラグインが公開を停止したのでダウンロードできなくなりました。
① の静止画像を使った方法が下のアニメーションです。一度スタートすると止めることはできません。
静止画像に再生ボタンを貼り付けたものを使っています。(うまく動かなくなりました)
これは、過去記事『GIFアニメ：水中を漂う女性、土左衛門ではありません！』で使ったタグで表示しています。
② のGiffferというJavaスクリプトを使った方法で表示しているのが下のアニメーションです。
画像をクリックするとスタートし、もう一度クリックすると停止します。ここに表示されている再生ボタンは自動的に表示されるものです。
この表示例は削除しました。
設定したときはしばらくの間表示できるのですが、自動的に画像へのリンクが削除されてしまうというトラブルが発生。原因はプラグインとの競合のようですが、はっきりしたことは分かりません。
以上紹介した方法には、一長一短があります。このサイトでは、元のファイルの状態やニーズに合わせて、アニメーションの表示方法を決定しています。
Wordpressで画像を貼り付けると、画像をクリックしたときに別ウインドウが開く「aタグ」が自動的に設定されます。今回のように画像をクリックした時にアニメーションがスタートするように設定する場合、この「aタグ」の部分を削除します。
① の方法は、以下のサイトに詳しく書かれています。
「GIFアニメーションは直接貼り付けずJavaScriptで再生させる」、iwb.jp
② の方法は、以下のサイトを参考にしました。初心者でも分かるようにしっかり説明されています。
「GIFアニメーションの再生／停止を制御する方法 」、starpentagonの日常
各方法のメリット・デメリット
各方法のメリット・デメリット（advantages and disadvantages）についてまとめてみます。
GIFアニメーションをそのまま表示すると、ページの読み込みに時間がかかるため、検索エンジンの評価に影響し、SEO対策上、大きな問題となる場合があります。ファイルの大きさ、数にもよりますが、GIFアニメをたくさん掲載するサイトは注意する必要があります。
次に、GIFアニメーションの画質の問題です。数年前までは、GIFアニメは低画質が当たり前でした。ところが最近、高画質のアニメーションを見かけるようになりました。GIFアニメのようにつなぎ目のないループ再生するのに、とても高画質な作品を目にします。
この二つの問題を同時に解消することができるのが、最初に紹介した「GIFVs」です。その後の「GIPHY」も似たような感じです。
これらの外部サイトにアップロードする方法は、最も良いように思いますが、少し問題があります。それは、ファイルの本体が自分のサイトにないため、検索エンジン上に、画像検索や動画検索で自分のサイトが表示されることはないということです。
外部サイトにアップロードする場合は、「Source URL」を記載する部分があるので、そこに自分のサイトのURLを記載し、[Add Tags]の欄に、自分のサイト名を記載するなどの所有権を主張する行為はしておいた方が良いでしょう。気休め程度でしょうが、たまに、そのリンクを辿ってくる訪問者もいます。
プラグインを使う方法は便利なのですが、いつ公開を停止するか分かりません。今回の「WP GIF Player」のように、公開を停止したプラグインの場合、アップデートも停止するので、使用を続けるのは何かと不都合が生じます。プラグイン自体が使えなくなる場合もあります。サイトを長く運営していると、この手のトラブルは絶対に避けたいと思います。タグの張り替えは気が遠くらル作業です。
Webサービスも同様で、いつサービスの提供を中止するか分かりません。中止された場合は、リンクエラーとなり、リンクの張り替えが必要になります。長年運営しているサイトは、当分の間は大丈夫だとは思うのですが。
一見、便利なサービスと思えても、そのサービスが提供されている期間は、５年程度のように感じます。これが外部サービスを使う場合のリスクの一つでしょう。
その意味で、最も安全なのは、スタートボタンを貼り付けた画像を用意する方法です。少し手間がかかりますが、安心・安全です。
「GIPHY」と「IMGUR」による表示の違い
最後に、「GIPHY」と「IMGUR」による表示の違いを見てみます。
スマホで確認しましたが、どちらも綺麗に表示されます。
元のgifファイルは、23.5MBもある大きなものです。このため、gif形式のわりにきれいだと思います。
「GIPHY」による表示例
GIPHY
「IMGUR」による表示例
IMGUR
このGIFアニメは過去記事『池田七帆の画像を使って動画を作ってみる』にアップしたものです。関心のある方はぜひご覧ください。
| 項 目 | GIPHY | Imgur |
| オリジナル設定 | オリジナルurlや独自のタグを入力可能 | オリジナルurlや独自のタグを入力可能 |
| フレーム | フレームやロゴは表示されず、全幅で表示可能。オンマウスでリンク先表示 | 白いフレームの中に画像が表示されるため、少し小さく表示される。上に二つのアイコン、下にロゴが表示される。 |
| 画面幅 | コード表示のところにある[Responsive]をオンにすることが幅一杯に表示できる。 | フレームのため全幅では表示できない。 |
| スマホ表示 | レスポンシブ。自動再生 | レスポンシブ。静止状態でボタンを押すと別ウインドウで再生。 |
| 画質 | きれい（高画質版をアップしても幅480PXに制限される） | きれい（アップした画質を維持） |
| 表示タグ | iframe | blockquote |
