シネマグラフとは？今話題の動画の特徴や効果、作成のコツを紹介

画面の一部だけがずっと動いている、不思議な動画を見たことはありますか？

このような動画を「シネマグラフ」といいます。

ユーザーの注目を集めやすいうえに簡単に作れるため、近年はWebマーケティングのツールとして注目されています。

この記事では、幅広いジャンルの動画制作をおこなってきたkey MOVIEが、シネマグラフの特徴や期待できる効果、作成のコツなどを紹介します。

• シネマグラフってなに？
• シネマグラフを自社のマーケティングに活用したい
• 他社と差別化できるマーケティング手法を探している

という方は、ぜひご一読ください。

シネマグラフの概要

まずはシネマグラフとは何か、どんな効果が期待できるのか、について解説します。

シネマグラフとは

シネマグラフとは、上の動画のように、全体の一部だけが動いている動画のことです。

「全体が静止していて一部だけが動いている」という状況は、現実世界ではまずあり得ないため、独特な世界を演出できるのが特徴です。

見る人の注目を集めやすく、近年はWeb広告などで使われることが増えています。

シネマグラフとGIFの違い

シネマグラフのファイル形式は「GIFファイル」です。

そのため、シネマグラフはGIFアニメーションの一種といえます。

「シネマグラフは一部分だけが動いているGIFアニメーション」と考えると良いでしょう。

アニメーション動画自体に関しては下記記事で紹介しています。

アニメーション動画とは？特徴・メリット・活用方法・制作方法についてご紹介

シネマグラフに期待できる効果

シネマグラフをWeb広告に活用したとき、期待できる効果は以下の通りです。

• CTR（クリック率）の向上
• CPA（成果単価）の向上

ユーザーへの視覚的なインパクトだけでなく、アクションを促す効果が期待できます。

また、シネマグラフ作成ツールを提供している会社の調査によると、シネマグラフを使ったバナー広告は、画像を使ったバナー広告に比べ、クリック数が5倍以上に増えると報告されています。

以上から、シネマグラフはWebマーケティングに効果的なツールであるといえます。

出典：https://blog.flixel.com/5-ways-to-use-cinemagraphs-in-digital-marketing-campaigns/

動画マーケティングとは？実施ポイントを目的から解説

シネマグラフの特徴

シネマグラフの特徴は以下の通りです。

• 静止画よりユーザーの興味を惹ける
• サイトデザインの邪魔にならない
• 動画より簡単に作成できる
• 動画より容量が小さい

それぞれについて、詳しく解説します。

静止画よりユーザーの興味を惹ける

シネマグラフの最大の特徴は、ユーザーの興味を惹けることです。

人の視線は、動きがあるものに注目する傾向があります。

特に「画面の一部だけが動く」という表現は、現実にはない独特の表現です。

そのため、普段見慣れていない人も多く、ユーザーの視線を集めやすくなります。

膨大なコンテンツがあるWeb上で、ユーザーの興味を惹けるかどうかは、Webマーケティングにおいて非常に重要です。

「ユーザーに見てほしい」という部分には、シネマグラフを活用してみてはいかがでしょうか。

サイトデザインの邪魔にならない

シネマグラフは、サイトデザインの邪魔になりません。

一部分が動くだけなので、Webサイトの中に違和感なく配置できます。

凝った動画を掲載した際に違和感がある場合は、シネマグラフを検討してみると良いでしょう。

動画より簡単に作成できる

シネマグラフは「BGMや効果音の挿入が不要」「再生時間が短い」という理由で、動画より簡単に作成できます。

基本的に動画編集ソフト、または画像編集ソフトで作成しますが、撮影・編集のコツを理解していれば、あまり難しい作業ではありません。

シネマグラフ専用のアプリもあるため、初心者でも取り掛かりやすいでしょう。

動画より容量が小さい

一般的に動画は容量が大きく、Webサイトで表示するのに時間がかかります。

Webサイトの読み込みに時間がかかると、ユーザーが離脱しやすくなってしまいます。

一方で、シネマグラフは動画より容量が小さく、Webサイトで素早く表示されるのが特徴です。

モバイル端末でもスムーズに表示されるので、モバイル向けの広告やSNSにも有効です。

そのため、ユーザーの離脱を防ぐ効果があります。

