WEBマスターの手帳 > コンテンツマーケティング > 数秒で済む解説動画はアニメーションGif画像の方が動画より使い勝手が良い場合もある「アニメーションgifの作り方」

コンテンツマーケティング

2015年6月2日

数秒で済む解説動画はアニメーションGif画像の方が動画より使い勝手が良い場合もある「アニメーションgifの作り方」

Twitter 2 Facebook 1 Google+ はてブ 2 Pocket 1 チャットワーク Eight Feedly

文章や写真よりも「映像として見せた方がより良い」シチュエーションって多いですよね。そんな時にもちろん動画にしてYouTubeやVimeoにアップロードしていいとは思います。

でも音声がなしでも数秒あれば十分な場合に、いちいち動画を作ってYouTubeにアップロードするのは、正直かなり面倒です。

そんな時は「Gif画像」を使うのがオススメです。WEBマスターの手帳でもたまに使っているのですが、とても簡単で手間も少なく便利です。

スポンサードリンク

アニメーションGifを使う

アニメーションGifは「複数の静止画像」を1つの画像に重ね合わることでパラパラマンガのように動かしている(らしい)画像形式で、とてもポテンシャルが高いです。アニメーションgif世界は深く、クリエイターさんがいるほどです。

参考:アニメGIFに縦線2本を入れるだけで3D化できることが話題に | Overtex Times by 朝山貴生

256色までの画像を保存することができ、JPEGが苦手なイラストやアイコンなどの保存に向いている。動画を保存できるアニメーションGIFや、透明色を指定して背景イメージと重ね合わせることができるトランスペアレントGIF、全体をダウンロードしなくてもイメージの確認ができるインターレースGIFなどの拡張仕様がある。/引用元:GIFとは|Graphic Interchange Format|GIF89a – 意味/解説/説明/定義 : IT用語辞典

画像だけど動かすことが出来るので、様々なシチュエーションで使えます。人は動くものに目がいってしまうので、サムネイル画像でGifを使っているブログもありますね。

数秒間の音がなくても見ればわかる(見た方が早い)ような解説や説明にも使えます。自分は文字、写真、動画と共にアニメーションgifもコンテンツ形式の1つと認識しています。

ソーシャルメディアでも活きる

興味がある方はGoogle+を見てみるといいと思います。Google+はgifを楽しめるソーシャルメディアの1つですよ。Vineもありますが、Vineは6秒の制限がありますし、PCの画面をスクリーンショットショット的にするならgifの方が良いでしょう。

FacebookもGif画像に対応(投稿方法は別投稿します)しましたね。これからはFacebookのタイムラインでアニメーションgifを目にすることが増えるかもしれません。

PC上のスクリーンショットで動くGif画像を撮影する方法【Mac】

さて、簡単にアニメーションgifの作り方を紹介しておきます。まずはPC(Mac)の画面のスクリーンショットとしてgifを作る場合です。

簡単に録画できてgif画像が作れる 「LICEcap」

LICEcapはPC画面を撮影範囲を設定して録画してgif形式で保存してくれる超便利アプリです。

まずはLICEcapを使って録画している様子です。

↓こちらがLICEcapを使って録画したgif画像です。↑の枠内のスクリーンショットになっているのがわかると思います。

LICEcapの使い方

まずはLICEcapnoのWEBサイトへ行って、LICEcapnoをダウンロードしましょう。

ページ中段にダウンロードリンクがあります。
LICEcapnoのダウンロード

アプリをダウンロードしたら、解凍して起動させます。起動すると、撮影範囲を示す「枠」が表示されます。
LICEcapnoで録画する範囲を示す枠

撮影範囲を決めたら右下の「Record」をクリックすると保存場所やデータ名などの設定画面が表示されます。
LICEcapnoで録画する1
LICEcapnoで録画する

SAVEをクリックすると録画が始まります。録画を止めるのは枠の右下にある「STOP」をクリックすると止まります。止まると自動で、先ほど設定した保存場所でgif画像が作成されます。

撮影した動画をGifのアニメーション画像にする方法【Mac】

次にすでに撮影した動画や写真を使ってアニメーションgifを作成する場合です。

自分はWordPressの使い方講座など、10秒以上の場合は動画にするのですが、PCのスクリーンショット撮影には「QuickTimePlayer」を使っています。

一度、動画として撮影したものをアニメーションgifにする場合には「PicGIF」を使っています。

PicGIF

動画データや写真データを使ってアニメーションgifが簡単に作れます。
PicGIFでgifを作る

動画を読み込んでみます。
PicGIFで動画を読み込む

動画からフレームを抽出します。フレーム数が300を超えないことが推奨されています。フレームはパラパラマンガの紙の数です。多くなれば動きがスムーズになり、数が少なければ飛び飛びになります。
PicGIFでフレームを抽出

設定が終わったら、gifを作成します。
PicGIFでgifを作成

gifが完成したら保存しましょう。
PicGIFでgif保存

PicGIF
カテゴリ: 写真
現在の価格: ¥600

アニメーションgifは、解説や説明だけでなく色々なシチュエーションで活躍できるコンテンツ形式です。ただし、アニメーションgifはデータ量が多くなりがちです。データが重くなるとWEBページの表示速度が遅くなることになりますので、注意してください。

またアニメーションgifを貼り付けていてもうまく動かなかったり、Facebookに直接投稿しても動きません。そんな時はGiphyを使いましょう。
参考:Facebookに動く画像(アニメーションgif)をシェアしたりWEBサイトへ埋め込む方法。

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • @webmaster_note
  • Instagram

最新記事一覧

ピックアップ記事一覧

カテゴリー

Webマーケティングスキルを習得するならテックアカデミー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事