シネマグラフの作り方を解説。シネマグラフの特徴や効果、作品例も紹介

2022 06.02

静止画なのに一部だけが動いているという不思議な感覚で見る人を惹きつける「シネマグラフ」。シネマグラフをマーケティングに活用する企業が増えており、今需要が高まっています。この記事では、シネマグラフの特徴やソフトを使った作り方を、事例と合わせて紹介します。

シネマグラフとは「動く静止画」のこと
シネマグラフの作り方
1. ステップ1：動画の準備、取り込み
2. ステップ2：静止画の用意
3. ステップ3：レイヤーマスクの作成
4. ステップ4：再生時間の調整
5. 《補足》スマートフォンアプリでも作成可能
シネマグラフの効果
シネマグラフの作品例
1. シネマグラフを活用したサイトデザイン
2. シネマグラフを活用した広告
3. シネマグラフを活用したMV
思わず目が留まるシネマグラフ。サイトや広告に活用しよう

シネマグラフとは「動く静止画」のこと

シネマグラフ（Cinemagraphs）とは、写真の一部分に動きを付けて表現するGIFアニメーションのことを指します。「動く静止画」とも呼ばれ、全体が静止しているのに一部だけが動いているという非現実的な世界観で見る人を惹きつける表現方法です。その独特の雰囲気を味わえることからSNS上で拡散されるなど人気を集めており、近年ではWeb広告に使用されるなど需要が高まっています。GIF画像を用いるため、制作にはさほど高い技術は必要なく、ソフトを使用すれば自分で制作できます。作り方は次項でくわしく説明します。

シネマグラフの作り方

ここでは、「Adobe Photoshop（アドビフォトショップ）」を使用したシネマグラフの制作方法を紹介します。

ステップ1：動画の準備、取り込み

まず、「.mp4」形式などの動画を準備してPhotoshopに取り込みます。しかし、動画ならどのようなものでもよいわけではありません。より自然なシネマグラフを作るためには、以下のポイントを押さえた動画を選びましょう。

・ループ再生したときにつなぎ目が自然な動きのもの
・背景に動きがないもの

自分で動画を撮影する場合は、三脚などでカメラを固定して撮影しましょう。シネマグラフの中で動かす箇所はループ再生させているため、少しでもブレてしまうと完成後の違和感につながってしまいます。録画ボタンを押す動作でもブレる可能性があるので、ワイヤレスリモコンで操作できるのが理想です。

ステップ2：静止画の用意

動画を取り込んだら、次に動画を複製して静止画のレイヤーを作ります。動画の中から静止画としたいシーンを選びましょう。メニューの「レイヤー」から「ラスタライズ」を選び「ビデオ」をクリックすると動画が静止画に変換されます。作成した静止画レイヤーは動画レイヤーの上に並べます。これにより、静止画の後ろで動画が再生されている状態になります。

ステップ3：レイヤーマスクの作成

次に、レイヤーマスクを作成します。シネマグラフとして動かしたい部分だけをマスクをかけて静止画レイヤーから切り抜きましょう。この状態で再生すると、切り取った箇所から後ろの動画レイヤーの一部が見えるようになり、写真の一部が動いて見えるのです。

ステップ4：再生時間の調整

最後に、動かす箇所の再生時間を調整します。シネマグラフは繰り返して再生するのがほとんどのため、ループ再生で設定しましょう。再生する始点と終点を動画内で設定してループさせる長さを決めます。実際に再生してみて、つなぎ目に違和感がある場合は、動画の始点と終点のタイミングをずらして調整するとよいでしょう。調整が済んだら、GIF形式で書き出しを行いシネマグラフの完成です。必要に応じて色味の調整や画像サイズの変換を行いましょう。

《補足》スマートフォンアプリでも作成可能

シネマグラフは、スマートフォンアプリでも作成が可能です。無料〜有料まで多くの専用アプリが提供されています。操作方法は、基本的に指でなぞるだけと簡単なので、パソコンや専用ソフトがなくても手軽に制作できます。作ったシネマグラフに色々なエフェクトをかけて加工できるものなど、機能もさまざまです。

シネマグラフの効果

シネマグラフは、日本を始め世界中の企業が活用を始めており、その効果が期待されています。動画よりも容量が小さくスマートフォンでも負荷なく再生できるシネマグラフは、広告やWebメディア、メールマガジンなどマーケティングにも活用されています。実際のWebサイトにおいて、静止画のバナー広告をシネマグラフを用いた広告に替えたところ、CTRが5倍以上もアップしたという事例もあります。シネマグラフ制作を専門とする会社や、シネマグラフ専門の販売サイトもあるほど、シネマグラフの効果に注目が集まっています。

シネマグラフの作品例

最後に、さまざまな場面で活用されている実際のシネマグラフを紹介します。シネマグラフを作る際の参考にしてみてください。

シネマグラフを活用したサイトデザイン

①Studio Marani

http://www.studiomarani.it/en/?p=radio-deejay

広告代理店Studio MaraniのWebサイトです。サイトトップにダイナミックに配置された画像がシネマグラフです。スケートボードで空を舞う少年の髪の毛だけが風になびいている爽やかなデザインとなっています。

②Maori Sakai

https://www.maorisakai.com/

イラストレーター酒井マオリのポートフォリオサイトです。動画ではなくイラストをシネマグラフにしているめずらしいサイトです。イラストが動くことによって、作品自体の魅力が際立っているデザインです。

シネマグラフを活用した広告

①ピザハット

Flixelが制作したピザハットのプロモーション映像です。ぱっと見ではなんのCMなのかが分かりづらく画面に見入ってしまう作品です。よく見ると画面右側にピザハットのロゴが現れたり、左側の電光掲示板にピザハットのテキストが流れています。外国ならではのユニークな事例です。

②オレオ

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

オレオがInstagramに投稿した商品PRです。ミルクの入ったコップの上でふわふわと浮いているオレオが印象的なシネマグラフです。商品が際立っており、ついオレオに目がいってしまいます。

シネマグラフを活用したMV

①【MV】ゆらゆらぶるう／ mimmam

双子のユニットmimmamの1stシングル「ゆらゆらぶるう」のミュージックビデオです。いくつものシネマグラフをつなげて一つの動画に仕上げたユニークな作品です。

思わず目が留まるシネマグラフ。サイトや広告に活用しよう

SNSマーケティングを始めとする動画広告市場の成長により、手軽に制作・視聴できるGIF形式のコンテンツの活用が進んでいます。その中でもシネマグラフは、静止画の一部のみが動くという独特な世界観により商品にインパクトを与え、視聴者の目を引くのに適しています。シネマグラフの活用法は実にさまざまです。この記事で紹介した内容を参考にして、自社のコーポレートサイトや広告などにシネマグラフを取り入れてみてはいかがでしょうか。