トレンドのシネマグラフで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でも毎日シネマグラフのハッシュタグが賑わっています。
これからも、シネマグラフに注目していきたいですね！