Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

Google+のストリームを盛り上げるGIFアニメ作成講座~Google+ユーザー必見!~

Google+には、FacebookTwitterには無い楽しみ方があります。 それは、ストリームに流れるGIFアニメで盛り上がることです!

どのSNSでもテキストやリンクは流れてくるのですが、GIFアニメが流れてくるのはGoogle+だけです。

Youtubeの動画リンクが流せるから同じでは?と思うかもしれませんが、これがまったく違うのです。

Youtubeの動画を張っていても、必ずクリックしないと再生されません。 実際には、よっぽど暇な時でないと、何分もある動画を観ることはありません。

その点、GIFアニメの場合、クリックしなくてもストリームを眺めているだけでアニメーションを楽しむことができます

ほとんどのGIFアニメは4コマ漫画のように短く簡潔で、繰り返し再生されるようになっています。これは、流れが速いストリームに最適な見せ方だと思います。

そこで今回は、ストリームを盛り上げるために、GIFアニメの作り方をまとめてみました。

様々な形式からGIFアニメに変換してくれるウェブサービスやソフトがありますので、誰でも簡単に作れると思います。 是非、チャレンジしてみてください!

YoutubeからGIFアニメに変換するウェブサービス

gifsoupを使えば、Youtubeの動画をGIFアニメに変換することができます。(gifsoupのアカウント登録は必要です)

Youtubeの動画のURLを指定します。

GIFアニメにしたいフレームを時間で指定します。(無料版では15秒まで)

指定したフレームを切り取ってGIFアニメに変換されます。(もちろん音声は無くなります) ダウンロードできるGIFサイズはSmall(170x127)、Medium(320x240)から選べます。

変換結果は、このようになりました。

変換元のYoutubeの動画


GTD + R 実践

変換したGIFアニメ

FlickrからGIFアニメを生成するウェブサービス

GICKRを使えば、Flickrの写真を集めてGIFアニメを生成することができます。

Flickrのタグやユーザー名で写真を検索します。

検索結果の写真からGIFアニメに含めるものをチェックし、サイズとスピードを選んでGIFアニメを生成します。

生成されたGIFアニメは、このようになりました。

動画をアップロードしてGIFアニメに変換するウェブサービス

Gifninjaを使えば、動画ファイルをアップロードしてGIFアニメに変換することができます。

動画ファイルを指定してアップロードします。アップロードできる動画ファイルは20Mbyteまでです。

GIFアニメのスピードとタイトルを指定して変換を開始します。(変換には時間がかかります)

変換結果は、このようになりました。

画像にアニメーション効果を加えてGIFアニメに変換するウェブサービス

LooGixを使えば、アップロードした画像ファイルにアニメーション効果を加えてGIFアニメに変換することができます。

アニメーション効果は8種類の中から選びます。 画像ファイルをアップロードして、出力サイズを指定するとGIFアニメに変換できます。

変換結果は、このようになりました。

Gif maker

文字タイピングのGIFアニメを生成するウェブサービス

Livetypingを使えば、入力した文字を一文字ずつ表示するGIFアニメを生成できます。

文字を入力して、フォント、サイズとスピードを指定します。 日本語はダメなのが残念ですが、ネタとしては使えそうですねw

変換結果は、このようになりました。

1枚の画像に動きをつけてGIFアニメを生成するソフト

Choreographerを使えば、1枚の画像から動きをつけたGIFアニメを生成することができます。

Choreographerはフリーソフトで、WindowsMACで動作します。

画像ファイルと動きを指定してGIFアニメを生成します。 回転やバウンドなど3Dの動きを付けたGIFアニメを作成することができます。

生成されたGIFアニメは、このようになりました。

複数の画像ファイルを結合してGIFアニメを生成するソフト

Giamを使えば、画像ファイルを結合してGIFアニメを生成できます。

Giamは、Windows用のフリーソフトです。

画像ファイルを追加していき、順番や1コマの秒数など細かな調整が行えます。

ウゴウゴルーガっぽいGIFアニメを生成するソフト

ウゴツールを使えば、「ウゴウゴルーガ」に出てきたような 文字の動きをGIFアニメとして生成できます。

ウゴツールは、Windows用のフリーソフトです。 このソフトは、素材は必要ありません。自分で描いた絵がウゴウゴしてくれますww

こんなGIFアニメが生成できました。

パラパラ漫画の手法で棒人間のGIFアニメを生成するソフト

STYKZを使えば、棒人間のGIFアニメが生成できます。

STYKZはフリーソフトで、WindowsMACで動作します。

パラパラ漫画のように1コマずつフレームを追加して、棒人間の間接を移動させていきます。 もすごく簡単に面白い棒人間アニメができちゃいますよ。


Stykz: How to Align Figures

生成したGIFアニメはこんな感じになります。

GIFアニメが作成できるiPhoneアプリ

iPhoneでもGIFアニメが作れるアプリがありますよ。

GIF SHOP

iPhoneのカメラで写真を連続して撮影するだけで簡単にGIFアニメが作成できます。

GIF SHOP - How-To from Something Savage on Vimeo.

Gemini - Multi-Shot Animator

連射した写真をトイカメラのような効果を加えてGIFアニメに変換できるiPhoneアプリです。

スゴイGIFアニメの世界

目を疑ってしまうぐらいスゴイGIFアニメです。どれもクリエイティビティあふれる作品ばかりです。

2Dなのに飛び出す! 3D環境ゼロでつくる3D写真のつくりかた

「サンデーフォトスタジオ」というソフトを使えば、1枚の写真からこんなGIFアニメが作れるそうです。ヌルヌル感がいいですね!

@nifty:デイリーポータルZ:プルプル立体猫写真

こちらは、微妙に角度の違う2枚の写真を撮影してGIFアニメにするとプルプル立体写真ができるそうです。モデルは猫がいいそうですよw

瞳孔が開くまでの時間。写真と映画のあいだにある作品の不思議 Cinemagraphs

一部分だけが動いているのに違和感がまったくありません。その場にいるかのような感覚になってしまいますね。

GIFアニメのリンク集

GIFアニメがたくさん紹介されているサイトを集めてみました。 息抜きにぴったりですよww

アニメーションGIFの停止方法

最後に、アニメーションGIFの停止方法を紹介しておきます。

アニメーションGIFは自動的に再生してくれてうれしい反面、多くなるとブラウザが重くなったり、画面がチカチカしすぎて見にくくなってしまいます。

そこで、アニメーションを強制的に停止する方法を覚えておきましょう。

FirefoxIEの場合は、[ESC]キーを押すとアニメーションGIFを停止できます。

Chromeの場合は、エクステンションをインストールしておく必要があります。

Stop animationsをインストールしておけば、Chromeでも[ESC]キーでアニメーションGIFが停止できるようになります。

まとめ

Google+のストリームには、いろんな面白いGIFアニメが流れています。

皆さんもオリジナルのGIFアニメ制作にチャレンジしてみてください。

今回、ご紹介したGIFアニメ作成ができるサービスとソフトです。

それでは、また!

【追記】 Google+の裏技的な検索テクニックをまとめておきました。こちらもどうぞ! これはすごい!「Google+検索HACK」ソーシャル時代の口コミ検索術

カメラ女子・カメラ男子がフォローしておきたいGoogle+で活躍しているフォトグラファーをピックアップしたので、こちらもあわせてチェックしてみてください。 クオリティーの高い写真ばかりなので、写真のお手本になると思いますよw Google+でハイレベルな写真を公開している世界のフォトグラファー20選