トレンドのシネマグラフでCTR増加!?事例と効果を徹底解説

こんにちは!石田です。
4月に入ってから、とても暑いですね…。
気温の落差で体調を崩さないよう、みなさまお気をつけください。
今年度もどうぞよろしくお願いいたします。

さて、今回はシネマグラフの話をさせていただきます。
シネマグラフは2016年ごろにトレンドになった手法ですが、まだまだ注目を浴びています。

 

1.シネマグラフとは?

シネマグラフと言う手法はご存知でしょうか。
シネマグラフは「動く静止画」とも言われています。
いわゆるGIF動画(GIFアニメーション)ですが、シネマグラフは静止画の一部に動きを取り入れています。
2016年あたりからじわじわと増えてきており、現在もシネマグラフを使用する企業・サイトが多くございます。

2.シネマグラフのメリット

「わざわざシネマグラフにしなくてもいいじゃないか!」
と、言われてしまいそうですのでシネマグラフのメリットについて考えて見ました。

ファイルが軽いためページ速度が上がる

最近では、Webページに動画を使用することも多くなりましたね。
しかし、環境によっては動画を再生できなかったり、動画のサイズが大きすぎてうまく再生できていなかったりしてしまいます。
それでは、ユーザーがページから離脱してしまうかもしれません。
前章でお話した通り、シネマグラフはGIFアニメーションです。動画より格段にファイルサイズが軽くなります!

作るのが難しくない

シネマグラフの制作はそこまで難しいことではありません!
素材さえあれば動画編集ソフトや、フォトショップで簡単に制作することができます。
最近では、シネマグラフ制作の専門アプリもあるので、そちらもチェックして見てください!
Instagram等のSNSへ共有も簡単です。

注目されやすい

シネマグラフはWebサイトのTOPページで使用されることが多いですが、最近ではWeb広告で使用されることも多いです。
その利点は、「注目されやすい」ことにあります。
ユーザーが広告慣れしてきているので、注目される工夫が必要です。

3.シネマグラフをバナー広告に使用した際の効果

シネマグラフの作成ツールを提供しているFlixel Photos Inc.が行った調査では、A/Bテストの結果、シネマグラフを使用したバナー広告は静止画の広告の5.6倍クリック数があったと報告しています。


シネマグラフはユーザーの目に止まりやすいことがわかりますね。

4.シネマグラフを使用した実例

ザ・ドッグデイズ

http://thedogdays.jp/
犬用ウォーターサーバーのサービスサイトです。
背景の水面だけに動きをつけています。

イラストレーター酒井真織さんのポートフォリオサイト

http://maorisakai.com/

こちらはイラストレーターの酒井真織さんのポートフォリオサイトです。写真のシネマグラフではなく、イラストのシネマグラフです。また変わった見え方がしますね。

コカコーラ

コカコーラの公式インスタグラムの投稿です。
無限にコーラがコップへ入っていきます!

オレオ

こちらは、インタグラムの公式オレオアカウントです。
牛乳につけて美味しいオレオですが、牛乳へ落ちる0.2秒くらい前で浮遊しています。

Flixel

https://flixel.com/
前章で紹介いたしました、シネマグラフ作成ツールを提供するFlixelのWebサイトです。
キービジュアルと、フッター部分の画像にシネマグラフが使用されていますね!

ピザハットプロモーション映像

ピザハットのプロモーション映像になります。
Flixelが制作しています。
こちらはGIFアニメーションではなく動画になりますので、正確にはシネマグラフは無いそうです。
しかし動画を一部だけ動かすという点は、シネマグラフと同じですね!

CINEMAGRAPH.JP

日本シネマグラフ協会

http://cinemagraph.jp/
多くのシネマグラフを見ることができるサイトがあります!
シネマグラフの作品とチュートリアルサイトになります。

5.シネマグラフ、実際に作ってみた!

シネマグラフの作成は簡単!と何度も言っていますが、果たして本当に簡単なのか…。
実際に作成してみました!

石田が作成したのは、こちらです。

ミルクが永遠に流れ続けるシネマグラフです。

使ったソフトはPhotoshop CC版です。
素材は海外サイトのPexels Videosから見つけました。
https://videos.pexels.com/

制作時間は10分ほどです。
一番時間を要したのは、素材探しでした。
シネマグラフに向いてる映像、向いてない映像がございます。次の章で詳しく触れたいと思います。

6.シネマグラフ制作で気をつけたいこと

素材の選び方

元となる動画がシネマグラフ制作では肝となります。
被写体となる物体が大きく揺れていない動画の方が、格段に作業口数が減り、クオリティの高いものが出来上がります!
また、シネマグラフはループで使用することがほとんどです。
ループ設定した際に、違和感のない素材を選ぶことをお勧めします。

画質の劣化について

GIFアニメーションにする場合、GIFに圧縮するのでカラーが制限されます。
そのため、出来上がりは滑らかでは無い画面に仕上がる可能性もあります。

7.まとめ

動く静止画と呼ばれるシネマグラフ、いかがでしたでしょうか。
ハリーポッターに出てくる写真のようで、不思議で面白いですよね!
シネマグラフはWebサイトのTOPページだけでなく、バナー広告、メールマーケティングでも活躍しています。 まだまだ、シネマグラフを日常的に見ることが増えることかと思います。
Instagramでも毎日シネマグラフのハッシュタグが賑わっています。
これからも、シネマグラフに注目していきたいですね!

DHRグループの制作部門チーム
Creative Communications(クリエイティブコミュニケーションズ)は、
“わかりやすく” 説明する動画制作サービスとして2012年にスタートしました。
“お客様目線”の動画制作に特化して培ったマーケティングツール企画構成ノウハウを活かし、多様な制作ニーズにこたえるトータルプロダクションです。
0から1を生み出す動画制作をご予算に応じた的確なプランニングでご提案させていただいております。
動画制作のお見積りや動画に関する駆け込み寺的なお困りごとなど、ぜひお気軽にご相談ください!
>DHRグループとは?

DHRグループとは?

弊社は最先端のテクノロジーと誰もがワクワクするビジネスの企画力に強みがあり、Creative Communications(クリエイティブコミュニケーションズ)は映像・WEB・広告といったデジタルマーケティングの専門部門です。
私たちは2012年に「むずかしいをわかりやすく」をテーマに、お客様目線で視覚化することに特化した動画制作サービスとしてスタートしました。
大手企業様からベンチャー企業様まで多くのオンラインサービスに携わらせていただき、マーケティングツールの企画構成から導入や運用支援に至るまでのノウハウを培うとともに、1000社以上の企業様へサービスをご提供させていただいております。
現在では、様々な制作ニーズに応えるトータルプロダクションとして業種や業界を問わず幅広いクリエイティブを手掛けています。

CTR IMG