また、近年のSEOではWebサイトの読み込み時間も重視されているので、SEO対策にも有効だといえるでしょう。

シネマグラフを活用できる場面

シネマグラフを活用できる場面は以下の通りです。

• Webサイト
• SNS
• メルマガ

それぞれについて、詳しく解説します。

Webサイト

シネマグラフが最も活用されているのはWebサイトです。

メインビジュアルや商品・サービスの紹介に最適で、活用すれば印象的なWebサイトに仕上がります。

ユーザーに一番見てほしい箇所に配置し、効果的にユーザーの興味を惹けるようにしましょう。

SNS

FacebookやTwitterなどのSNSでは、画像とテキストを一緒に投稿した方が注目されやすい傾向があります。

その画像をシネマグラフにすることで、よりユーザーの注目を集めることができます。

再生ボタンをクリックせずとも再生されるため、動画に比べてユーザーの負担もありません。

メルマガ

HTMLメールは本文中に画像を表示できるため、シネマグラフを掲載することができます。

ユーザーの注目を集めやすいため、クリック率の向上が期待できます。

また、容量が小さいため、受信に時間がかかったり、容量制限によって受信が拒否されるといった心配もありません。

メルマガにシネマグラフを使っている企業は少ないため、他社と差別化を図りたい場合はぜひ検討してみてください。

シネマグラフの事例

ここで、シネマグラフの事例を紹介します。

実際のWeb広告に加え、関連するWebサイトを紹介しているので、ぜひリンク先をご覧になってください。

オレオ

https://www.instagram.com/p/2ZE0a5RtEz/?utm_source=ig_web_copy_link

オレオがInstagramに投稿したPR用のシネマグラフです。

牛乳の上にふわふわと浮かぶオレオに、つい注目してしまいますね。

ピザハット

ピザハットのプロモーション動画です。

中央のカップルが静止して、周りの人や背景はタイムラプスのように動いています。

その中で、画面右側にピザハットのロゴが現れたり、画面左側の電光掲示板にピザハットの文字が流れたりしています。

動きの多いシネマグラフですが、「どこが変化しているのかな？」と、つい惹き込まれてしまいそうですね。

Cinemagraphs

http://cinemagraphs.com/

「Cinemagraphs」は、シネマグラフの事例を集めたWebサイトです。

「シネマグラフの事例をたくさん見たい」という方は、ぜひご覧ください。

シネマグラフの作り方（PhotoShopの場合）

次に、Adobe PhotoShopを使ったシネマグラフの作り方を簡単に紹介します。

シネマグラフは、PhotoShopを使えば誰でも簡単に作ることができます。

動画より簡単に制作できるので、ぜひチャレンジしてみてください。

手順①動画素材を準備する

まずは動画を準備して、PhotoShopに取り込みます。

素材となる動画は、違和感なくループ再生できる素材がベスト。

そのため、

• ループ再生したときに継ぎ目に違和感がない
• 背景に動きがない

といった条件を満たす必要があります。

撮影のコツは後述しますが、ブレが発生しないように、カメラをしっかりと固定することがポイントです。

動画が準備できたら、PhotoShopのタイムラインに動画を取り込み、ループするポイントを設定しましょう。

手順②静止画を準備する

次に、動画を複製して静止画を作ります。

手順は以下の通りです。

1. タイムライン上の動画をクリック
2. 「新規ビデオグループ」から「ビデオグループ2」を作成する
3. ビデオグループ1の動画をビデオグループ2にドラッグしてコピーする
4. コピーされた動画を「メニューバー＞レイヤー＞ラスタライズ＞ビデオ」と選択し、静止画に変換する

静止画に変換するとき、静止画として表示する部分を、タイムライン上の「時間インジゲーター」を使って決めておきましょう。

手順③動かす部分を切り抜く

次に、動かす部分だけを切り抜き、静止画の下に重なっている動画が見えるようにします。

これを「レイヤーマスクを作る」といいます。

選択ツール、またはブラシツールを使って、静止画に変換したレイヤーから動画にした部分を選択し、切り抜きましょう。

この操作により、静止画の一部が動くようになります。

手順④再生時間を調整する

最後に、再生時間の調整とループ再生の設定を行います。

また、調整レイヤーを使って色味を調節したり、必要に応じてリサイズもしておきます。

