あっぷりノート

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

トップ > ブログ > はてなブログにGIFアニメを載せる方法【スマホOK】

はてなブログにGIFアニメを載せる方法【スマホOK】

ブログ

今回は、ブログにサクッと動画を載せたいブロガー（特にランニングブロガー）さん向けの解説記事です。


結論から云うと、GIFアニメを載せようということなんですが、

  • GIFって何？
  • GIFアニメの作り方が分からない
  • はてなブログにどうやってアップしたらいいの？
という方にやさしく丁寧に教えます。

ハマりがちな注意点も説明してるので、どうぞお気軽にみていってください。


【あるある】手軽に動画をブログに載せたい

ランニングブログを書いてると、こういうときがあります。

  • 自分のランニングフォームを撮って載せたいとき
  • 静止画で説明するより、短い動画のほうが伝えやすいとき
  • YouTubeやSNSに上げて貼り付けるほどでもない動画をサクッと載せたいとき

そんなときに役立つのが、GIFアニメです。

GIFアニメとは

GIFアニメを説明する前に、まずはGIF画像（GIFファイル）について説明せねばなりません。


GIF画像とは

アニメーションが表現できる画像データのこと
です。

私は「ジフアニメ」と呼びますが、ギフアニメと云われる向きもあるみたいですね。


複数の画像をコマ送りのようにつなげることでアニメーションを表現したものが、GIFアニメです。

あくまでGIFアニメは画像データなので、動画よりも少ない容量で動きが表現できます。


ゆえにブログが重くならないというのと、勝手に無限ループ再生してくれるってのもいいですね。

たとえば

たとえばこういうやつです。

走ってるアニメーションですが、

これらは画像データでしかありません。


泥くさく自分でパラパラ漫画のように画像を用意してつなげてもいいですが、今は動画をGIFアニメに加工してくれるWebサービスやアプリがあるので、それらに頼るのが賢明でしょう ^^b

はてなブログにGIFアニメを載せる3ステップ

一見ややこしそうに見えるGIFアニメですが、手順はシンプルです。

  1. スマホで動画を撮る
  2. アプリ「GIFメーカー」で変換する
  3. はてなブログ（ブラウザ版）でアップロードする

詳しくみていきましょう。

スマホで動画を撮る

まずはスマホで動画を撮りましょう。

これは言わずもがな、老若男女が御用達のやつですね。

アプリ「GIFメーカー」で変換する

次に撮った動画を「GIFメーカー」というアプリでGIFアニメに変換します。

アプリを起動して、

メニューから「動画→GIF」を選択します。

トリミング（尺の切り抜き）して

必要に応じて速度（fps）を調整。


後述しますが、解像度が高すぎるとファイルサイズが大きすぎるとはてなブログにアップロードできなくなるので、欲張りはしません。

  • 解像度をやや下げ気味で
  • 画質は中程度に抑え
  • 最適化ON！

これでﾖｼ(๑•̀ㅂ•́)و✧

はてなブログ（ブラウザ版）でアップロードする

さて、あとははてなブログにアップするだけなんですが、スマホブロガーの方は要注意。

なぜなら、スマホアプリでGIFアニメは投稿できないからです。


スマホ版で画像をアップするとなぜか静止画（GIFアニメの1コマ目で停止したまま）になってしまいます。

なので、ゼッタイに

PC版（ブラウザ版）でアップロードすること
です。

必ず。

PC版といってもパソコンじゃなきゃいけないわけではなく、ブラウザの設定を「PC版サイト」に切り替えればOK。

文字が小さくなりますが、これでスマホからもイケます。

あとは「写真を投稿」からGIF画像を選択するだけ。

プレビューを見ればしっかりアニメーションになっていることも確認できますよ。

注意点

はてなブログへGIFアニメをアップロードするにあたり、ひとつだけ注意点があります。

それは

GIFのファイルサイズを10MB未満に抑えること
です。


さもないと、いつまで経っても「アップロードに失敗しました」とエラーになり続けます。

他にも

  • 通信環境が良くない
  • GIFファイルが破損している

とか別の原因でエラーが発生する可能性もありますが、たいていはキャパオーバーなので、コマ数の尺や解像度を下げたりしてサイズを10MB未満に抑えましょう。

どうしてもファイルサイズが小さくならないなら

むりやり尺を短くしたり解像度を落としたりしても10MB以上になってしまう場合、裏ワザを使います。

ファイルサイズを圧縮するサービス（またはアプリ）を使うのです。


使ってみてカンタンだったのは「EZGIF」というWebサービス。

ここにGIF画像をアップロードして、「Optimize」（最適化）を選ぶだけでした。


もし、どうにもならん！というときは試してみてください。

その他の動画掲載方法

最後にオマケですが、GIFアニメ以外で直接ブログに動画を埋め込む方法を載せておきます。

たいていは[動画のリンクURL:embed]で解決するやつですが、TikTokだけは勝手が違うので、そのへんも紹介しておきますね。

Twitter

これはembedでイケるやつ。

Instagram

[IBIGAWA HALF ALTERNATIVE

]
これもembedでイケるやつ。

YouTube

これもembed。

Tiktok

@you_key69 https://you-key69.hatenadiary.jp/#はじめまして #サイクリング #VLOG ♬ オリジナル楽曲 - ｱｵﾔﾏﾕｳｷ

これはembedが使えない少しややこしいパターン。

なので掲載手順も以下のサイトで紹介しておきますね。

まとめ

ブログに簡単な動画を載せられると、静止画だけでは伝えきれないニュアンスが表現できたり、説得力が増したりします。

何より機械的になりがちなランニングブログに、エンタメ性が添えられると思うんですよね。


GIFなら画像感覚で動きを表現できるので、ランニングフォームの撮影やランナー視点の公開等にうまいこと活用いただければと思います。

Good Luck！

#はてなブログ #GIFアニメーション

you_key69

関連記事
コメントを書く