ブログを視覚的にアプローチ!はてなブログでGIF動画を導入する方法

f:id:mutant-tetsu:20160601044251p:plain

こんにちは、てつです。

先日、はてなブログで複数の画像をまとめて投稿する方法を紹介しました。

はてなブログで複数の画像をまとめて投稿する方法 - MUTANT

 

 画像フォルダから直接記事内にドラッグ&ドロップするだけで画像を投稿できるよーっていう記事なのですが、記事内で操作方法がぱっと見て分かるようにGIFを使ってみました。

f:id:mutant-tetsu:20160531115103g:plain

こういった操作方法の説明や、動画で見た方が分かりやすいものってGIFを使うといいなぁと思いました。

今回はこのようなGIFをはてなブログで使う方法を紹介する記事となります。

パソコン画面の説明とかしないなぁ・・・と思っている方!こんな使い方もできますよ。

  • 美味しそうな料理を写真じゃなくてGIF動画で伝える
  • 旅先の出来事(電車からの景色とか)をGIF動画で伝える
  • 自宅の猫を写真じゃなくてGIF動画で伝える

お、これは私にも使えるな・・・と感じた人はぜひ参考にしてみてください。

 

そもそもGIFってなによ?

GIFの使い方を紹介する前に軽くGIFの説明から。

wikiの説明ではこんな感じで説明されています。

GIFは256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットである。 圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、WebブラウザではJPEGと並んで標準的にサポートされる。

なるほど、よく分からん。

簡単に言うとjpgやpngのようなファイル形式の1つで、その中の『アニメーションGIF』というのが、パラパラ漫画の要領で動きのある画像を使えるというものです。

例えば、ブログで動画を使おうとするとYoutubeやvine、twitterのリンクを入れるという手段が多いと思いますが、動画を差し込むまでもない簡単なアニメーションはGIFで再現した方が手取り早いと思います。

上の動画のように添付するだけで、自動でパラパラと動いてくれます。

 

パソコンの操作画面をGIFで録画する

パソコン上の画面をGIFで録画するにはフリーソフトを使用することで録画することができます。

様々なフリーソフトがあるので、自分が使ってみてしっくり来るものなら何でもいいと思います。

有名なものでは『ScreenToGIf』っていうソフトが有名なのですが、Macユーザーは使えず・・・

なので、自分は『licecap』というソフトを使用しています。

 

licecapの使用方法

licecapの使用方法はとてもシンプルです。まず公式サイトからlicecapをインストールします。

licecapダウンロードサイト

ダウンロードサイトにアクセスして少し下にスクロールすると、ダウンロードのリンクがあります。

f:id:mutant-tetsu:20160601050331j:plain

それぞれのOSに応じた方を選択してインストールします。

それではさっそく起動してみます。起動するとフレームが表示されると思いますが、これはこの枠内のものを撮影しますよーというものです。

f:id:mutant-tetsu:20160601050334j:plain

右下の『Record』ボタンを押すと録画が始まりそうな気がしますが、先にファイル名や保管場所の入力画面が表示されます。

f:id:mutant-tetsu:20160601050734j:plain

必要事項を入力し、『save』ボタンを押した3秒後に録画が始まります。

カウントは枠左下の『PREROLL』と書かれた場所でカウントされているので分かりやすいと思います。

動画を撮り終わった後は『stop』ボタンを押して撮影終了となります。

あとは、保存したGIFを画像と同じようにはてなブログへアップロードするだけです。

 

Windowsユーザーではないので、試したことはないのですが『ScreenToGIf』も有名ですね。

 

料理や風景、猫を撮る方法

ここまで説明してきた内容だとパソコン上の動画しか撮れないですよね。

料理とか自分の撮影したものをGIFで使いたい場合は、スマホで撮影した動画をパソコン上で再生して、その様子を撮影して・・・

こんな面倒なことはやってられないですよね。

 

こんな時はスマホで撮影した動画をGIFに変換するアプリを使いましょう。

ImgPlay - GIFアニメ画像動画が作成できるアプリ
ImgPlay - GIFアニメ画像動画が作成できるアプリ
開発元:Minkyoung Kim
無料
posted with アプリーチ

アプリストアで『gif』とか入力するとGIF作成アプリがたくさんヒットしますので、 自分が使いやすいものを使ってみてください。

グルメブロガーの方や旅ブロガーの方、ペットをブログで紹介している方が導入してみるとこんな感じでしょうか。

 

via GIPHY

via GIPHY

via GIPHY

写真だけでは表現できない部分も伝えることが出来るのではないでしょうか。

 

GIFをはてなブログで扱う注意点

GIFをはてなブログで扱う際に1つ注意したいのが、通常の画像よりも容量が大きいという点です。

無料版ではファイルの容量も制限されていますし、記事内にたくさん貼り付ければそれだけ重くなるのでご注意を。

 

まとめ

いかがでしたでしょうか。記事の内容によってはGIFを使用した方がより内容が伝わることもあると思います。

ここは画像ではなく、アニメーションで表現したい!という時はGIFを使ってみてはいかがでしょうか。