パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

いま簡単につくれる、GIFアニメやシネマグラフが面白い!

2016年03月18日

はじめまして!マーケティングの部署から新規加入しました、わたべです。

最近よくソーシャルメディア上でも見かけるようになったな~と注目しているのがGIFアニメ、シネマグラフです。Twitterでもその時の気分をちょっとした動きで表現できるようにGIF検索機能が追加されました。

また初心者にも簡単に作れるツールも続々と登場しており、ソーシャルメディアへの投稿に変化をつけて目立たせたり、静止画では伝えきれない臨場感やシズル感を伝えることが出来ます。

ユーザーの目をひく投稿を増やすことで、企業のソーシャルメディアのリーチ数増加施策としても期待できます。これはマーケティングを担当していた私としても、見逃せません!!そこでアプリやサイトを利用して実際に作ってみました。

GIFアニメ

複数の静止画を1つに重ねたもので、分りやすく言えばパラパラアニメの原理。iPhoneの登場とともにFlashが終焉を迎え、プラットフォームに左右されないという強みから、ここ数年で再び注目されはじめています。

動画よりも簡単に作れて、バナーやソーシャルメディア上の画像にちょっとだけ動きをつけたい時にも活躍しそうです。

GIFMAGAZINE

GIFMAGAZINE.jpg

とにかくシンプルで、動画や画像データをアップロードすると簡単にGIFアニメが生成できます。PCでの利用がメインで、モバイルからはYouTubeとVimeoのみ動画でのアップロードできるようです。
 

作り方

  1. ページから使用する動画もしくは複数の画像を選択して、アップロードします
  2. 生成されたデータをそのままダウンロードして保存します

※また画像からGIFアニメを作る場合、1度に登録できる画像は20枚、ループの間隔や縦横のピクセル数の設定もできます。一連の動きが同じテーマのものの方がまとまりが出ると思いました。

ハンバーガーの写真をGIFアニメにまとめました!ちょっとした動きをつけるだけでも、その場の臨場感が出ますね。

tumblr_inline_o1pa6cbg251rjri4d_500.gif

 

Flamm

Flamm_logo.png
動画のみ編集が可能で、画面のロングタップで動画を撮影できます。
 

作り方

  1. 動画を選択、もしくは撮影済みの動画から使うシーンの尺を選びます
  2. エフェクト機能に加えて、スピードとサイズを選択して完成です
 

※エフェクト機能は「フィルター」と「グリッチ」があり、ベーシックの無料エフェクトだけで15種類、有料エフェクトを数えると75種類以上になります。またスピードやサイズの調節だけでなく、逆再生も設定ができるようです。

高松港のフェリーからの風景動画をGIFアニメに!この質感や動きがまたいいですよね?

Flamm.gif

シネマグラフ

シネマグラフは画像の一部分だけが動いているGIFアニメーションのことです。ついそのレトロな動きに目を奪われてしまったこともあるのではないでしょうか?最近では飲料メーカーさんのキャンペーンLPをはじめ、炭酸や泡に動きをつけることで、静止画では表現できないシズル感を出すことができます。特徴的なその動きを出すため、制作の難易度もそこそこ高めです。

シネマグラフには、

  1. 画像にエフェクトの動きだけを加える
  2. 動画を編集して一部だけを動かす

 

の2種類があります。

Amazing SnowCam Free

Amazing SnowCam Free.jpg

写真や画像にエフェクトを加えることで動きが付いたように見せることができます。

作り方

  1. 写真を「Import」ボタンを押して写真フォルダから選択し、右上の「Done」を押します
  2. 選んだ画像の使いたい部分を選択して右上の「Next」を押します
  3. 「Effect」を選び右上の「Next」を押すと、雨や雪を写真上に降らす動きが追加できます
  4. 右上の四角いオレンジのボタンを押すと保存先が表示されます。写真フォルダに保存したい場合は「Save it to Album」を選択。他メールやソーシャルメディア、チャットアプリなどから送信先を選ぶこともできます

 

左)晴れているスタジアム写真に⇒ 右)画像にエフェクトで雷雨を降らせてみました。
他にも窓についた水滴、キラキラやイルミネーションのような加工もできるようです。

Soccer.pngのサムネイル画像 Soccer_rain.gif

VideoEffects

VideoEffects.jpg

画像の一部分だけが動いているGIFアニメーションが作れます。動画撮影の際に、動きをつける部分を事前に想定するのが成功のポイントです。

作り方

  1. カメラを固定して撮影します
  2. アプリを開き「Create」を押して撮影した動画をアップロードします
  3. 動画として使用する尺を選択して「Choose」を押します
  4. 左下のペンマークを選択して、スマホ画面の「水が流れる動き」の部分を指で選択します
  5. 次への「→」ボタンを押すと、再生ボタンでプレビューが見れます
  6. 最後に保存形式をVideo,GIF,Live Photoから選んで完成です

※水の流れる動きや炭酸の泡、ろうそくが揺れる様子などは初心者にも作りやすそうです。

VideoEffects_iPhone.jpgのサムネイル画像

蛇口から水が流れる動きをシネマグラフにしてみました。VideoEffects.gif

まとめ

GIFアニメとシネマグラフが作れるアプリやツールを使って、実際に作ってみました。いかがだったでしょうか?新しいアプリはたくさんリリースされていますが、自分に合った使いやすいものを探すのに一苦労でした!

動き自体はシンプルかもしれませんが、上記でご紹介したサンプルのように繰り返し再生を設定することも可能なので、Twitterなどのスペースが限られた場所では、写真やテキストのみよりもユーザーに興味を持ってもらうことが出来そうです。個人的にもTwitterアカウント内でツイートにGIFアニメを載せたものと、そうでないものをABテストしてみたのですが、インプレッション数・エンゲージメント数でも大きく数字に表れていました。ソーシャルメディア担当者さま、Web担当者さま、ぜひ、一度お試しください!

仕事のご依頼・お問い合わせ

この記事を書いた人
watabe

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績