完成したら、GIF形式で書き出して終了です。

シネマグラフを作成するときのポイント

シネマグラフを作成するときのポイントは以下の通りです。

• 動画は定点カメラで撮影する
• 動画の継ぎ目は違和感ないようにする
• 動く箇所が目立つようにする
• クオリティの高い素材を選ぶ

それぞれについて、詳しく解説します。

動画は定点カメラで撮影する

シネマグラフの作成では、あらかじめ動画素材を準備する必要があります。

自分たちで撮影する場合は、カメラをしっかりと固定しておきましょう。

カメラを固定していないと、背景がブレて違和感あるシネマグラフになってしまいます。

録画ボタンを押すだけでもブレる可能性があるので、ワイヤレスリモコンを使うのもポイントです。

動画の継ぎ目は違和感ないようにする

シネマグラフは、動画をループ再生させることで、同じ動きが続いているように見せています。

そのため、ループ再生の継ぎ目の部分を違和感なく見せることが重要です。

違和感があるとユーザーの興味が外れてしまうので、継ぎ目をなるべく目立たせないようにしましょう。

動く箇所が目立つようにする

動いている部分がわかりにくいデザインだと、ユーザーの興味を惹くことができません。

シネマグラフの見どころは、動画の部分です。

全体のバランスを整えながら、パッと見て動いている部分がわかるように作りましょう。

クオリティの高い素材を選ぶ

シネマグラフは、素材によって印象が大きく変わります。

動画も静止画も、利用する媒体に合った素材を選びましょう。

シネマグラフの作成ツール

最後に、シネマグラフの作成ツールを3つ紹介します。

PhotoDirector：AI技術を活用したツール

PhotoDirectorは、PCの画像編集ソフトと同程度の豊富な機能を搭載している写真編集アプリです。

最大の特徴は、AIを活用した写真加工ツールが豊富であることです。

シネマグラフ作成においても、AIの自動分析によって写真の動かす部分と静止させる部分を細かく決められます。

直感的な操作も可能なので、初心者でも使いやすいアプリです。

https://jp.cyberlink.com/products/photodirector-photo-editing-software-365/overview_ja_JP.html

Flixel Cinemagraph Pro：Mac・iPhoneユーザー向け

Flixel Cinemagraph Proは、MacやiPhone、iPadユーザー向けのシネマグラフ作成ツールです。

Apple社のアプリらしく、シンプルなインターフェースが特徴。

使い方も非常に簡単で、動画を取り込んで、動かしたい部分を範囲指定するだけです。

セピアやモノクロに変換するフィルターも搭載しているため、多彩なシネマグラフを手軽に作成できます。

https://flixel.com/

PLOTAVERSE：静止画からシネマグラフが作れる

PLOTAVERSEは、Instagramのシネマグラフブームのきっかけとなったアプリです。

最大の特徴は、静止画からシネマグラフを作れる点です。

動画素材を準備する必要がないため、気軽に取り組めます。

また、他のユーザーが作ったシネマグラフを見ることができるのも特徴です。

https://apps.apple.com/jp/app/plotaverse-creative-apps-kit/id1244669793

まとめ

全体の中の一部分だけが動くGIFアニメーション、シネマグラフについて紹介しました。

最後に、シネマグラフの特徴と効果をまとめておきますね。

＜シネマグラフの特徴＞

• 静止画よりユーザーの興味を惹ける
• サイトデザインの邪魔にならない
• 動画より簡単に作成できる
• 動画より容量が小さい

＜シネマグラフの効果＞

• CTR（クリック率）の向上
• CPA（成果単価）の向上

シネマグラフの大きな強みは、ユーザーの注目を集めやすいことです。

WebサイトやSNSなどで「ここは必ず見てほしい」という部分があれば、シネマグラフを活用してみてはいかがでしょうか。

なお、シネマグラフはただ作るだけでは効果が見込めません。

緻密な戦略に基づいて作成・運用する必要があります。

もし「運用面でのサポートが必要」という場合は、弊社の「動画広告運用代行サービス」をご活用ください。

マーケティングのノウハウを活かして、戦略に基づいた広告運用をいたします。

シネマグラフを効果的に活用したい方は、お気軽にご相談ください。

https://key-movie.forfreelance.co.jp/service/advertising