シネマグラフとは？特長や効果、作る際のコツについて

インターネット上で様々なWebサイトやSNSを見ていると、「一見静止して見える画像の、一部分だけが動く」というスタイルの動画を目にする機会が増えました。このような動画は「シネマグラフ」と呼ばれ、見る人の目を引く高いデザイン性とアピール度を持っています。
シネマグラフはPhotoshopなどで作れますが近年Web広告での人気が高まっており、簡単にシネマグラフを作成できる専用アプリも登場しています。

この記事では、視覚的に独特な効果を持つシネマグラフの特徴やその活用によって得られる効果、そして実際にシネマグラフを作成する際のコツについてご紹介します。

シネマグラフとは

参照：動く写真 一 シネマグラフの作り方

シネマグラフとは、画像の一部のみに動きを取り入れている動画を指します。通常の動画は画面全体に動きが感じられますが、シネマグラフでは全体的に止まって見える画像の一部分だけが動いて見えることが特徴です。

現実の世界で「全体が静止していて、一部だけ動く」という状況はまず体験できないため、ついファンタジックな気分になり見入ってしまった経験があるかもしれません。あるいは、Web広告の制作側として「とても印象的で面白いので、ぜひ自分たちの広告にも取り入れたい」と考えたこともあるのではないでしょうか。

シネマグラフとGIFとの違い

シネマグラフのファイル形式は「GIFファイル」にあたります。つまり平たく言うと、従来Web上で一般的に用いられてきたGIFアニメーションの一種と考えて問題ありません。
一般的なGIFアニメーションは、全体に動きのある「動画」にあたります。その一部分だけを動かし、周囲を静止させて見せるスタイルで制作したものが「シネマグラフ」と考えると良いでしょう。

シネマグラフが持つ特徴

ここからは、シネマグラフの特徴についてさらに詳しくご紹介します。

ユーザーの目と心を惹きつける

特定の一部分だけを動かすことで、人はその一部分に注目してしまう性質を持っています。周りが静止し、その中の何かだけに動きがあれば「普通の動画とは違う」と、つい気にかけてしまうため、Webサイトを閲覧するユーザーへ視覚的インパクトを与えやすくなります。

サイトデザインの邪魔をしない

シンプルでスタイリッシュな構成のWebサイトに凝った動画を配置すると、かえってデザインの邪魔になってしまう可能性があります。その点、印象的な動きを一部だけに集約させたシネマグラフなら、簡素でおしゃれな雰囲気のサイトに配置しても違和感がありません。

視覚的な印象の変化を生む

先にも述べた通り、シネマグラフは「一見静止した画像に見える」という特徴があります。このため、画像の一部が動くことに閲覧ユーザーが後から気付くという状況も想定できます。ユーザーに印象の変化をもたらすことで、新たな気付きや面白味を感じてもらえるでしょう。

容量を抑えられる

動画データは一般的に容量が大きく、Web上での表示も重くなりがちです。しかしシネマグラフを取り入れることで容量を小さく抑えられ、表示も軽快にできます。

シネマグラフを作成する際のコツ

ここでは、実際にシネマグラフを作るときに押さえたいコツをご紹介します。

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

シネマグラフを作成する際は、あらかじめ元になる動画を用意しておくことが必要です。自分たちで撮影した動画を使用する場合は、撮影時に背景がぶれないよう定点にカメラを固定した状態で撮るようにしましょう。

動画の継ぎ目が目立たない構成にする

シネマグラフは短い動画を繰り返し表示させるため、視覚的には同じ動きを反復し続けます。そのため繰り返し部分で大きく動きに継ぎ目ができてしまうと、違和感を与えてしまいます。自然と見続けたくなるシネマグラフを作るには、繰り返し部分の継ぎ目をなるべく目立たせないようにするのがポイントです。

動く箇所の周囲は静止した状態に

シネマグラフは、静止した画像の一部に動画を重ねて作られています。このため、重ねる動画部分の周囲に若干の背景が入り込みますが、背景部分も動いているといかにも切り貼りした印象を与えてしまいます。重ねる動画の背景には動きがなく、静止した状態のものにするといいでしょう。

シネマグラフで得られる広告効果

シネマグラフをWeb広告に活用することで、どのような効果が得られるのでしょうか。ここでは、シネマグラフを広告に導入することで期待できる具体的な効果をご紹介します。

商用WebサイトにおけるCTR、CPAの向上

実際のWebサイト上において、画像で表示していた箇所をシネマグラフに替えたところ、CTR（クリック率）とCPA（成果単価）をともに向上させられたという事例があります。単にユーザーへ視覚的なインパクトを与えるだけでなく、その先のアクションを促す効果が得られることが分かります。

参照：シネマグラフ広告とは？「動く」静止画でクリック増加！1分で作る方法を公開

バナー広告のクリック数が5倍以上増

シネマグラフ制作ツール提供会社が、バナー広告に関する調査を行った事例です。バナー広告に画像を使用している場合とシネマグラフを用いた場合を比較すると、実にシネマグラフを使った広告は画像の5倍以上のクリック数を記録しています。

参照：5 Ways to Use Cinemagraphs in Digital Marketing Campaigns

まとめ

さりげなく目を引く効果を与えられ、広告としての成果も期待できるシネマグラフ。Webデザインの新たなトレンドとなりつつあり、様々な企業サイトやSNS広告などで数多く取り入れられています。デザインに洗練度を加えることにとどまらず、広告手法としても非常に有用であるとなれば、ぜひ導入を検討したいとお考えなのではないでしょうか。

シネマグラフそのものを作成することは、Photoshopなどを活用する場合でもそれほど難しいものではありません。しかも現在ではさらに手順を簡単にした専用作成ツールも数多く選べるため、アイデアやセンス次第で面白い表現を生み出せるでしょう。